@merkur/integration-custom-element 0.37.2 → 0.38.0

package/lib/index.cjs

@@ -37,10 +37,8 @@ function afterDOMLoad() {
 }
 
 function registerCustomElement(options) {
-  const { widgetDefinition, callbacks, observedAttributes } = deepMerge(
-    {},
-    options,
-  );
+  const { widgetDefinition, callbacks, observedAttributes, attributesParser } =
+    deepMerge({}, options);
   class HTMLCustomElement extends HTMLElement {
     static get observedAttributes() {
       return observedAttributes ?? [];
@@ -71,6 +69,8 @@ function registerCustomElement(options) {
               await afterDOMLoad();
               await integration.loadAssets(widget.assets, this._shadow);
 
+              this._setDefaultProps();
+
               await callbacks?.reconstructor?.(this._widget, {
                 shadow: this._shadow,
                 customElement: this,
@@ -114,6 +114,8 @@ function registerCustomElement(options) {
               this._shadow,
             );
 
+            this._setDefaultProps();
+
             await callbacks?.constructor?.(this._widget, {
               shadow: this._shadow,
               customElement: this,
@@ -177,6 +179,11 @@ function registerCustomElement(options) {
     async attributeChangedCallback(name, oldValue, newValue) {
       await this._widgetPromise;
 
+      const camelCaseKey = name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+      const parser = attributesParser?.[name] ?? ((value) => value);
+
+      this._widget?.setProps?.({ [camelCaseKey]: parser(newValue) });
+
       this._widget?.attributeChangedCallback?.(
         this._widget,
         name,
@@ -199,11 +206,35 @@ function registerCustomElement(options) {
         },
       );
     }
+
+    _setDefaultProps() {
+      const attributes = this.constructor.observedAttributes;
+      if (
+        Array.isArray(attributes) &&
+        typeof this._widget.setProps === 'function'
+      ) {
+        this._widget.props = { ...this._widget.props };
+        attributes.forEach((key) => {
+          if (this.hasAttribute(key)) {
+            const camelCaseKey = key.replace(/-([a-z])/g, (g) =>
+              g[1].toUpperCase(),
+            );
+            const parser = attributesParser?.[key] ?? ((value) => value);
+
+            this._widget.props[camelCaseKey] = parser(
+              this.getAttribute(key) ?? this._widget.props[key],
+            );
+          }
+        });
+      }
+    }
   }
 
   if (customElements.get(widgetDefinition.name) === undefined) {
     customElements.define(widgetDefinition.name, WidgetElement);
   }
+
+  return WidgetElement;
 }
 
 const PROTECTED_FIELDS = ['__proto__', 'prototype', 'constructor'];

package/lib/index.es9.cjs

@@ -34,7 +34,8 @@ function registerCustomElement(options) {
   const {
     widgetDefinition,
     callbacks,
-    observedAttributes
+    observedAttributes,
+    attributesParser
   } = deepMerge({}, options);
   class HTMLCustomElement extends HTMLElement {
     static get observedAttributes() {
@@ -64,6 +65,7 @@ function registerCustomElement(options) {
               this._widget = widget;
               await afterDOMLoad();
               await integration.loadAssets(widget.assets, this._shadow);
+              this._setDefaultProps();
               await (callbacks === null || callbacks === void 0 || (_callbacks$reconstruc = callbacks.reconstructor) === null || _callbacks$reconstruc === void 0 ? void 0 : _callbacks$reconstruc.call(callbacks, this._widget, {
                 shadow: this._shadow,
                 customElement: this
@@ -95,6 +97,7 @@ function registerCustomElement(options) {
             }
             this._shadow.appendChild(customWidgetDefinition.container);
             this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
+            this._setDefaultProps();
             await (callbacks === null || callbacks === void 0 || (_callbacks$constructo = callbacks.constructor) === null || _callbacks$constructo === void 0 ? void 0 : _callbacks$constructo.call(callbacks, this._widget, {
               shadow: this._shadow,
               customElement: this
@@ -148,9 +151,14 @@ function registerCustomElement(options) {
       });
     }
     async attributeChangedCallback(name, oldValue, newValue) {
-      var _this$_widget4, _this$_widget4$attrib, _callbacks$attributeC;
+      var _attributesParser$nam, _this$_widget4, _this$_widget4$setPro, _this$_widget5, _this$_widget5$attrib, _callbacks$attributeC;
       await this._widgetPromise;
-      (_this$_widget4 = this._widget) === null || _this$_widget4 === void 0 || (_this$_widget4$attrib = _this$_widget4.attributeChangedCallback) === null || _this$_widget4$attrib === void 0 || _this$_widget4$attrib.call(_this$_widget4, this._widget, name, oldValue, newValue, {
+      const camelCaseKey = name.replace(/-([a-z])/g, g => g[1].toUpperCase());
+      const parser = (_attributesParser$nam = attributesParser === null || attributesParser === void 0 ? void 0 : attributesParser[name]) !== null && _attributesParser$nam !== void 0 ? _attributesParser$nam : value => value;
+      (_this$_widget4 = this._widget) === null || _this$_widget4 === void 0 || (_this$_widget4$setPro = _this$_widget4.setProps) === null || _this$_widget4$setPro === void 0 || _this$_widget4$setPro.call(_this$_widget4, {
+        [camelCaseKey]: parser(newValue)
+      });
+      (_this$_widget5 = this._widget) === null || _this$_widget5 === void 0 || (_this$_widget5$attrib = _this$_widget5.attributeChangedCallback) === null || _this$_widget5$attrib === void 0 || _this$_widget5$attrib.call(_this$_widget5, this._widget, name, oldValue, newValue, {
         shadow: this._shadow,
         customElement: this
       });
@@ -159,10 +167,27 @@ function registerCustomElement(options) {
         customElement: this
       });
     }
+    _setDefaultProps() {
+      const attributes = this.constructor.observedAttributes;
+      if (Array.isArray(attributes) && typeof this._widget.setProps === 'function') {
+        this._widget.props = {
+          ...this._widget.props
+        };
+        attributes.forEach(key => {
+          if (this.hasAttribute(key)) {
+            var _attributesParser$key, _this$getAttribute;
+            const camelCaseKey = key.replace(/-([a-z])/g, g => g[1].toUpperCase());
+            const parser = (_attributesParser$key = attributesParser === null || attributesParser === void 0 ? void 0 : attributesParser[key]) !== null && _attributesParser$key !== void 0 ? _attributesParser$key : value => value;
+            this._widget.props[camelCaseKey] = parser((_this$getAttribute = this.getAttribute(key)) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : this._widget.props[key]);
+          }
+        });
+      }
+    }
   }
   if (customElements.get(widgetDefinition.name) === undefined) {
     customElements.define(widgetDefinition.name, WidgetElement);
   }
+  return WidgetElement;
 }
 const PROTECTED_FIELDS = ['__proto__', 'prototype', 'constructor'];
 function deepMerge(target, source) {

package/lib/index.es9.mjs

@@ -32,7 +32,8 @@ function registerCustomElement(options) {
   const {
     widgetDefinition,
     callbacks,
-    observedAttributes
+    observedAttributes,
+    attributesParser
   } = deepMerge({}, options);
   class HTMLCustomElement extends HTMLElement {
     static get observedAttributes() {
@@ -62,6 +63,7 @@ function registerCustomElement(options) {
               this._widget = widget;
               await afterDOMLoad();
               await loadAssets(widget.assets, this._shadow);
+              this._setDefaultProps();
               await (callbacks === null || callbacks === void 0 || (_callbacks$reconstruc = callbacks.reconstructor) === null || _callbacks$reconstruc === void 0 ? void 0 : _callbacks$reconstruc.call(callbacks, this._widget, {
                 shadow: this._shadow,
                 customElement: this
@@ -93,6 +95,7 @@ function registerCustomElement(options) {
             }
             this._shadow.appendChild(customWidgetDefinition.container);
             this._widget = await createSPAWidget(customWidgetDefinition, this._shadow);
+            this._setDefaultProps();
             await (callbacks === null || callbacks === void 0 || (_callbacks$constructo = callbacks.constructor) === null || _callbacks$constructo === void 0 ? void 0 : _callbacks$constructo.call(callbacks, this._widget, {
               shadow: this._shadow,
               customElement: this
@@ -146,9 +149,14 @@ function registerCustomElement(options) {
       });
     }
     async attributeChangedCallback(name, oldValue, newValue) {
-      var _this$_widget4, _this$_widget4$attrib, _callbacks$attributeC;
+      var _attributesParser$nam, _this$_widget4, _this$_widget4$setPro, _this$_widget5, _this$_widget5$attrib, _callbacks$attributeC;
       await this._widgetPromise;
-      (_this$_widget4 = this._widget) === null || _this$_widget4 === void 0 || (_this$_widget4$attrib = _this$_widget4.attributeChangedCallback) === null || _this$_widget4$attrib === void 0 || _this$_widget4$attrib.call(_this$_widget4, this._widget, name, oldValue, newValue, {
+      const camelCaseKey = name.replace(/-([a-z])/g, g => g[1].toUpperCase());
+      const parser = (_attributesParser$nam = attributesParser === null || attributesParser === void 0 ? void 0 : attributesParser[name]) !== null && _attributesParser$nam !== void 0 ? _attributesParser$nam : value => value;
+      (_this$_widget4 = this._widget) === null || _this$_widget4 === void 0 || (_this$_widget4$setPro = _this$_widget4.setProps) === null || _this$_widget4$setPro === void 0 || _this$_widget4$setPro.call(_this$_widget4, {
+        [camelCaseKey]: parser(newValue)
+      });
+      (_this$_widget5 = this._widget) === null || _this$_widget5 === void 0 || (_this$_widget5$attrib = _this$_widget5.attributeChangedCallback) === null || _this$_widget5$attrib === void 0 || _this$_widget5$attrib.call(_this$_widget5, this._widget, name, oldValue, newValue, {
         shadow: this._shadow,
         customElement: this
       });
@@ -157,10 +165,27 @@ function registerCustomElement(options) {
         customElement: this
       });
     }
+    _setDefaultProps() {
+      const attributes = this.constructor.observedAttributes;
+      if (Array.isArray(attributes) && typeof this._widget.setProps === 'function') {
+        this._widget.props = {
+          ...this._widget.props
+        };
+        attributes.forEach(key => {
+          if (this.hasAttribute(key)) {
+            var _attributesParser$key, _this$getAttribute;
+            const camelCaseKey = key.replace(/-([a-z])/g, g => g[1].toUpperCase());
+            const parser = (_attributesParser$key = attributesParser === null || attributesParser === void 0 ? void 0 : attributesParser[key]) !== null && _attributesParser$key !== void 0 ? _attributesParser$key : value => value;
+            this._widget.props[camelCaseKey] = parser((_this$getAttribute = this.getAttribute(key)) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : this._widget.props[key]);
+          }
+        });
+      }
+    }
   }
   if (customElements.get(widgetDefinition.name) === undefined) {
     customElements.define(widgetDefinition.name, WidgetElement);
   }
+  return WidgetElement;
 }
 const PROTECTED_FIELDS = ['__proto__', 'prototype', 'constructor'];
 function deepMerge(target, source) {

package/lib/index.js

@@ -37,10 +37,8 @@ function afterDOMLoad() {
 }
 
 function registerCustomElement(options) {
-  const { widgetDefinition, callbacks, observedAttributes } = deepMerge(
-    {},
-    options,
-  );
+  const { widgetDefinition, callbacks, observedAttributes, attributesParser } =
+    deepMerge({}, options);
   class HTMLCustomElement extends HTMLElement {
     static get observedAttributes() {
       return observedAttributes ?? [];
@@ -71,6 +69,8 @@ function registerCustomElement(options) {
               await afterDOMLoad();
               await integration.loadAssets(widget.assets, this._shadow);
 
+              this._setDefaultProps();
+
               await callbacks?.reconstructor?.(this._widget, {
                 shadow: this._shadow,
                 customElement: this,
@@ -114,6 +114,8 @@ function registerCustomElement(options) {
               this._shadow,
             );
 
+            this._setDefaultProps();
+
             await callbacks?.constructor?.(this._widget, {
               shadow: this._shadow,
               customElement: this,
@@ -177,6 +179,11 @@ function registerCustomElement(options) {
     async attributeChangedCallback(name, oldValue, newValue) {
       await this._widgetPromise;
 
+      const camelCaseKey = name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+      const parser = attributesParser?.[name] ?? ((value) => value);
+
+      this._widget?.setProps?.({ [camelCaseKey]: parser(newValue) });
+
       this._widget?.attributeChangedCallback?.(
         this._widget,
         name,
@@ -199,11 +206,35 @@ function registerCustomElement(options) {
         },
       );
     }
+
+    _setDefaultProps() {
+      const attributes = this.constructor.observedAttributes;
+      if (
+        Array.isArray(attributes) &&
+        typeof this._widget.setProps === 'function'
+      ) {
+        this._widget.props = { ...this._widget.props };
+        attributes.forEach((key) => {
+          if (this.hasAttribute(key)) {
+            const camelCaseKey = key.replace(/-([a-z])/g, (g) =>
+              g[1].toUpperCase(),
+            );
+            const parser = attributesParser?.[key] ?? ((value) => value);
+
+            this._widget.props[camelCaseKey] = parser(
+              this.getAttribute(key) ?? this._widget.props[key],
+            );
+          }
+        });
+      }
+    }
   }
 
   if (customElements.get(widgetDefinition.name) === undefined) {
     customElements.define(widgetDefinition.name, WidgetElement);
   }
+
+  return WidgetElement;
 }
 
 const PROTECTED_FIELDS = ['__proto__', 'prototype', 'constructor'];

package/lib/index.mjs

@@ -35,10 +35,8 @@ function afterDOMLoad() {
 }
 
 function registerCustomElement(options) {
-  const { widgetDefinition, callbacks, observedAttributes } = deepMerge(
-    {},
-    options,
-  );
+  const { widgetDefinition, callbacks, observedAttributes, attributesParser } =
+    deepMerge({}, options);
   class HTMLCustomElement extends HTMLElement {
     static get observedAttributes() {
       return observedAttributes ?? [];
@@ -69,6 +67,8 @@ function registerCustomElement(options) {
               await afterDOMLoad();
               await loadAssets(widget.assets, this._shadow);
 
+              this._setDefaultProps();
+
               await callbacks?.reconstructor?.(this._widget, {
                 shadow: this._shadow,
                 customElement: this,
@@ -112,6 +112,8 @@ function registerCustomElement(options) {
               this._shadow,
             );
 
+            this._setDefaultProps();
+
             await callbacks?.constructor?.(this._widget, {
               shadow: this._shadow,
               customElement: this,
@@ -175,6 +177,11 @@ function registerCustomElement(options) {
     async attributeChangedCallback(name, oldValue, newValue) {
       await this._widgetPromise;
 
+      const camelCaseKey = name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+      const parser = attributesParser?.[name] ?? ((value) => value);
+
+      this._widget?.setProps?.({ [camelCaseKey]: parser(newValue) });
+
       this._widget?.attributeChangedCallback?.(
         this._widget,
         name,
@@ -197,11 +204,35 @@ function registerCustomElement(options) {
         },
       );
     }
+
+    _setDefaultProps() {
+      const attributes = this.constructor.observedAttributes;
+      if (
+        Array.isArray(attributes) &&
+        typeof this._widget.setProps === 'function'
+      ) {
+        this._widget.props = { ...this._widget.props };
+        attributes.forEach((key) => {
+          if (this.hasAttribute(key)) {
+            const camelCaseKey = key.replace(/-([a-z])/g, (g) =>
+              g[1].toUpperCase(),
+            );
+            const parser = attributesParser?.[key] ?? ((value) => value);
+
+            this._widget.props[camelCaseKey] = parser(
+              this.getAttribute(key) ?? this._widget.props[key],
+            );
+          }
+        });
+      }
+    }
   }
 
   if (customElements.get(widgetDefinition.name) === undefined) {
     customElements.define(widgetDefinition.name, WidgetElement);
   }
+
+  return WidgetElement;
 }
 
 const PROTECTED_FIELDS = ['__proto__', 'prototype', 'constructor'];

package/lib/index.umd.js

@@ -1 +1 @@
-function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}!function(t,e){if("function"==typeof define&&define.amd)define("@merkur/integration-custom-element",["exports","@merkur/core","@merkur/integration"],e);else if("undefined"!=typeof exports)e(exports,require("@merkur/core"),require("@merkur/integration"));else{var n={exports:{}};e(n.exports,t.Merkur.Core,t.Merkur.Integration),t.merkurIntegrationCustomElement=n.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(e,n,r){function o(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?o(Object(n),!0).forEach((function(e){u(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function u(t,e,n){return(e=d(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(){return l="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(t,e,n){var r=function(t,e){for(;!{}.hasOwnProperty.call(t,e)&&null!==(t=b(t)););return t}(t,e);if(r){var o=Object.getOwnPropertyDescriptor(r,e);return o.get?o.get.call(arguments.length<3?t:n):o.value}},l.apply(null,arguments)}function c(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,d(r.key),r)}}function s(t,e,n){return e&&a(t.prototype,e),n&&a(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function d(e){var n=function(e,n){if("object"!=t(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,n||"default");if("object"!=t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==t(n)?n:n+""}function f(t,e,n){return e=b(e),p(t,v()?Reflect.construct(e,n||[],b(t).constructor):e.apply(t,n))}function p(e,n){if(n&&("object"==t(n)||"function"==typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)}function y(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&m(t,e)}function h(t){var e="function"==typeof Map?new Map:void 0;return h=function(t){if(null===t||!function(t){try{return-1!==Function.toString.call(t).indexOf("[native code]")}catch(e){return"function"==typeof t}}(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,n)}function n(){return function(t,e,n){if(v())return Reflect.construct.apply(null,arguments);var r=[null];r.push.apply(r,e);var o=new(t.bind.apply(t,r));return n&&m(o,n.prototype),o}(t,arguments,b(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),m(n,t)},h(t)}function v(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(v=function(){return!!t})()}function m(t,e){return m=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},m(t,e)}function b(t){return b=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},b(t)}function w(t,e,n,r,o,i,u){try{var l=t[i](u),c=l.value}catch(t){return void n(t)}l.done?e(c):Promise.resolve(c).then(r,o)}function g(t){return function(){var e=this,n=arguments;return new Promise((function(r,o){var i=t.apply(e,n);function u(t){w(i,r,o,u,l,"next",t)}function l(t){w(i,r,o,u,l,"throw",t)}u(void 0)}))}}function _(){return(_=g((function*(t,e){var o=i(i({},t),{},{createWidget:t.createWidget});return(0,n.getMerkur)().isRegistered(o.name+o.version)||(0,n.getMerkur)().register(o),yield O(),yield(0,r.loadAssets)(o.assets,e),yield(0,n.getMerkur)().create(o)}))).apply(this,arguments)}function O(){return new Promise((function(t){"undefined"!=typeof document?"loading"!==document.readyState?t():window.addEventListener("DOMContentLoaded",(function(){t()})):t()}))}Object.defineProperty(e,"__esModule",{value:!0}),e.deepMerge=j,e.registerCustomElement=function(t){var e=j({},t),n=e.widgetDefinition,o=e.callbacks,i=e.observedAttributes,u=function(t){function e(){var t;c(this,e);for(var n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];var i=t=f(this,e,[].concat(r));return i._init(),p(t,i)}return y(e,t),s(e,[{key:"_init",value:function(){}}],[{key:"observedAttributes",get:function(){return null!=i?i:[]}}])}(h(HTMLElement)),a=function(t){function e(){return c(this,e),f(this,e,arguments)}return y(e,t),s(e,[{key:"_init",value:function(){var t,i,u,c,a,s=this;try{(t=e,i="_init",u=this,a=l(b(1&(c=3)?t.prototype:t),i,u),2&c&&"function"==typeof a?function(t){return a.apply(u,t)}:a)([]);var d=j({},n);this._widgetPromise=g((function*(){s._shadow=s.attachShadow({mode:"open"});try{var t,e=yield null==o||null===(t=o.getInstance)||void 0===t?void 0:t.call(o);if(e&&e.name&&e.version){var n,i;if(s._widget=e,yield O(),yield(0,r.loadAssets)(e.assets,s._shadow),yield null==o||null===(n=o.reconstructor)||void 0===n?void 0:n.call(o,s._widget,{shadow:s._shadow,customElement:s}),"function"==typeof(null==o?void 0:o.remount))yield null==o||null===(i=o.remount)||void 0===i?void 0:i.call(o,s._widget,{shadow:s._shadow,customElement:s});else e.root=s._shadow,e.customElement=s,s._shadow.appendChild(e.container);return}}catch(t){return void console.error(t)}try{var u,l,c;d.root=s._shadow,d.customElement=s,d.container||(d.container=document.createElement("div"),d.container.setAttribute("id","merkur-container")),s._shadow.appendChild(d.container),s._widget=yield function(t,e){return _.apply(this,arguments)}(d,s._shadow),yield null==o||null===(u=o.constructor)||void 0===u?void 0:u.call(o,s._widget,{shadow:s._shadow,customElement:s}),null!==(l=yield null==o||null===(c=o.mount)||void 0===c?void 0:c.call(o,s._widget,{shadow:s._shadow,customElement:s}))&&void 0!==l||(yield s._widget.mount())}catch(t){console.error(t)}}))()}catch(t){console.error(t)}}},{key:"connectedCallback",value:(d=g((function*(){var t,e,n;yield this._widgetPromise,null===(t=this._widget)||void 0===t||null===(e=t.connectedCallback)||void 0===e||e.call(t,{shadow:this._shadow,customElement:this}),null==o||null===(n=o.connectedCallback)||void 0===n||n.call(o,this._widget,{shadow:this._shadow,customElement:this})})),function(){return d.apply(this,arguments)})},{key:"disconnectedCallback",value:(a=g((function*(){var t,e,n;yield this._widgetPromise,null===(t=this._widget)||void 0===t||null===(e=t.disconnectedCallback)||void 0===e||e.call(t,{shadow:this._shadow,customElement:this}),null==o||null===(n=o.disconnectedCallback)||void 0===n||n.call(o,this._widget,{shadow:this._shadow,customElement:this})})),function(){return a.apply(this,arguments)})},{key:"adoptedCallback",value:(u=g((function*(){var t,e,n;yield this._widgetPromise,null===(t=this._widget)||void 0===t||null===(e=t.adoptedCallback)||void 0===e||e.call(t,{shadow:this._shadow,customElement:this}),null==o||null===(n=o.adoptedCallback)||void 0===n||n.call(o,this._widget,{shadow:this._shadow,customElement:this})})),function(){return u.apply(this,arguments)})},{key:"attributeChangedCallback",value:(i=g((function*(t,e,n){var r,i,u;yield this._widgetPromise,null===(r=this._widget)||void 0===r||null===(i=r.attributeChangedCallback)||void 0===i||i.call(r,this._widget,t,e,n,{shadow:this._shadow,customElement:this}),null==o||null===(u=o.attributeChangedCallback)||void 0===u||u.call(o,this._widget,t,e,n,{shadow:this._shadow,customElement:this})})),function(t,e,n){return i.apply(this,arguments)})}]);var i,u,a,d}(u);void 0===customElements.get(n.name)&&customElements.define(n.name,a)};var k=["__proto__","prototype","constructor"];function j(t,e){var n=function(t){return!!t&&t.constructor===Object};return n(t)&&n(e)?(Object.keys(e).forEach((function(r){if(!k.includes(r)){var o=t[r],i=e[r];Array.isArray(o)&&Array.isArray(i)?t[r]=o.concat(i):n(o)&&n(i)?t[r]=j(Object.assign({},o),i):t[r]=i}})),t):e}}));
+function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}!function(t,e){if("function"==typeof define&&define.amd)define("@merkur/integration-custom-element",["exports","@merkur/core","@merkur/integration"],e);else if("undefined"!=typeof exports)e(exports,require("@merkur/core"),require("@merkur/integration"));else{var n={exports:{}};e(n.exports,t.Merkur.Core,t.Merkur.Integration),t.merkurIntegrationCustomElement=n.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(e,n,r){function o(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?o(Object(n),!0).forEach((function(e){u(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function u(t,e,n){return(e=d(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function l(){return l="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(t,e,n){var r=function(t,e){for(;!{}.hasOwnProperty.call(t,e)&&null!==(t=w(t)););return t}(t,e);if(r){var o=Object.getOwnPropertyDescriptor(r,e);return o.get?o.get.call(arguments.length<3?t:n):o.value}},l.apply(null,arguments)}function c(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,d(r.key),r)}}function s(t,e,n){return e&&a(t.prototype,e),n&&a(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function d(e){var n=function(e,n){if("object"!=t(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,n||"default");if("object"!=t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==t(n)?n:n+""}function f(t,e,n){return e=w(e),p(t,v()?Reflect.construct(e,n||[],w(t).constructor):e.apply(t,n))}function p(e,n){if(n&&("object"==t(n)||"function"==typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)}function h(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&b(t,e)}function y(t){var e="function"==typeof Map?new Map:void 0;return y=function(t){if(null===t||!function(t){try{return-1!==Function.toString.call(t).indexOf("[native code]")}catch(e){return"function"==typeof t}}(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,n)}function n(){return function(t,e,n){if(v())return Reflect.construct.apply(null,arguments);var r=[null];r.push.apply(r,e);var o=new(t.bind.apply(t,r));return n&&b(o,n.prototype),o}(t,arguments,w(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),b(n,t)},y(t)}function v(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(v=function(){return!!t})()}function b(t,e){return b=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},b(t,e)}function w(t){return w=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},w(t)}function m(t,e,n,r,o,i,u){try{var l=t[i](u),c=l.value}catch(t){return void n(t)}l.done?e(c):Promise.resolve(c).then(r,o)}function g(t){return function(){var e=this,n=arguments;return new Promise((function(r,o){var i=t.apply(e,n);function u(t){m(i,r,o,u,l,"next",t)}function l(t){m(i,r,o,u,l,"throw",t)}u(void 0)}))}}function _(){return(_=g((function*(t,e){var o=i(i({},t),{},{createWidget:t.createWidget});return(0,n.getMerkur)().isRegistered(o.name+o.version)||(0,n.getMerkur)().register(o),yield O(),yield(0,r.loadAssets)(o.assets,e),yield(0,n.getMerkur)().create(o)}))).apply(this,arguments)}function O(){return new Promise((function(t){"undefined"!=typeof document?"loading"!==document.readyState?t():window.addEventListener("DOMContentLoaded",(function(){t()})):t()}))}Object.defineProperty(e,"__esModule",{value:!0}),e.deepMerge=P,e.registerCustomElement=function(t){var e=P({},t),n=e.widgetDefinition,o=e.callbacks,a=e.observedAttributes,d=e.attributesParser,v=function(t){function e(){var t;c(this,e);for(var n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];var i=t=f(this,e,[].concat(r));return i._init(),p(t,i)}return h(e,t),s(e,[{key:"_init",value:function(){}}],[{key:"observedAttributes",get:function(){return null!=a?a:[]}}])}(y(HTMLElement)),b=function(t){function e(){return c(this,e),f(this,e,arguments)}return h(e,t),s(e,[{key:"_init",value:function(){var t,i,u,c,a,s=this;try{(t=e,i="_init",u=this,a=l(w(1&(c=3)?t.prototype:t),i,u),2&c&&"function"==typeof a?function(t){return a.apply(u,t)}:a)([]);var d=P({},n);this._widgetPromise=g((function*(){s._shadow=s.attachShadow({mode:"open"});try{var t,e=yield null==o||null===(t=o.getInstance)||void 0===t?void 0:t.call(o);if(e&&e.name&&e.version){var n,i;if(s._widget=e,yield O(),yield(0,r.loadAssets)(e.assets,s._shadow),s._setDefaultProps(),yield null==o||null===(n=o.reconstructor)||void 0===n?void 0:n.call(o,s._widget,{shadow:s._shadow,customElement:s}),"function"==typeof(null==o?void 0:o.remount))yield null==o||null===(i=o.remount)||void 0===i?void 0:i.call(o,s._widget,{shadow:s._shadow,customElement:s});else e.root=s._shadow,e.customElement=s,s._shadow.appendChild(e.container);return}}catch(t){return void console.error(t)}try{var u,l,c;d.root=s._shadow,d.customElement=s,d.container||(d.container=document.createElement("div"),d.container.setAttribute("id","merkur-container")),s._shadow.appendChild(d.container),s._widget=yield function(t,e){return _.apply(this,arguments)}(d,s._shadow),s._setDefaultProps(),yield null==o||null===(u=o.constructor)||void 0===u?void 0:u.call(o,s._widget,{shadow:s._shadow,customElement:s}),null!==(l=yield null==o||null===(c=o.mount)||void 0===c?void 0:c.call(o,s._widget,{shadow:s._shadow,customElement:s}))&&void 0!==l||(yield s._widget.mount())}catch(t){console.error(t)}}))()}catch(t){console.error(t)}}},{key:"connectedCallback",value:(v=g((function*(){var t,e,n;yield this._widgetPromise,null===(t=this._widget)||void 0===t||null===(e=t.connectedCallback)||void 0===e||e.call(t,{shadow:this._shadow,customElement:this}),null==o||null===(n=o.connectedCallback)||void 0===n||n.call(o,this._widget,{shadow:this._shadow,customElement:this})})),function(){return v.apply(this,arguments)})},{key:"disconnectedCallback",value:(y=g((function*(){var t,e,n;yield this._widgetPromise,null===(t=this._widget)||void 0===t||null===(e=t.disconnectedCallback)||void 0===e||e.call(t,{shadow:this._shadow,customElement:this}),null==o||null===(n=o.disconnectedCallback)||void 0===n||n.call(o,this._widget,{shadow:this._shadow,customElement:this})})),function(){return y.apply(this,arguments)})},{key:"adoptedCallback",value:(p=g((function*(){var t,e,n;yield this._widgetPromise,null===(t=this._widget)||void 0===t||null===(e=t.adoptedCallback)||void 0===e||e.call(t,{shadow:this._shadow,customElement:this}),null==o||null===(n=o.adoptedCallback)||void 0===n||n.call(o,this._widget,{shadow:this._shadow,customElement:this})})),function(){return p.apply(this,arguments)})},{key:"attributeChangedCallback",value:(a=g((function*(t,e,n){var r,i,l,c,a,s;yield this._widgetPromise;var f=t.replace(/-([a-z])/g,(function(t){return t[1].toUpperCase()})),p=null!==(r=null==d?void 0:d[t])&&void 0!==r?r:function(t){return t};null===(i=this._widget)||void 0===i||null===(l=i.setProps)||void 0===l||l.call(i,u({},f,p(n))),null===(c=this._widget)||void 0===c||null===(a=c.attributeChangedCallback)||void 0===a||a.call(c,this._widget,t,e,n,{shadow:this._shadow,customElement:this}),null==o||null===(s=o.attributeChangedCallback)||void 0===s||s.call(o,this._widget,t,e,n,{shadow:this._shadow,customElement:this})})),function(t,e,n){return a.apply(this,arguments)})},{key:"_setDefaultProps",value:function(){var t=this,e=this.constructor.observedAttributes;Array.isArray(e)&&"function"==typeof this._widget.setProps&&(this._widget.props=i({},this._widget.props),e.forEach((function(e){if(t.hasAttribute(e)){var n,r,o=e.replace(/-([a-z])/g,(function(t){return t[1].toUpperCase()})),i=null!==(n=null==d?void 0:d[e])&&void 0!==n?n:function(t){return t};t._widget.props[o]=i(null!==(r=t.getAttribute(e))&&void 0!==r?r:t._widget.props[e])}})))}}]);var a,p,y,v}(v);void 0===customElements.get(n.name)&&customElements.define(n.name,b);return b};var k=["__proto__","prototype","constructor"];function P(t,e){var n=function(t){return!!t&&t.constructor===Object};return n(t)&&n(e)?(Object.keys(e).forEach((function(r){if(!k.includes(r)){var o=t[r],i=e[r];Array.isArray(o)&&Array.isArray(i)?t[r]=o.concat(i):n(o)&&n(i)?t[r]=P(Object.assign({},o),i):t[r]=i}})),t):e}}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkur/integration-custom-element",
-  "version": "0.37.2",
+  "version": "0.38.0",
   "description": "Merkur module for easy integration with other apps with custom element.",
   "main": "lib/index",
   "module": "lib/index",
@@ -51,12 +51,12 @@
   },
   "homepage": "https://merkur.js.org/",
   "devDependencies": {
-    "@merkur/core": "^0.37.0",
-    "@merkur/integration": "^0.37.0"
+    "@merkur/core": "^0.38.0",
+    "@merkur/integration": "^0.38.0"
   },
   "peerDependencies": {
     "@merkur/core": "*",
     "@merkur/integration": "*"
   },
-  "gitHead": "1d30cc6289bd852bd58721c3207bbff8717d91e4"
+  "gitHead": "a6e379c0cb887898e34465dc3db9231feb68e6a5"
 }