j20 0.0.14 → 0.0.16

package/dist/index.js

@@ -390,7 +390,6 @@ const styleObjectToString = (style) => {
     }
     return styleString.trim();
 };
-
 const update = (node, key, oldValue, newValue) => {
     if (isEvent(key)) {
         node.removeEventListener(getEventName(key), oldValue);
@@ -447,6 +446,28 @@ const add = (node, key, newValue) => {
         }
     }
 };
+const bindNode = (node, props) => {
+    let oldProps = {};
+    effect(() => {
+        const newProps = { ...props() };
+        const newKeys = Object.keys(newProps);
+        const oldKeys = Object.keys(oldProps);
+        const allKeys = new Set([...newKeys, ...oldKeys]);
+        for (const key of allKeys) {
+            if (key === "children")
+                continue;
+            oldKeys.includes(key)
+                ? newKeys.includes(key)
+                    ? Object.is(oldProps[key], newProps[key])
+                        ? null
+                        : update(node, key, oldProps[key], newProps[key])
+                    : unset(node, key, oldProps[key])
+                : add(node, key, newProps[key]);
+        }
+        oldProps = newProps;
+    });
+};
+
 const createDom = (tag, props, children) => {
     const node = tag;
     let oldProps = {};
@@ -481,137 +502,8 @@ const createDom = (tag, props, children) => {
     return node;
 };
 
-const stack = [];
-const getCurrentInstance = () => stack.at(-1);
-// api security guard
-const securityGetCurrentInstance = () => {
-    const instance = getCurrentInstance();
-    if (!instance)
-        throw new Error("Do not run this api out of component");
-    return instance;
-};
-const instanceInit = (parent) => {
-    const id = generateId();
-    const parentInstance = parent ?? getCurrentInstance();
-    const instance = {
-        parent: parentInstance,
-        id,
-        range: [document.createTextNode(""), document.createTextNode("")],
-    };
-    if (parentInstance) {
-        if (parentInstance.children) {
-            parentInstance.children.push(instance);
-        }
-        else {
-            parentInstance.children = [instance];
-        }
-    }
-    return instance;
-};
-const mounts = [];
-const instanceCreateElement = (instance, runner) => {
-    stack.push(instance);
-    const fragment = createDom(document.createDocumentFragment(), undefined, () => runner());
-    fragment.prepend(instance.range[0]);
-    fragment.append(instance.range[1]);
-    if (instance.mounts) {
-        mounts.push(...instance.mounts);
-        instance.mounts = undefined;
-    }
-    stack.pop();
-    if (stack.length === 0) {
-        requestAnimationFrame(() => {
-            mounts.forEach((mount) => mount());
-            mounts.length = 0;
-        });
-    }
-    return fragment;
-};
-const instanceCreate = (runner, parent) => {
-    const instance = instanceInit(parent);
-    return [instance, instanceCreateElement(instance, runner)];
-};
-const instanceGetElements = (instance) => {
-    const [start, end] = instance.range;
-    const els = [start];
-    let index = start;
-    while ((index = index.nextSibling)) {
-        els.push(index);
-        if (index === end)
-            break;
-    }
-    return els;
-};
-const instanceDestroy = (parent, instance) => {
-    // 使用栈来实现迭代式的深度优先销毁，避免递归开销
-    // 关键：需要跟踪每个实例的销毁状态（是否已销毁子节点）
-    const stack = [
-        { inst: instance, childrenDestroyed: false },
-    ];
-    while (stack.length > 0) {
-        const current = stack[stack.length - 1];
-        if (!current.childrenDestroyed) {
-            // 第一次访问：先标记子节点已销毁，然后将子节点入栈
-            current.childrenDestroyed = true;
-            if (current.inst.children && current.inst.children.length > 0) {
-                // 倒序添加子节点，保持与递归相同的销毁顺序
-                for (let i = current.inst.children.length - 1; i >= 0; i--) {
-                    stack.push({
-                        inst: current.inst.children[i],
-                        childrenDestroyed: false,
-                    });
-                }
-            }
-        }
-        else {
-            // 第二次访问：子节点已全部销毁，现在销毁当前节点
-            const inst = current.inst;
-            // 执行清理函数
-            inst.disposes?.forEach((dispose) => {
-                try {
-                    dispose();
-                }
-                catch (e) {
-                    console.error("Error during instance dispose:", e);
-                }
-            });
-            // 清空 dispose 数组，但保留数组引用
-            if (inst.disposes) {
-                inst.disposes.length = 0;
-            }
-            // 清空子节点引用
-            if (inst.children) {
-                inst.children = [];
-            }
-            stack.pop();
-        }
-    }
-    // 从父实例中移除此实例的引用
-    if (parent && parent.children) {
-        parent.children = parent.children.filter((c) => c !== instance);
-    }
-};
-
-const effect = (effectFn) => {
-    const effectInstance = effect$1(effectFn);
-    const currentInstance = securityGetCurrentInstance();
-    if (!currentInstance.disposes)
-        currentInstance.disposes = [];
-    currentInstance.disposes.push(() => effectInstance.dispose());
-    return effectInstance;
-};
-
-function ref(init) {
-    return {
-        current: init ?? null,
-    };
-}
-
 const BRAND = "j20";
 
-let host;
-const setHost = (h) => (host = h);
-const getHost = () => host;
 const registerWebComponent = (Comp) => {
     if (!Comp.customElement) {
         throw new Error("Custom element options is not provided");
@@ -640,14 +532,13 @@ const buildClass = (Comp) => {
                 .map(([, value]) => value.attribute)
                 .filter((i) => i != undefined);
         }
+        static brand = BRAND;
+        brand = BRAND;
         #shadow;
         #props = {};
-        brand = BRAND;
         customElement = customElement;
-        lazy;
-        constructor(lazy) {
+        constructor() {
             super();
-            this.lazy = lazy;
             if (customElement.tag && customElement.mode) {
                 this.#shadow = this.attachShadow({ mode: customElement.mode });
                 if (styleSheet)
@@ -661,9 +552,9 @@ const buildClass = (Comp) => {
             }, {});
         }
         lazyInit() {
-            setHost(this);
             const host = this;
-            const [instance, fragment] = instanceCreate(() => {
+            hostStack.push(host);
+            const [, fragment] = instanceCreate(() => {
                 return Comp(computed(() => {
                     return new Proxy(this.#props, {
                         get(target, p, receiver) {
@@ -679,8 +570,7 @@ const buildClass = (Comp) => {
                     });
                 }));
             }, getCurrentInstance());
-            setHost(undefined);
-            instance.host = this;
+            hostStack.pop();
             if (this.#shadow) {
                 this.#shadow.appendChild(fragment);
             }
@@ -715,8 +605,6 @@ const buildClass = (Comp) => {
             }
         }
         attributeChangedCallback(name, oldValue, newValue) {
-            if (this.lazy)
-                return;
             const attrs = NewElementClass.observedAttributes;
             const propSignal = this.#props[a2p[name]];
             if (propSignal && attrs.includes(name)) {
@@ -758,8 +646,183 @@ const buildMap = (customElement) => {
     return { a2p, p2a, a2v };
 };
 
+const hostStack = [];
+const getCurrentHost = () => {
+    return hostStack.at(-1);
+};
+const createWebComponent = (tag, props) => {
+    const customElement = tag.customElement;
+    const Exist = customElements.get(customElement.tag);
+    let el;
+    if (Exist) {
+        if (Exist.brand !== BRAND) {
+            throw new Error(`Custom element [${customElement.tag}] is already registered`);
+        }
+        else {
+            el = new Exist();
+        }
+    }
+    else {
+        const NewClass = buildClass(tag);
+        customElements.define(customElement.tag, NewClass);
+        el = new NewClass();
+    }
+    props && bindNode(el, props);
+    const runner = () => {
+        let childrenGetter = () => untrack(() => (props ? props().children : undefined));
+        const ret = tag(computed(() => {
+            const retProps = props ? props() : {};
+            childrenGetter =
+                Object.getOwnPropertyDescriptor(retProps, "children")?.get ??
+                    (() => undefined);
+            delete retProps.children;
+            return retProps;
+        }));
+        if (el.customElement.mode) {
+            el.appendToShadowDom(getChildren([].concat(ret)));
+            childrenGetter &&
+                el.appendToLightDom(getChildren([].concat(childrenGetter())));
+        }
+        else {
+            el.appendToBody(getChildren([].concat(ret)));
+        }
+        return el;
+    };
+    hostStack.push(el);
+    let [, fragment] = instanceCreate(runner);
+    hostStack.pop();
+    return fragment;
+};
+
+const instanceStack = [];
+const getCurrentInstance = () => instanceStack.at(-1);
+// api security guard
+const securityGetCurrentInstance = () => {
+    const instance = getCurrentInstance();
+    if (!instance)
+        throw new Error("Do not run this api out of component");
+    return instance;
+};
+const instanceInit = (parent) => {
+    const id = generateId();
+    const parentInstance = parent ?? getCurrentInstance();
+    const instance = {
+        parent: parentInstance,
+        id,
+        host: getCurrentHost(),
+        range: [document.createTextNode(""), document.createTextNode("")],
+    };
+    if (parentInstance) {
+        if (parentInstance.children) {
+            parentInstance.children.push(instance);
+        }
+        else {
+            parentInstance.children = [instance];
+        }
+    }
+    return instance;
+};
+const mounts = [];
+const instanceCreateElement = (instance, runner) => {
+    instanceStack.push(instance);
+    const fragment = createDom(document.createDocumentFragment(), undefined, () => runner());
+    fragment.prepend(instance.range[0]);
+    fragment.append(instance.range[1]);
+    if (instance.mounts) {
+        mounts.push(...instance.mounts);
+        instance.mounts = undefined;
+    }
+    instanceStack.pop();
+    if (instanceStack.length === 0) {
+        requestAnimationFrame(() => {
+            mounts.forEach((mount) => mount());
+            mounts.length = 0;
+        });
+    }
+    return fragment;
+};
+const instanceCreate = (runner, parent) => {
+    const instance = instanceInit(parent);
+    return [instance, instanceCreateElement(instance, runner)];
+};
+const instanceGetElements = (instance) => {
+    const [start, end] = instance.range;
+    const els = [start];
+    let index = start;
+    while ((index = index.nextSibling)) {
+        els.push(index);
+        if (index === end)
+            break;
+    }
+    return els;
+};
+const instanceDestroy = (parent, instance) => {
+    // 使用栈来实现迭代式的深度优先销毁，避免递归开销
+    // 关键：需要跟踪每个实例的销毁状态（是否已销毁子节点）
+    const stack = [
+        { inst: instance, childrenDestroyed: false },
+    ];
+    while (stack.length > 0) {
+        const current = stack[stack.length - 1];
+        if (!current.childrenDestroyed) {
+            // 第一次访问：先标记子节点已销毁，然后将子节点入栈
+            current.childrenDestroyed = true;
+            if (current.inst.children && current.inst.children.length > 0) {
+                // 倒序添加子节点，保持与递归相同的销毁顺序
+                for (let i = current.inst.children.length - 1; i >= 0; i--) {
+                    stack.push({
+                        inst: current.inst.children[i],
+                        childrenDestroyed: false,
+                    });
+                }
+            }
+        }
+        else {
+            // 第二次访问：子节点已全部销毁，现在销毁当前节点
+            const inst = current.inst;
+            // 执行清理函数
+            inst.disposes?.forEach((dispose) => {
+                try {
+                    dispose();
+                }
+                catch (e) {
+                    console.error("Error during instance dispose:", e);
+                }
+            });
+            // 清空 dispose 数组，但保留数组引用
+            if (inst.disposes) {
+                inst.disposes.length = 0;
+            }
+            // 清空子节点引用
+            if (inst.children) {
+                inst.children = [];
+            }
+            stack.pop();
+        }
+    }
+    // 从父实例中移除此实例的引用
+    if (parent && parent.children) {
+        parent.children = parent.children.filter((c) => c !== instance);
+    }
+};
+
+const effect = (effectFn) => {
+    const effectInstance = effect$1(effectFn);
+    const currentInstance = securityGetCurrentInstance();
+    if (!currentInstance.disposes)
+        currentInstance.disposes = [];
+    currentInstance.disposes.push(() => effectInstance.dispose());
+    return effectInstance;
+};
+
+function ref(init) {
+    return {
+        current: init ?? null,
+    };
+}
+
 const wc = () => {
-    const host = getHost();
+    const host = getCurrentHost();
     if (!host) {
         throw new Error("host not found, please use `wc` in web component");
     }
@@ -857,7 +920,7 @@ const onMount = (callback) => {
 
 const onDestroy = (callback) => effect(() => callback);
 
-const style = (css) => {
+const sheet = (css) => {
     let instance = getCurrentInstance();
     const sheet = new CSSStyleSheet();
     css && sheet.replaceSync(css);
@@ -879,6 +942,18 @@ const style = (css) => {
     }
     return sheet;
 };
+const css = (css) => {
+    const styleId = id();
+    const replacedCss = css.replace(/\.(\w[\w-]*)\s*?\{/g, (_, className) => {
+        return `.${className}_${styleId} {`;
+    });
+    sheet(replacedCss);
+    return new Proxy({}, {
+        get: (_, prop) => {
+            return `${prop}_${styleId}`;
+        },
+    });
+};
 
 function insertAfter(parentNode, newNode, targetNode) {
     parentNode?.insertBefore(newNode, targetNode.nextSibling);
@@ -1276,49 +1351,6 @@ const createLogicComponent = (tag, props) => {
     return tag(computed(() => (props ? props() : {})));
 };
 
-const createWebComponent = (tag, props) => {
-    const runner = () => {
-        const customElement = tag.customElement;
-        const Exist = customElements.get(customElement.tag);
-        let el;
-        if (Exist) {
-            if (Exist.brand !== BRAND) {
-                throw new Error(`Custom element [${customElement.tag}] is already registered`);
-            }
-            else {
-                el = new Exist(true);
-            }
-        }
-        else {
-            const NewClass = buildClass(tag);
-            customElements.define(customElement.tag, NewClass);
-            el = new NewClass(true);
-        }
-        let childrenGetter = () => untrack(() => (props ? props().children : undefined));
-        setHost(el);
-        const ret = tag(computed(() => {
-            const retProps = props ? props() : {};
-            childrenGetter =
-                Object.getOwnPropertyDescriptor(retProps, "children")?.get ??
-                    (() => undefined);
-            delete retProps.children;
-            return retProps;
-        }));
-        setHost(undefined);
-        if (el.customElement.mode) {
-            el.appendToShadowDom(getChildren([].concat(ret)));
-            childrenGetter &&
-                el.appendToLightDom(getChildren([].concat(childrenGetter())));
-        }
-        else {
-            el.appendToBody(getChildren([].concat(ret)));
-        }
-        return el;
-    };
-    let [, fragment] = instanceCreate(runner);
-    return fragment;
-};
-
 const createElement = (tag, props, children) => {
     return tag instanceof Node
         ? createDom(tag, props, children)
@@ -1349,15 +1381,15 @@ const template = (template) => {
         if (!dom) {
             const templateEl = isSvg
                 ? document.createElementNS("http://www.w3.org/2000/svg", "svg")
-                : document.createElement("template");
+                : document.createElement("div");
             templateEl.innerHTML = template;
             dom = isSvg
                 ? templateEl.firstChild
-                : templateEl.content.firstChild;
+                : templateEl.firstChild;
         }
         return dom.cloneNode();
     };
 };
 
-export { $, $useContext, Case, Computed, Default, Effect, For, Fragment, If, Replace, Signal, Some, Switch, batch, computed, createComponent, createContext, createDom, createElement, createLogicComponent, createRoot, effect, getCurrentInstance, h2, id, instanceCreate, instanceCreateElement, instanceDestroy, instanceGetElements, instanceInit, jsx, jsxs, mounts, onDestroy, onMount, ref, registerWebComponent, securityGetCurrentInstance, signal, style, template, untrack, wc };
+export { $, $useContext, Case, Computed, Default, Effect, For, Fragment, If, Replace, Signal, Some, Switch, batch, computed, createComponent, createContext, createDom, createElement, createLogicComponent, createRoot, css, effect, getCurrentInstance, h2, id, instanceCreate, instanceCreateElement, instanceDestroy, instanceGetElements, instanceInit, jsx, jsxs, mounts, onDestroy, onMount, ref, registerWebComponent, securityGetCurrentInstance, sheet, signal, template, untrack, wc };
 //# sourceMappingURL=index.js.map