@viewfly/core 0.0.3 → 0.0.4

package/bundles/foundation/renderer.d.ts

@@ -30,4 +30,5 @@ export declare class Renderer {
     private createTextNode;
     private updateNativeNodeProperties;
     private applyRefs;
+    private bindEvent;
 }

package/bundles/index.esm.js

@@ -383,13 +383,25 @@ function useSignal(state) {
             return;
         }
         state = newState;
-        for (const fn of signal[depsKey]) {
+        const depCallbacks = Array.from(signal[depsKey]);
+        for (const fn of depCallbacks) {
+            // 回调中可能会对依赖做出修改，故需先缓存起来
             fn();
         }
     };
     signal[depsKey] = new Set();
     return signal;
 }
+function invokeDepFn(fn) {
+    const deps = [];
+    signalDepsStack.push(deps);
+    const data = fn();
+    signalDepsStack.pop();
+    return {
+        deps,
+        data
+    };
+}
 /**
  * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
  * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
@@ -398,18 +410,32 @@ function useSignal(state) {
  * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
 function useDerived(callback, isContinue) {
-    const deps = [];
-    signalDepsStack.push(deps);
-    const data = callback();
-    signalDepsStack.pop();
+    let { data, deps } = invokeDepFn(callback);
     const signal = useSignal(data);
-    if (deps.length) {
-        const unListen = useEffect(deps, () => {
-            const data = callback();
-            signal.set(data);
-            if (typeof isContinue === 'function' && !isContinue(data)) {
-                unListen();
+    const component = getSetupContext(false);
+    const unListenRef = {};
+    function listen(model, deps, callback, unListenRef, isContinue) {
+        const nextListen = () => {
+            unListenRef.unListen();
+            const { data: nextData, deps: nextDeps } = invokeDepFn(callback);
+            model.set(nextData);
+            if (typeof isContinue !== 'function' || isContinue(nextData) !== false) {
+                listen(model, nextDeps, callback, unListenRef, isContinue);
+            }
+        };
+        unListenRef.unListen = () => {
+            for (const s of deps) {
+                s[depsKey].delete(nextListen);
             }
+        };
+        for (const s of deps) {
+            s[depsKey].add(nextListen);
+        }
+    }
+    listen(signal, deps, callback, unListenRef, isContinue);
+    if (component) {
+        component.destroyCallbacks.push(() => {
+            unListenRef.unListen();
         });
     }
     return signal;
@@ -917,14 +943,6 @@ let Renderer = class Renderer {
     }
     createChainByComponentFactory(context, factory, parent) {
         const component = factory.createInstance(context);
-        // if (component.setup === Fragment) {
-        //   const children = component.props.children
-        //   return this.createChainByChildren(
-        //     component,
-        //     Array.isArray(children) ? children : [children],
-        //     parent
-        //   )
-        // }
         return new Atom(component, parent);
     }
     createChainByJSXElement(context, element, parent) {
@@ -986,7 +1004,10 @@ let Renderer = class Renderer {
                 continue;
             }
             if (key === 'class') {
-                this.nativeRenderer.setClass(nativeNode, classToString(props[key]));
+                const className = classToString(props[key]);
+                if (className) {
+                    this.nativeRenderer.setClass(nativeNode, className);
+                }
                 continue;
             }
             if (key === 'style') {
@@ -999,7 +1020,7 @@ let Renderer = class Renderer {
             if (/^on[A-Z]/.test(key)) {
                 const listener = props[key];
                 if (typeof listener === 'function') {
-                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), listener);
+                    this.bindEvent(vNode, key, nativeNode, listener);
                 }
                 continue;
             }
@@ -1039,7 +1060,10 @@ let Renderer = class Renderer {
             }
             if (/^on[A-Z]/.test(key)) {
                 if (typeof value === 'function') {
-                    this.nativeRenderer.unListen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
+                    const type = key.replace(/^on/, '').toLowerCase();
+                    const oldOn = oldVNode.on;
+                    this.nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate);
+                    Reflect.deleteProperty(oldOn, type);
                 }
                 continue;
             }
@@ -1073,12 +1097,8 @@ let Renderer = class Renderer {
             }
             if (/^on[A-Z]/.test(key)) {
                 const listenType = key.replace(/^on/, '').toLowerCase();
-                if (typeof oldValue === 'function') {
-                    this.nativeRenderer.unListen(nativeNode, listenType, oldValue);
-                }
-                if (typeof newValue === 'function') {
-                    this.nativeRenderer.listen(nativeNode, listenType, newValue);
-                }
+                newVNode.on = oldVNode.on;
+                newVNode.on[listenType].listenFn = newValue;
                 continue;
             }
             if (key === refKey) {
@@ -1105,7 +1125,7 @@ let Renderer = class Renderer {
             }
             if (/^on[A-Z]/.test(key)) {
                 if (typeof value === 'function') {
-                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
+                    this.bindEvent(newVNode, key, nativeNode, value);
                 }
                 continue;
             }
@@ -1128,6 +1148,22 @@ let Renderer = class Renderer {
             }
         }
     }
+    bindEvent(vNode, key, nativeNode, listenFn) {
+        let on = vNode.on;
+        if (!on) {
+            vNode.on = on = {};
+        }
+        const type = key.replace(/^on/, '').toLowerCase();
+        const delegate = function (...args) {
+            return delegateObj.listenFn.apply(this, args);
+        };
+        const delegateObj = {
+            delegate,
+            listenFn
+        };
+        on[type] = delegateObj;
+        this.nativeRenderer.listen(nativeNode, type, delegate);
+    }
 };
 Renderer = __decorate([
     Injectable(),

package/bundles/index.js

@@ -384,13 +384,25 @@ function useSignal(state) {
             return;
         }
         state = newState;
-        for (const fn of signal[depsKey]) {
+        const depCallbacks = Array.from(signal[depsKey]);
+        for (const fn of depCallbacks) {
+            // 回调中可能会对依赖做出修改，故需先缓存起来
             fn();
         }
     };
     signal[depsKey] = new Set();
     return signal;
 }
+function invokeDepFn(fn) {
+    const deps = [];
+    signalDepsStack.push(deps);
+    const data = fn();
+    signalDepsStack.pop();
+    return {
+        deps,
+        data
+    };
+}
 /**
  * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
  * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
@@ -399,18 +411,32 @@ function useSignal(state) {
  * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
 function useDerived(callback, isContinue) {
-    const deps = [];
-    signalDepsStack.push(deps);
-    const data = callback();
-    signalDepsStack.pop();
+    let { data, deps } = invokeDepFn(callback);
     const signal = useSignal(data);
-    if (deps.length) {
-        const unListen = useEffect(deps, () => {
-            const data = callback();
-            signal.set(data);
-            if (typeof isContinue === 'function' && !isContinue(data)) {
-                unListen();
+    const component = getSetupContext(false);
+    const unListenRef = {};
+    function listen(model, deps, callback, unListenRef, isContinue) {
+        const nextListen = () => {
+            unListenRef.unListen();
+            const { data: nextData, deps: nextDeps } = invokeDepFn(callback);
+            model.set(nextData);
+            if (typeof isContinue !== 'function' || isContinue(nextData) !== false) {
+                listen(model, nextDeps, callback, unListenRef, isContinue);
+            }
+        };
+        unListenRef.unListen = () => {
+            for (const s of deps) {
+                s[depsKey].delete(nextListen);
             }
+        };
+        for (const s of deps) {
+            s[depsKey].add(nextListen);
+        }
+    }
+    listen(signal, deps, callback, unListenRef, isContinue);
+    if (component) {
+        component.destroyCallbacks.push(() => {
+            unListenRef.unListen();
         });
     }
     return signal;
@@ -918,14 +944,6 @@ exports.Renderer = class Renderer {
     }
     createChainByComponentFactory(context, factory, parent) {
         const component = factory.createInstance(context);
-        // if (component.setup === Fragment) {
-        //   const children = component.props.children
-        //   return this.createChainByChildren(
-        //     component,
-        //     Array.isArray(children) ? children : [children],
-        //     parent
-        //   )
-        // }
         return new Atom(component, parent);
     }
     createChainByJSXElement(context, element, parent) {
@@ -987,7 +1005,10 @@ exports.Renderer = class Renderer {
                 continue;
             }
             if (key === 'class') {
-                this.nativeRenderer.setClass(nativeNode, classToString(props[key]));
+                const className = classToString(props[key]);
+                if (className) {
+                    this.nativeRenderer.setClass(nativeNode, className);
+                }
                 continue;
             }
             if (key === 'style') {
@@ -1000,7 +1021,7 @@ exports.Renderer = class Renderer {
             if (/^on[A-Z]/.test(key)) {
                 const listener = props[key];
                 if (typeof listener === 'function') {
-                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), listener);
+                    this.bindEvent(vNode, key, nativeNode, listener);
                 }
                 continue;
             }
@@ -1040,7 +1061,10 @@ exports.Renderer = class Renderer {
             }
             if (/^on[A-Z]/.test(key)) {
                 if (typeof value === 'function') {
-                    this.nativeRenderer.unListen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
+                    const type = key.replace(/^on/, '').toLowerCase();
+                    const oldOn = oldVNode.on;
+                    this.nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate);
+                    Reflect.deleteProperty(oldOn, type);
                 }
                 continue;
             }
@@ -1074,12 +1098,8 @@ exports.Renderer = class Renderer {
             }
             if (/^on[A-Z]/.test(key)) {
                 const listenType = key.replace(/^on/, '').toLowerCase();
-                if (typeof oldValue === 'function') {
-                    this.nativeRenderer.unListen(nativeNode, listenType, oldValue);
-                }
-                if (typeof newValue === 'function') {
-                    this.nativeRenderer.listen(nativeNode, listenType, newValue);
-                }
+                newVNode.on = oldVNode.on;
+                newVNode.on[listenType].listenFn = newValue;
                 continue;
             }
             if (key === refKey) {
@@ -1106,7 +1126,7 @@ exports.Renderer = class Renderer {
             }
             if (/^on[A-Z]/.test(key)) {
                 if (typeof value === 'function') {
-                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
+                    this.bindEvent(newVNode, key, nativeNode, value);
                 }
                 continue;
             }
@@ -1129,6 +1149,22 @@ exports.Renderer = class Renderer {
             }
         }
     }
+    bindEvent(vNode, key, nativeNode, listenFn) {
+        let on = vNode.on;
+        if (!on) {
+            vNode.on = on = {};
+        }
+        const type = key.replace(/^on/, '').toLowerCase();
+        const delegate = function (...args) {
+            return delegateObj.listenFn.apply(this, args);
+        };
+        const delegateObj = {
+            delegate,
+            listenFn
+        };
+        on[type] = delegateObj;
+        this.nativeRenderer.listen(nativeNode, type, delegate);
+    }
 };
 exports.Renderer = __decorate([
     di.Injectable(),

package/bundles/model/jsx-element.d.ts

@@ -21,11 +21,16 @@ export declare class JSXText implements JSXTypeof {
     constructor(text: string);
     is(target: JSXTypeof): boolean;
 }
+export interface ListenDelegate {
+    delegate: () => any;
+    listenFn: ((...args: any[]) => any) | void;
+}
 export declare class JSXElement implements JSXTypeof {
     type: string;
     props: Props<any>;
     key?: Key | undefined;
     $$typeOf: string;
+    on?: Record<string, ListenDelegate>;
     constructor(type: string, props: Props<any>, key?: Key | undefined);
     is(target: JSXTypeof): boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -34,5 +34,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "55152a4c7db778d22e4ed1d8cd648f9800a01992"
+  "gitHead": "fed5b3e328a9f70873bb1c33ea3789c099ad3ebe"
 }