piral-elm 0.13.9 → 0.14.0-beta.3157

package/convert.d.ts

@@ -1,9 +1,11 @@
 import type { HtmlComponent } from 'piral-core';
-import { createExtension } from './lib/extension';
-declare const convert: <TProps extends import("piral-core").BaseComponentProps>(main: import("./lib/types").ElmModule<TProps>, captured?: Record<string, any>) => import("piral-core").ForeignComponent<TProps>;
+import { createConverter } from './lib/converter';
 export interface ElmConverter {
-    (...params: Parameters<typeof convert>): HtmlComponent<any>;
+    (...params: Parameters<ReturnType<typeof createConverter>>): HtmlComponent<any>;
 }
-export declare const fromElm: ElmConverter;
-export declare const createElmExtension: typeof createExtension;
-export {};
+export declare function createElmConverter(...params: Parameters<typeof createConverter>): {
+    from: ElmConverter;
+    Extension: string;
+};
+declare const fromElm: ElmConverter, ElmExtension: string;
+export { fromElm, ElmExtension };

package/convert.js

@@ -1,12 +1,21 @@
 "use strict";
 exports.__esModule = true;
-exports.createElmExtension = exports.fromElm = void 0;
+exports.ElmExtension = exports.fromElm = exports.createElmConverter = void 0;
 var converter_1 = require("./lib/converter");
-var extension_1 = require("./lib/extension");
-var convert = converter_1.createConverter();
-var fromElm = function (main, captured) { return ({
-    type: 'html',
-    component: convert(main, captured)
-}); };
+function createElmConverter() {
+    var params = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        params[_i] = arguments[_i];
+    }
+    var convert = converter_1.createConverter.apply(void 0, params);
+    var Extension = convert.Extension;
+    var from = function (main, captured) { return ({
+        type: 'html',
+        component: convert(main, captured)
+    }); };
+    return { from: from, Extension: Extension };
+}
+exports.createElmConverter = createElmConverter;
+var _a = createElmConverter(), fromElm = _a.from, ElmExtension = _a.Extension;
 exports.fromElm = fromElm;
-exports.createElmExtension = extension_1.createExtension;
+exports.ElmExtension = ElmExtension;

package/esm/converter.d.ts

@@ -1,3 +1,13 @@
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
-import { ElmModule } from './types';
-export declare function createConverter(): <TProps extends BaseComponentProps>(main: ElmModule<TProps>, captured?: Record<string, any>) => ForeignComponent<TProps>;
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { ElmModule } from './types';
+export interface ElmConverterOptions {
+    /**
+     * Defines the name of the extension component.
+     * @default elm-extension
+     */
+    selector?: string;
+}
+export declare function createConverter(config?: ElmConverterOptions): {
+    <TProps extends BaseComponentProps>(main: ElmModule<TProps>, captured?: Record<string, any>): ForeignComponent<TProps>;
+    Extension: string;
+};

package/esm/converter.js

