j20 0.0.19 → 0.0.21

package/dist/index.js

@@ -373,8 +373,8 @@ const getChildren = (propChildren) => {
     }
     return arr;
 };
-let count = 0;
-const generateId = () => (++count).toString(32);
+let count$1 = 0;
+const generateId = () => (++count$1).toString(32);
 const styleObjectToString = (style) => {
     let styleString = "";
     for (const key in style) {
@@ -439,27 +439,29 @@ const add = (node, key, newValue) => {
         }
     }
 };
+const nodeAttributesEffect = (node, propsFn) => {
+    let oldProps = {};
+    effect(() => {
+        const newProps = { ...propsFn() };
+        const newKeys = Object.keys(newProps);
+        const oldKeys = Object.keys(oldProps);
+        const allKeys = new Set([...newKeys, ...oldKeys]);
+        for (const key of allKeys) {
+            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 = {};
-    props &&
-        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) {
-                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;
-        });
+    props && nodeAttributesEffect(node, props);
     // 独立 wc 初始化
     node.lazyInit?.();
     if (children &&
@@ -476,6 +478,21 @@ const createDom = (tag, props, children) => {
 
 const BRAND = "j20";
 
+const isSignal = (a) => a?.SIGNAL === true;
+const addStyleSheet = (node, styleSheet) => {
+    if (node.adoptedStyleSheets &&
+        !node.adoptedStyleSheets.includes(styleSheet)) {
+        node.adoptedStyleSheets = [...node.adoptedStyleSheets, styleSheet];
+    }
+};
+const removeStyleSheet = (node, styleSheet) => {
+    if (node.adoptedStyleSheets && node.adoptedStyleSheets.includes(styleSheet)) {
+        const newSet = new Set(node.adoptedStyleSheets);
+        newSet.delete(styleSheet);
+        node.adoptedStyleSheets = Array.from(newSet);
+    }
+};
+
 const registerWebComponent = (Comp) => {
     if (!Comp.customElement) {
         throw new Error("Custom element options is not provided");
@@ -565,16 +582,13 @@ const buildClass = (Comp) => {
                 this.append(...elements);
             }
         }
-        addStyleSheet(sheet) {
-            if (this.#shadow) {
-                this.#shadow.adoptedStyleSheets.push(sheet);
-            }
+        addStyleSheet(styleSheet) {
+            if (this.#shadow)
+                addStyleSheet(this.#shadow, styleSheet);
         }
-        removeStyleSheet(sheet) {
-            if (this.#shadow) {
-                this.#shadow.adoptedStyleSheets =
-                    this.#shadow.adoptedStyleSheets.filter((s) => s !== sheet);
-            }
+        removeStyleSheet(styleSheet) {
+            if (this.#shadow)
+                removeStyleSheet(this.#shadow, styleSheet);
         }
         attributeChangedCallback(name, oldValue, newValue) {
             const attrs = NewElementClass.observedAttributes;
@@ -657,6 +671,16 @@ const createWebComponent = (tag, props) => {
         else {
             el.appendToBody(getChildren([].concat(ret)));
         }
+        let attributesGetter = () => {
+            const attrs = props ? props() : {};
+            const attrList = Object.values(tag.customElement.props ?? {}).map((i) => i.attribute);
+            for (const attr of attrList) {
+                delete attrs[attr];
+            }
+            delete attrs.children;
+            return attrs;
+        };
+        nodeAttributesEffect(el, attributesGetter);
         return el;
     };
     hostStack.push(el);
@@ -818,8 +842,6 @@ const wc = () => {
 
 const $ = (val) => val;
 
-const isSignal = (a) => a?.SIGNAL === true;
-
 const contextWeakMap = new WeakMap();
 const context = (Context) => {
     const instance = securityGetCurrentInstance();
@@ -891,16 +913,68 @@ const onMount = (callback) => {
 
 const onDestroy = (callback) => effect(() => callback);
 
-const sheet = (css) => {
+let count = BigInt(0);
+const getId = () => (++count).toString(32);
+const refWeakMap = new WeakMap();
+const createCss = (css) => {
+    const id = getId();
+    return () => {
+        const styleId = id;
+        const replacedCss = css.replace(/\.(\w[\w-]*)\s*?\{/g, (_, className) => {
+            return `.${className}_${styleId} {`;
+        });
+        styleSheet(id, replacedCss);
+        return new Proxy({}, {
+            get: (_, prop) => {
+                return `${prop}_${styleId}`;
+            },
+        });
+    };
+};
+const addReference = (host, id, add) => {
+    if (!refWeakMap.get(host)) {
+        refWeakMap.set(host, []);
+    }
+    const states = refWeakMap.get(host) ?? [];
+    const state = states.find((state) => state.id === id);
+    if (!state) {
+        refWeakMap.set(host, [
+            ...states,
+            {
+                id,
+                refCount: 1,
+            },
+        ]);
+        add();
+    }
+    else {
+        state.refCount++;
+    }
+};
+const removeReference = (host, id, remove) => {
+    const states = refWeakMap.get(host) ?? [];
+    const state = states.find((state) => state.id === id);
+    if (state) {
+        state.refCount--;
+        if (state.refCount === 0) {
+            remove();
+            refWeakMap.set(host, states.filter((state) => state.id !== id));
+        }
+    }
+};
+const styleSheet = (id, css) => {
     let instance = getCurrentInstance();
     const sheet = new CSSStyleSheet();
     css && sheet.replaceSync(css);
     let root;
     while (instance) {
         if (instance.host) {
-            instance.host.addStyleSheet(sheet);
+            const host = instance.host;
+            addReference(host, id, () => {
+                host.addStyleSheet(sheet);
+            });
             onDestroy(() => {
-                instance.host.removeStyleSheet(sheet);
+                removeReference(host, id, () => host.removeStyleSheet(sheet));
             });
             break;
         }
@@ -913,33 +987,22 @@ const sheet = (css) => {
     if (root) {
         let node = root;
         do {
-            if (node instanceof ShadowRoot) {
-                break;
-            }
-            if (node === document) {
+            if (node instanceof ShadowRoot || node === document) {
                 break;
             }
             node = node.parentNode;
         } while (node);
-        node.adoptedStyleSheets.push(sheet);
+        addReference(node, id, () => {
+            addStyleSheet(node, sheet);
+        });
         onDestroy(() => {
-            node.adoptedStyleSheets = node.adoptedStyleSheets.filter((s) => s !== sheet);
+            removeReference(node, id, () => {
+                removeStyleSheet(node, sheet);
+            });
         });
     }
     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);
@@ -1380,5 +1443,5 @@ const template = (template) => {
     };
 };
 
-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 };
+export { $, $useContext, Case, Computed, Default, Effect, For, Fragment, If, Replace, Signal, Some, Switch, batch, computed, createComponent, createContext, createCss, createDom, createElement, createLogicComponent, createRoot, effect, getCurrentInstance, h2, id, instanceCreate, instanceCreateElement, instanceDestroy, instanceGetElements, instanceInit, jsx, jsxs, mounts, onDestroy, onMount, ref, registerWebComponent, securityGetCurrentInstance, signal, styleSheet, template, untrack, wc };
 //# sourceMappingURL=index.js.map