lumix-js 0.1.1 → 0.1.2

package/dist/dom.d.ts

@@ -5,4 +5,8 @@ export interface Props {
 }
 export declare function h(tag: string | ((props: Props, ...children: any[]) => any), props: Props | null, ...children: any[]): any;
 export declare function Fragment(_props: any, ...children: any[]): any[];
-export declare function hydrate(root: HTMLElement, component: (props?: any) => HTMLElement, props?: any): void;
+export declare function hydrate(root: HTMLElement, component: (props?: any) => any, props?: any): void;
+export declare function mount(root: HTMLElement, component: (props?: any) => any, props?: any): {
+    update(nextComponent: (props?: any) => any): void;
+    destroy(): void;
+};

package/dist/dom.js

@@ -4,14 +4,16 @@ import { withHooks, runHooks } from "./lifecycle.js";
 export function h(tag, props, ...children) {
     if (typeof tag === "function") {
         const { result, mount, destroy } = withHooks(() => tag(props || {}, ...children));
-        // If it's a component that returns a single element, we can attach hooks to it
-        if (result instanceof HTMLElement) {
-            if (mount.length > 0) {
-                // Simple trick: use MutationObserver or just run on next tick if added
-                setTimeout(() => runHooks(mount), 0);
-            }
-            if (destroy.length > 0) {
-                result._luminDestroy = destroy;
+        // Attach hooks for single element or Fragment(array) roots.
+        const roots = Array.isArray(result) ? result : [result];
+        for (const r of roots) {
+            if (r instanceof HTMLElement) {
+                if (mount.length > 0) {
+                    setTimeout(() => runHooks(mount), 0);
+                }
+                if (destroy.length > 0) {
+                    r._luminDestroy = destroy;
+                }
             }
         }
         return result;
@@ -131,6 +133,61 @@ function unmount(node) {
 export function hydrate(root, component, props) {
     while (root.firstChild)
         root.removeChild(root.firstChild);
-    const el = h(component, props || {});
-    root.appendChild(el);
+    const out = h(component, props || {});
+    const nodes = Array.isArray(out) ? out : [out];
+    for (const n of nodes) {
+        if (n === null || n === undefined)
+            continue;
+        if (n instanceof Node)
+            root.appendChild(n);
+        else
+            root.appendChild(document.createTextNode(String(n)));
+    }
+}
+export function mount(root, component, props) {
+    const start = document.createComment("lumix-root-start");
+    const end = document.createComment("lumix-root-end");
+    while (root.firstChild)
+        root.removeChild(root.firstChild);
+    root.appendChild(start);
+    root.appendChild(end);
+    let currentNodes = [];
+    let currentComponent = component;
+    let currentProps = props;
+    const render = () => {
+        for (const node of currentNodes) {
+            unmount(node);
+            if (node.parentNode)
+                node.parentNode.removeChild(node);
+        }
+        currentNodes = [];
+        const out = h(currentComponent, currentProps || {});
+        const nodes = Array.isArray(out) ? out : [out];
+        for (const n of nodes) {
+            if (n === null || n === undefined)
+                continue;
+            const node = n instanceof Node ? n : document.createTextNode(String(n));
+            root.insertBefore(node, end);
+            currentNodes.push(node);
+        }
+    };
+    render();
+    return {
+        update(nextComponent) {
+            currentComponent = nextComponent;
+            render();
+        },
+        destroy() {
+            for (const node of currentNodes) {
+                unmount(node);
+                if (node.parentNode)
+                    node.parentNode.removeChild(node);
+            }
+            currentNodes = [];
+            if (start.parentNode)
+                start.parentNode.removeChild(start);
+            if (end.parentNode)
+                end.parentNode.removeChild(end);
+        },
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lumix-js",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "The modular runtime for LumixJS",
   "type": "module",
   "main": "dist/index.js",