piral-svelte 1.0.0-pre.2137 → 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 Svelte](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-svelte.svg?style=flat)](https://www.npmjs.com/package/piral-svelte) [![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 Svelte](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-svelte.svg?style=flat)](https://www.npmjs.com/package/piral-svelte) [![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-svelte` 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 has no peer dependencies. What `piral-svelte` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
 
 The set includes a Svelte converter for any component registration, as well as a `fromSvelte` shortcut together with a `svelte-extension` web component.
 
@@ -43,7 +43,7 @@ Alternatively, if `piral-svelte` has not been added to the Piral instance you ca
 
 ```ts
 import { PiletApi } from '<name-of-piral-instance>';
-import { fromSvelte } from 'piral-svelte';
+import { fromSvelte } from 'piral-svelte/convert';
 import SveltePage from './Page.svelte';
 
 export function setup(piral: PiletApi) {
@@ -51,6 +51,67 @@ export function setup(piral: PiletApi) {
 }
 ```
 
+How you built your Svelte-pilet is up to you. If you use Webpack then the bundler options such as `piral-cli-webpack` or `piral-cli-webpack5` can be leveraged. In these cases you'd need to install the `svelte-loader` package and create a custom *webpack.config.js*:
+
+```sh
+npm i svelte-loader --save-dev
+```
+
+The Webpack configuration can be rather simplistic, as shown on the [svelte-loader readme](https://github.com/sveltejs/svelte-loader). In many cases you can use the convenience `extend-webpack` module.
+
+This is how your *webpack.config.js* can look like with the convenience module:
+
+```js
+const extendWebpack = require('piral-svelte/extend-webpack');
+
+module.exports = extendWebpack({});
+```
+
+For using `piral-svelte/extend-webpack` you must have installed:
+
+- `svelte-loader`
+- `webpack`, e.g., via `piral-cli-webpack5`
+
+You can do that via:
+
+```sh
+npm i svelte-loader piral-cli-webpack5 --save-dev
+```
+
+The available options for `piral-svelte/extend-webpack` are the same as for the options of the `svelte-loader`, e.g.:
+
+```js
+const extendWebpack = require('piral-svelte/extend-webpack');
+
+module.exports = extendWebpack({
+  emitCss: false,
+  compilerOptions: {
+    css: false,
+  },
+});
+```
+
+You can also customize the options even more:
+
+```js
+const extendWebpack = require('piral-svelte/extend-webpack');
+
+const applySvelte = extendWebpack({
+  emitCss: false,
+  compilerOptions: {
+    css: false,
+  },
+});
+
+module.exports = config => {
+  config = applySvelte(config);
+
+  // your changes to config
+
+  return config;
+};
+```
+
 :::
 
 ::: summary: For Piral instance developers
@@ -113,7 +174,7 @@ For Svelte to work the Svelte compiler and the associated Parcel plugin need to
 npm i svelte parcel-plugin-svelte --save-dev
 ```
 
-Furthermore, since Svelte distributes its source code as ES6 we need to change the browserlist setting in the *package.json* of the pilet:
+Furthermore, since Svelte distributes its source code as ES6 we need to change the `browserslist` setting in the *package.json* of the pilet:
 
 ```json
 {

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>(Component: import("./lib/types").SvelteModule<TProps>, captured?: Record<string, any>) => 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 SvelteConverter {
-    (...params: Parameters<typeof convert>): HtmlComponent<any>;
+    (...params: Parameters<ReturnType<typeof createConverter>>): HtmlComponent<any>;
 }
-export declare const fromSvelte: SvelteConverter;
-export declare const createSvelteExtension: typeof createExtension;
-export {};
+export declare function createSvelteConverter(...params: Parameters<typeof createConverter>): {
+    from: SvelteConverter;
+    Extension: string;
+};
+declare const fromSvelte: SvelteConverter, SvelteExtension: string;
+export { fromSvelte, SvelteExtension };

package/convert.js

@@ -1,11 +1,16 @@
-"use strict";
-exports.__esModule = true;
-exports.createSvelteExtension = exports.fromSvelte = void 0;
-var converter_1 = require("./lib/converter");
-var extension_1 = require("./lib/extension");
-var convert = converter_1.createConverter();
-exports.fromSvelte = function (Component, captured) { return ({
-    type: 'html',
-    component: convert(Component, captured)
-}); };
-exports.createSvelteExtension = extension_1.createExtension;
+import { createConverter } from './esm/converter';
+export function createSvelteConverter() {
+    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 (Component, captured) { return ({
+        type: 'html',
+        component: convert(Component, captured),
+    }); };
+    return { from: from, Extension: Extension };
+}
+var _a = createSvelteConverter(), fromSvelte = _a.from, SvelteExtension = _a.Extension;
+export { fromSvelte, SvelteExtension };

package/esm/converter.d.ts

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

package/esm/converter.js

@@ -1,30 +1,26 @@
-import { __assign } from "tslib";
-export function createConverter() {
-    var convert = function (Component, captured) {
-        var instance = undefined;
-        return {
-            mount: function (parent, data, ctx) {
-                parent.addEventListener('render-html', function (ev) {
-                    var piral = data.piral;
-                    piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
-                }, false);
-                instance = new Component({
-                    target: parent,
-                    props: __assign(__assign(__assign({}, captured), ctx), data),
-                });
-            },
-            update: function (_, data) {
-                Object.keys(data).forEach(function (key) {
-                    instance[key] = data[key];
-                });
-            },
-            unmount: function (el) {
-                instance.$destroy();
-                instance = undefined;
-                el.innerHTML = '';
-            },
-        };
-    };
+import { createExtension } from './extension';
+export function createConverter(config = {}) {
+    const { selector = 'svelte-extension' } = config;
+    const Extension = createExtension(selector);
+    const convert = (Component, captured) => ({
+        mount(parent, data, ctx, locals) {
+            locals.instance = new Component({
+                target: parent,
+                props: Object.assign(Object.assign(Object.assign({}, captured), ctx), data),
+            });
+        },
+        update(el, data, ctx, locals) {
+            Object.keys(data).forEach((key) => {
+                locals.instance[key] = data[key];
+            });
+        },
+        unmount(el, locals) {
+            locals.instance.$destroy();
+            locals.instance = undefined;
+            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,SAA+B,EAC/B,QAA8B;QAE9B,IAAI,QAAQ,GAAiC,SAAS,CAAC;QAEvD,OAAO;YACL,KAAK,EAAL,UAAM,MAAM,EAAE,IAAI,EAAE,GAAG;gBACrB,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,QAAQ,GAAG,IAAI,SAAS,CAAC;oBACvB,MAAM,EAAE,MAAM;oBACd,KAAK,iCACA,QAAQ,GACR,GAAG,GACH,IAAI,CACR;iBACF,CAAC,CAAC;YACL,CAAC;YACD,MAAM,YAAC,CAAC,EAAE,IAAI;gBACZ,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,UAAC,GAAG;oBAC5B,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;gBAC5B,CAAC,CAAC,CAAC;YACL,CAAC;YACD,OAAO,YAAC,EAAE;gBACR,QAAQ,CAAC,QAAQ,EAAE,CAAC;gBACpB,QAAQ,GAAG,SAAS,CAAC;gBACrB,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;AAe9C,MAAM,UAAU,eAAe,CAAC,SAAiC,EAAE;IACjE,MAAM,EAAE,QAAQ,GAAG,kBAAkB,EAAE,GAAG,MAAM,CAAC;IACjD,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CACd,SAA+B,EAC/B,QAA8B,EACJ,EAAE,CAAC,CAAC;QAC9B,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAmB;YAC1C,MAAM,CAAC,QAAQ,GAAG,IAAI,SAAS,CAAC;gBAC9B,MAAM,EAAE,MAAM;gBACd,KAAK,gDACA,QAAQ,GACR,GAAG,GACH,IAAI,CACR;aACF,CAAC,CAAC;QACL,CAAC;QACD,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,MAAmB;YACvC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBAChC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;YACnC,CAAC,CAAC,CAAC;QACL,CAAC;QACD,OAAO,CAAC,EAAE,EAAE,MAAmB;YAC7B,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;YAC3B,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC;YAC5B,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

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

package/esm/create.js

@@ -1,27 +1,20 @@
 import { createConverter } from './converter';
-import { createExtension } from './extension';
 /**
  * Creates new Pilet API extensions for integration of Svelte.
  */
-export function createSvelteApi(config) {
-    if (config === void 0) { config = {}; }
-    var selector = config.selector;
-    return function (context) {
-        var convert = createConverter();
-        context.converters.svelte = function (_a) {
-            var Component = _a.Component, captured = _a.captured;
-            return convert(Component, captured);
-        };
-        createExtension(selector);
+export function createSvelteApi(config = {}) {
+    return (context) => {
+        const convert = createConverter(config);
+        context.converters.svelte = ({ Component, captured }) => convert(Component, captured);
         return {
-            fromSvelte: function (Component, captured) {
+            fromSvelte(Component, captured) {
                 return {
                     type: 'svelte',
-                    Component: Component,
-                    captured: captured,
+                    Component,
+                    captured,
                 };
             },
-            SvelteExtension: selector,
+            SvelteExtension: 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,eAAe,CAAC,MAAyB;IAAzB,uBAAA,EAAA,WAAyB;IAC/C,IAAA,QAAQ,GAAK,MAAM,SAAX,CAAY;IAE5B,OAAO,UAAC,OAAO;QACb,IAAM,OAAO,GAAG,eAAe,EAAE,CAAC;QAClC,OAAO,CAAC,UAAU,CAAC,MAAM,GAAG,UAAC,EAAuB;gBAArB,SAAS,eAAA,EAAE,QAAQ,cAAA;YAAO,OAAA,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC;QAA5B,CAA4B,CAAC;QAEtF,eAAe,CAAC,QAAQ,CAAC,CAAC;QAE1B,OAAO;YACL,UAAU,YAAC,SAAS,EAAE,QAAQ;gBAC5B,OAAO;oBACL,IAAI,EAAE,QAAQ;oBACd,SAAS,WAAA;oBACT,QAAQ,UAAA;iBACT,CAAC;YACJ,CAAC;YACD,eAAe,EAAE,QAAQ;SAC1B,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAA0B,MAAM,aAAa,CAAC;AAQtE;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,SAAuB,EAAE;IACvD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAEtF,OAAO;YACL,UAAU,CAAC,SAAS,EAAE,QAAQ;gBAC5B,OAAO;oBACL,IAAI,EAAE,QAAQ;oBACd,SAAS;oBACT,QAAQ;iBACT,CAAC;YACJ,CAAC;YACD,eAAe,EAAE,OAAO,CAAC,SAAS;SACnC,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 = 'svelte-extension'; }
-    if ('customElements' in window) {
-        var SvelteExtension = /** @class */ (function (_super) {
-            __extends(SvelteExtension, _super);
-            function SvelteExtension() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            SvelteExtension.prototype.connectedCallback = function () {
-                if (this.isConnected) {
-                    this.dispatchEvent(new CustomEvent('render-html', {
-                        bubbles: true,
-                        detail: {
-                            target: this,
-                            props: {
-                                name: this.getAttribute('name'),
-                            },
-                        },
-                    }));
-                }
-            };
-            return SvelteExtension;
-        }(HTMLElement));
-        customElements.define(selector, SvelteExtension);
+    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,QAA6B;IAA7B,yBAAA,EAAA,6BAA6B;IAC3D,IAAI,gBAAgB,IAAI,MAAM,EAAE;QAC9B;YAA8B,mCAAW;YAAzC;;YAgBA,CAAC;YAfC,2CAAiB,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,sBAAC;QAAD,CAAC,AAhBD,CAA8B,WAAW,GAgBxC;QAED,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;KAClD;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/esm/types.d.ts

@@ -10,7 +10,7 @@ export interface SvelteOptions<TProps> {
     target: Element;
     props: TProps;
 }
-export declare type SvelteComponentInstance<TProps> = TProps & {
+export type SvelteComponentInstance<TProps> = TProps & {
     $destroy(): void;
 };
 export interface SvelteModule<TProps> {

package/extend-webpack.js

@@ -0,0 +1,72 @@
+const { resolve } = require('path');
+
+const svelteLoader = require.resolve('svelte-loader');
+
+module.exports =
+  (options = {}) =>
+  (config) => {
+    if (!config.resolve.alias) {
+      config.resolve.alias = {};
+    }
+
+    if (!config.resolve.extensions) {
+      config.resolve.extensions = ['.mjs', '.js'];
+    }
+
+    if (!config.resolve.mainFields) {
+      config.resolve.mainFields = ['browser', 'module', 'main'];
+    }
+
+    if (!config.resolve.conditionNames) {
+      config.resolve.conditionNames = ['import', 'module', 'require', 'node'];
+    }
+
+    config.resolve.alias.svelte = resolve('node_modules', 'svelte');
+    config.resolve.extensions.push('.svelte');
+    config.resolve.mainFields.unshift('svelte');
+    config.resolve.conditionNames.push('svelte');
+
+    function findRule(tester, changer) {
+      config.module.rules.forEach((rule) => {
+        if (rule.oneOf) {
+          rule.oneOf.forEach((r) => {
+            if (r.test && tester(r)) {
+              changer(r, rule.oneOf);
+            }
+          });
+        } else if (rule.test && tester(rule)) {
+          changer(rule, config.module.rules);
+        }
+      });
+    }
+
+    findRule(
+      (m) => m.test && m.test.toString() === /\.tsx?$/i.toString(),
+      (m, all) => {
+        const ruleIndex = all.indexOf(m);
+
+        all.splice(
+          ruleIndex,
+          0,
+          {
+            test: /\.(html|svelte)$/,
+            use: {
+              loader: svelteLoader,
+              options: {
+                emitCss: true,
+                ...options,
+              },
+            },
+          },
+          {
+            test: /node_modules\/svelte\/.*\.mjs$/,
+            resolve: {
+              fullySpecified: false,
+            },
+          },
+        );
+      },
+    );
+
+    return config;
+  };

package/lib/converter.d.ts

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

package/lib/converter.js

@@ -1,33 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createConverter = void 0;
-var tslib_1 = require("tslib");
-function createConverter() {
-    var convert = function (Component, captured) {
-        var instance = undefined;
-        return {
-            mount: function (parent, data, ctx) {
-                parent.addEventListener('render-html', function (ev) {
-                    var piral = data.piral;
-                    piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
-                }, false);
-                instance = new Component({
-                    target: parent,
-                    props: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, captured), ctx), data),
-                });
-            },
-            update: function (_, data) {
-                Object.keys(data).forEach(function (key) {
-                    instance[key] = data[key];
-                });
-            },
-            unmount: function (el) {
-                instance.$destroy();
-                instance = undefined;
-                el.innerHTML = '';
-            },
-        };
-    };
+const extension_1 = require("./extension");
+function createConverter(config = {}) {
+    const { selector = 'svelte-extension' } = config;
+    const Extension = (0, extension_1.createExtension)(selector);
+    const convert = (Component, captured) => ({
+        mount(parent, data, ctx, locals) {
+            locals.instance = new Component({
+                target: parent,
+                props: Object.assign(Object.assign(Object.assign({}, captured), ctx), data),
+            });
+        },
+        update(el, data, ctx, locals) {
+            Object.keys(data).forEach((key) => {
+                locals.instance[key] = data[key];
+            });
+        },
+        unmount(el, locals) {
+            locals.instance.$destroy();
+            locals.instance = undefined;
+            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,SAA+B,EAC/B,QAA8B;QAE9B,IAAI,QAAQ,GAAiC,SAAS,CAAC;QAEvD,OAAO;YACL,KAAK,EAAL,UAAM,MAAM,EAAE,IAAI,EAAE,GAAG;gBACrB,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,QAAQ,GAAG,IAAI,SAAS,CAAC;oBACvB,MAAM,EAAE,MAAM;oBACd,KAAK,yDACA,QAAQ,GACR,GAAG,GACH,IAAI,CACR;iBACF,CAAC,CAAC;YACL,CAAC;YACD,MAAM,YAAC,CAAC,EAAE,IAAI;gBACZ,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,UAAC,GAAG;oBAC5B,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;gBAC5B,CAAC,CAAC,CAAC;YACL,CAAC;YACD,OAAO,YAAC,EAAE;gBACR,QAAQ,CAAC,QAAQ,EAAE,CAAC;gBACpB,QAAQ,GAAG,SAAS,CAAC;gBACrB,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC;AAvCD,0CAuCC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AACA,2CAA8C;AAe9C,SAAgB,eAAe,CAAC,SAAiC,EAAE;IACjE,MAAM,EAAE,QAAQ,GAAG,kBAAkB,EAAE,GAAG,MAAM,CAAC;IACjD,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CACd,SAA+B,EAC/B,QAA8B,EACJ,EAAE,CAAC,CAAC;QAC9B,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAmB;YAC1C,MAAM,CAAC,QAAQ,GAAG,IAAI,SAAS,CAAC;gBAC9B,MAAM,EAAE,MAAM;gBACd,KAAK,gDACA,QAAQ,GACR,GAAG,GACH,IAAI,CACR;aACF,CAAC,CAAC;QACL,CAAC;QACD,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,MAAmB;YACvC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBAChC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;YACnC,CAAC,CAAC,CAAC;QACL,CAAC;QACD,OAAO,CAAC,EAAE,EAAE,MAAmB;YAC7B,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;YAC3B,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC;YAC5B,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;QACpB,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC;AA9BD,0CA8BC"}

package/lib/create.d.ts

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

package/lib/create.js

@@ -1,30 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createSvelteApi = 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 Svelte.
  */
-function createSvelteApi(config) {
-    if (config === void 0) { config = {}; }
-    var selector = config.selector;
-    return function (context) {
-        var convert = converter_1.createConverter();
-        context.converters.svelte = function (_a) {
-            var Component = _a.Component, captured = _a.captured;
-            return convert(Component, captured);
-        };
-        extension_1.createExtension(selector);
+function createSvelteApi(config = {}) {
+    return (context) => {
+        const convert = (0, converter_1.createConverter)(config);
+        context.converters.svelte = ({ Component, captured }) => convert(Component, captured);
         return {
-            fromSvelte: function (Component, captured) {
+            fromSvelte(Component, captured) {
                 return {
                     type: 'svelte',
-                    Component: Component,
-                    captured: captured,
+                    Component,
+                    captured,
                 };
             },
-            SvelteExtension: selector,
+            SvelteExtension: 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,eAAe,CAAC,MAAyB;IAAzB,uBAAA,EAAA,WAAyB;IAC/C,IAAA,QAAQ,GAAK,MAAM,SAAX,CAAY;IAE5B,OAAO,UAAC,OAAO;QACb,IAAM,OAAO,GAAG,2BAAe,EAAE,CAAC;QAClC,OAAO,CAAC,UAAU,CAAC,MAAM,GAAG,UAAC,EAAuB;gBAArB,SAAS,eAAA,EAAE,QAAQ,cAAA;YAAO,OAAA,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC;QAA5B,CAA4B,CAAC;QAEtF,2BAAe,CAAC,QAAQ,CAAC,CAAC;QAE1B,OAAO;YACL,UAAU,YAAC,SAAS,EAAE,QAAQ;gBAC5B,OAAO;oBACL,IAAI,EAAE,QAAQ;oBACd,SAAS,WAAA;oBACT,QAAQ,UAAA;iBACT,CAAC;YACJ,CAAC;YACD,eAAe,EAAE,QAAQ;SAC1B,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AApBD,0CAoBC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":";;;AACA,2CAAsE;AAQtE;;GAEG;AACH,SAAgB,eAAe,CAAC,SAAuB,EAAE;IACvD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,IAAA,2BAAe,EAAC,MAAM,CAAC,CAAC;QACxC,OAAO,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAEtF,OAAO;YACL,UAAU,CAAC,SAAS,EAAE,QAAQ;gBAC5B,OAAO;oBACL,IAAI,EAAE,QAAQ;oBACd,SAAS;oBACT,QAAQ;iBACT,CAAC;YACJ,CAAC;YACD,eAAe,EAAE,OAAO,CAAC,SAAS;SACnC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAhBD,0CAgBC"}

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 = 'svelte-extension'; }
-    if ('customElements' in window) {
-        var SvelteExtension = /** @class */ (function (_super) {
-            tslib_1.__extends(SvelteExtension, _super);
-            function SvelteExtension() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            SvelteExtension.prototype.connectedCallback = function () {
-                if (this.isConnected) {
-                    this.dispatchEvent(new CustomEvent('render-html', {
-                        bubbles: true,
-                        detail: {
-                            target: this,
-                            props: {
-                                name: this.getAttribute('name'),
-                            },
-                        },
-                    }));
-                }
-            };
-            return SvelteExtension;
-        }(HTMLElement));
-        customElements.define(selector, SvelteExtension);
+    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,QAA6B;IAA7B,yBAAA,EAAA,6BAA6B;IAC3D,IAAI,gBAAgB,IAAI,MAAM,EAAE;QAC9B;YAA8B,2CAAW;YAAzC;;YAgBA,CAAC;YAfC,2CAAiB,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,sBAAC;QAAD,CAAC,AAhBD,CAA8B,WAAW,GAgBxC;QAED,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;KAClD;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");
+const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./create"), exports);
 tslib_1.__exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/lib/types.d.ts

@@ -10,7 +10,7 @@ export interface SvelteOptions<TProps> {
     target: Element;
     props: TProps;
 }
-export declare type SvelteComponentInstance<TProps> = TProps & {
+export type SvelteComponentInstance<TProps> = TProps & {
     $destroy(): void;
 };
 export interface SvelteModule<TProps> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-svelte",
-  "version": "1.0.0-pre.2137",
+  "version": "1.0.1-beta.5640",
   "description": "Plugin for integrating Svelte components in Piral.",
   "keywords": [
     "piral",
@@ -19,14 +19,37 @@
   "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"
+    },
+    "./extend-webpack": {
+      "require": "./extend-webpack.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"
+    "convert.js",
+    "extend-webpack.js"
   ],
   "repository": {
     "type": "git",
@@ -36,18 +59,16 @@
     "url": "https://github.com/smapiot/piral/issues"
   },
   "scripts": {
+    "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",
+    "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-svelte.json src --exclude \"src/**/*.test.*\"",
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "^1.0.0-pre.2137"
-  },
-  "peerDependencies": {
-    "piral-core": "1.x"
+    "piral-core": "1.0.1-beta.5640"
   },
-  "gitHead": "bebf402e81ae0511ff22439a5670d04bf5626b83"
+  "gitHead": "fa0a72b28fd0a20afec7ef491ec19e93c090fc72"
 }

package/src/converter.ts

@@ -1,43 +1,47 @@
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
-import { SvelteComponentInstance, SvelteModule } from './types';
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import { createExtension } from './extension';
+import type { SvelteComponentInstance, SvelteModule } from './types';
 
-export function createConverter() {
+export interface SvelteConverterOptions {
+  /**
+   * Defines the name of the extension component.
+   * @default svelte-extension
+   */
+  selector?: string;
+}
+
+interface SvelteState {
+  instance: SvelteComponentInstance<any>;
+}
+
+export function createConverter(config: SvelteConverterOptions = {}) {
+  const { selector = 'svelte-extension' } = config;
+  const Extension = createExtension(selector);
   const convert = <TProps extends BaseComponentProps>(
     Component: SvelteModule<TProps>,
     captured?: Record<string, any>,
-  ): ForeignComponent<TProps> => {
-    let instance: SvelteComponentInstance<any> = undefined;
-
-    return {
-      mount(parent, data, ctx) {
-        parent.addEventListener(
-          'render-html',
-          (ev: CustomEvent) => {
-            const { piral } = data;
-            piral.renderHtmlExtension(ev.detail.target, ev.detail.props);
-          },
-          false,
-        );
-        instance = new Component({
-          target: parent,
-          props: {
-            ...captured,
-            ...ctx,
-            ...data,
-          },
-        });
-      },
-      update(_, data) {
-        Object.keys(data).forEach((key) => {
-          instance[key] = data[key];
-        });
-      },
-      unmount(el) {
-        instance.$destroy();
-        instance = undefined;
-        el.innerHTML = '';
-      },
-    };
-  };
+  ): ForeignComponent<TProps> => ({
+    mount(parent, data, ctx, locals: SvelteState) {
+      locals.instance = new Component({
+        target: parent,
+        props: {
+          ...captured,
+          ...ctx,
+          ...data,
+        },
+      });
+    },
+    update(el, data, ctx, locals: SvelteState) {
+      Object.keys(data).forEach((key) => {
+        locals.instance[key] = data[key];
+      });
+    },
+    unmount(el, locals: SvelteState) {
+      locals.instance.$destroy();
+      locals.instance = undefined;
+      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 { createConverter, SvelteConverterOptions } from './converter';
 import type { PiletSvelteApi } from './types';
 
 /**
  * Available configuration options for the Svelte plugin.
  */
-export interface SvelteConfig {
-  /**
-   * Defines the name of the extension component.
-   * @default svelte-extension
-   */
-  selector?: string;
-}
+export interface SvelteConfig extends SvelteConverterOptions {}
 
 /**
  * Creates new Pilet API extensions for integration of Svelte.
  */
 export function createSvelteApi(config: SvelteConfig = {}): PiralPlugin<PiletSvelteApi> {
-  const { selector } = config;
-
   return (context) => {
-    const convert = createConverter();
+    const convert = createConverter(config);
     context.converters.svelte = ({ Component, captured }) => convert(Component, captured);
 
-    createExtension(selector);
-
     return {
       fromSvelte(Component, captured) {
         return {
@@ -34,7 +23,7 @@ export function createSvelteApi(config: SvelteConfig = {}): PiralPlugin<PiletSve
           captured,
         };
       },
-      SvelteExtension: selector,
+      SvelteExtension: convert.Extension,
     };
   };
 }

package/src/extension.ts

@@ -1,23 +1,11 @@
-export function createExtension(selector = 'svelte-extension') {
-  if ('customElements' in window) {
-    class SvelteExtension 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, SvelteExtension);
+  if ('customElements' in window && selector && selector !== defaultExtensionSelector) {
+    const ExtensionBase = customElements.get(defaultExtensionSelector);
+    class AliasExtension extends ExtensionBase {}
+    customElements.define(selector, AliasExtension);
   }
+
+  return selector || defaultExtensionSelector;
 }

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 SvelteConverter {
-  (...params: Parameters<typeof convert>): HtmlComponent<any>;
-}
-
-export const fromSvelte: SvelteConverter = (Component, captured) => ({
-  type: 'html',
-  component: convert(Component, captured),
-});
-
-export const createSvelteExtension = createExtension;