piral-solid 1.0.0-pre.2107 → 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 Solid](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-solid.svg?style=flat)](https://www.npmjs.com/package/piral-solid) [![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 Solid](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-solid.svg?style=flat)](https://www.npmjs.com/package/piral-solid) [![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-solid` 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 `solid-js`. What `piral-solid` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
 
 The set includes a Solid converter for any component registration, as well as a `fromSolid` shortcut and a `SolidExtension` component.
 
@@ -47,7 +47,7 @@ Alternatively, if `piral-solid` has not been added to the Piral instance you can
 
 ```ts
 import { PiletApi } from '<name-of-piral-instance>';
-import { fromSolid } from 'piral-solid';
+import { fromSolid } from 'piral-solid/convert';
 import { SolidPage } from './SolidPage';
 
 export function setup(piral: PiletApi) {
@@ -59,7 +59,7 @@ export function setup(piral: PiletApi) {
 
 ::: summary: For Piral instance developers
 
-Using Solid with Piral is as simple as installing `piral-solid` and `solid-js`.
+Using Solid with Piral is as simple as installing `piral-solid` and `solid-js@^1`.
 
 ```ts
 import { createSolidApi } from 'piral-solid';
@@ -75,15 +75,15 @@ const instance = createInstance({
 });
 ```
 
-The `solid-js` and `solid-js/dom` packages should be shared with the pilets via the *package.json*:
+The `solid-js` and `solid-js/web` packages should be shared with the pilets via the *package.json*:
 
 ```json
 {
-  "pilets": {
-    "externals": [
-      "solid-js",
-      "solid-js/dom"
-    ]
+  "importmap": {
+    "imports": {
+      "solid-js": "",
+      "solid-js/web": ""
+    }
   }
 }
 ```

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("solid-js").Component<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 SolidConverter {
-    (...params: Parameters<typeof convert>): HtmlComponent<any>;
+    (...params: Parameters<ReturnType<typeof createConverter>>): HtmlComponent<any>;
 }
-export declare const fromSolid: SolidConverter;
-export declare const createSolidExtension: typeof createExtension;
-export {};
+export declare function createSolidConverter(...params: Parameters<typeof createConverter>): {
+    from: SolidConverter;
+    Extension: Component<any>;
+};
+declare const fromSolid: SolidConverter, SolidExtension: Component<any>;
+export { fromSolid, SolidExtension };

package/convert.js

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

package/esm/converter.d.ts

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

package/esm/converter.js

@@ -1,16 +1,30 @@
-import { render, createComponent } from 'solid-js/dom';
-export function createConverter() {
-    const convert = (root) => {
-        return {
-            mount(parent, data, context) {
-                render(() => createComponent(root, Object.assign({ context }, data)), parent);
-            },
-            unmount(el) {
-                render(() => undefined, el);
-                el.innerHTML = '';
-            },
-        };
-    };
+import { onCleanup } from 'solid-js';
+import { render, createComponent } from 'solid-js/web';
+import { createExtension } from './extension';
+export function createConverter(config = {}) {
+    const { rootName = 'piral-slot' } = config;
+    const Extension = createExtension(rootName);
+    const convert = (root) => ({
+        mount(el, props, context, locals) {
+            locals.update = (props, context) => {
+                locals.destroy = render(() => {
+                    onCleanup(() => {
+                        el.innerHTML = '';
+                    });
+                    return createComponent(root, Object.assign({ context }, props));
+                }, el);
+            };
+            locals.update(props, context);
+        },
+        update(el, props, context, locals) {
+            locals.destroy();
+            locals.update(props, context);
+        },
+        unmount(el, locals) {
+            locals.destroy();
+        },
+    });
+    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":"AAEA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,UAAU,eAAe;IAC7B,MAAM,OAAO,GAAG,CAAoC,IAAuB,EAA4B,EAAE;QACvG,OAAO;YACL,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO;gBACzB,MAAM,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,kBAAI,OAAO,IAAK,IAAI,EAAG,EAAE,MAAM,CAAC,CAAC;YACpE,CAAC;YACD,OAAO,CAAC,EAAE;gBACR,MAAM,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;gBAC5B,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,EAAa,SAAS,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAU9C,MAAM,UAAU,eAAe,CAAC,SAAgC,EAAE;IAChE,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,GAAG,MAAM,CAAC;IAC3C,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAoC,IAAuB,EAA4B,EAAE,CAAC,CAAC;QACzG,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM;YAC9B,MAAM,CAAC,MAAM,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;gBACjC,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,GAAG,EAAE;oBAC3B,SAAS,CAAC,GAAG,EAAE;wBACb,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;oBACpB,CAAC,CAAC,CAAC;oBACH,OAAO,eAAe,CAAC,IAAI,kBAAI,OAAO,IAAK,KAAK,EAAG,CAAC;gBACtD,CAAC,EAAE,EAAE,CAAC,CAAC;YACT,CAAC,CAAC;YAEF,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAChC,CAAC;QACD,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM;YAC/B,MAAM,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,CAAC,EAAE,EAAE,MAAM;YAChB,MAAM,CAAC,OAAO,EAAE,CAAC;QACnB,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/esm/create.d.ts

@@ -4,11 +4,6 @@ import type { PiletSolidApi } from './types';
  * Available configuration options for the Solid plugin.
  */
 export interface SolidConfig {
-    /**
-     * Defines the name of the root element.
-     * @default slot
-     */
-    rootName?: string;
 }
 /**
  * Creates new Pilet API extensions for integration of Solid.

package/esm/create.js

@@ -1,22 +1,20 @@
 import { createConverter } from './converter';
-import { createExtension } from './extension';
 /**
  * Creates new Pilet API extensions for integration of Solid.
  */
 export function createSolidApi(config = {}) {
-    const { rootName } = config;
     return (context) => {
-        const convert = createConverter();
+        const convert = createConverter(config);
         context.converters.solid = ({ root }) => convert(root);
-        return (api) => ({
+        return {
             fromSolid(root) {
                 return {
                     type: 'solid',
                     root,
                 };
             },
-            SolidExtension: createExtension(api, rootName),
-        });
+            SolidExtension: convert.Extension,
+        };
     };
 }
 //# sourceMappingURL=create.js.map

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,cAAc,CAAC,SAAsB,EAAE;IACrD,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAE5B,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,MAAM,OAAO,GAAG,eAAe,EAAE,CAAC;QAClC,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YACf,SAAS,CAAC,IAAI;gBACZ,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,cAAc,EAAE,eAAe,CAAC,GAAG,EAAE,QAAQ,CAAC;SAC/C,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}
+{"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,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO;YACL,SAAS,CAAC,IAAI;gBACZ,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,cAAc,EAAE,OAAO,CAAC,SAAS;SAClC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/esm/extension.d.ts

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

package/esm/extension.js

@@ -1,7 +1,26 @@
-export function createExtension(api, rootName = 'slot') {
+import { createEffect } from 'solid-js';
+export function createExtension(rootName) {
     return (props) => {
         const element = document.createElement(rootName);
-        setTimeout(() => api.renderHtmlExtension(element, props), 0);
+        setTimeout(() => {
+            element.dispatchEvent(new CustomEvent('render-html', {
+                bubbles: true,
+                detail: {
+                    target: element,
+                    props,
+                },
+            }));
+        }, 0);
+        createEffect(() => {
+            element.dispatchEvent(new CustomEvent('extension-props-changed', {
+                detail: {
+                    name: props.name,
+                    empty: props.empty,
+                    params: props.params,
+                    render: props.render,
+                },
+            }));
+        });
         return element;
     };
 }

package/esm/extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,eAAe,CAAC,GAAa,EAAE,QAAQ,GAAG,MAAM;IAC9D,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjD,UAAU,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;QAC7D,OAAO,OAAc,CAAC;IACxB,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,MAAM,UAAU,eAAe,CAAC,QAAgB;IAC9C,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjD,UAAU,CAAC,GAAG,EAAE;YACd,OAAO,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,aAAa,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE;oBACN,MAAM,EAAE,OAAO;oBACf,KAAK;iBACN;aACF,CAAC,CACH,CAAC;QACJ,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,YAAY,CAAC,GAAG,EAAE;YAChB,OAAO,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,yBAAyB,EAAE;gBACzC,MAAM,EAAE;oBACN,IAAI,EAAE,KAAK,CAAC,IAAI;oBAChB,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,MAAM,EAAE,KAAK,CAAC,MAAM;oBACpB,MAAM,EAAE,KAAK,CAAC,MAAM;iBACrB;aACF,CAAC,CACH,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,OAAO,OAAc,CAAC;IACxB,CAAC,CAAC;AACJ,CAAC"}

package/esm/types.d.ts

@@ -1,5 +1,5 @@
-import { ForeignComponent, ExtensionSlotProps } from 'piral-core';
-import { Component } from 'solid-js';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { Component } from 'solid-js';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletSolidApi {
     }

package/lib/converter.d.ts

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

package/lib/converter.js

@@ -1,19 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createConverter = void 0;
-const dom_1 = require("solid-js/dom");
-function createConverter() {
-    const convert = (root) => {
-        return {
-            mount(parent, data, context) {
-                dom_1.render(() => dom_1.createComponent(root, Object.assign({ context }, data)), parent);
-            },
-            unmount(el) {
-                dom_1.render(() => undefined, el);
-                el.innerHTML = '';
-            },
-        };
-    };
+const solid_js_1 = require("solid-js");
+const web_1 = require("solid-js/web");
+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, context, locals) {
+            locals.update = (props, context) => {
+                locals.destroy = (0, web_1.render)(() => {
+                    (0, solid_js_1.onCleanup)(() => {
+                        el.innerHTML = '';
+                    });
+                    return (0, web_1.createComponent)(root, Object.assign({ context }, props));
+                }, el);
+            };
+            locals.update(props, context);
+        },
+        update(el, props, context, locals) {
+            locals.destroy();
+            locals.update(props, context);
+        },
+        unmount(el, locals) {
+            locals.destroy();
+        },
+    });
+    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,sCAAuD;AAEvD,SAAgB,eAAe;IAC7B,MAAM,OAAO,GAAG,CAAoC,IAAuB,EAA4B,EAAE;QACvG,OAAO;YACL,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO;gBACzB,YAAM,CAAC,GAAG,EAAE,CAAC,qBAAe,CAAC,IAAI,kBAAI,OAAO,IAAK,IAAI,EAAG,EAAE,MAAM,CAAC,CAAC;YACpE,CAAC;YACD,OAAO,CAAC,EAAE;gBACR,YAAM,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;gBAC5B,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC;AAbD,0CAaC"}
+{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AACA,uCAAgD;AAChD,sCAAuD;AACvD,2CAA8C;AAU9C,SAAgB,eAAe,CAAC,SAAgC,EAAE;IAChE,MAAM,EAAE,QAAQ,GAAG,YAAY,EAAE,GAAG,MAAM,CAAC;IAC3C,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAoC,IAAuB,EAA4B,EAAE,CAAC,CAAC;QACzG,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM;YAC9B,MAAM,CAAC,MAAM,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;gBACjC,MAAM,CAAC,OAAO,GAAG,IAAA,YAAM,EAAC,GAAG,EAAE;oBAC3B,IAAA,oBAAS,EAAC,GAAG,EAAE;wBACb,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;oBACpB,CAAC,CAAC,CAAC;oBACH,OAAO,IAAA,qBAAe,EAAC,IAAI,kBAAI,OAAO,IAAK,KAAK,EAAG,CAAC;gBACtD,CAAC,EAAE,EAAE,CAAC,CAAC;YACT,CAAC,CAAC;YAEF,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAChC,CAAC;QACD,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM;YAC/B,MAAM,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,CAAC,EAAE,EAAE,MAAM;YAChB,MAAM,CAAC,OAAO,EAAE,CAAC;QACnB,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC;AA1BD,0CA0BC"}

package/lib/create.d.ts

@@ -4,11 +4,6 @@ import type { PiletSolidApi } from './types';
  * Available configuration options for the Solid plugin.
  */
 export interface SolidConfig {
-    /**
-     * Defines the name of the root element.
-     * @default slot
-     */
-    rootName?: string;
 }
 /**
  * Creates new Pilet API extensions for integration of Solid.

package/lib/create.js

@@ -2,24 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createSolidApi = void 0;
 const converter_1 = require("./converter");
-const extension_1 = require("./extension");
 /**
  * Creates new Pilet API extensions for integration of Solid.
  */
 function createSolidApi(config = {}) {
-    const { rootName } = config;
     return (context) => {
-        const convert = converter_1.createConverter();
+        const convert = (0, converter_1.createConverter)(config);
         context.converters.solid = ({ root }) => convert(root);
-        return (api) => ({
+        return {
             fromSolid(root) {
                 return {
                     type: 'solid',
                     root,
                 };
             },
-            SolidExtension: extension_1.createExtension(api, rootName),
-        });
+            SolidExtension: convert.Extension,
+        };
     };
 }
 exports.createSolidApi = createSolidApi;

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,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YACf,SAAS,CAAC,IAAI;gBACZ,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,cAAc,EAAE,2BAAe,CAAC,GAAG,EAAE,QAAQ,CAAC;SAC/C,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAjBD,wCAiBC"}
+{"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,IAAI,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO;YACL,SAAS,CAAC,IAAI;gBACZ,OAAO;oBACL,IAAI,EAAE,OAAO;oBACb,IAAI;iBACL,CAAC;YACJ,CAAC;YACD,cAAc,EAAE,OAAO,CAAC,SAAS;SAClC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAfD,wCAeC"}

package/lib/extension.d.ts

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

package/lib/extension.js

@@ -1,10 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createExtension = void 0;
-function createExtension(api, rootName = 'slot') {
+const solid_js_1 = require("solid-js");
+function createExtension(rootName) {
     return (props) => {
         const element = document.createElement(rootName);
-        setTimeout(() => api.renderHtmlExtension(element, props), 0);
+        setTimeout(() => {
+            element.dispatchEvent(new CustomEvent('render-html', {
+                bubbles: true,
+                detail: {
+                    target: element,
+                    props,
+                },
+            }));
+        }, 0);
+        (0, solid_js_1.createEffect)(() => {
+            element.dispatchEvent(new CustomEvent('extension-props-changed', {
+                detail: {
+                    name: props.name,
+                    empty: props.empty,
+                    params: props.params,
+                    render: props.render,
+                },
+            }));
+        });
         return element;
     };
 }

package/lib/extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;AAGA,SAAgB,eAAe,CAAC,GAAa,EAAE,QAAQ,GAAG,MAAM;IAC9D,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjD,UAAU,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;QAC7D,OAAO,OAAc,CAAC;IACxB,CAAC,CAAC;AACJ,CAAC;AAND,0CAMC"}
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;AAEA,uCAAwC;AAExC,SAAgB,eAAe,CAAC,QAAgB;IAC9C,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjD,UAAU,CAAC,GAAG,EAAE;YACd,OAAO,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,aAAa,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE;oBACN,MAAM,EAAE,OAAO;oBACf,KAAK;iBACN;aACF,CAAC,CACH,CAAC;QACJ,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,IAAA,uBAAY,EAAC,GAAG,EAAE;YAChB,OAAO,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,yBAAyB,EAAE;gBACzC,MAAM,EAAE;oBACN,IAAI,EAAE,KAAK,CAAC,IAAI;oBAChB,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,MAAM,EAAE,KAAK,CAAC,MAAM;oBACpB,MAAM,EAAE,KAAK,CAAC,MAAM;iBACrB;aACF,CAAC,CACH,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,OAAO,OAAc,CAAC;IACxB,CAAC,CAAC;AACJ,CAAC;AA9BD,0CA8BC"}

package/lib/types.d.ts

@@ -1,5 +1,5 @@
-import { ForeignComponent, ExtensionSlotProps } from 'piral-core';
-import { Component } from 'solid-js';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { Component } from 'solid-js';
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletSolidApi {
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-solid",
-  "version": "1.0.0-pre.2107",
+  "version": "1.0.1-beta.5640",
   "description": "Plugin for integrating Solid components in Piral.",
   "keywords": [
     "piral",
@@ -19,13 +19,32 @@
   "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": {
@@ -36,20 +55,17 @@
     "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-solid.json src --exclude \"src/**/*.test.*\"",
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "^1.0.0-pre.2107",
-    "solid-js": "^0.18.7"
-  },
-  "peerDependencies": {
-    "piral-core": "1.x",
-    "solid-js": "^0.18.0"
+    "piral-core": "1.0.1-beta.5640",
+    "solid-js": "^1.7.3"
   },
-  "gitHead": "4ffef402378ffdeb01acb3794f334973896085e2"
+  "gitHead": "fa0a72b28fd0a20afec7ef491ec19e93c090fc72"
 }

package/src/converter.ts

@@ -1,18 +1,40 @@
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
-import { Component } from 'solid-js';
-import { render, createComponent } from 'solid-js/dom';
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import { Component, onCleanup } from 'solid-js';
+import { render, createComponent } from 'solid-js/web';
+import { createExtension } from './extension';
 
-export function createConverter() {
-  const convert = <TProps extends BaseComponentProps>(root: Component<TProps>): ForeignComponent<TProps> => {
-    return {
-      mount(parent, data, context) {
-        render(() => createComponent(root, { context, ...data }), parent);
-      },
-      unmount(el) {
-        render(() => undefined, el);
-        el.innerHTML = '';
-      },
-    };
-  };
+export interface SolidConverterOptions {
+  /**
+   * Defines the name of the root element.
+   * @default piral-slot
+   */
+  rootName?: string;
+}
+
+export function createConverter(config: SolidConverterOptions = {}) {
+  const { rootName = 'piral-slot' } = config;
+  const Extension = createExtension(rootName);
+  const convert = <TProps extends BaseComponentProps>(root: Component<TProps>): ForeignComponent<TProps> => ({
+    mount(el, props, context, locals) {
+      locals.update = (props, context) => {
+        locals.destroy = render(() => {
+          onCleanup(() => {
+            el.innerHTML = '';
+          });
+          return createComponent(root, { context, ...props });
+        }, el);
+      };
+
+      locals.update(props, context);
+    },
+    update(el, props, context, locals) {
+      locals.destroy();
+      locals.update(props, context);
+    },
+    unmount(el, locals) {
+      locals.destroy();
+    },
+  });
+  convert.Extension = Extension;
   return convert;
 }

package/src/create.ts

@@ -1,37 +1,28 @@
 import type { PiralPlugin } from 'piral-core';
 import { createConverter } from './converter';
-import { createExtension } from './extension';
 import type { PiletSolidApi } from './types';
 
 /**
  * Available configuration options for the Solid plugin.
  */
-export interface SolidConfig {
-  /**
-   * Defines the name of the root element.
-   * @default slot
-   */
-  rootName?: string;
-}
+export interface SolidConfig {}
 
 /**
  * Creates new Pilet API extensions for integration of Solid.
  */
 export function createSolidApi(config: SolidConfig = {}): PiralPlugin<PiletSolidApi> {
-  const { rootName } = config;
-
   return (context) => {
-    const convert = createConverter();
+    const convert = createConverter(config);
     context.converters.solid = ({ root }) => convert(root);
 
-    return (api) => ({
+    return {
       fromSolid(root) {
         return {
           type: 'solid',
           root,
         };
       },
-      SolidExtension: createExtension(api, rootName),
-    });
+      SolidExtension: convert.Extension,
+    };
   };
 }

package/src/extension.ts

@@ -1,10 +1,35 @@
-import type { PiletApi, ExtensionSlotProps } from 'piral-core';
+import type { ExtensionSlotProps } from 'piral-core';
 import type { Component } from 'solid-js';
+import { createEffect } from 'solid-js';
 
-export function createExtension(api: PiletApi, rootName = 'slot'): Component<ExtensionSlotProps> {
+export function createExtension(rootName: string): Component<ExtensionSlotProps> {
   return (props) => {
     const element = document.createElement(rootName);
-    setTimeout(() => api.renderHtmlExtension(element, props), 0);
+    setTimeout(() => {
+      element.dispatchEvent(
+        new CustomEvent('render-html', {
+          bubbles: true,
+          detail: {
+            target: element,
+            props,
+          },
+        }),
+      );
+    }, 0);
+
+    createEffect(() => {
+      element.dispatchEvent(
+        new CustomEvent('extension-props-changed', {
+          detail: {
+            name: props.name,
+            empty: props.empty,
+            params: props.params,
+            render: props.render,
+          },
+        }),
+      );
+    });
+
     return element as any;
   };
 }

package/src/types.ts

@@ -1,5 +1,5 @@
-import { ForeignComponent, ExtensionSlotProps } from 'piral-core';
-import { Component } from 'solid-js';
+import type { ForeignComponent, ExtensionSlotProps } from 'piral-core';
+import type { Component } from 'solid-js';
 
 declare module 'piral-core/lib/types/custom' {
   interface PiletCustomApi extends PiletSolidApi {}

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