piral-litel 1.0.0-pre.2091 → 1.0.1-beta.5640

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2021 smapiot
+Copyright (c) 2019 - 2023 smapiot
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,8 +1,8 @@
-[![Piral Logo](https://github.com/smapiot/piral/raw/master/docs/assets/logo.png)](https://piral.io)
+[![Piral Logo](https://github.com/smapiot/piral/raw/main/docs/assets/logo.png)](https://piral.io)
 
-# [Piral LitEl](https://piral.io) · [![GitHub License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smapiot/piral/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/piral-litel.svg?style=flat)](https://www.npmjs.com/package/piral-litel) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io) [![Gitter Chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/piral-io/community)
+# [Piral LitEl](https://piral.io) · [![GitHub License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smapiot/piral/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/piral-litel.svg?style=flat)](https://www.npmjs.com/package/piral-litel) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io) [![Gitter Chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/piral-io/community)
 
-This is a plugin that only has a peer dependency to `piral-core`. What `piral-litel` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
+This is a plugin that only has a peer dependency to `lit-element`. What `piral-litel` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
 
 The set includes a LitElement converter for any component registration, as well as a `fromLitEl` shortcut and a `LitElExtension` component.
 
@@ -47,7 +47,7 @@ Alternatively, if `piral-litel` has not been added to the Piral instance you can
 
 ```ts
 import { PiletApi } from '<name-of-piral-instance>';
-import { fromLitel } from 'piral-litel';
+import { fromLitel } from 'piral-litel/convert';
 import './LitElPage';
 
 export function setup(piral: PiletApi) {
@@ -59,10 +59,9 @@ export function setup(piral: PiletApi) {
 
 ::: summary: For Piral instance developers
 
-Using LitElement with Piral is as simple as installing `piral-litel` and `lit-element`.
+Using LitElement with Piral is as simple as installing `piral-litel` and `lit-element@^2`.
 
 ```ts
-import 'lit-element';
 import { createLitElApi } from 'piral-litel';
 ```
 
@@ -80,11 +79,11 @@ The `lit-element` and `@webcomponents/webcomponentsjs` packages should be shared
 
 ```json
 {
-  "pilets": {
-    "externals": [
-      "@webcomponents/webcomponentsjs",
-      "lit-element"
-    ]
+  "importmap": {
+    "imports": {
+      "@webcomponents/webcomponentsjs": "",
+      "lit-element": ""
+    }
   }
 }
 ```

package/convert.d.ts

@@ -1,9 +1,18 @@
-import type { HtmlComponent } from 'piral-core';
-import { createExtension } from './lib/extension';
-declare const convert: <TProps extends import("piral-core").BaseComponentProps>(elementName: string) => import("piral-core").ForeignComponent<TProps>;
+import { createConverter } from './esm/converter';
+export interface HtmlComponent<TProps> {
+    component: {
+        mount(element: HTMLElement, props: TProps, ctx: any, locals: any): void;
+        update?(element: HTMLElement, props: TProps, ctx: any, locals: any): void;
+        unmount?(element: HTMLElement, locals: any): void;
+    };
+    type: 'html';
+}
 export interface LitElConverter {
-    (...params: Parameters<typeof convert>): HtmlComponent<any>;
+    (...params: Parameters<ReturnType<typeof createConverter>>): HtmlComponent<any>;
 }
-export declare const fromLitEl: LitElConverter;
-export declare const createLitElExtension: typeof createExtension;
-export {};
+export declare function createLitElConverter(...params: Parameters<typeof createConverter>): {
+    from: LitElConverter;
+    Extension: string;
+};
+declare const fromLitEl: LitElConverter, LitElExtension: string;
+export { fromLitEl, LitElExtension };

package/convert.js

@@ -1,11 +1,16 @@
-"use strict";
-exports.__esModule = true;
-exports.createLitElExtension = exports.fromLitEl = void 0;
-var converter_1 = require("./lib/converter");
-var extension_1 = require("./lib/extension");
-var convert = converter_1.createConverter();
-exports.fromLitEl = function (elementName) { return ({
-    type: 'html',
-    component: convert(elementName)
-}); };
-exports.createLitElExtension = extension_1.createExtension;
+import { createConverter } from './esm/converter';
+export function createLitElConverter() {
+    var params = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        params[_i] = arguments[_i];
+    }
+    var convert = createConverter.apply(void 0, params);
+    var Extension = convert.Extension;
+    var from = function (elementName) { return ({
+        type: 'html',
+        component: convert(elementName),
+    }); };
+    return { from: from, Extension: Extension };
+}
+var _a = createLitElConverter(), fromLitEl = _a.from, LitElExtension = _a.Extension;
+export { fromLitEl, LitElExtension };

package/esm/converter.d.ts

@@ -0,0 +1,12 @@
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+export interface LitElConverterOptions {
+    /**
+     * Defines the name of the extension component.
+     * @default litel-extension
+     */
+    selector?: string;
+}
+export declare function createConverter(config?: LitElConverterOptions): {
+    <TProps extends BaseComponentProps>(elementName: string): ForeignComponent<TProps>;
+    Extension: string;
+};

package/esm/converter.js

@@ -0,0 +1,30 @@
+import { createExtension } from './extension';
+export function createConverter(config = {}) {
+    const { selector = 'litel-extension' } = config;
+    const Extension = createExtension(selector);
+    const convert = (elementName) => ({
+        mount(parent, data, ctx) {
+            const { piral } = data;
+            const el = parent.appendChild(document.createElement(elementName));
+            el.setAttribute('props', JSON.stringify(data));
+            el.setAttribute('ctx', JSON.stringify(ctx));
+            el.shadowRoot.addEventListener('render-html', (ev) => {
+                ev.stopPropagation();
+                piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
+            }, false);
+        },
+        update(parent, data, ctx) {
+            const el = parent.querySelector(elementName);
+            if (el) {
+                el.setAttribute('props', JSON.stringify(data));
+                el.setAttribute('ctx', JSON.stringify(ctx));
+            }
+        },
+        unmount(el) {
+            el.innerHTML = '';
+        },
+    });
+    convert.Extension = Extension;
+    return convert;
+}
+//# sourceMappingURL=converter.js.map

package/esm/converter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAU9C,MAAM,UAAU,eAAe,CAAC,SAAgC,EAAE;IAChE,MAAM,EAAE,QAAQ,GAAG,iBAAiB,EAAE,GAAG,MAAM,CAAC;IAChD,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAoC,WAAmB,EAA4B,EAAE,CAAC,CAAC;QACrG,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG;YACrB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;YACvB,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;YACnE,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;YAC/C,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;YAC5C,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAC5B,aAAa,EACb,CAAC,EAAe,EAAE,EAAE;gBAClB,EAAE,CAAC,eAAe,EAAE,CAAC;gBACrB,KAAK,CAAC,mBAAmB,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC/D,CAAC,EACD,KAAK,CACN,CAAC;QACJ,CAAC;QACD,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG;YACtB,MAAM,EAAE,GAAG,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;YAE7C,IAAI,EAAE,EAAE;gBACN,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC/C,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;aAC7C;QACH,CAAC;QACD,OAAO,CAAC,EAAE;YACR,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;QACpB,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/esm/create.d.ts

@@ -0,0 +1,11 @@
+import type { PiralPlugin } from 'piral-core';
+import type { PiletLitElApi } from './types';
+/**
+ * Available configuration options for the LitElement plugin.
+ */
+export interface LitElConfig {
+}
+/**
+ * Creates new Pilet API extensions for integration of LitElement.
+ */
+export declare function createLitElApi(config?: LitElConfig): PiralPlugin<PiletLitElApi>;

package/esm/create.js

@@ -0,0 +1,20 @@
+import { createConverter } from './converter';
+/**
+ * Creates new Pilet API extensions for integration of LitElement.
+ */
+export function createLitElApi(config = {}) {
+    return (context) => {
+        const convert = createConverter(config);
+        context.converters.litel = ({ elementName }) => convert(elementName);
+        return {
+            fromLitEl(elementName) {
+                return {
+                    type: 'litel',
+                    elementName,
+                };
+            },
+            LitElExtension: convert.Extension,
+        };
+    };
+}
+//# sourceMappingURL=create.js.map

package/esm/create.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAQ9C;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,SAAsB,EAAE;IACrD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAErE,OAAO;YACL,SAAS,CAAC,WAAW;gBACnB,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,WAAW;iBACZ,CAAC;YACJ,CAAC;YACD,cAAc,EAAE,OAAO,CAAC,SAAS;SAClC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/esm/extension.d.ts

@@ -0,0 +1 @@
+export declare function createExtension(selector: string): string;

package/esm/extension.js

@@ -0,0 +1,44 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, property, customElement } from 'lit-element';
+export function createExtension(selector) {
+    let LitElExtension = class LitElExtension extends LitElement {
+        render() {
+            return undefined;
+        }
+        updated() {
+            this.dispatchEvent(new CustomEvent('render-html', {
+                bubbles: true,
+                detail: {
+                    target: this.shadowRoot,
+                    props: {
+                        empty: this.onEmpty,
+                        render: this.onRender,
+                        params: this.params,
+                        name: this.name,
+                    },
+                },
+            }));
+        }
+    };
+    __decorate([
+        property(),
+        __metadata("design:type", String)
+    ], LitElExtension.prototype, "name", void 0);
+    __decorate([
+        property(),
+        __metadata("design:type", Object)
+    ], LitElExtension.prototype, "params", void 0);
+    __decorate([
+        property(),
+        __metadata("design:type", Function)
+    ], LitElExtension.prototype, "onEmpty", void 0);
+    __decorate([
+        property(),
+        __metadata("design:type", Function)
+    ], LitElExtension.prototype, "onRender", void 0);
+    LitElExtension = __decorate([
+        customElement(selector)
+    ], LitElExtension);
+    return selector;
+}
+//# sourceMappingURL=extension.js.map

package/esm/extension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAElE,MAAM,UAAU,eAAe,CAAC,QAAgB;IAE9C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;QAMrC,MAAM;YACJ,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO;YACL,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE;oBACN,MAAM,EAAE,IAAI,CAAC,UAAU;oBACvB,KAAK,EAAE;wBACL,KAAK,EAAE,IAAI,CAAC,OAAO;wBACnB,MAAM,EAAE,IAAI,CAAC,QAAQ;wBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;wBACnB,IAAI,EAAE,IAAI,CAAC,IAAI;qBAChB;iBACF;aACF,CAAC,CACH,CAAC;QACJ,CAAC;KACF,CAAA;IAzBa;QAAX,QAAQ,EAAE;;gDAAc;IACb;QAAX,QAAQ,EAAE;;kDAAa;IACZ;QAAX,QAAQ,EAAE;;mDAAoB;IACnB;QAAX,QAAQ,EAAE;;oDAAqB;IAJ5B,cAAc;QADnB,aAAa,CAAC,QAAQ,CAAC;OAClB,cAAc,CA0BnB;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC"}

package/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './create';
+export * from './types';

package/esm/index.js

@@ -0,0 +1,3 @@
+export * from './create';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/esm/types.d.ts

@@ -0,0 +1,33 @@
+import type { ForeignComponent } from 'piral-core';
+declare module 'piral-core/lib/types/custom' {
+    interface PiletCustomApi extends PiletLitElApi {
+    }
+    interface PiralCustomComponentConverters<TProps> {
+        litel(component: LitElComponent): ForeignComponent<TProps>;
+    }
+}
+export interface LitElComponent {
+    /**
+     * The name of the LitElement root component to render.
+     */
+    elementName: string;
+    /**
+     * The type of the LitElement component.
+     */
+    type: 'litel';
+}
+/**
+ * Defines the provided set of LitElement Pilet API extensions.
+ */
+export interface PiletLitElApi {
+    /**
+     * Wraps a LitElement component for use in Piral.
+     * @param component The name of the root component.
+     * @returns The Piral LitElement component.
+     */
+    fromLitEl(elementName: string): LitElComponent;
+    /**
+     * Gets the name of the LitElement extension.
+     */
+    LitElExtension: string;
+}

package/esm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/esm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/lib/converter.d.ts

@@ -1,2 +1,12 @@
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
-export declare function createConverter(): <TProps extends BaseComponentProps>(elementName: string) => ForeignComponent<TProps>;
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+export interface LitElConverterOptions {
+    /**
+     * Defines the name of the extension component.
+     * @default litel-extension
+     */
+    selector?: string;
+}
+export declare function createConverter(config?: LitElConverterOptions): {
+    <TProps extends BaseComponentProps>(elementName: string): ForeignComponent<TProps>;
+    Extension: string;
+};

package/lib/converter.js

@@ -1,30 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createConverter = void 0;
-function createConverter() {
-    const convert = (elementName) => {
-        return {
-            mount(parent, data, ctx) {
-                const { piral } = data;
-                const el = parent.appendChild(document.createElement(elementName));
+const extension_1 = require("./extension");
+function createConverter(config = {}) {
+    const { selector = 'litel-extension' } = config;
+    const Extension = (0, extension_1.createExtension)(selector);
+    const convert = (elementName) => ({
+        mount(parent, data, ctx) {
+            const { piral } = data;
+            const el = parent.appendChild(document.createElement(elementName));
+            el.setAttribute('props', JSON.stringify(data));
+            el.setAttribute('ctx', JSON.stringify(ctx));
+            el.shadowRoot.addEventListener('render-html', (ev) => {
+                ev.stopPropagation();
+                piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
+            }, false);
+        },
+        update(parent, data, ctx) {
+            const el = parent.querySelector(elementName);
+            if (el) {
                 el.setAttribute('props', JSON.stringify(data));
                 el.setAttribute('ctx', JSON.stringify(ctx));
-                el.shadowRoot.addEventListener('render-html', (ev) => {
-                    piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
-                }, false);
-            },
-            update(parent, data, ctx) {
-                const el = parent.querySelector(elementName);
-                if (el) {
-                    el.setAttribute('props', JSON.stringify(data));
-                    el.setAttribute('ctx', JSON.stringify(ctx));
-                }
-            },
-            unmount(el) {
-                el.innerHTML = '';
-            },
-        };
-    };
+            }
+        },
+        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":";;;AAEA,SAAgB,eAAe;IAC7B,MAAM,OAAO,GAAG,CAAoC,WAAmB,EAA4B,EAAE;QACnG,OAAO;YACL,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG;gBACrB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;gBACvB,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;gBACnE,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC/C,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC5C,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAC5B,aAAa,EACb,CAAC,EAAe,EAAE,EAAE;oBAClB,KAAK,CAAC,mBAAmB,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC/D,CAAC,EACD,KAAK,CACN,CAAC;YACJ,CAAC;YACD,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG;gBACtB,MAAM,EAAE,GAAG,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;gBAE7C,IAAI,EAAE,EAAE;oBACN,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;oBAC/C,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;iBAC7C;YACH,CAAC;YACD,OAAO,CAAC,EAAE;gBACR,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC;AA9BD,0CA8BC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AACA,2CAA8C;AAU9C,SAAgB,eAAe,CAAC,SAAgC,EAAE;IAChE,MAAM,EAAE,QAAQ,GAAG,iBAAiB,EAAE,GAAG,MAAM,CAAC;IAChD,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAoC,WAAmB,EAA4B,EAAE,CAAC,CAAC;QACrG,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG;YACrB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;YACvB,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;YACnE,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;YAC/C,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;YAC5C,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAC5B,aAAa,EACb,CAAC,EAAe,EAAE,EAAE;gBAClB,EAAE,CAAC,eAAe,EAAE,CAAC;gBACrB,KAAK,CAAC,mBAAmB,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC/D,CAAC,EACD,KAAK,CACN,CAAC;QACJ,CAAC;QACD,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG;YACtB,MAAM,EAAE,GAAG,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;YAE7C,IAAI,EAAE,EAAE;gBACN,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC/C,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;aAC7C;QACH,CAAC;QACD,OAAO,CAAC,EAAE;YACR,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;QACpB,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC;AAhCD,0CAgCC"}

package/lib/create.d.ts

@@ -4,11 +4,6 @@ import type { PiletLitElApi } from './types';
  * Available configuration options for the LitElement plugin.
  */
 export interface LitElConfig {
-    /**
-     * Defines the name of the extension component.
-     * @default litel-extension
-     */
-    selector?: string;
 }
 /**
  * Creates new Pilet API extensions for integration of LitElement.

package/lib/create.js

@@ -2,16 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createLitElApi = void 0;
 const converter_1 = require("./converter");
-const extension_1 = require("./extension");
 /**
  * Creates new Pilet API extensions for integration of LitElement.
  */
 function createLitElApi(config = {}) {
-    const { selector } = config;
     return (context) => {
-        const convert = converter_1.createConverter();
+        const convert = (0, converter_1.createConverter)(config);
         context.converters.litel = ({ elementName }) => convert(elementName);
-        extension_1.createExtension(selector);
         return {
             fromLitEl(elementName) {
                 return {
@@ -19,7 +16,7 @@ function createLitElApi(config = {}) {
                     elementName,
                 };
             },
-            LitElExtension: selector,
+            LitElExtension: convert.Extension,
         };
     };
 }

package/lib/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,2CAA8C;AAC9C,2CAA8C;AAc9C;;GAEG;AACH,SAAgB,cAAc,CAAC,SAAsB,EAAE;IACrD,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAE5B,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,2BAAe,EAAE,CAAC;QAClC,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAErE,2BAAe,CAAC,QAAQ,CAAC,CAAC;QAE1B,OAAO;YACL,SAAS,CAAC,WAAW;gBACnB,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,WAAW;iBACZ,CAAC;YACJ,CAAC;YACD,cAAc,EAAE,QAAQ;SACzB,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAnBD,wCAmBC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,2CAA8C;AAQ9C;;GAEG;AACH,SAAgB,cAAc,CAAC,SAAsB,EAAE;IACrD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,IAAA,2BAAe,EAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAErE,OAAO;YACL,SAAS,CAAC,WAAW;gBACnB,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,WAAW;iBACZ,CAAC;YACJ,CAAC;YACD,cAAc,EAAE,OAAO,CAAC,SAAS;SAClC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAfD,wCAeC"}

package/lib/extension.d.ts

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

package/lib/extension.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createExtension = void 0;
 const tslib_1 = require("tslib");
 const lit_element_1 = require("lit-element");
-function createExtension(selector = 'litel-extension') {
+function createExtension(selector) {
     let LitElExtension = class LitElExtension extends lit_element_1.LitElement {
         render() {
             return undefined;
@@ -24,25 +24,25 @@ function createExtension(selector = 'litel-extension') {
         }
     };
     tslib_1.__decorate([
-        lit_element_1.property(),
+        (0, lit_element_1.property)(),
         tslib_1.__metadata("design:type", String)
     ], LitElExtension.prototype, "name", void 0);
     tslib_1.__decorate([
-        lit_element_1.property(),
+        (0, lit_element_1.property)(),
         tslib_1.__metadata("design:type", Object)
     ], LitElExtension.prototype, "params", void 0);
     tslib_1.__decorate([
-        lit_element_1.property(),
+        (0, lit_element_1.property)(),
         tslib_1.__metadata("design:type", Function)
     ], LitElExtension.prototype, "onEmpty", void 0);
     tslib_1.__decorate([
-        lit_element_1.property(),
+        (0, lit_element_1.property)(),
         tslib_1.__metadata("design:type", Function)
     ], LitElExtension.prototype, "onRender", void 0);
     LitElExtension = tslib_1.__decorate([
-        lit_element_1.customElement(selector)
+        (0, lit_element_1.customElement)(selector)
     ], LitElExtension);
-    return LitElExtension;
+    return selector;
 }
 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,6CAAkE;AAElE,SAAgB,eAAe,CAAC,QAAQ,GAAG,iBAAiB;IAE1D,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,wBAAU;QAMrC,MAAM;YACJ,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO;YACL,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE;oBACN,MAAM,EAAE,IAAI,CAAC,UAAU;oBACvB,KAAK,EAAE;wBACL,KAAK,EAAE,IAAI,CAAC,OAAO;wBACnB,MAAM,EAAE,IAAI,CAAC,QAAQ;wBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;wBACnB,IAAI,EAAE,IAAI,CAAC,IAAI;qBAChB;iBACF;aACF,CAAC,CACH,CAAC;QACJ,CAAC;KACF,CAAA;IAzBa;QAAX,sBAAQ,EAAE;;gDAAc;IACb;QAAX,sBAAQ,EAAE;;kDAAa;IACZ;QAAX,sBAAQ,EAAE;;mDAAoB;IACnB;QAAX,sBAAQ,EAAE;;oDAAqB;IAJ5B,cAAc;QADnB,2BAAa,CAAC,QAAQ,CAAC;OAClB,cAAc,CA0BnB;IAED,OAAO,cAAc,CAAC;AACxB,CAAC;AA/BD,0CA+BC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;;AAAA,6CAAkE;AAElE,SAAgB,eAAe,CAAC,QAAgB;IAE9C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,wBAAU;QAMrC,MAAM;YACJ,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO;YACL,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE;oBACN,MAAM,EAAE,IAAI,CAAC,UAAU;oBACvB,KAAK,EAAE;wBACL,KAAK,EAAE,IAAI,CAAC,OAAO;wBACnB,MAAM,EAAE,IAAI,CAAC,QAAQ;wBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;wBACnB,IAAI,EAAE,IAAI,CAAC,IAAI;qBAChB;iBACF;aACF,CAAC,CACH,CAAC;QACJ,CAAC;KACF,CAAA;IAzBa;QAAX,IAAA,sBAAQ,GAAE;;gDAAc;IACb;QAAX,IAAA,sBAAQ,GAAE;;kDAAa;IACZ;QAAX,IAAA,sBAAQ,GAAE;;mDAAoB;IACnB;QAAX,IAAA,sBAAQ,GAAE;;oDAAqB;IAJ5B,cAAc;QADnB,IAAA,2BAAa,EAAC,QAAQ,CAAC;OAClB,cAAc,CA0BnB;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC;AA/BD,0CA+BC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-litel",
-  "version": "1.0.0-pre.2091",
+  "version": "1.0.1-beta.5640",
   "description": "Plugin for integrating Lit-Element components in Piral.",
   "keywords": [
     "piral",
@@ -17,14 +17,35 @@
   "author": "smapiot",
   "homepage": "https://piral.io",
   "license": "MIT",
+  "module": "esm/index.js",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./lib/index.js"
+    },
+    "./convert": {
+      "import": "./convert.js"
+    },
+    "./esm/*": {
+      "import": "./esm/*"
+    },
+    "./lib/*": {
+      "require": "./lib/*"
+    },
+    "./_/*": {
+      "import": "./esm/*.js",
+      "require": "./lib/*.js"
+    },
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
   "files": [
+    "esm",
     "lib",
     "src",
     "convert.d.ts",
-    "convert.ts",
     "convert.js"
   ],
   "repository": {
@@ -35,17 +56,17 @@
     "url": "https://github.com/smapiot/piral/issues"
   },
   "scripts": {
-    "build": "tsc && tsc convert.ts --skipLibCheck --declaration",
+    "cleanup": "rimraf esm lib convert.d.ts convert.js",
+    "build": "yarn build:commonjs && yarn build:esnext && yarn build:convert",
+    "build:convert": "tsc convert.ts --skipLibCheck --declaration --module esnext",
+    "build:commonjs": "tsc --project tsconfig.json --outDir lib --module commonjs",
+    "build:esnext": "tsc --project tsconfig.json --outDir esm --module esnext",
     "typedoc": "typedoc --json ../../../docs/types/piral-litel.json src --exclude \"src/**/*.test.*\"",
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
     "lit-element": "^2.2.1",
-    "piral-core": "^1.0.0-pre.2091"
-  },
-  "peerDependencies": {
-    "lit-element": "^2.0.0",
-    "piral-core": "1.x"
+    "piral-core": "1.0.1-beta.5640"
   },
-  "gitHead": "e8c2565deac87446ebb9a376d5026a51bc6b5ff2"
+  "gitHead": "fa0a72b28fd0a20afec7ef491ec19e93c090fc72"
 }

package/src/converter.ts

@@ -1,33 +1,44 @@
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import { createExtension } from './extension';
 
-export function createConverter() {
-  const convert = <TProps extends BaseComponentProps>(elementName: string): ForeignComponent<TProps> => {
-    return {
-      mount(parent, data, ctx) {
-        const { piral } = data;
-        const el = parent.appendChild(document.createElement(elementName));
+export interface LitElConverterOptions {
+  /**
+   * Defines the name of the extension component.
+   * @default litel-extension
+   */
+  selector?: string;
+}
+
+export function createConverter(config: LitElConverterOptions = {}) {
+  const { selector = 'litel-extension' } = config;
+  const Extension = createExtension(selector);
+  const convert = <TProps extends BaseComponentProps>(elementName: string): ForeignComponent<TProps> => ({
+    mount(parent, data, ctx) {
+      const { piral } = data;
+      const el = parent.appendChild(document.createElement(elementName));
+      el.setAttribute('props', JSON.stringify(data));
+      el.setAttribute('ctx', JSON.stringify(ctx));
+      el.shadowRoot.addEventListener(
+        'render-html',
+        (ev: CustomEvent) => {
+          ev.stopPropagation();
+          piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
+        },
+        false,
+      );
+    },
+    update(parent, data, ctx) {
+      const el = parent.querySelector(elementName);
+
+      if (el) {
         el.setAttribute('props', JSON.stringify(data));
         el.setAttribute('ctx', JSON.stringify(ctx));
-        el.shadowRoot.addEventListener(
-          'render-html',
-          (ev: CustomEvent) => {
-            piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
-          },
-          false,
-        );
-      },
-      update(parent, data, ctx) {
-        const el = parent.querySelector(elementName);
-
-        if (el) {
-          el.setAttribute('props', JSON.stringify(data));
-          el.setAttribute('ctx', JSON.stringify(ctx));
-        }
-      },
-      unmount(el) {
-        el.innerHTML = '';
-      },
-    };
-  };
+      }
+    },
+    unmount(el) {
+      el.innerHTML = '';
+    },
+  });
+  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 type { PiletLitElApi } from './types';
 
 /**
  * Available configuration options for the LitElement plugin.
  */
-export interface LitElConfig {
-  /**
-   * Defines the name of the extension component.
-   * @default litel-extension
-   */
-  selector?: string;
-}
+export interface LitElConfig {}
 
 /**
  * Creates new Pilet API extensions for integration of LitElement.
  */
 export function createLitElApi(config: LitElConfig = {}): PiralPlugin<PiletLitElApi> {
-  const { selector } = config;
-
   return (context) => {
-    const convert = createConverter();
+    const convert = createConverter(config);
     context.converters.litel = ({ elementName }) => convert(elementName);
 
-    createExtension(selector);
-
     return {
       fromLitEl(elementName) {
         return {
@@ -33,7 +22,7 @@ export function createLitElApi(config: LitElConfig = {}): PiralPlugin<PiletLitEl
           elementName,
         };
       },
-      LitElExtension: selector,
+      LitElExtension: convert.Extension,
     };
   };
 }

package/src/extension.ts

@@ -1,6 +1,6 @@
 import { LitElement, property, customElement } from 'lit-element';
 
-export function createExtension(selector = 'litel-extension'): any {
+export function createExtension(selector: string) {
   @customElement(selector)
   class LitElExtension extends LitElement {
     @property() name: string;
@@ -30,5 +30,5 @@ export function createExtension(selector = 'litel-extension'): any {
     }
   }
 
-  return LitElExtension;
+  return selector;
 }

package/convert.ts

@@ -1,16 +0,0 @@
-import type { HtmlComponent } from 'piral-core';
-import { createConverter } from './lib/converter';
-import { createExtension } from './lib/extension';
-
-const convert = createConverter();
-
-export interface LitElConverter {
-  (...params: Parameters<typeof convert>): HtmlComponent<any>;
-}
-
-export const fromLitEl: LitElConverter = (elementName) => ({
-  type: 'html',
-  component: convert(elementName),
-});
-
-export const createLitElExtension = createExtension;