@@ -1,23 +1,22 @@
-import { __assign } from "tslib";
-export function createConverter() {
-    var convert = function (main, captured) {
+import { createExtension } from './extension';
+export function createConverter(config = {}) {
+    const { selector = 'elm-extension' } = config;
+    const Extension = createExtension(selector);
+    const convert = (main, captured) => {
         return {
-            mount: function (parent, data, ctx) {
-                var node = parent.appendChild(document.createElement('div'));
-                parent.addEventListener('render-html', function (ev) {
-                    var piral = data.piral;
-                    piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
-                }, false);
+            mount(el, props, ctx) {
+                const node = el.appendChild(document.createElement('div'));
                 main.init({
-                    node: node,
-                    flags: __assign(__assign(__assign({}, captured), ctx), data),
+                    node,
+                    flags: Object.assign(Object.assign(Object.assign({}, captured), ctx), props),
                 });
             },
-            unmount: function (el) {
+            unmount(el) {
                 el.innerHTML = '';
             },
         };
     };
+    convert.Extension = Extension;
     return convert;
 }
 //# sourceMappingURL=converter.js.map

package/esm/converter.js.map

@@ -1 +1 @@
-{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";AAGA,MAAM,UAAU,eAAe;IAC7B,IAAM,OAAO,GAAG,UACd,IAAuB,EACvB,QAA8B;QAE9B,OAAO;YACL,KAAK,EAAL,UAAM,MAAM,EAAE,IAAI,EAAE,GAAG;gBACrB,IAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC/D,MAAM,CAAC,gBAAgB,CACrB,aAAa,EACb,UAAC,EAAe;oBACN,IAAA,KAAK,GAAK,IAAI,MAAT,CAAU;oBACvB,KAAK,CAAC,mBAAmB,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC/D,CAAC,EACD,KAAK,CACN,CAAC;gBACF,IAAI,CAAC,IAAI,CAAC;oBACR,IAAI,MAAA;oBACJ,KAAK,iCACA,QAAQ,GACR,GAAG,GACH,IAAI,CACR;iBACF,CAAC,CAAC;YACL,CAAC;YACD,OAAO,YAAC,EAAE;gBACR,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAW9C,MAAM,UAAU,eAAe,CAAC,SAA8B,EAAE;IAC9D,MAAM,EAAE,QAAQ,GAAG,eAAe,EAAE,GAAG,MAAM,CAAC;IAC9C,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CACd,IAAuB,EACvB,QAA8B,EACJ,EAAE;QAC5B,OAAO;YACL,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG;gBAClB,MAAM,IAAI,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC3D,IAAI,CAAC,IAAI,CAAC;oBACR,IAAI;oBACJ,KAAK,gDACA,QAAQ,GACR,GAAG,GACH,KAAK,CACT;iBACF,CAAC,CAAC;YACL,CAAC;YACD,OAAO,CAAC,EAAE;gBACR,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/esm/create.d.ts

@@ -1,14 +1,10 @@
 import type { PiralPlugin } from 'piral-core';
+import { ElmConverterOptions } from './converter';
 import type { PiletElmApi } from './types';
 /**
  * Available configuration options for the Elm plugin.
  */
-export interface ElmConfig {
-    /**
-     * Defines the name of the extension component.
-     * @default elm-extension
-     */
-    selector?: string;
+export interface ElmConfig extends ElmConverterOptions {
 }
 /**
  * Creates new Pilet API extensions for integration of Elm.

package/esm/create.js

@@ -1,27 +1,20 @@
 import { createConverter } from './converter';
-import { createExtension } from './extension';
 /**
  * Creates new Pilet API extensions for integration of Elm.
  */
-export function createElmApi(config) {
-    if (config === void 0) { config = {}; }
-    var selector = config.selector;
-    return function (context) {
-        var convert = createConverter();
-        context.converters.elm = function (_a) {
-            var main = _a.main, captured = _a.captured;
-            return convert(main, captured);
-        };
-        createExtension(selector);
+export function createElmApi(config = {}) {
+    return (context) => {
+        const convert = createConverter(config);
+        context.converters.elm = ({ main, captured }) => convert(main, captured);
         return {
-            fromElm: function (main, captured) {
+            fromElm(main, captured) {
                 return {
                     type: 'elm',
-                    captured: captured,
-                    main: main,
+                    captured,
+                    main,
                 };
             },
-            ElmExtension: selector,
+            ElmExtension: convert.Extension,
         };
     };
 }

package/esm/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAc9C;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,MAAsB;IAAtB,uBAAA,EAAA,WAAsB;IACzC,IAAA,QAAQ,GAAK,MAAM,SAAX,CAAY;IAE5B,OAAO,UAAC,OAAO;QACb,IAAM,OAAO,GAAG,eAAe,EAAE,CAAC;QAClC,OAAO,CAAC,UAAU,CAAC,GAAG,GAAG,UAAC,EAAkB;gBAAhB,IAAI,UAAA,EAAE,QAAQ,cAAA;YAAO,OAAA,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;QAAvB,CAAuB,CAAC;QAEzE,eAAe,CAAC,QAAQ,CAAC,CAAC;QAE1B,OAAO;YACL,OAAO,YAAC,IAAI,EAAE,QAAQ;gBACpB,OAAO;oBACL,IAAI,EAAE,KAAK;oBACX,QAAQ,UAAA;oBACR,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;YACD,YAAY,EAAE,QAAQ;SACvB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAuB,MAAM,aAAa,CAAC;AAQnE;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,SAAoB,EAAE;IACjD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAEzE,OAAO;YACL,OAAO,CAAC,IAAI,EAAE,QAAQ;gBACpB,OAAO;oBACL,IAAI,EAAE,KAAK;oBACX,QAAQ;oBACR,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,YAAY,EAAE,OAAO,CAAC,SAAS;SAChC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/esm/extension.d.ts

@@ -1 +1 @@
-export declare function createExtension(selector?: string): void;
+export declare function createExtension(selector: string): string;

package/esm/extension.js

@@ -1,28 +1,11 @@
-import { __extends } from "tslib";
 export function createExtension(selector) {
-    if (selector === void 0) { selector = 'elm-extension'; }
-    if ('customElements' in window) {
-        var ElmExtension = /** @class */ (function (_super) {
-            __extends(ElmExtension, _super);
-            function ElmExtension() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            ElmExtension.prototype.connectedCallback = function () {
-                if (this.isConnected) {
-                    this.dispatchEvent(new CustomEvent('render-html', {
-                        bubbles: true,
-                        detail: {
-                            target: this,
-                            props: {
-                                name: this.getAttribute('name'),
-                            },
-                        },
-                    }));
-                }
-            };
-            return ElmExtension;
-        }(HTMLElement));
-        customElements.define(selector, ElmExtension);
+    const defaultExtensionSelector = 'piral-extension';
+    if ('customElements' in window && selector && selector !== defaultExtensionSelector) {
+        const ExtensionBase = customElements.get(defaultExtensionSelector);
+        class AliasExtension extends ExtensionBase {
+        }
+        customElements.define(selector, AliasExtension);
     }
+    return selector || defaultExtensionSelector;
 }
 //# sourceMappingURL=extension.js.map

package/esm/extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";AAAA,MAAM,UAAU,eAAe,CAAC,QAA0B;IAA1B,yBAAA,EAAA,0BAA0B;IACxD,IAAI,gBAAgB,IAAI,MAAM,EAAE;QAC9B;YAA2B,gCAAW;YAAtC;;YAgBA,CAAC;YAfC,wCAAiB,GAAjB;gBACE,IAAI,IAAI,CAAC,WAAW,EAAE;oBACpB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;wBAC7B,OAAO,EAAE,IAAI;wBACb,MAAM,EAAE;4BACN,MAAM,EAAE,IAAI;4BACZ,KAAK,EAAE;gCACL,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;6BAChC;yBACF;qBACF,CAAC,CACH,CAAC;iBACH;YACH,CAAC;YACH,mBAAC;QAAD,CAAC,AAhBD,CAA2B,WAAW,GAgBrC;QAED,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;KAC/C;AACH,CAAC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,eAAe,CAAC,QAAgB;IAC9C,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IAEnD,IAAI,gBAAgB,IAAI,MAAM,IAAI,QAAQ,IAAI,QAAQ,KAAK,wBAAwB,EAAE;QACnF,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QACnE,MAAM,cAAe,SAAQ,aAAa;SAAG;QAC7C,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;KACjD;IAED,OAAO,QAAQ,IAAI,wBAAwB,CAAC;AAC9C,CAAC"}

package/lib/converter.d.ts

@@ -1,3 +1,13 @@
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
-import { ElmModule } from './types';
-export declare function createConverter(): <TProps extends BaseComponentProps>(main: ElmModule<TProps>, captured?: Record<string, any>) => ForeignComponent<TProps>;
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { ElmModule } from './types';
+export interface ElmConverterOptions {
+    /**
+     * Defines the name of the extension component.
+     * @default elm-extension
+     */
+    selector?: string;
+}
+export declare function createConverter(config?: ElmConverterOptions): {
+    <TProps extends BaseComponentProps>(main: ElmModule<TProps>, captured?: Record<string, any>): ForeignComponent<TProps>;
+    Extension: string;
+};

package/lib/converter.js

@@ -1,26 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createConverter = void 0;
-var tslib_1 = require("tslib");
-function createConverter() {
-    var convert = function (main, captured) {
+const extension_1 = require("./extension");
+function createConverter(config = {}) {
+    const { selector = 'elm-extension' } = config;
+    const Extension = (0, extension_1.createExtension)(selector);
+    const convert = (main, captured) => {
         return {
-            mount: function (parent, data, ctx) {
-                var node = parent.appendChild(document.createElement('div'));
-                parent.addEventListener('render-html', function (ev) {
-                    var piral = data.piral;
-                    piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
-                }, false);
+            mount(el, props, ctx) {
+                const node = el.appendChild(document.createElement('div'));
                 main.init({
-                    node: node,
-                    flags: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, captured), ctx), data),
+                    node,
+                    flags: Object.assign(Object.assign(Object.assign({}, captured), ctx), props),
                 });
             },
-            unmount: function (el) {
+            unmount(el) {
                 el.innerHTML = '';
             },
         };
     };
+    convert.Extension = Extension;
     return convert;
 }
 exports.createConverter = createConverter;

package/lib/converter.js.map

@@ -1 +1 @@
-{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;;AAGA,SAAgB,eAAe;IAC7B,IAAM,OAAO,GAAG,UACd,IAAuB,EACvB,QAA8B;QAE9B,OAAO;YACL,KAAK,EAAL,UAAM,MAAM,EAAE,IAAI,EAAE,GAAG;gBACrB,IAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC/D,MAAM,CAAC,gBAAgB,CACrB,aAAa,EACb,UAAC,EAAe;oBACN,IAAA,KAAK,GAAK,IAAI,MAAT,CAAU;oBACvB,KAAK,CAAC,mBAAmB,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC/D,CAAC,EACD,KAAK,CACN,CAAC;gBACF,IAAI,CAAC,IAAI,CAAC;oBACR,IAAI,MAAA;oBACJ,KAAK,yDACA,QAAQ,GACR,GAAG,GACH,IAAI,CACR;iBACF,CAAC,CAAC;YACL,CAAC;YACD,OAAO,YAAC,EAAE;gBACR,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC;AA/BD,0CA+BC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AACA,2CAA8C;AAW9C,SAAgB,eAAe,CAAC,SAA8B,EAAE;IAC9D,MAAM,EAAE,QAAQ,GAAG,eAAe,EAAE,GAAG,MAAM,CAAC;IAC9C,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CACd,IAAuB,EACvB,QAA8B,EACJ,EAAE;QAC5B,OAAO;YACL,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG;gBAClB,MAAM,IAAI,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC3D,IAAI,CAAC,IAAI,CAAC;oBACR,IAAI;oBACJ,KAAK,gDACA,QAAQ,GACR,GAAG,GACH,KAAK,CACT;iBACF,CAAC,CAAC;YACL,CAAC;YACD,OAAO,CAAC,EAAE;gBACR,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC;AA1BD,0CA0BC"}

package/lib/create.d.ts

@@ -1,14 +1,10 @@
 import type { PiralPlugin } from 'piral-core';
+import { ElmConverterOptions } from './converter';
 import type { PiletElmApi } from './types';
 /**
  * Available configuration options for the Elm plugin.
  */
-export interface ElmConfig {
-    /**
-     * Defines the name of the extension component.
-     * @default elm-extension
-     */
-    selector?: string;
+export interface ElmConfig extends ElmConverterOptions {
 }
 /**
  * Creates new Pilet API extensions for integration of Elm.

package/lib/create.js

@@ -1,30 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createElmApi = void 0;
-var converter_1 = require("./converter");
-var extension_1 = require("./extension");
+const converter_1 = require("./converter");
 /**
  * Creates new Pilet API extensions for integration of Elm.
  */
-function createElmApi(config) {
-    if (config === void 0) { config = {}; }
-    var selector = config.selector;
-    return function (context) {
-        var convert = converter_1.createConverter();
-        context.converters.elm = function (_a) {
-            var main = _a.main, captured = _a.captured;
-            return convert(main, captured);
-        };
-        extension_1.createExtension(selector);
+function createElmApi(config = {}) {
+    return (context) => {
+        const convert = (0, converter_1.createConverter)(config);
+        context.converters.elm = ({ main, captured }) => convert(main, captured);
         return {
-            fromElm: function (main, captured) {
+            fromElm(main, captured) {
                 return {
                     type: 'elm',
-                    captured: captured,
-                    main: main,
+                    captured,
+                    main,
                 };
             },
-            ElmExtension: selector,
+            ElmExtension: convert.Extension,
         };
     };
 }

package/lib/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,yCAA8C;AAC9C,yCAA8C;AAc9C;;GAEG;AACH,SAAgB,YAAY,CAAC,MAAsB;IAAtB,uBAAA,EAAA,WAAsB;IACzC,IAAA,QAAQ,GAAK,MAAM,SAAX,CAAY;IAE5B,OAAO,UAAC,OAAO;QACb,IAAM,OAAO,GAAG,2BAAe,EAAE,CAAC;QAClC,OAAO,CAAC,UAAU,CAAC,GAAG,GAAG,UAAC,EAAkB;gBAAhB,IAAI,UAAA,EAAE,QAAQ,cAAA;YAAO,OAAA,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;QAAvB,CAAuB,CAAC;QAEzE,2BAAe,CAAC,QAAQ,CAAC,CAAC;QAE1B,OAAO;YACL,OAAO,YAAC,IAAI,EAAE,QAAQ;gBACpB,OAAO;oBACL,IAAI,EAAE,KAAK;oBACX,QAAQ,UAAA;oBACR,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;YACD,YAAY,EAAE,QAAQ;SACvB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AApBD,oCAoBC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,2CAAmE;AAQnE;;GAEG;AACH,SAAgB,YAAY,CAAC,SAAoB,EAAE;IACjD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,IAAA,2BAAe,EAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAEzE,OAAO;YACL,OAAO,CAAC,IAAI,EAAE,QAAQ;gBACpB,OAAO;oBACL,IAAI,EAAE,KAAK;oBACX,QAAQ;oBACR,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,YAAY,EAAE,OAAO,CAAC,SAAS;SAChC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAhBD,oCAgBC"}

package/lib/extension.d.ts

@@ -1 +1 @@
-export declare function createExtension(selector?: string): void;
+export declare function createExtension(selector: string): string;

package/lib/extension.js

@@ -1,32 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createExtension = void 0;
-var tslib_1 = require("tslib");
 function createExtension(selector) {
-    if (selector === void 0) { selector = 'elm-extension'; }
-    if ('customElements' in window) {
-        var ElmExtension = /** @class */ (function (_super) {
-            tslib_1.__extends(ElmExtension, _super);
-            function ElmExtension() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            ElmExtension.prototype.connectedCallback = function () {
-                if (this.isConnected) {
-                    this.dispatchEvent(new CustomEvent('render-html', {
-                        bubbles: true,
-                        detail: {
-                            target: this,
-                            props: {
-                                name: this.getAttribute('name'),
-                            },
-                        },
-                    }));
-                }
-            };
-            return ElmExtension;
-        }(HTMLElement));
-        customElements.define(selector, ElmExtension);
+    const defaultExtensionSelector = 'piral-extension';
+    if ('customElements' in window && selector && selector !== defaultExtensionSelector) {
+        const ExtensionBase = customElements.get(defaultExtensionSelector);
+        class AliasExtension extends ExtensionBase {
+        }
+        customElements.define(selector, AliasExtension);
     }
+    return selector || defaultExtensionSelector;
 }
 exports.createExtension = createExtension;
 //# sourceMappingURL=extension.js.map

package/lib/extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;;AAAA,SAAgB,eAAe,CAAC,QAA0B;IAA1B,yBAAA,EAAA,0BAA0B;IACxD,IAAI,gBAAgB,IAAI,MAAM,EAAE;QAC9B;YAA2B,wCAAW;YAAtC;;YAgBA,CAAC;YAfC,wCAAiB,GAAjB;gBACE,IAAI,IAAI,CAAC,WAAW,EAAE;oBACpB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;wBAC7B,OAAO,EAAE,IAAI;wBACb,MAAM,EAAE;4BACN,MAAM,EAAE,IAAI;4BACZ,KAAK,EAAE;gCACL,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;6BAChC;yBACF;qBACF,CAAC,CACH,CAAC;iBACH;YACH,CAAC;YACH,mBAAC;QAAD,CAAC,AAhBD,CAA2B,WAAW,GAgBrC;QAED,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;KAC/C;AACH,CAAC;AAtBD,0CAsBC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;AAAA,SAAgB,eAAe,CAAC,QAAgB;IAC9C,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IAEnD,IAAI,gBAAgB,IAAI,MAAM,IAAI,QAAQ,IAAI,QAAQ,KAAK,wBAAwB,EAAE;QACnF,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QACnE,MAAM,cAAe,SAAQ,aAAa;SAAG;QAC7C,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;KACjD;IAED,OAAO,QAAQ,IAAI,wBAAwB,CAAC;AAC9C,CAAC;AAVD,0CAUC"}

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./create"), exports);
-tslib_1.__exportStar(require("./types"), exports);
+const tslib_1 = require("tslib");
+(0, tslib_1.__exportStar)(require("./create"), exports);
+(0, tslib_1.__exportStar)(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyB;AACzB,kDAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,wDAAyB;AACzB,uDAAwB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-elm",
-  "version": "0.13.9",
+  "version": "0.14.0-beta.3157",
   "description": "Plugin for integrating Elm components in Piral.",
   "keywords": [
     "piral",
@@ -43,10 +43,10 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "^0.13.9"
+    "piral-core": "^0.14.0-beta.3157"
   },
   "peerDependencies": {
-    "piral-core": "0.13.x"
+    "piral-core": "0.14.x"
   },
-  "gitHead": "80de9fb69430283bc90f380d3254e0e6aad4c6ad"
+  "gitHead": "1928e46becee1444f84df8e80a81aa12712d17e2"
 }

package/src/converter.ts

@@ -1,28 +1,31 @@
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
-import { ElmModule } from './types';
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import { createExtension } from './extension';
+import type { ElmModule } from './types';
 
-export function createConverter() {
+export interface ElmConverterOptions {
+  /**
+   * Defines the name of the extension component.
+   * @default elm-extension
+   */
+  selector?: string;
+}
+
+export function createConverter(config: ElmConverterOptions = {}) {
+  const { selector = 'elm-extension' } = config;
+  const Extension = createExtension(selector);
   const convert = <TProps extends BaseComponentProps>(
     main: ElmModule<TProps>,
     captured?: Record<string, any>,
   ): ForeignComponent<TProps> => {
     return {
-      mount(parent, data, ctx) {
-        const node = parent.appendChild(document.createElement('div'));
-        parent.addEventListener(
-          'render-html',
-          (ev: CustomEvent) => {
-            const { piral } = data;
-            piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
-          },
-          false,
-        );
+      mount(el, props, ctx) {
+        const node = el.appendChild(document.createElement('div'));
         main.init({
           node,
           flags: {
             ...captured,
             ...ctx,
-            ...data,
+            ...props,
           },
         });
       },
@@ -31,5 +34,6 @@ export function createConverter() {
       },
     };
   };
+  convert.Extension = Extension;
   return convert;
 }

package/src/create.ts

@@ -1,31 +1,20 @@
 import type { PiralPlugin } from 'piral-core';
-import { createConverter } from './converter';
-import { createExtension } from './extension';
+import { createConverter, ElmConverterOptions } from './converter';
 import type { PiletElmApi } from './types';
 
 /**
  * Available configuration options for the Elm plugin.
  */
-export interface ElmConfig {
-  /**
-   * Defines the name of the extension component.
-   * @default elm-extension
-   */
-  selector?: string;
-}
+export interface ElmConfig extends ElmConverterOptions {}
 
 /**
  * Creates new Pilet API extensions for integration of Elm.
  */
 export function createElmApi(config: ElmConfig = {}): PiralPlugin<PiletElmApi> {
-  const { selector } = config;
-
   return (context) => {
-    const convert = createConverter();
+    const convert = createConverter(config);
     context.converters.elm = ({ main, captured }) => convert(main, captured);
 
-    createExtension(selector);
-
     return {
       fromElm(main, captured) {
         return {
@@ -34,7 +23,7 @@ export function createElmApi(config: ElmConfig = {}): PiralPlugin<PiletElmApi> {
           main,
         };
       },
-      ElmExtension: selector,
+      ElmExtension: convert.Extension,
     };
   };
 }

package/src/extension.ts

@@ -1,23 +1,11 @@
-export function createExtension(selector = 'elm-extension') {
-  if ('customElements' in window) {
-    class ElmExtension extends HTMLElement {
-      connectedCallback() {
-        if (this.isConnected) {
-          this.dispatchEvent(
-            new CustomEvent('render-html', {
-              bubbles: true,
-              detail: {
-                target: this,
-                props: {
-                  name: this.getAttribute('name'),
-                },
-              },
-            }),
-          );
-        }
-      }
-    }
+export function createExtension(selector: string) {
+  const defaultExtensionSelector = 'piral-extension';
 
-    customElements.define(selector, ElmExtension);
+  if ('customElements' in window && selector && selector !== defaultExtensionSelector) {
+    const ExtensionBase = customElements.get(defaultExtensionSelector);
+    class AliasExtension extends ExtensionBase {}
+    customElements.define(selector, AliasExtension);
   }
+
+  return selector || defaultExtensionSelector;
 }