j20 0.0.17 → 0.0.20

package/dist/index.js

@@ -373,15 +373,8 @@ const getChildren = (propChildren) => {
     }
     return arr;
 };
-let overflow = "";
-let count = 0;
-const generateId = () => {
-    if (count === Number.MAX_SAFE_INTEGER) {
-        overflow += count.toString(32);
-        count = 0;
-    }
-    return `${overflow}${(count++).toString(32)}`;
-};
+let count$1 = 0;
+const generateId = () => (++count$1).toString(32);
 const styleObjectToString = (style) => {
     let styleString = "";
     for (const key in style) {
@@ -483,6 +476,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");
@@ -572,16 +580,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;
@@ -825,8 +830,6 @@ const wc = () => {
 
 const $ = (val) => val;
 
-const isSignal = (a) => a?.SIGNAL === true;
-
 const contextWeakMap = new WeakMap();
 const context = (Context) => {
     const instance = securityGetCurrentInstance();
@@ -898,40 +901,96 @@ 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;
         }
+        if (instance.root) {
+            root = instance.root;
+            break;
+        }
         instance = instance?.parent;
     }
-    if (!instance) {
-        document.adoptedStyleSheets.push(sheet);
+    if (root) {
+        let node = root;
+        do {
+            if (node instanceof ShadowRoot || node === document) {
+                break;
+            }
+            node = node.parentNode;
+        } while (node);
+        addReference(node, id, () => {
+            addStyleSheet(node, sheet);
+        });
         onDestroy(() => {
-            document.adoptedStyleSheets = document.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);
@@ -1339,12 +1398,15 @@ const createElement = (tag, props, children) => {
                 : createComponent(tag, props);
 };
 
-const createRoot = (boot) => {
-    let [instance, fragment] = instanceCreate(() => boot());
-    return {
-        element: fragment,
-        instance,
+const createRoot = (boot, rootElement) => {
+    const rootInstance = {
+        root: rootElement,
+        id: generateId(),
+        range: [document.createTextNode(""), document.createTextNode("")],
     };
+    let [, fragment] = instanceCreate(() => createElement(boot, null, null), rootInstance);
+    rootElement.append(rootInstance.range[0], fragment, rootInstance.range[1]);
+    return rootInstance;
 };
 
 const h2 = (tag, props, children) => {
@@ -1369,5 +1431,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