piral-preact 1.0.0-pre.2085 → 1.0.0

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 Preact](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-preact.svg?style=flat)](https://www.npmjs.com/package/piral-preact) [![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 Preact](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-preact.svg?style=flat)](https://www.npmjs.com/package/piral-preact) [![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-preact` 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 `preact`. What `piral-preact` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
 
 The set includes a Preact converter for any component registration, as well as a `fromPreact` shortcut and a `PreactExtension` component.
 
@@ -47,7 +47,7 @@ Alternatively, if `piral-preact` has not been added to the Piral instance you ca
 
 ```ts
 import { PiletApi } from '<name-of-piral-instance>';
-import { fromPreact } from 'piral-preact';
+import { fromPreact } from 'piral-preact/convert';
 import { PreactPage } from './PreactPage';
 
 export function setup(piral: PiletApi) {
@@ -62,7 +62,6 @@ export function setup(piral: PiletApi) {
 Using Preact with Piral is as simple as installing `piral-preact` and `preact`.
 
 ```ts
-import 'preact';
 import { createPreactApi } from 'piral-preact';
 ```
 
@@ -80,10 +79,10 @@ The `preact` package should be shared with the pilets via the *package.json*:
 
 ```json
 {
-  "pilets": {
-    "externals": [
-      "preact"
-    ]
+  "importmap": {
+    "imports": {
+      "preact": ""
+    }
   }
 }
 ```

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>(root: import("preact").ComponentType<TProps>) => 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 PreactConverter {
-    (...params: Parameters<typeof convert>): HtmlComponent<any>;
+    (...params: Parameters<ReturnType<typeof createConverter>>): HtmlComponent<any>;
 }
-export declare const fromPreact: PreactConverter;
-export declare const createPreactExtension: typeof createExtension;
-export {};
+export declare function createPreactConverter(...params: Parameters<typeof createConverter>): {
+    from: PreactConverter;
+    Extension: ComponentType<any>;
+};
+declare const fromPreact: PreactConverter, PreactExtension: ComponentType<any>;
+export { fromPreact, PreactExtension };

package/convert.js

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

package/esm/converter.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentType } from 'preact';
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+export interface PreactConverterOptions {
+    /**
+     * Defines the name of the root element.
+     * @default piral-slot
+     */
+    rootName?: string;
+}
+export declare function createConverter(config?: PreactConverterOptions): {
+    <TProps extends BaseComponentProps>(root: ComponentType<TProps>): ForeignComponent<TProps>;
+    Extension: ComponentType<import("piral-core").ExtensionSlotProps>;
+};

package/esm/converter.js

@@ -0,0 +1,20 @@
+import { mountPreact, unmountPreact } from './mount';
+import { createExtension } from './extension';
+export function createConverter(config = {}) {
+    const { rootName = 'piral-slot' } = config;
+    const Extension = createExtension(rootName);
+    const convert = (root) => ({
+        mount(el, props, ctx) {
+            mountPreact(el, root, props, ctx);
+        },
+        update(el, props, ctx) {
+            mountPreact(el, root, props, ctx);
+        },
+        unmount(el) {
+            unmountPreact(el);
+        },
+    });
+    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":"AAEA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAU9C,MAAM,UAAU,eAAe,CAAC,SAAiC,EAAE;IACjE,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,GAAG,MAAM,CAAC;IAC3C,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAoC,IAA2B,EAA4B,EAAE,CAAC,CAAC;QAC7G,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG;YAClB,WAAW,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;QACpC,CAAC;QACD,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG;YACnB,WAAW,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;QACpC,CAAC;QACD,OAAO,CAAC,EAAE;YACR,aAAa,CAAC,EAAE,CAAC,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,12 @@
+import type { PiralPlugin } from 'piral-core';
+import { PreactConverterOptions } from './converter';
+import type { PiletPreactApi } from './types';
+/**
+ * Available configuration options for the Preact plugin.
+ */
+export interface PreactConfig extends PreactConverterOptions {
+}
+/**
+ * Creates new Pilet API extensions for integrating Preact.
+ */
+export declare function createPreactApi(config?: PreactConfig): PiralPlugin<PiletPreactApi>;

package/esm/create.js

@@ -0,0 +1,20 @@
+import { createConverter } from './converter';
+/**
+ * Creates new Pilet API extensions for integrating Preact.
+ */
+export function createPreactApi(config = {}) {
+    return (context) => {
+        const convert = createConverter(config);
+        context.converters.preact = ({ root }) => convert(root);
+        return {
+            fromPreact(root) {
+                return {
+                    type: 'preact',
+                    root,
+                };
+            },
+            PreactExtension: 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,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,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAExD,OAAO;YACL,UAAU,CAAC,IAAI;gBACb,OAAO;oBACL,IAAI,EAAE,QAAQ;oBACd,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,eAAe,EAAE,OAAO,CAAC,SAAS;SACnC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/esm/extension.d.ts

@@ -0,0 +1,3 @@
+import type { ExtensionSlotProps } from 'piral-core';
+import { ComponentType } from 'preact';
+export declare function createExtension(rootName: string): ComponentType<ExtensionSlotProps>;

package/esm/extension.js

@@ -0,0 +1,53 @@
+import { Component, createElement } from 'preact';
+import { anyPropType } from './mount';
+function compareObjects(a, b) {
+    for (const i in a) {
+        if (!(i in b)) {
+            return false;
+        }
+    }
+    for (const i in b) {
+        if (!compare(a[i], b[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+function compare(a, b) {
+    if (a !== b) {
+        const ta = typeof a;
+        const tb = typeof b;
+        if (ta === tb && ta === 'object' && a && b) {
+            return compareObjects(a, b);
+        }
+        return false;
+    }
+    return true;
+}
+export function createExtension(rootName) {
+    class PreactExtension extends Component {
+        constructor() {
+            super(...arguments);
+            this.onRefChange = (element) => setTimeout(() => {
+                if (element) {
+                    const { piral } = this.context;
+                    element.innerHTML = '';
+                    piral.renderHtmlExtension(element, this.props);
+                }
+            }, 0);
+        }
+        shouldComponentUpdate(nextProps) {
+            return !compare(this.props, nextProps);
+        }
+        render() {
+            return createElement(rootName, {
+                ref: this.onRefChange,
+            });
+        }
+    }
+    PreactExtension.contextTypes = {
+        piral: anyPropType,
+    };
+    return PreactExtension;
+}
+//# sourceMappingURL=extension.js.map

package/esm/extension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAiB,MAAM,QAAQ,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,SAAS,cAAc,CAAC,CAAM,EAAE,CAAM;IACpC,KAAK,MAAM,CAAC,IAAI,CAAC,EAAE;QACjB,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE;YACb,OAAO,KAAK,CAAC;SACd;KACF;IAED,KAAK,MAAM,CAAC,IAAI,CAAC,EAAE;QACjB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YACxB,OAAO,KAAK,CAAC;SACd;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,OAAO,CAAI,CAAI,EAAE,CAAI;IAC5B,IAAI,CAAC,KAAK,CAAC,EAAE;QACX,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC;QACpB,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC;QAEpB,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,EAAE;YAC1C,OAAO,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SAC7B;QAED,OAAO,KAAK,CAAC;KACd;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,QAAgB;IAC9C,MAAM,eAAgB,SAAQ,SAA6B;QAA3D;;YAKU,gBAAW,GAAG,CAAC,OAAY,EAAE,EAAE,CACrC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,OAAO,EAAE;oBACX,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;oBAC/B,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;oBACvB,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;iBAChD;YACH,CAAC,EAAE,CAAC,CAAC,CAAC;QAWV,CAAC;QATC,qBAAqB,CAAC,SAA6B;YACjD,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;QACzC,CAAC;QAED,MAAM;YACJ,OAAO,aAAa,CAAC,QAAQ,EAAE;gBAC7B,GAAG,EAAE,IAAI,CAAC,WAAW;aACtB,CAAC,CAAC;QACL,CAAC;;IArBM,4BAAY,GAAG;QACpB,KAAK,EAAE,WAAW;KACnB,AAFkB,CAEjB;IAsBJ,OAAO,eAAe,CAAC;AACzB,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/mount.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType } from 'preact';
+import type { BaseComponentProps } from 'piral-core';
+export declare const anyPropType: () => any;
+export declare function mountPreact<T extends BaseComponentProps>(el: HTMLElement, root: ComponentType<T>, props: T, ctx?: any): void;
+export declare function unmountPreact(el: HTMLElement): void;

package/esm/mount.js

@@ -0,0 +1,23 @@
+import { render, createElement, Component } from 'preact';
+// tslint:disable-next-line:no-null-keyword
+export const anyPropType = () => null;
+export function mountPreact(el, root, props, ctx = {}) {
+    const contextTypes = {};
+    ['piral', ...Object.keys(ctx)].forEach((key) => {
+        contextTypes[key] = anyPropType;
+    });
+    class Provider extends Component {
+        getChildContext() {
+            return Object.assign({ piral: props.piral }, ctx);
+        }
+        render() {
+            return this.props.children;
+        }
+    }
+    Provider.childContextTypes = contextTypes;
+    render(createElement(Provider, {}, createElement(root, props)), el);
+}
+export function unmountPreact(el) {
+    render('', el);
+}
+//# sourceMappingURL=mount.js.map

package/esm/mount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAiB,aAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGzE,2CAA2C;AAC3C,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;AAEtC,MAAM,UAAU,WAAW,CACzB,EAAe,EACf,IAAsB,EACtB,KAAQ,EACR,MAAW,EAAE;IAEb,MAAM,YAAY,GAAG,EAAE,CAAC;IAExB,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAC7C,YAAY,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,MAAM,QAAS,SAAQ,SAAS;QAG9B,eAAe;YACb,uBACE,KAAK,EAAE,KAAK,CAAC,KAAK,IACf,GAAG,EACN;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC7B,CAAC;;IAXM,0BAAiB,GAAG,YAAY,CAAC;IAc1C,MAAM,CAAC,aAAa,CAAC,QAAQ,EAAE,EAAE,EAAE,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AACtE,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAAe;IAC3C,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;AACjB,CAAC"}

package/esm/types.d.ts

@@ -0,0 +1,34 @@
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { ComponentType } from 'preact';
+declare module 'piral-core/lib/types/custom' {
+    interface PiletCustomApi extends PiletPreactApi {
+    }
+    interface PiralCustomComponentConverters<TProps> {
+        preact(component: PreactComponent<TProps>): ForeignComponent<TProps>;
+    }
+}
+export interface PreactComponent<TProps> {
+    /**
+     * The component root.
+     */
+    root: ComponentType<TProps>;
+    /**
+     * The type of the Preact component.
+     */
+    type: 'preact';
+}
+/**
+ * Defines the provided set of Preact Pilet API extensions.
+ */
+export interface PiletPreactApi {
+    /**
+     * Wraps an Preact component for use in Piral.
+     * @param component The component root.
+     * @returns The Piral Preact component.
+     */
+    fromPreact<TProps>(component: ComponentType<TProps>): PreactComponent<TProps>;
+    /**
+     * Preact component for displaying extensions of the given name.
+     */
+    PreactExtension: ComponentType<ExtensionSlotProps>;
+}

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,3 +1,13 @@
-import { ComponentType } from 'preact';
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
-export declare function createConverter(): <TProps extends BaseComponentProps>(root: ComponentType<TProps>) => ForeignComponent<TProps>;
+import type { ComponentType } from 'preact';
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+export interface PreactConverterOptions {
+    /**
+     * Defines the name of the root element.
+     * @default piral-slot
+     */
+    rootName?: string;
+}
+export declare function createConverter(config?: PreactConverterOptions): {
+    <TProps extends BaseComponentProps>(root: ComponentType<TProps>): ForeignComponent<TProps>;
+    Extension: ComponentType<import("piral-core").ExtensionSlotProps>;
+};

package/lib/converter.js

@@ -1,21 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createConverter = void 0;
-var mount_1 = require("./mount");
-function createConverter() {
-    var convert = function (root) {
-        return {
-            mount: function (el, props, ctx) {
-                mount_1.mountPreact(el, root, props, ctx);
-            },
-            update: function (el, props, ctx) {
-                mount_1.mountPreact(el, root, props, ctx);
-            },
-            unmount: function (el) {
-                mount_1.unmountPreact(el);
-            },
-        };
-    };
+const mount_1 = require("./mount");
+const extension_1 = require("./extension");
+function createConverter(config = {}) {
+    const { rootName = 'piral-slot' } = config;
+    const Extension = (0, extension_1.createExtension)(rootName);
+    const convert = (root) => ({
+        mount(el, props, ctx) {
+            (0, mount_1.mountPreact)(el, root, props, ctx);
+        },
+        update(el, props, ctx) {
+            (0, mount_1.mountPreact)(el, root, props, ctx);
+        },
+        unmount(el) {
+            (0, mount_1.unmountPreact)(el);
+        },
+    });
+    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,iCAAqD;AAErD,SAAgB,eAAe;IAC7B,IAAM,OAAO,GAAG,UAAoC,IAA2B;QAC7E,OAAO;YACL,KAAK,YAAC,EAAE,EAAE,KAAK,EAAE,GAAG;gBAClB,mBAAW,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;YACpC,CAAC;YACD,MAAM,YAAC,EAAE,EAAE,KAAK,EAAE,GAAG;gBACnB,mBAAW,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;YACpC,CAAC;YACD,OAAO,YAAC,EAAE;gBACR,qBAAa,CAAC,EAAE,CAAC,CAAC;YACpB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC;AAfD,0CAeC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AAEA,mCAAqD;AACrD,2CAA8C;AAU9C,SAAgB,eAAe,CAAC,SAAiC,EAAE;IACjE,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,GAAG,MAAM,CAAC;IAC3C,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAoC,IAA2B,EAA4B,EAAE,CAAC,CAAC;QAC7G,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG;YAClB,IAAA,mBAAW,EAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;QACpC,CAAC;QACD,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG;YACnB,IAAA,mBAAW,EAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;QACpC,CAAC;QACD,OAAO,CAAC,EAAE;YACR,IAAA,qBAAa,EAAC,EAAE,CAAC,CAAC;QACpB,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC;AAhBD,0CAgBC"}

package/lib/create.d.ts

@@ -1,14 +1,10 @@
 import type { PiralPlugin } from 'piral-core';
+import { PreactConverterOptions } from './converter';
 import type { PiletPreactApi } from './types';
 /**
  * Available configuration options for the Preact plugin.
  */
-export interface PreactConfig {
-    /**
-     * Defines the name of the root element.
-     * @default slot
-     */
-    rootName?: string;
+export interface PreactConfig extends PreactConverterOptions {
 }
 /**
  * Creates new Pilet API extensions for integrating Preact.

package/lib/create.js

@@ -1,28 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createPreactApi = void 0;
-var converter_1 = require("./converter");
-var extension_1 = require("./extension");
+const converter_1 = require("./converter");
 /**
  * Creates new Pilet API extensions for integrating Preact.
  */
-function createPreactApi(config) {
-    if (config === void 0) { config = {}; }
-    var rootName = config.rootName;
-    return function (context) {
-        var convert = converter_1.createConverter();
-        context.converters.preact = function (_a) {
-            var root = _a.root;
-            return convert(root);
-        };
+function createPreactApi(config = {}) {
+    return (context) => {
+        const convert = (0, converter_1.createConverter)(config);
+        context.converters.preact = ({ root }) => convert(root);
         return {
-            fromPreact: function (root) {
+            fromPreact(root) {
                 return {
                     type: 'preact',
-                    root: root,
+                    root,
                 };
             },
-            PreactExtension: extension_1.createExtension(rootName),
+            PreactExtension: 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,EAAQ;gBAAN,IAAI,UAAA;YAAO,OAAA,OAAO,CAAC,IAAI,CAAC;QAAb,CAAa,CAAC;QAExD,OAAO;YACL,UAAU,YAAC,IAAI;gBACb,OAAO;oBACL,IAAI,EAAE,QAAQ;oBACd,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;YACD,eAAe,EAAE,2BAAe,CAAC,QAAQ,CAAC;SAC3C,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAjBD,0CAiBC"}
+{"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,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAExD,OAAO;YACL,UAAU,CAAC,IAAI;gBACb,OAAO;oBACL,IAAI,EAAE,QAAQ;oBACd,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,eAAe,EAAE,OAAO,CAAC,SAAS;SACnC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAfD,0CAeC"}

package/lib/extension.d.ts

@@ -1,3 +1,3 @@
-import { ExtensionSlotProps } from 'piral-core';
+import type { ExtensionSlotProps } from 'piral-core';
 import { ComponentType } from 'preact';
-export declare function createExtension(rootName?: string): ComponentType<ExtensionSlotProps>;
+export declare function createExtension(rootName: string): ComponentType<ExtensionSlotProps>;

package/lib/extension.js

@@ -1,40 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createExtension = void 0;
-var tslib_1 = require("tslib");
-var piral_core_1 = require("piral-core");
-var preact_1 = require("preact");
-var mount_1 = require("./mount");
+const preact_1 = require("preact");
+const mount_1 = require("./mount");
+function compareObjects(a, b) {
+    for (const i in a) {
+        if (!(i in b)) {
+            return false;
+        }
+    }
+    for (const i in b) {
+        if (!compare(a[i], b[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+function compare(a, b) {
+    if (a !== b) {
+        const ta = typeof a;
+        const tb = typeof b;
+        if (ta === tb && ta === 'object' && a && b) {
+            return compareObjects(a, b);
+        }
+        return false;
+    }
+    return true;
+}
 function createExtension(rootName) {
-    if (rootName === void 0) { rootName = 'slot'; }
-    var PreactExtension = /** @class */ (function (_super) {
-        tslib_1.__extends(PreactExtension, _super);
-        function PreactExtension() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.onRefChange = function (element) {
-                return setTimeout(function () {
-                    if (element) {
-                        var piral = _this.context.piral;
-                        element.innerHTML = '';
-                        piral.renderHtmlExtension(element, _this.props);
-                    }
-                }, 0);
-            };
-            return _this;
+    class PreactExtension extends preact_1.Component {
+        constructor() {
+            super(...arguments);
+            this.onRefChange = (element) => setTimeout(() => {
+                if (element) {
+                    const { piral } = this.context;
+                    element.innerHTML = '';
+                    piral.renderHtmlExtension(element, this.props);
+                }
+            }, 0);
+        }
+        shouldComponentUpdate(nextProps) {
+            return !compare(this.props, nextProps);
         }
-        PreactExtension.prototype.shouldComponentUpdate = function (nextProps) {
-            return !piral_core_1.compare(this.props, nextProps);
-        };
-        PreactExtension.prototype.render = function () {
-            return preact_1.createElement(rootName, {
+        render() {
+            return (0, preact_1.createElement)(rootName, {
                 ref: this.onRefChange,
             });
-        };
-        PreactExtension.contextTypes = {
-            piral: mount_1.anyPropType,
-        };
-        return PreactExtension;
-    }(preact_1.Component));
+        }
+    }
+    PreactExtension.contextTypes = {
+        piral: mount_1.anyPropType,
+    };
     return PreactExtension;
 }
 exports.createExtension = createExtension;

package/lib/extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;;AAAA,yCAAyD;AACzD,iCAAiE;AACjE,iCAAsC;AAEtC,SAAgB,eAAe,CAAC,QAAiB;IAAjB,yBAAA,EAAA,iBAAiB;IAC/C;QAA8B,2CAA6B;QAA3D;YAAA,qEAuBC;YAlBS,iBAAW,GAAG,UAAC,OAAY;gBACjC,OAAA,UAAU,CAAC;oBACT,IAAI,OAAO,EAAE;wBACH,IAAA,KAAK,GAAK,KAAI,CAAC,OAAO,MAAjB,CAAkB;wBAC/B,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;wBACvB,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,CAAC;qBAChD;gBACH,CAAC,EAAE,CAAC,CAAC;YANL,CAMK,CAAC;;QAWV,CAAC;QATC,+CAAqB,GAArB,UAAsB,SAA6B;YACjD,OAAO,CAAC,oBAAO,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;QACzC,CAAC;QAED,gCAAM,GAAN;YACE,OAAO,sBAAa,CAAC,QAAQ,EAAE;gBAC7B,GAAG,EAAE,IAAI,CAAC,WAAW;aACtB,CAAC,CAAC;QACL,CAAC;QArBM,4BAAY,GAAG;YACpB,KAAK,EAAE,mBAAW;SACnB,CAAC;QAoBJ,sBAAC;KAAA,AAvBD,CAA8B,kBAAS,GAuBtC;IAED,OAAO,eAAe,CAAC;AACzB,CAAC;AA3BD,0CA2BC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;AACA,mCAAiE;AACjE,mCAAsC;AAEtC,SAAS,cAAc,CAAC,CAAM,EAAE,CAAM;IACpC,KAAK,MAAM,CAAC,IAAI,CAAC,EAAE;QACjB,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE;YACb,OAAO,KAAK,CAAC;SACd;KACF;IAED,KAAK,MAAM,CAAC,IAAI,CAAC,EAAE;QACjB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YACxB,OAAO,KAAK,CAAC;SACd;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,OAAO,CAAI,CAAI,EAAE,CAAI;IAC5B,IAAI,CAAC,KAAK,CAAC,EAAE;QACX,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC;QACpB,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC;QAEpB,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,EAAE;YAC1C,OAAO,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SAC7B;QAED,OAAO,KAAK,CAAC;KACd;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAgB,eAAe,CAAC,QAAgB;IAC9C,MAAM,eAAgB,SAAQ,kBAA6B;QAA3D;;YAKU,gBAAW,GAAG,CAAC,OAAY,EAAE,EAAE,CACrC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,OAAO,EAAE;oBACX,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;oBAC/B,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;oBACvB,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;iBAChD;YACH,CAAC,EAAE,CAAC,CAAC,CAAC;QAWV,CAAC;QATC,qBAAqB,CAAC,SAA6B;YACjD,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;QACzC,CAAC;QAED,MAAM;YACJ,OAAO,IAAA,sBAAa,EAAC,QAAQ,EAAE;gBAC7B,GAAG,EAAE,IAAI,CAAC,WAAW;aACtB,CAAC,CAAC;QACL,CAAC;;IArBM,4BAAY,GAAG;QACpB,KAAK,EAAE,mBAAW;KACnB,AAFkB,CAEjB;IAsBJ,OAAO,eAAe,CAAC;AACzB,CAAC;AA3BD,0CA2BC"}

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/mount.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from 'preact';
-import { BaseComponentProps } from 'piral-core';
+import type { BaseComponentProps } from 'piral-core';
 export declare const anyPropType: () => any;
 export declare function mountPreact<T extends BaseComponentProps>(el: HTMLElement, root: ComponentType<T>, props: T, ctx?: any): void;
 export declare function unmountPreact(el: HTMLElement): void;

package/lib/mount.js

@@ -1,35 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.unmountPreact = exports.mountPreact = exports.anyPropType = void 0;
-var tslib_1 = require("tslib");
-var preact_1 = require("preact");
+const preact_1 = require("preact");
 // tslint:disable-next-line:no-null-keyword
-exports.anyPropType = function () { return null; };
-function mountPreact(el, root, props, ctx) {
-    if (ctx === void 0) { ctx = {}; }
-    var contextTypes = {};
-    tslib_1.__spreadArrays(['piral'], Object.keys(ctx)).forEach(function (key) {
+const anyPropType = () => null;
+exports.anyPropType = anyPropType;
+function mountPreact(el, root, props, ctx = {}) {
+    const contextTypes = {};
+    ['piral', ...Object.keys(ctx)].forEach((key) => {
         contextTypes[key] = exports.anyPropType;
     });
-    var Provider = /** @class */ (function (_super) {
-        tslib_1.__extends(Provider, _super);
-        function Provider() {
-            return _super !== null && _super.apply(this, arguments) || this;
+    class Provider extends preact_1.Component {
+        getChildContext() {
+            return Object.assign({ piral: props.piral }, ctx);
         }
-        Provider.prototype.getChildContext = function () {
-            return tslib_1.__assign({ piral: props.piral }, ctx);
-        };
-        Provider.prototype.render = function () {
+        render() {
             return this.props.children;
-        };
-        Provider.childContextTypes = contextTypes;
-        return Provider;
-    }(preact_1.Component));
-    preact_1.render(preact_1.createElement(Provider, {}, preact_1.createElement(root, props)), el);
+        }
+    }
+    Provider.childContextTypes = contextTypes;
+    (0, preact_1.render)((0, preact_1.createElement)(Provider, {}, (0, preact_1.createElement)(root, props)), el);
 }
 exports.mountPreact = mountPreact;
 function unmountPreact(el) {
-    preact_1.render('', el);
+    (0, preact_1.render)('', el);
 }
 exports.unmountPreact = unmountPreact;
 //# sourceMappingURL=mount.js.map

package/lib/mount.js.map

@@ -1 +1 @@
-{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":";;;;AAAA,iCAAyE;AAGzE,2CAA2C;AAC9B,QAAA,WAAW,GAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,CAAC;AAEtC,SAAgB,WAAW,CACzB,EAAe,EACf,IAAsB,EACtB,KAAQ,EACR,GAAa;IAAb,oBAAA,EAAA,QAAa;IAEb,IAAM,YAAY,GAAG,EAAE,CAAC;IAExB,wBAAC,OAAO,GAAK,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,UAAC,GAAG;QACzC,YAAY,CAAC,GAAG,CAAC,GAAG,mBAAW,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH;QAAuB,oCAAS;QAAhC;;QAaA,CAAC;QAVC,kCAAe,GAAf;YACE,0BACE,KAAK,EAAE,KAAK,CAAC,KAAK,IACf,GAAG,EACN;QACJ,CAAC;QAED,yBAAM,GAAN;YACE,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC7B,CAAC;QAXM,0BAAiB,GAAG,YAAY,CAAC;QAY1C,eAAC;KAAA,AAbD,CAAuB,kBAAS,GAa/B;IAED,eAAM,CAAC,sBAAa,CAAC,QAAQ,EAAE,EAAE,EAAE,sBAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AACtE,CAAC;AA5BD,kCA4BC;AAED,SAAgB,aAAa,CAAC,EAAe;IAC3C,eAAM,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;AACjB,CAAC;AAFD,sCAEC"}
+{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":";;;AAAA,mCAAyE;AAGzE,2CAA2C;AACpC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;AAAzB,QAAA,WAAW,eAAc;AAEtC,SAAgB,WAAW,CACzB,EAAe,EACf,IAAsB,EACtB,KAAQ,EACR,MAAW,EAAE;IAEb,MAAM,YAAY,GAAG,EAAE,CAAC;IAExB,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAC7C,YAAY,CAAC,GAAG,CAAC,GAAG,mBAAW,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,MAAM,QAAS,SAAQ,kBAAS;QAG9B,eAAe;YACb,uBACE,KAAK,EAAE,KAAK,CAAC,KAAK,IACf,GAAG,EACN;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC7B,CAAC;;IAXM,0BAAiB,GAAG,YAAY,CAAC;IAc1C,IAAA,eAAM,EAAC,IAAA,sBAAa,EAAC,QAAQ,EAAE,EAAE,EAAE,IAAA,sBAAa,EAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AACtE,CAAC;AA5BD,kCA4BC;AAED,SAAgB,aAAa,CAAC,EAAe;IAC3C,IAAA,eAAM,EAAC,EAAE,EAAE,EAAE,CAAC,CAAC;AACjB,CAAC;AAFD,sCAEC"}

package/lib/types.d.ts

@@ -1,5 +1,5 @@
-import { ForeignComponent, ExtensionSlotProps } from 'piral-core';
-import { ComponentType } from 'preact';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { ComponentType } from 'preact';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletPreactApi {
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-preact",
-  "version": "1.0.0-pre.2085",
+  "version": "1.0.0",
   "description": "Plugin for integrating Preact components in Piral.",
   "keywords": [
     "piral",
@@ -16,14 +16,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": {
@@ -34,17 +55,20 @@
     "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-preact.json src --exclude \"src/**/*.test.*\"",
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "^1.0.0-pre.2085",
-    "preact": "10.0.5"
+    "piral-core": "^1.0.0",
+    "preact": "^10.5.13"
   },
   "peerDependencies": {
-    "piral-core": "1.x",
     "preact": "^10.0.0"
   },
-  "gitHead": "140092491c51e02c298804e87070f56c8f6ce0fc"
+  "gitHead": "67d9a2920bd5231baf10bc87ae8985666b18fa3a"
 }

package/src/converter.ts

@@ -1,20 +1,30 @@
-import { ComponentType } from 'preact';
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { ComponentType } from 'preact';
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
 import { mountPreact, unmountPreact } from './mount';
+import { createExtension } from './extension';
 
-export function createConverter() {
-  const convert = <TProps extends BaseComponentProps>(root: ComponentType<TProps>): ForeignComponent<TProps> => {
-    return {
-      mount(el, props, ctx) {
-        mountPreact(el, root, props, ctx);
-      },
-      update(el, props, ctx) {
-        mountPreact(el, root, props, ctx);
-      },
-      unmount(el) {
-        unmountPreact(el);
-      },
-    };
-  };
+export interface PreactConverterOptions {
+  /**
+   * Defines the name of the root element.
+   * @default piral-slot
+   */
+  rootName?: string;
+}
+
+export function createConverter(config: PreactConverterOptions = {}) {
+  const { rootName = 'piral-slot' } = config;
+  const Extension = createExtension(rootName);
+  const convert = <TProps extends BaseComponentProps>(root: ComponentType<TProps>): ForeignComponent<TProps> => ({
+    mount(el, props, ctx) {
+      mountPreact(el, root, props, ctx);
+    },
+    update(el, props, ctx) {
+      mountPreact(el, root, props, ctx);
+    },
+    unmount(el) {
+      unmountPreact(el);
+    },
+  });
+  convert.Extension = Extension;
   return convert;
 }

package/src/create.ts

@@ -1,27 +1,18 @@
 import type { PiralPlugin } from 'piral-core';
-import { createConverter } from './converter';
-import { createExtension } from './extension';
+import { createConverter, PreactConverterOptions } from './converter';
 import type { PiletPreactApi } from './types';
 
 /**
  * Available configuration options for the Preact plugin.
  */
-export interface PreactConfig {
-  /**
-   * Defines the name of the root element.
-   * @default slot
-   */
-  rootName?: string;
-}
+export interface PreactConfig extends PreactConverterOptions {}
 
 /**
  * Creates new Pilet API extensions for integrating Preact.
  */
 export function createPreactApi(config: PreactConfig = {}): PiralPlugin<PiletPreactApi> {
-  const { rootName } = config;
-
   return (context) => {
-    const convert = createConverter();
+    const convert = createConverter(config);
     context.converters.preact = ({ root }) => convert(root);
 
     return {
@@ -31,7 +22,7 @@ export function createPreactApi(config: PreactConfig = {}): PiralPlugin<PiletPre
           root,
         };
       },
-      PreactExtension: createExtension(rootName),
+      PreactExtension: convert.Extension,
     };
   };
 }

package/src/extension.ts

@@ -1,8 +1,39 @@
-import { ExtensionSlotProps, compare } from 'piral-core';
+import type { ExtensionSlotProps } from 'piral-core';
 import { Component, createElement, ComponentType } from 'preact';
 import { anyPropType } from './mount';
 
-export function createExtension(rootName = 'slot'): ComponentType<ExtensionSlotProps> {
+function compareObjects(a: any, b: any) {
+  for (const i in a) {
+    if (!(i in b)) {
+      return false;
+    }
+  }
+
+  for (const i in b) {
+    if (!compare(a[i], b[i])) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function compare<T>(a: T, b: T) {
+  if (a !== b) {
+    const ta = typeof a;
+    const tb = typeof b;
+
+    if (ta === tb && ta === 'object' && a && b) {
+      return compareObjects(a, b);
+    }
+
+    return false;
+  }
+
+  return true;
+}
+
+export function createExtension(rootName: string): ComponentType<ExtensionSlotProps> {
   class PreactExtension extends Component<ExtensionSlotProps> {
     static contextTypes = {
       piral: anyPropType,

package/src/mount.ts

@@ -1,5 +1,5 @@
 import { render, ComponentType, createElement, Component } from 'preact';
-import { BaseComponentProps } from 'piral-core';
+import type { BaseComponentProps } from 'piral-core';
 
 // tslint:disable-next-line:no-null-keyword
 export const anyPropType = () => null;

package/src/types.ts

@@ -1,5 +1,5 @@
-import { ForeignComponent, ExtensionSlotProps } from 'piral-core';
-import { ComponentType } from 'preact';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { ComponentType } from 'preact';
 
 declare module 'piral-core/lib/types/custom' {
   interface PiletCustomApi extends PiletPreactApi {}

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 PreactConverter {
-  (...params: Parameters<typeof convert>): HtmlComponent<any>;
-}
-
-export const fromPreact: PreactConverter = (root) => ({
-  type: 'html',
-  component: convert(root),
-});
-
-export const createPreactExtension = createExtension;