j20 0.0.21 → 0.0.23

package/dist/index.js

@@ -1,14 +1,7 @@
-// 当前正在执行的effect或computed
 let currentReaction = null;
-// 批处理栈，用于延迟 effect 的执行
 let batchDepth = 0;
-// 待执行的 effect 队列
 let pendingEffects = new Set();
-// 存储所有信号的依赖关系
 const depMap = new WeakMap();
-/**
- * Signal类 - 用于存储响应式数据
- */
 class Signal {
     SIGNAL = true;
     _value;
@@ -18,7 +11,6 @@ class Signal {
         this._value = value;
     }
     get value() {
-        // 如果有当前正在执行的reaction，建立依赖关系
         if (currentReaction) {
             this.track(currentReaction);
         }
@@ -29,21 +21,19 @@ class Signal {
             return;
         this._value = newValue;
         this._version++;
-        // 通知所有依赖项
-        this._deps.forEach((reaction) => {
+        if (this._deps.size === 0)
+            return;
+        const deps = Array.from(this._deps);
+        deps.forEach((reaction) => {
             if (reaction instanceof Computed) {
                 reaction.markDirty();
             }
             else if (reaction.isActive()) {
-                // 对于effect，使用版本检查优化
-                if (reaction._depVersions.has(this) || reaction.hasDepsChanged()) {
-                    if (batchDepth > 0) {
-                        // 在批处理模式下，延迟执行 effect
-                        pendingEffects.add(reaction);
-                    }
-                    else {
-                        reaction.execute();
-                    }
+                if (batchDepth > 0) {
+                    pendingEffects.add(reaction);
+                }
+                else {
+                    reaction.execute();
                 }
             }
         });
@@ -51,25 +41,19 @@ class Signal {
     get version() {
         return this._version;
     }
-    // 建立依赖关系
     track(reaction) {
         if (!this._deps.has(reaction)) {
             this._deps.add(reaction);
-            // 维护反向依赖关系
             let reactions = depMap.get(this);
             if (!reactions) {
                 reactions = new Set();
                 depMap.set(this, reactions);
             }
             reactions.add(reaction);
-            // 在reaction中记录依赖
-            reaction.track(this);
         }
+        reaction.track(this);
     }
 }
-/**
- * Computed类 - 用于计算派生值
- */
 class Computed {
     SIGNAL = true;
     computeFn;
@@ -81,7 +65,6 @@ class Computed {
     sources = new Set();
     constructor(computeFn) {
         this.computeFn = computeFn;
-        // 使用symbol作为初始值占位符
         this._value = undefined;
     }
     get value() {
@@ -91,12 +74,11 @@ class Computed {
         if (this.dirty) {
             this.compute();
         }
-        // 建立依赖关系
         if (currentReaction) {
             if (!this._deps.has(currentReaction)) {
                 this._deps.add(currentReaction);
-                currentReaction.track(this);
             }
+            currentReaction.track(this);
         }
         return this._value;
     }
@@ -107,17 +89,14 @@ class Computed {
         if (this.disposed) {
             throw new Error("Cannot compute disposed computed");
         }
-        // 检查循环依赖
-        if (computationStack.includes(this)) {
+        if (computationStack.has(this)) {
             throw new Error("Circular dependency detected in computed values");
         }
         this.dirty = false;
-        // 保存当前状态
         const prevReaction = currentReaction;
         const prevSources = this.sources;
         this.sources = new Set();
-        // 将当前computed加入计算栈
-        computationStack.push(this);
+        computationStack.add(this);
         currentReaction = this;
         try {
             this._value = this.computeFn();
@@ -128,19 +107,15 @@ class Computed {
             throw e;
         }
         finally {
-            // 清理工作
-            const index = computationStack.indexOf(this);
-            if (index !== -1) {
-                computationStack.splice(index, 1);
-            }
+            computationStack.delete(this);
             currentReaction = prevReaction;
-            // 清理不再依赖的sources
             prevSources.forEach((source) => {
                 if (!this.sources.has(source)) {
                     const reactions = depMap.get(source);
                     if (reactions) {
                         reactions.delete(this);
                     }
+                    source._deps.delete(this);
                 }
             });
         }
@@ -149,14 +124,15 @@ class Computed {
         if (this.disposed || this.dirty)
             return;
         this.dirty = true;
-        // 通知依赖项
-        this._deps.forEach((reaction) => {
+        if (this._deps.size === 0)
+            return;
+        const deps = Array.from(this._deps);
+        deps.forEach((reaction) => {
             if (reaction instanceof Computed) {
                 reaction.markDirty();
             }
             else if (reaction.isActive()) {
                 if (batchDepth > 0) {
-                    // 在批处理模式下，延迟执行 effect
                     pendingEffects.add(reaction);
                 }
                 else {
@@ -168,52 +144,37 @@ class Computed {
     track(source) {
         if (this.disposed)
             return;
-        if (!this.sources.has(source)) {
-            this.sources.add(source);
-            let reactions = depMap.get(source);
-            if (!reactions) {
-                reactions = new Set();
-                depMap.set(source, reactions);
-            }
-            reactions.add(this);
-        }
+        this.sources.add(source);
     }
     dispose() {
         if (this.disposed)
             return;
         this.disposed = true;
-        // 清理所有依赖关系
         this.sources.forEach((source) => {
             const reactions = depMap.get(source);
             if (reactions) {
                 reactions.delete(this);
             }
+            source._deps.delete(this);
         });
         this.sources.clear();
         this._deps.clear();
-        // 清理引用
         this._value = undefined;
         this.computeFn = undefined;
     }
 }
-// 用于检测循环依赖
-const computationStack = [];
-/**
- * Effect类 - 用于执行副作用
- */
+const computationStack = new Set();
 class Effect {
     effectFn;
     cleanupFn = null;
     disposed = false;
     _deps = new Set();
-    _depVersions = new Map();
     constructor(effectFn) {
         this.effectFn = effectFn;
     }
     execute() {
         if (this.disposed)
             return;
-        // 执行清理函数
         if (this.cleanupFn) {
             try {
                 this.cleanupFn();
@@ -223,7 +184,14 @@ class Effect {
             }
             this.cleanupFn = null;
         }
-        // 执行effect并收集依赖
+        this._deps.forEach((dep) => {
+            const reactions = depMap.get(dep);
+            if (reactions) {
+                reactions.delete(this);
+            }
+            dep._deps.delete(this);
+        });
+        this._deps.clear();
         const prevReaction = currentReaction;
         currentReaction = this;
         try {
@@ -240,16 +208,14 @@ class Effect {
         if (this.disposed)
             return;
         this.disposed = true;
-        // 清理所有依赖关系
         this._deps.forEach((dep) => {
             const reactions = depMap.get(dep);
             if (reactions) {
                 reactions.delete(this);
             }
+            dep._deps.delete(this);
         });
         this._deps.clear();
-        this._depVersions.clear();
-        // 执行清理函数
         if (this.cleanupFn) {
             try {
                 this.cleanupFn();
@@ -266,44 +232,20 @@ class Effect {
     track(source) {
         if (this.disposed)
             return;
-        if (!this._deps.has(source)) {
-            this._deps.add(source);
-            // 记录依赖的版本号
-            if ("version" in source) {
-                this._depVersions.set(source, source.version);
-            }
-            let reactions = depMap.get(source);
-            if (!reactions) {
-                reactions = new Set();
-                depMap.set(source, reactions);
-            }
-            reactions.add(this);
-        }
-    }
-    hasDepsChanged() {
-        for (const [dep, version] of this._depVersions) {
-            if ("version" in dep && dep.version !== version) {
-                return true;
-            }
-        }
-        return false;
+        this._deps.add(source);
     }
 }
-// 创建信号
 function signal(initialValue) {
     return new Signal(initialValue);
 }
-// 创建计算值
 function computed(computeFn) {
     return new Computed(computeFn);
 }
-// 创建副作用
 function effect$1(effectFn) {
     const effectInstance = new Effect(effectFn);
     effectInstance.execute();
     return effectInstance;
 }
-// 临时取消追踪
 function untrack(fn) {
     const prevReaction = currentReaction;
     currentReaction = null;
@@ -314,7 +256,6 @@ function untrack(fn) {
         currentReaction = prevReaction;
     }
 }
-// 批处理 - 延迟 effect 的执行直到批处理结束
 function batch(fn) {
     batchDepth++;
     try {
@@ -322,14 +263,17 @@ function batch(fn) {
     }
     finally {
         batchDepth--;
-        // 当批处理结束时，执行所有待处理的 effect
         if (batchDepth === 0) {
             const effects = Array.from(pendingEffects);
             pendingEffects.clear();
-            // 执行所有待处理的 effect
             effects.forEach((effect) => {
                 if (effect.isActive()) {
-                    effect.execute();
+                    try {
+                        effect.execute();
+                    }
+                    catch (e) {
+                        console.error(e);
+                    }
                 }
             });
         }
@@ -373,8 +317,8 @@ const getChildren = (propChildren) => {
     }
     return arr;
 };
-let count$1 = 0;
-const generateId = () => (++count$1).toString(32);
+let count = 0;
+const generateId = () => (++count).toString(32);
 const styleObjectToString = (style) => {
     let styleString = "";
     for (const key in style) {
@@ -479,19 +423,38 @@ const createDom = (tag, props, children) => {
 const BRAND = "j20";
 
 const isSignal = (a) => a?.SIGNAL === true;
+const createStyleSheet = (css) => {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+    return sheet;
+};
 const addStyleSheet = (node, styleSheet) => {
-    if (node.adoptedStyleSheets &&
+    if ("addStyleSheet" in node) {
+        node.addStyleSheet(styleSheet);
+    }
+    else if (node.adoptedStyleSheets &&
         !node.adoptedStyleSheets.includes(styleSheet)) {
         node.adoptedStyleSheets = [...node.adoptedStyleSheets, styleSheet];
     }
 };
 const removeStyleSheet = (node, styleSheet) => {
-    if (node.adoptedStyleSheets && node.adoptedStyleSheets.includes(styleSheet)) {
+    if ("removeStyleSheet" in node) {
+        node.removeStyleSheet(styleSheet);
+    }
+    else if (node.adoptedStyleSheets &&
+        node.adoptedStyleSheets.includes(styleSheet)) {
         const newSet = new Set(node.adoptedStyleSheets);
         newSet.delete(styleSheet);
         node.adoptedStyleSheets = Array.from(newSet);
     }
 };
+const cssHash = (str) => {
+    let h = 5381;
+    for (let i = 0; i < str.length; i++) {
+        h = (h * 33) ^ str.charCodeAt(i);
+    }
+    return (h >>> 0).toString(36); // 转为短字符串
+};
 
 const registerWebComponent = (Comp) => {
     if (!Comp.customElement) {
@@ -737,8 +700,11 @@ const instanceCreateElement = (instance, runner) => {
     return fragment;
 };
 const instanceCreate = (runner, parent) => {
+    parent && hostStack.push(parent.host);
     const instance = instanceInit(parent);
-    return [instance, instanceCreateElement(instance, runner)];
+    const result = [instance, instanceCreateElement(instance, runner)];
+    parent && hostStack.pop();
+    return result;
 };
 const instanceGetElements = (instance) => {
     const [start, end] = instance.range;
@@ -913,95 +879,63 @@ const onMount = (callback) => {
 
 const onDestroy = (callback) => effect(() => callback);
 
-let count = BigInt(0);
-const getId = () => (++count).toString(32);
 const refWeakMap = new WeakMap();
 const createCss = (css) => {
-    const id = getId();
+    let id = undefined;
     return () => {
-        const styleId = id;
+        if (!id)
+            id = cssHash(css);
+        const classNameId = `j_${id}`;
         const replacedCss = css.replace(/\.(\w[\w-]*)\s*?\{/g, (_, className) => {
-            return `.${className}_${styleId} {`;
+            return `.${className}_${classNameId} {`;
         });
-        styleSheet(id, replacedCss);
+        styleSheet(replacedCss, id);
         return new Proxy({}, {
             get: (_, prop) => {
-                return `${prop}_${styleId}`;
+                return `${prop}_${classNameId}`;
             },
         });
     };
 };
-const addReference = (host, id, add) => {
+const addReference = (host, id, css) => {
     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();
+        const newState = {
+            id,
+            refCount: 1,
+            styleSheet: createStyleSheet(css),
+        };
+        refWeakMap.set(host, [...states, newState]);
+        addStyleSheet(host, newState.styleSheet);
     }
     else {
         state.refCount++;
     }
 };
-const removeReference = (host, id, remove) => {
+const removeReference = (host, id) => {
     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));
+            removeStyleSheet(host, state.styleSheet);
         }
     }
 };
-const styleSheet = (id, css) => {
-    let instance = getCurrentInstance();
-    const sheet = new CSSStyleSheet();
-    css && sheet.replaceSync(css);
-    let root;
-    while (instance) {
-        if (instance.host) {
-            const host = instance.host;
-            addReference(host, id, () => {
-                host.addStyleSheet(sheet);
-            });
-            onDestroy(() => {
-                removeReference(host, id, () => host.removeStyleSheet(sheet));
-            });
-            break;
-        }
-        if (instance.root) {
-            root = instance.root;
-            break;
-        }
-        instance = instance?.parent;
-    }
-    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(() => {
-            removeReference(node, id, () => {
-                removeStyleSheet(node, sheet);
-            });
-        });
-    }
-    return sheet;
+const styleSheet = (css, id) => {
+    const cssId = id ?? cssHash(css);
+    const host = getCurrentHost();
+    if (!host)
+        throw new Error("host not found");
+    addReference(host, cssId, css);
+    onDestroy(() => {
+        removeReference(host, cssId);
+    });
 };
 
 function insertAfter(parentNode, newNode, targetNode) {
@@ -1411,13 +1345,17 @@ const createElement = (tag, props, children) => {
 };
 
 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]);
+    let rootHost = rootElement;
+    while (true) {
+        if (rootHost instanceof ShadowRoot || rootHost === document) {
+            break;
+        }
+        rootHost = rootHost.parentNode;
+    }
+    hostStack.push(rootHost);
+    let [rootInstance, fragment] = instanceCreate(() => createElement(boot, null, null));
+    hostStack.pop();
+    rootElement.append(fragment);
     return rootInstance;
 };