@viewfly/core 0.0.1-alpha.1 → 0.0.1-alpha.3

package/bundles/foundation/renderer.d.ts

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

package/bundles/index.esm.js

@@ -34,29 +34,34 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
-function Fragment(props) {
-    return () => new JSXFragment(props);
-}
-class JSXFragment {
-    constructor(props) {
-        this.props = props;
-    }
+function makeError(name) {
+    return function viewflyError(message) {
+        const error = new Error(message);
+        error.name = `[ViewflyError: ${name}]`;
+        error.stack = error.stack.replace(/\n.*?(?=\n)/, '');
+        return error;
+    };
 }
+
+const jsxErrorFn = makeError('JSX');
+const Fragment = function Fragment() {
+    throw jsxErrorFn('Fragment does not support calling.');
+};
 function jsx(setup, config) {
     if (typeof setup === 'string') {
         return new JSXElement(setup, config);
     }
-    return function (context) {
+    return new JSXComponent(function (context) {
         return new Component(context, setup, config);
-    };
+    });
 }
 function jsxs(setup, config) {
     if (typeof setup === 'string') {
         return new JSXElement(setup, config);
     }
-    return function (context) {
+    return new JSXComponent(function (context) {
         return new Component(context, setup, config);
-    };
+    });
 }
 class JSXText {
     constructor(text) {
@@ -66,7 +71,7 @@ class JSXText {
 function flatChildren(jsxNodes) {
     const children = [];
     for (const node of jsxNodes) {
-        if (node instanceof JSXElement || typeof node === 'function') {
+        if (node instanceof JSXElement || node instanceof JSXComponent) {
             children.push(node);
         }
         else if (typeof node === 'string' && node.length) {
@@ -173,24 +178,24 @@ class JSXElement {
     }
 }
 
-function makeError(name) {
-    return function viewflyError(message) {
-        const error = new Error(message);
-        error.name = `[ViewflyError: ${name}]`;
-        error.stack = error.stack.replace(/\n.*?(?=\n)/, '');
-        return error;
-    };
-}
-
-const componentStack = [];
+const componentSetupStack = [];
+const componentRendingStack = [];
 const componentErrorFn = makeError('component');
-function getComponentContext(need = true) {
-    const current = componentStack[componentStack.length - 1];
+function getSetupContext(need = true) {
+    const current = componentSetupStack[componentSetupStack.length - 1];
     if (!current && need) {
         throw componentErrorFn('cannot be called outside the component!');
     }
     return current;
 }
+function getRendingContext() {
+    return componentRendingStack[componentRendingStack.length - 1];
+}
+class JSXComponent {
+    constructor(createInstance) {
+        this.createInstance = createInstance;
+    }
+}
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
@@ -224,9 +229,8 @@ class Component extends ReflectiveInjector {
         });
     }
     init() {
-        componentStack.push(this);
         const self = this;
-        const props = new Proxy({}, {
+        const props = new Proxy(this.config || {}, {
             get(_, key) {
                 if (self.config) {
                     return self.config[key];
@@ -236,15 +240,18 @@ class Component extends ReflectiveInjector {
                 throw componentErrorFn('component props is readonly!');
             }
         });
+        componentSetupStack.push(this);
         const render = this.setup(props);
+        componentSetupStack.pop();
+        componentRendingStack.push(this);
         const template = render();
-        componentStack.pop();
+        componentRendingStack.pop();
         return {
             template,
             render: () => {
-                componentStack.push(this);
+                componentRendingStack.push(this);
                 const template = render();
-                componentStack.pop();
+                componentRendingStack.pop();
                 return template;
             }
         };
@@ -333,7 +340,7 @@ class Component extends ReflectiveInjector {
  * ```
  */
 function onMount(callback) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     component.mountCallbacks.push(callback);
 }
 /**
@@ -352,7 +359,7 @@ function onMount(callback) {
  * ```
  */
 function onUpdated(callback) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     component.updatedCallbacks.push(callback);
     return () => {
         const index = component.updatedCallbacks.indexOf(callback);
@@ -381,7 +388,7 @@ function onUpdated(callback) {
  * ```
  */
 function onPropsChanged(callback) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     component.propsChangedCallbacks.push(callback);
     return () => {
         const index = component.propsChangedCallbacks.indexOf(callback);
@@ -395,31 +402,33 @@ function onPropsChanged(callback) {
  * @param callback
  */
 function onDestroy(callback) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     component.destroyCallbacks.push(callback);
 }
 class Ref {
-    // private prevValue: T | null = null
-    constructor(callback, component) {
+    constructor(callback) {
         this.callback = callback;
-        this.component = component;
-        this.unListenFn = null;
-        component.destroyCallbacks.push(() => {
-            this.unListen();
-        });
+        this.unBindMap = new WeakMap;
+        this.targetCaches = new Set();
     }
-    update(value) {
-        // if (value === this.prevValue) {
-        //   return
-        // }
-        // this.prevValue = value
-        this.unListen();
-        this.unListenFn = this.callback(value) || null;
+    bind(value) {
+        if (typeof value !== 'object' || value === null) {
+            return;
+        }
+        if (this.targetCaches.has(value)) {
+            return;
+        }
+        this.targetCaches.add(value);
+        const unBindFn = this.callback(value);
+        if (typeof unBindFn === 'function') {
+            this.unBindMap.set(value, unBindFn);
+        }
     }
-    unListen() {
-        if (typeof this.unListenFn === 'function') {
-            this.unListenFn();
-            this.unListenFn = null;
+    unBind(value) {
+        this.targetCaches.delete(value);
+        const unBindFn = this.unBindMap.get(value);
+        if (typeof unBindFn === 'function') {
+            unBindFn();
         }
     }
 }
@@ -445,8 +454,7 @@ class Ref {
  * ```
  */
 function useRef(callback) {
-    const component = getComponentContext();
-    return new Ref(callback, component);
+    return new Ref(callback);
 }
 const depsKey = Symbol('deps');
 /**
@@ -475,7 +483,7 @@ const depsKey = Symbol('deps');
 function useSignal(state) {
     const usedComponents = new Set();
     function stateManager() {
-        const component = getComponentContext(false);
+        const component = getRendingContext();
         if (component && !usedComponents.has(component)) {
             usedComponents.add(component);
             component.destroyCallbacks.push(() => {
@@ -485,10 +493,7 @@ function useSignal(state) {
         return state;
     }
     stateManager.set = function (newState) {
-        if (typeof newState === 'function') {
-            newState = newState(state);
-        }
-        else if (newState === state) {
+        if (newState === state) {
             return;
         }
         state = newState;
@@ -521,7 +526,7 @@ function useEffect(deps, effect) {
     for (const dep of signals) {
         dep[depsKey].add(effectCallback);
     }
-    const component = getComponentContext(false);
+    const component = getSetupContext(false);
     let isClean = false;
     const destroyFn = () => {
         if (isClean) {
@@ -546,7 +551,7 @@ function useEffect(deps, effect) {
  * @param provider
  */
 function provide(provider) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     component.addProvide(provider);
     return component;
 }
@@ -554,7 +559,7 @@ function provide(provider) {
  * 通过组件上下文获取 IoC 容器内数据的勾子方法
  */
 function inject(token, notFoundValue, flags) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     return component.parentInjector.get(token, notFoundValue, flags);
 }
 
@@ -563,7 +568,7 @@ function inject(token, notFoundValue, flags) {
  */
 class RootComponent extends Component {
     constructor(factory) {
-        super(new NullInjector(), factory, new Props(null));
+        super(new NullInjector(), factory, null);
         this.changeEmitter = new Subject();
     }
     markAsChanged() {
@@ -859,9 +864,7 @@ let Renderer = class Renderer {
             }
             if (atom.jsxNode instanceof JSXElement) {
                 const ref = atom.jsxNode.props.attrs.get(refKey);
-                if (ref instanceof Ref) {
-                    ref.unListen();
-                }
+                this.applyRefs(ref, atom.nativeNode, false);
             }
         }
         let child = atom.child;
@@ -902,7 +905,9 @@ let Renderer = class Renderer {
                     if (isChanged) {
                         diffAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.config);
                     }
+                    const newProps = start.jsxNode.props;
                     start.jsxNode = diffAtom.jsxNode;
+                    start.jsxNode.props = newProps;
                     const { render } = this.componentAtomCaches.get(start.jsxNode);
                     const template = render();
                     if (template) {
@@ -1015,7 +1020,7 @@ let Renderer = class Renderer {
         return parent;
     }
     createChainByComponentFactory(context, factory, parent) {
-        const component = factory(context);
+        const component = factory.createInstance(context);
         if (component.setup === Fragment) {
             return this.createChainByChildren(component, component.props.children, parent);
         }
@@ -1069,9 +1074,10 @@ let Renderer = class Renderer {
         const nativeNode = this.nativeRenderer.createElement(vNode.name);
         const props = vNode.props;
         if (props) {
+            let bindingRefs;
             props.attrs.forEach((value, key) => {
-                if (key === refKey && value instanceof Ref) {
-                    value.update(nativeNode);
+                if (key === refKey) {
+                    bindingRefs = value;
                     return;
                 }
                 this.nativeRenderer.setProperty(nativeNode, key, value);
@@ -1083,6 +1089,7 @@ let Renderer = class Renderer {
             Object.keys(props.listeners).forEach(type => {
                 this.nativeRenderer.listen(nativeNode, type, props.listeners[type]);
             });
+            this.applyRefs(bindingRefs, nativeNode, true);
         }
         return nativeNode;
     }
@@ -1096,16 +1103,18 @@ let Renderer = class Renderer {
         }
         styleChanges.remove.forEach(i => this.nativeRenderer.removeStyle(nativeNode, i[0]));
         styleChanges.set.forEach(i => this.nativeRenderer.setStyle(nativeNode, i[0], i[1]));
+        let unBindRefs;
         attrChanges.remove.forEach(([key, value]) => {
-            if (key === refKey && value instanceof Ref) {
-                value.unListen();
+            if (key === refKey) {
+                unBindRefs = value;
                 return;
             }
             this.nativeRenderer.removeProperty(nativeNode, key);
         });
+        let bindRefs;
         attrChanges.set.forEach(([key, value]) => {
-            if (key === refKey && value instanceof Ref) {
-                value.update(nativeNode);
+            if (key === refKey) {
+                bindRefs = value;
                 return;
             }
             this.nativeRenderer.setProperty(nativeNode, key, value);
@@ -1118,6 +1127,16 @@ let Renderer = class Renderer {
         listenerChanges.add.forEach(i => {
             this.nativeRenderer.listen(nativeNode, i[0], i[1]);
         });
+        this.applyRefs(unBindRefs, nativeNode, false);
+        this.applyRefs(bindRefs, nativeNode, true);
+    }
+    applyRefs(refs, nativeNode, binding) {
+        refs = Array.isArray(refs) ? refs : [refs];
+        for (const item of refs) {
+            if (item instanceof Ref) {
+                binding ? item.bind(nativeNode) : item.unBind(nativeNode);
+            }
+        }
     }
 };
 Renderer = __decorate([
@@ -1188,4 +1207,4 @@ class Viewfly extends ReflectiveInjector {
     }
 }
 
-export { Component, Fragment, JSXElement, JSXFragment, JSXText, NativeRenderer, Props, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, onDestroy, onMount, onPropsChanged, onUpdated, provide, useEffect, useRef, useSignal };
+export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Props, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, onDestroy, onMount, onPropsChanged, onUpdated, provide, useEffect, useRef, useSignal };

package/bundles/index.js

@@ -35,29 +35,34 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
-function Fragment(props) {
-    return () => new JSXFragment(props);
-}
-class JSXFragment {
-    constructor(props) {
-        this.props = props;
-    }
+function makeError(name) {
+    return function viewflyError(message) {
+        const error = new Error(message);
+        error.name = `[ViewflyError: ${name}]`;
+        error.stack = error.stack.replace(/\n.*?(?=\n)/, '');
+        return error;
+    };
 }
+
+const jsxErrorFn = makeError('JSX');
+const Fragment = function Fragment() {
+    throw jsxErrorFn('Fragment does not support calling.');
+};
 function jsx(setup, config) {
     if (typeof setup === 'string') {
         return new JSXElement(setup, config);
     }
-    return function (context) {
+    return new JSXComponent(function (context) {
         return new Component(context, setup, config);
-    };
+    });
 }
 function jsxs(setup, config) {
     if (typeof setup === 'string') {
         return new JSXElement(setup, config);
     }
-    return function (context) {
+    return new JSXComponent(function (context) {
         return new Component(context, setup, config);
-    };
+    });
 }
 class JSXText {
     constructor(text) {
@@ -67,7 +72,7 @@ class JSXText {
 function flatChildren(jsxNodes) {
     const children = [];
     for (const node of jsxNodes) {
-        if (node instanceof JSXElement || typeof node === 'function') {
+        if (node instanceof JSXElement || node instanceof JSXComponent) {
             children.push(node);
         }
         else if (typeof node === 'string' && node.length) {
@@ -174,24 +179,24 @@ class JSXElement {
     }
 }
 
-function makeError(name) {
-    return function viewflyError(message) {
-        const error = new Error(message);
-        error.name = `[ViewflyError: ${name}]`;
-        error.stack = error.stack.replace(/\n.*?(?=\n)/, '');
-        return error;
-    };
-}
-
-const componentStack = [];
+const componentSetupStack = [];
+const componentRendingStack = [];
 const componentErrorFn = makeError('component');
-function getComponentContext(need = true) {
-    const current = componentStack[componentStack.length - 1];
+function getSetupContext(need = true) {
+    const current = componentSetupStack[componentSetupStack.length - 1];
     if (!current && need) {
         throw componentErrorFn('cannot be called outside the component!');
     }
     return current;
 }
+function getRendingContext() {
+    return componentRendingStack[componentRendingStack.length - 1];
+}
+class JSXComponent {
+    constructor(createInstance) {
+        this.createInstance = createInstance;
+    }
+}
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
@@ -225,9 +230,8 @@ class Component extends di.ReflectiveInjector {
         });
     }
     init() {
-        componentStack.push(this);
         const self = this;
-        const props = new Proxy({}, {
+        const props = new Proxy(this.config || {}, {
             get(_, key) {
                 if (self.config) {
                     return self.config[key];
@@ -237,15 +241,18 @@ class Component extends di.ReflectiveInjector {
                 throw componentErrorFn('component props is readonly!');
             }
         });
+        componentSetupStack.push(this);
         const render = this.setup(props);
+        componentSetupStack.pop();
+        componentRendingStack.push(this);
         const template = render();
-        componentStack.pop();
+        componentRendingStack.pop();
         return {
             template,
             render: () => {
-                componentStack.push(this);
+                componentRendingStack.push(this);
                 const template = render();
-                componentStack.pop();
+                componentRendingStack.pop();
                 return template;
             }
         };
@@ -334,7 +341,7 @@ class Component extends di.ReflectiveInjector {
  * ```
  */
 function onMount(callback) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     component.mountCallbacks.push(callback);
 }
 /**
@@ -353,7 +360,7 @@ function onMount(callback) {
  * ```
  */
 function onUpdated(callback) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     component.updatedCallbacks.push(callback);
     return () => {
         const index = component.updatedCallbacks.indexOf(callback);
@@ -382,7 +389,7 @@ function onUpdated(callback) {
  * ```
  */
 function onPropsChanged(callback) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     component.propsChangedCallbacks.push(callback);
     return () => {
         const index = component.propsChangedCallbacks.indexOf(callback);
@@ -396,31 +403,33 @@ function onPropsChanged(callback) {
  * @param callback
  */
 function onDestroy(callback) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     component.destroyCallbacks.push(callback);
 }
 class Ref {
-    // private prevValue: T | null = null
-    constructor(callback, component) {
+    constructor(callback) {
         this.callback = callback;
-        this.component = component;
-        this.unListenFn = null;
-        component.destroyCallbacks.push(() => {
-            this.unListen();
-        });
+        this.unBindMap = new WeakMap;
+        this.targetCaches = new Set();
     }
-    update(value) {
-        // if (value === this.prevValue) {
-        //   return
-        // }
-        // this.prevValue = value
-        this.unListen();
-        this.unListenFn = this.callback(value) || null;
+    bind(value) {
+        if (typeof value !== 'object' || value === null) {
+            return;
+        }
+        if (this.targetCaches.has(value)) {
+            return;
+        }
+        this.targetCaches.add(value);
+        const unBindFn = this.callback(value);
+        if (typeof unBindFn === 'function') {
+            this.unBindMap.set(value, unBindFn);
+        }
     }
-    unListen() {
-        if (typeof this.unListenFn === 'function') {
-            this.unListenFn();
-            this.unListenFn = null;
+    unBind(value) {
+        this.targetCaches.delete(value);
+        const unBindFn = this.unBindMap.get(value);
+        if (typeof unBindFn === 'function') {
+            unBindFn();
         }
     }
 }
@@ -446,8 +455,7 @@ class Ref {
  * ```
  */
 function useRef(callback) {
-    const component = getComponentContext();
-    return new Ref(callback, component);
+    return new Ref(callback);
 }
 const depsKey = Symbol('deps');
 /**
@@ -476,7 +484,7 @@ const depsKey = Symbol('deps');
 function useSignal(state) {
     const usedComponents = new Set();
     function stateManager() {
-        const component = getComponentContext(false);
+        const component = getRendingContext();
         if (component && !usedComponents.has(component)) {
             usedComponents.add(component);
             component.destroyCallbacks.push(() => {
@@ -486,10 +494,7 @@ function useSignal(state) {
         return state;
     }
     stateManager.set = function (newState) {
-        if (typeof newState === 'function') {
-            newState = newState(state);
-        }
-        else if (newState === state) {
+        if (newState === state) {
             return;
         }
         state = newState;
@@ -522,7 +527,7 @@ function useEffect(deps, effect) {
     for (const dep of signals) {
         dep[depsKey].add(effectCallback);
     }
-    const component = getComponentContext(false);
+    const component = getSetupContext(false);
     let isClean = false;
     const destroyFn = () => {
         if (isClean) {
@@ -547,7 +552,7 @@ function useEffect(deps, effect) {
  * @param provider
  */
 function provide(provider) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     component.addProvide(provider);
     return component;
 }
@@ -555,7 +560,7 @@ function provide(provider) {
  * 通过组件上下文获取 IoC 容器内数据的勾子方法
  */
 function inject(token, notFoundValue, flags) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     return component.parentInjector.get(token, notFoundValue, flags);
 }
 
@@ -564,7 +569,7 @@ function inject(token, notFoundValue, flags) {
  */
 class RootComponent extends Component {
     constructor(factory) {
-        super(new di.NullInjector(), factory, new Props(null));
+        super(new di.NullInjector(), factory, null);
         this.changeEmitter = new stream.Subject();
     }
     markAsChanged() {
@@ -860,9 +865,7 @@ exports.Renderer = class Renderer {
             }
             if (atom.jsxNode instanceof JSXElement) {
                 const ref = atom.jsxNode.props.attrs.get(refKey);
-                if (ref instanceof Ref) {
-                    ref.unListen();
-                }
+                this.applyRefs(ref, atom.nativeNode, false);
             }
         }
         let child = atom.child;
@@ -903,7 +906,9 @@ exports.Renderer = class Renderer {
                     if (isChanged) {
                         diffAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.config);
                     }
+                    const newProps = start.jsxNode.props;
                     start.jsxNode = diffAtom.jsxNode;
+                    start.jsxNode.props = newProps;
                     const { render } = this.componentAtomCaches.get(start.jsxNode);
                     const template = render();
                     if (template) {
@@ -1016,7 +1021,7 @@ exports.Renderer = class Renderer {
         return parent;
     }
     createChainByComponentFactory(context, factory, parent) {
-        const component = factory(context);
+        const component = factory.createInstance(context);
         if (component.setup === Fragment) {
             return this.createChainByChildren(component, component.props.children, parent);
         }
@@ -1070,9 +1075,10 @@ exports.Renderer = class Renderer {
         const nativeNode = this.nativeRenderer.createElement(vNode.name);
         const props = vNode.props;
         if (props) {
+            let bindingRefs;
             props.attrs.forEach((value, key) => {
-                if (key === refKey && value instanceof Ref) {
-                    value.update(nativeNode);
+                if (key === refKey) {
+                    bindingRefs = value;
                     return;
                 }
                 this.nativeRenderer.setProperty(nativeNode, key, value);
@@ -1084,6 +1090,7 @@ exports.Renderer = class Renderer {
             Object.keys(props.listeners).forEach(type => {
                 this.nativeRenderer.listen(nativeNode, type, props.listeners[type]);
             });
+            this.applyRefs(bindingRefs, nativeNode, true);
         }
         return nativeNode;
     }
@@ -1097,16 +1104,18 @@ exports.Renderer = class Renderer {
         }
         styleChanges.remove.forEach(i => this.nativeRenderer.removeStyle(nativeNode, i[0]));
         styleChanges.set.forEach(i => this.nativeRenderer.setStyle(nativeNode, i[0], i[1]));
+        let unBindRefs;
         attrChanges.remove.forEach(([key, value]) => {
-            if (key === refKey && value instanceof Ref) {
-                value.unListen();
+            if (key === refKey) {
+                unBindRefs = value;
                 return;
             }
             this.nativeRenderer.removeProperty(nativeNode, key);
         });
+        let bindRefs;
         attrChanges.set.forEach(([key, value]) => {
-            if (key === refKey && value instanceof Ref) {
-                value.update(nativeNode);
+            if (key === refKey) {
+                bindRefs = value;
                 return;
             }
             this.nativeRenderer.setProperty(nativeNode, key, value);
@@ -1119,6 +1128,16 @@ exports.Renderer = class Renderer {
         listenerChanges.add.forEach(i => {
             this.nativeRenderer.listen(nativeNode, i[0], i[1]);
         });
+        this.applyRefs(unBindRefs, nativeNode, false);
+        this.applyRefs(bindRefs, nativeNode, true);
+    }
+    applyRefs(refs, nativeNode, binding) {
+        refs = Array.isArray(refs) ? refs : [refs];
+        for (const item of refs) {
+            if (item instanceof Ref) {
+                binding ? item.bind(nativeNode) : item.unBind(nativeNode);
+            }
+        }
     }
 };
 exports.Renderer = __decorate([
@@ -1191,8 +1210,8 @@ class Viewfly extends di.ReflectiveInjector {
 
 exports.Component = Component;
 exports.Fragment = Fragment;
+exports.JSXComponent = JSXComponent;
 exports.JSXElement = JSXElement;
-exports.JSXFragment = JSXFragment;
 exports.JSXText = JSXText;
 exports.NativeRenderer = NativeRenderer;
 exports.Props = Props;

package/bundles/model/component.d.ts

@@ -1,11 +1,12 @@
 import { Provider, ReflectiveInjector, AbstractType, Type, InjectionToken, InjectFlags, Injector } from '@tanbo/di';
 import { JSXProps, JSXElement, Props } from './jsx-element';
-export interface ComponentFactory {
-    (context: Injector): Component;
+export declare class JSXComponent {
+    createInstance: (injector: Component) => Component;
+    constructor(createInstance: (injector: Component) => Component);
 }
-export type JSXTemplate = JSXElement | ComponentFactory | null | void;
+export type JSXTemplate = JSXElement | JSXComponent | null | void;
 export interface ComponentSetup {
-    (props: JSXProps<any>): () => JSXTemplate;
+    (props?: JSXProps<any>): () => JSXTemplate;
 }
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
@@ -103,13 +104,13 @@ export declare function onDestroy(callback: () => void): void;
 export interface RefListener<T> {
     (current: T): void | (() => void);
 }
-export declare class Ref<T> {
+export declare class Ref<T extends object> {
     private callback;
-    private component;
-    private unListenFn;
-    constructor(callback: RefListener<T>, component: Component);
-    update(value: T): void;
-    unListen(): void;
+    private unBindMap;
+    private targetCaches;
+    constructor(callback: RefListener<T>);
+    bind(value: T): void;
+    unBind(value: T): void;
 }
 /**
  * 用于节点渲染完成时获取 DOM 节点
@@ -132,7 +133,7 @@ export declare class Ref<T> {
  * }
  * ```
  */
-export declare function useRef<T>(callback: RefListener<T>): Ref<T>;
+export declare function useRef<T extends object>(callback: RefListener<T>): Ref<T>;
 declare const depsKey: unique symbol;
 /**
  * 组件状态实例，直接调用可以获取最新的状态，通过 set 方法可以更新状态
@@ -144,10 +145,10 @@ export interface Signal<T> {
      */
     (): T;
     /**
-     * 更新组件状态的方法，可以传入最新的值，或者传入一个函数，并返回最新的值
+     * 更新组件状态的方法，可以传入最新的值
      * @param newState
      */
-    set(newState: T | ((oldState: T) => T)): void;
+    set(newState: T): void;
     [depsKey]: Set<LifeCycleCallback>;
 }
 /**

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

@@ -1,19 +1,15 @@
-import { ComponentFactory, ComponentSetup } from './component';
-export type JSXChildNode = JSXElement | ComponentFactory | string | number | boolean | null | undefined;
+import { JSXComponent, ComponentSetup } from './component';
+export type JSXChildNode = JSXElement | JSXComponent | string | number | boolean | null | undefined;
 export interface JSXProps<T = JSXChildNode | JSXChildNode[]> {
     children?: T;
     [key: string]: any;
     [key: symbol]: any;
 }
-export declare function Fragment(props: Props | null): () => JSXFragment;
-export declare class JSXFragment {
-    props: Props | null;
-    constructor(props: Props | null);
-}
+export declare const Fragment: () => never;
 export declare function jsx<T extends JSXChildNode>(name: string, config: JSXProps<T> | null): JSXElement;
-export declare function jsx<T extends JSXChildNode>(setup: ComponentSetup, config: JSXProps<T> | null): ComponentFactory;
+export declare function jsx<T extends JSXChildNode>(setup: ComponentSetup, config: JSXProps<T> | null): JSXComponent;
 export declare function jsxs<T extends JSXChildNode[]>(name: string, config: JSXProps<T> | null): JSXElement;
-export declare function jsxs<T extends JSXChildNode[]>(setup: ComponentSetup, config: JSXProps<T> | null): ComponentFactory;
+export declare function jsxs<T extends JSXChildNode[]>(setup: ComponentSetup, config: JSXProps<T> | null): JSXComponent;
 export interface VElementListeners {
     [listenKey: string]: <T extends Event>(ev: T) => any;
 }
@@ -21,7 +17,7 @@ export declare class JSXText {
     text: string;
     constructor(text: string);
 }
-export type VNode = JSXElement | ComponentFactory | JSXText;
+export type VNode = JSXElement | JSXComponent | JSXText;
 export declare class Props {
     attrs: Map<string, any>;
     styles: Map<string, string | number>;

package/bundles/viewfly.d.ts

@@ -1,7 +1,7 @@
 import { Provider, ReflectiveInjector } from '@tanbo/di';
 import { NativeNode } from './foundation/_api';
-import { ComponentFactory, JSXElement } from './model/_api';
-export type RootNode = JSXElement | ComponentFactory;
+import { JSXComponent, JSXElement } from './model/_api';
+export type RootNode = JSXElement | JSXComponent;
 /**
  * Viewfly 配置项
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.3",
   "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",
@@ -16,7 +16,8 @@
   "keywords": [],
   "dependencies": {
     "@tanbo/di": "^1.1.4",
-    "@tanbo/stream": "^1.1.9"
+    "@tanbo/stream": "^1.1.9",
+    "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -36,5 +37,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "abca65615d81e3a6617d5fe588cdf38142a3523a"
+  "gitHead": "e0795c315c3b3e1df2e3d2d9f823843b91838ff6"
 }