@viewfly/core 0.0.2 → 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

@@ -58,8 +58,12 @@ function getSignalDepsContext() {
     return signalDepsStack[signalDepsStack.length - 1];
 }
 class JSXComponent {
-    constructor(createInstance) {
-        this.createInstance = createInstance;
+    constructor(props, factory) {
+        this.props = props;
+        this.factory = factory;
+    }
+    createInstance(injector) {
+        return this.factory(injector, this.props);
     }
 }
 /**
@@ -379,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 的值时，自动计算最新的值。
@@ -394,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;
@@ -473,20 +503,20 @@ const Fragment = function Fragment(props) {
         return props.children;
     };
 };
-function jsx(setup, config, key) {
+function jsx(setup, props, key) {
     if (typeof setup === 'string') {
-        return new JSXElement(setup, config, key);
+        return new JSXElement(setup, props, key);
     }
-    return new JSXComponent(function (context) {
-        return new Component(context, setup, config, key);
+    return new JSXComponent(props, function (context, props) {
+        return new Component(context, setup, props, key);
     });
 }
-function jsxs(setup, config, key) {
+function jsxs(setup, props, key) {
     if (typeof setup === 'string') {
-        return new JSXElement(setup, config, key);
+        return new JSXElement(setup, props, key);
     }
-    return new JSXComponent(function (context) {
-        return new Component(context, setup, config, key);
+    return new JSXComponent(props, function (context, props) {
+        return new Component(context, setup, props, key);
     });
 }
 class JSXText {
@@ -913,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) {
@@ -982,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') {
@@ -995,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;
             }
@@ -1035,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;
             }
@@ -1069,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) {
@@ -1101,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;
             }
@@ -1124,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

@@ -59,8 +59,12 @@ function getSignalDepsContext() {
     return signalDepsStack[signalDepsStack.length - 1];
 }
 class JSXComponent {
-    constructor(createInstance) {
-        this.createInstance = createInstance;
+    constructor(props, factory) {
+        this.props = props;
+        this.factory = factory;
+    }
+    createInstance(injector) {
+        return this.factory(injector, this.props);
     }
 }
 /**
@@ -380,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 的值时，自动计算最新的值。
@@ -395,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;
@@ -474,20 +504,20 @@ const Fragment = function Fragment(props) {
         return props.children;
     };
 };
-function jsx(setup, config, key) {
+function jsx(setup, props, key) {
     if (typeof setup === 'string') {
-        return new JSXElement(setup, config, key);
+        return new JSXElement(setup, props, key);
     }
-    return new JSXComponent(function (context) {
-        return new Component(context, setup, config, key);
+    return new JSXComponent(props, function (context, props) {
+        return new Component(context, setup, props, key);
     });
 }
-function jsxs(setup, config, key) {
+function jsxs(setup, props, key) {
     if (typeof setup === 'string') {
-        return new JSXElement(setup, config, key);
+        return new JSXElement(setup, props, key);
     }
-    return new JSXComponent(function (context) {
-        return new Component(context, setup, config, key);
+    return new JSXComponent(props, function (context, props) {
+        return new Component(context, setup, props, key);
     });
 }
 class JSXText {
@@ -914,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) {
@@ -983,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') {
@@ -996,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;
             }
@@ -1036,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;
             }
@@ -1070,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) {
@@ -1102,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;
             }
@@ -1125,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/jsx.d.ts

@@ -1,5 +1,6 @@
 import { Key, Ref } from '@viewfly/core';
 export declare namespace JSX {
+    type ClassNames = string | Record<string, unknown> | Array<string | Record<string, unknown>>;
     interface Attributes<T extends object> {
         ref?: Ref<T> | Ref<T>[];
         key?: Key;

package/bundles/model/component.d.ts

@@ -1,8 +1,10 @@
 import { Provider, ReflectiveInjector, AbstractType, Type, InjectionToken, InjectFlags, Injector } from '@tanbo/di';
 import { Props, Key, JSXTypeof, JSXChildNode } from './jsx-element';
 export declare class JSXComponent {
-    createInstance: (injector: Component) => Component;
-    constructor(createInstance: (injector: Component) => Component);
+    props: Props;
+    private factory;
+    constructor(props: Props, factory: (injector: Component, props: Props) => Component);
+    createInstance(injector: Component): Component;
 }
 export interface ComponentSetup<T extends Props<any> = Props<any>> {
     (props?: T): () => JSXChildNode;

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

@@ -7,10 +7,10 @@ export interface Props<T = JSXChildNode | JSXChildNode[]> {
 }
 export declare const Fragment: (props: Props) => () => JSXChildNode | JSXChildNode[];
 export type Key = number | string;
-export declare function jsx<T extends JSXChildNode>(name: string, config: Props<T>, key?: Key): JSXElement;
-export declare function jsx<T extends JSXChildNode>(setup: ComponentSetup, config: Props<T>, key?: Key): JSXComponent;
-export declare function jsxs<T extends JSXChildNode[]>(name: string, config: Props<T>, key?: Key): JSXElement;
-export declare function jsxs<T extends JSXChildNode[]>(setup: ComponentSetup, config: Props<T>, key?: Key): JSXComponent;
+export declare function jsx<T extends JSXChildNode>(name: string, props: Props<T>, key?: Key): JSXElement;
+export declare function jsx<T extends JSXChildNode>(setup: ComponentSetup, props: Props<T>, key?: Key): JSXComponent;
+export declare function jsxs<T extends JSXChildNode[]>(name: string, props: Props<T>, key?: Key): JSXElement;
+export declare function jsxs<T extends JSXChildNode[]>(setup: ComponentSetup, props: Props<T>, key?: Key): JSXComponent;
 export interface JSXTypeof {
     $$typeOf: string | ComponentSetup;
     is(target: JSXTypeof): boolean;
@@ -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.2",
+  "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": "65bcb20399ed7e6e14102b649588135a7ebf4a72"
+  "gitHead": "fed5b3e328a9f70873bb1c33ea3789c099ad3ebe"
 }