feat: 🎸 allow async getSingleton function

mjancarik · May 10, 2024 · 9f5401a · 9f5401a
1 parent 85bb3b7
commit 9f5401a
Showing 1 changed file with 17 additions and 9 deletions.
diff --git a/packages/integration-custom-element/src/index.js b/packages/integration-custom-element/src/index.js
@@ -4,7 +4,7 @@ import { loadAssets } from '@merkur/integration';
 async function createSPAWidget(widgetDefinition) {
   const definition = {
     ...widgetDefinition,
-    createWidget: widgetDefinition.createWidget || createMerkurWidget,
+    createWidget: widgetDefinition.createWidget || createMerkurWidget, // TODO remove createMerkurWidget keep only one way
   };
 
   getMerkur().register(definition);
@@ -37,18 +37,20 @@ function registerCustomElement(options) {
     constructor() {
       super();
 
-      const widget = callbacks?.getSingleton?.();
+      (async () => {
+        const shadow = this.attachShadow({ mode: 'open' });
 
-      if (widget && widget.name && widget.version) {
-        this._widget = widget;
+        // TODO allow same UI for two custom element
+        const widget = await callbacks?.getSingleton?.();
 
-        return;
-      }
+        if (widget && widget.name && widget.version) {
+          this._widget = widget;
 
-      const shadow = this.attachShadow({ mode: 'open' });
+          return;
+        }
 
-      (async () => {
         try {
+          // TODO widget root remove
           widgetDefinition.root = shadow;
           widgetDefinition.customElement = this;
 
@@ -60,9 +62,10 @@ function registerCustomElement(options) {
           widgetDefinition.root.appendChild(widgetDefinition.container);
 
           this._widget = await createSPAWidget(widgetDefinition);
-          this._widget.mount();
 
           callbacks?.constructor?.(this._widget);
+
+          await this._widget.mount();
         } catch (error) {
           console.error(error);
         }
@@ -96,6 +99,7 @@ function registerCustomElement(options) {
   }
 }
 
+const PROTECTED_FIELDS = ['__proto__', 'prototype', 'constructor'];
 function deepMerge(target, source) {
   const isObject = (obj) => !!obj && obj.constructor === Object;
 
@@ -104,6 +108,10 @@ function deepMerge(target, source) {
   }
 
   Object.keys(source).forEach((key) => {
+    if (PROTECTED_FIELDS.includes(key)) {
+      return;
+    }
+
     const targetValue = target[key];
     const sourceValue = source[key];