piral-solid 0.15.0-alpha.4122 → 0.15.0-alpha.4231

package/esm/converter.js

@@ -1,15 +1,27 @@
+import { onCleanup } from 'solid-js';
 import { render, createComponent } from 'solid-js/dom';
 import { createExtension } from './extension';
 export function createConverter(config = {}) {
     const { rootName = 'slot' } = config;
     const Extension = createExtension(rootName);
     const convert = (root) => ({
-        mount(el, props, context) {
-            render(() => createComponent(root, Object.assign({ context }, props)), el);
+        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);
         },
-        unmount(el) {
-            render(() => undefined, el);
-            el.innerHTML = '';
+        update(el, props, context, locals) {
+            locals.destroy();
+            locals.update(props, context);
+        },
+        unmount(el, locals) {
+            locals.destroy();
         },
     });
     convert.Extension = Extension;

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;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAU9C,MAAM,UAAU,eAAe,CAAC,SAAgC,EAAE;IAChE,MAAM,EAAE,QAAQ,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IACrC,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;YACtB,MAAM,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,kBAAI,OAAO,IAAK,KAAK,EAAG,EAAE,EAAE,CAAC,CAAC;QACjE,CAAC;QACD,OAAO,CAAC,EAAE;YACR,MAAM,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,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"}
+{"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,MAAM,EAAE,GAAG,MAAM,CAAC;IACrC,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/extension.js

@@ -1,3 +1,4 @@
+import { createEffect } from 'solid-js';
 export function createExtension(rootName) {
     return (props) => {
         const element = document.createElement(rootName);
@@ -10,6 +11,16 @@ export function createExtension(rootName) {
                 },
             }));
         }, 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,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;QACN,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/lib/converter.js

@@ -1,18 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createConverter = void 0;
+const solid_js_1 = require("solid-js");
 const dom_1 = require("solid-js/dom");
 const extension_1 = require("./extension");
 function createConverter(config = {}) {
     const { rootName = 'slot' } = config;
     const Extension = (0, extension_1.createExtension)(rootName);
     const convert = (root) => ({
-        mount(el, props, context) {
-            (0, dom_1.render)(() => (0, dom_1.createComponent)(root, Object.assign({ context }, props)), el);
+        mount(el, props, context, locals) {
+            locals.update = (props, context) => {
+                locals.destroy = (0, dom_1.render)(() => {
+                    (0, solid_js_1.onCleanup)(() => {
+                        el.innerHTML = '';
+                    });
+                    return (0, dom_1.createComponent)(root, Object.assign({ context }, props));
+                }, el);
+            };
+            locals.update(props, context);
         },
-        unmount(el) {
-            (0, dom_1.render)(() => undefined, el);
-            el.innerHTML = '';
+        update(el, props, context, locals) {
+            locals.destroy();
+            locals.update(props, context);
+        },
+        unmount(el, locals) {
+            locals.destroy();
         },
     });
     convert.Extension = Extension;

package/lib/converter.js.map

@@ -1 +1 @@
-{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AAEA,sCAAuD;AACvD,2CAA8C;AAU9C,SAAgB,eAAe,CAAC,SAAgC,EAAE;IAChE,MAAM,EAAE,QAAQ,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IACrC,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;YACtB,IAAA,YAAM,EAAC,GAAG,EAAE,CAAC,IAAA,qBAAe,EAAC,IAAI,kBAAI,OAAO,IAAK,KAAK,EAAG,EAAE,EAAE,CAAC,CAAC;QACjE,CAAC;QACD,OAAO,CAAC,EAAE;YACR,IAAA,YAAM,EAAC,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,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;AAdD,0CAcC"}
+{"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,MAAM,EAAE,GAAG,MAAM,CAAC;IACrC,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/extension.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createExtension = void 0;
+const solid_js_1 = require("solid-js");
 function createExtension(rootName) {
     return (props) => {
         const element = document.createElement(rootName);
@@ -13,6 +14,16 @@ function createExtension(rootName) {
                 },
             }));
         }, 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,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;QACN,OAAO,OAAc,CAAC;IACxB,CAAC,CAAC;AACJ,CAAC;AAhBD,0CAgBC"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-solid",
-  "version": "0.15.0-alpha.4122",
+  "version": "0.15.0-alpha.4231",
   "description": "Plugin for integrating Solid components in Piral.",
   "keywords": [
     "piral",
@@ -27,11 +27,11 @@
     "./convert": {
       "import": "./convert.js"
     },
-    "./esm/": {
-      "import": "./esm/"
+    "./esm/*": {
+      "import": "./esm/*"
     },
-    "./lib/": {
-      "require": "./lib/"
+    "./lib/*": {
+      "require": "./lib/*"
     },
     "./package.json": "./package.json"
   },
@@ -60,11 +60,11 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "0.15.0-alpha.4122",
+    "piral-core": "0.15.0-alpha.4231",
     "solid-js": "^0.18.7"
   },
   "peerDependencies": {
     "solid-js": "^0.18.0"
   },
-  "gitHead": "fa0957fe7dedebbbd97a530e518c1a2b7754d475"
+  "gitHead": "4e7f158bd276d82c5bf2c19d47ccfb3604f38e38"
 }

package/src/converter.ts

@@ -1,5 +1,5 @@
 import type { ForeignComponent, BaseComponentProps } from 'piral-core';
-import { Component } from 'solid-js';
+import { Component, onCleanup } from 'solid-js';
 import { render, createComponent } from 'solid-js/dom';
 import { createExtension } from './extension';
 
@@ -15,12 +15,24 @@ export function createConverter(config: SolidConverterOptions = {}) {
   const { rootName = 'slot' } = config;
   const Extension = createExtension(rootName);
   const convert = <TProps extends BaseComponentProps>(root: Component<TProps>): ForeignComponent<TProps> => ({
-    mount(el, props, context) {
-      render(() => createComponent(root, { context, ...props }), el);
+    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) {
-      render(() => undefined, el);
-      el.innerHTML = '';
+    unmount(el, locals) {
+      locals.destroy();
     },
   });
   convert.Extension = Extension;

package/src/extension.ts

@@ -1,5 +1,6 @@
 import type { ExtensionSlotProps } from 'piral-core';
 import type { Component } from 'solid-js';
+import { createEffect } from 'solid-js';
 
 export function createExtension(rootName: string): Component<ExtensionSlotProps> {
   return (props) => {
@@ -15,6 +16,20 @@ export function createExtension(rootName: string): Component<ExtensionSlotProps>
         }),
       );
     }, 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;
   };
 }