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

package/bundles/index.js

@@ -4,6 +4,15 @@ require('reflect-metadata');
 var di = require('@tanbo/di');
 var stream = require('@tanbo/stream');
 
+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;
+    };
+}
+
 class NativeRenderer {
 }
 
@@ -35,163 +44,30 @@ 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 jsx(setup, config) {
-    if (typeof setup === 'string') {
-        return new JSXElement(setup, config);
-    }
-    return 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 Component(context, setup, config);
-    };
-}
-class JSXText {
-    constructor(text) {
-        this.text = text;
-    }
-}
-function flatChildren(jsxNodes) {
-    const children = [];
-    for (const node of jsxNodes) {
-        if (node instanceof JSXElement || typeof node === 'function') {
-            children.push(node);
-        }
-        else if (typeof node === 'string' && node.length) {
-            children.push(new JSXText(node));
-        }
-        else if (Array.isArray(node)) {
-            children.push(...flatChildren(node));
-        }
-        else if (node !== null && typeof node !== 'undefined') {
-            children.push(new JSXText(String(node)));
-        }
-    }
-    return children;
-}
-class Props {
-    constructor(props) {
-        this.attrs = new Map();
-        this.styles = new Map();
-        this.classes = new Set();
-        this.listeners = {};
-        this.children = [];
-        if (!props) {
-            return;
-        }
-        Object.keys(props).forEach(key => {
-            if (key === 'children') {
-                if (props.children !== null && typeof props.children !== 'undefined') {
-                    if (Array.isArray(props.children)) {
-                        this.children = flatChildren(props.children);
-                    }
-                    else {
-                        this.children = flatChildren([props.children]);
-                    }
-                }
-                return;
-            }
-            if (key === 'class') {
-                this.classes = new Set(Props.classToArray(props[key]));
-                return;
-            }
-            if (key === 'style') {
-                const style = props.style || '';
-                if (typeof style === 'string') {
-                    style.split(';').map(s => s.split(':')).forEach(v => {
-                        if (!v[0] || !v[1]) {
-                            return;
-                        }
-                        this.styles.set(v[0].trim(), v[1].trim());
-                    });
-                }
-                else if (typeof style === 'object') {
-                    Object.keys(style).forEach(key => {
-                        this.styles.set(key, style[key]);
-                    });
-                }
-                return;
-            }
-            if (/^on[A-Z]/.test(key)) {
-                const listener = props[key];
-                if (typeof listener === 'function') {
-                    this.listeners[key.replace(/^on/, '').toLowerCase()] = listener;
-                }
-                else {
-                    this.attrs.set(key, listener);
-                }
-                return;
-            }
-            this.attrs.set(key, props[key]);
-        });
-    }
-    static classToArray(config) {
-        const classes = [];
-        if (!config) {
-            return classes;
-        }
-        if (typeof config === 'string') {
-            const items = config.match(/\S+/g);
-            return items || classes;
-        }
-        else if (Array.isArray(config)) {
-            for (const i of config) {
-                classes.push(...Props.classToArray(i));
-            }
-        }
-        else if (typeof config === 'object') {
-            if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
-                classes.push(config.toString());
-                return classes;
-            }
-            for (const key in config) {
-                if ({}.hasOwnProperty.call(config, key) && config[key]) {
-                    classes.push(key);
-                }
-            }
-        }
-        return classes;
-    }
-}
-class JSXElement {
-    constructor(name, config) {
-        this.name = name;
-        this.config = config;
-        this.props = new Props(config);
-    }
-}
-
-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 derivedStack = [];
 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) {
+        // 防止因外部捕获异常引引起的缓存未清理的问题
+        componentRendingStack.pop();
         throw componentErrorFn('cannot be called outside the component!');
     }
     return current;
 }
+function getRendingContext() {
+    return componentRendingStack[componentRendingStack.length - 1];
+}
+function getDerivedContext() {
+    return derivedStack[derivedStack.length - 1];
+}
+class JSXComponent {
+    constructor(createInstance) {
+        this.createInstance = createInstance;
+    }
+}
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
@@ -202,10 +78,12 @@ class Component extends di.ReflectiveInjector {
     get changed() {
         return this._changed;
     }
-    constructor(context, setup, config) {
+    constructor(context, setup, props, key) {
         super(context, []);
         this.setup = setup;
-        this.config = config;
+        this.props = props;
+        this.key = key;
+        this.$$typeOf = this.setup;
         this.destroyCallbacks = [];
         this.mountCallbacks = [];
         this.propsChangedCallbacks = [];
@@ -215,9 +93,11 @@ class Component extends di.ReflectiveInjector {
         this.updatedDestroyCallbacks = [];
         this.propsChangedDestroyCallbacks = [];
         this.isFirstRending = true;
-        this.props = new Props(config);
         this.parentComponent = this.parentInjector;
     }
+    is(target) {
+        return target.$$typeOf === this.$$typeOf;
+    }
     addProvide(providers) {
         providers = Array.isArray(providers) ? providers : [providers];
         providers.forEach(p => {
@@ -225,27 +105,42 @@ class Component extends di.ReflectiveInjector {
         });
     }
     init() {
-        componentStack.push(this);
         const self = this;
-        const props = new Proxy({}, {
+        const props = new Proxy(this.props, {
             get(_, key) {
-                if (self.config) {
-                    return self.config[key];
+                if (self.props) {
+                    return self.props[key];
                 }
             },
             set() {
+                // 防止因外部捕获异常引引起的缓存未清理的问题
+                if (isSetup) {
+                    componentSetupStack.pop();
+                }
+                if (isRending) {
+                    componentRendingStack.pop();
+                }
                 throw componentErrorFn('component props is readonly!');
             }
         });
+        componentSetupStack.push(this);
+        let isSetup = true;
         const render = this.setup(props);
+        isSetup = false;
+        componentSetupStack.pop();
+        componentRendingStack.push(this);
+        let isRending = true;
         const template = render();
-        componentStack.pop();
+        isRending = false;
+        componentRendingStack.pop();
         return {
             template,
             render: () => {
-                componentStack.push(this);
+                componentRendingStack.push(this);
+                isRending = true;
                 const template = render();
-                componentStack.pop();
+                isRending = false;
+                componentRendingStack.pop();
                 return template;
             }
         };
@@ -271,8 +166,8 @@ class Component extends di.ReflectiveInjector {
         }
     }
     invokePropsChangedHooks(newProps) {
-        const oldProps = this.config;
-        this.config = newProps;
+        const oldProps = this.props;
+        this.props = newProps;
         this.propsChangedDestroyCallbacks.forEach(fn => {
             fn();
         });
@@ -334,7 +229,7 @@ class Component extends di.ReflectiveInjector {
  * ```
  */
 function onMount(callback) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     component.mountCallbacks.push(callback);
 }
 /**
@@ -353,7 +248,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 +277,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 +291,34 @@ 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();
+    }
+    bind(value) {
+        if (typeof value !== 'object' || value === null) {
+            return;
+        }
+        if (this.targetCaches.has(value)) {
+            return;
+        }
+        const unBindFn = this.callback(value);
+        if (typeof unBindFn === 'function') {
+            this.unBindMap.set(value, unBindFn);
+        }
+        this.targetCaches.add(value);
     }
-    update(value) {
-        // if (value === this.prevValue) {
-        //   return
-        // }
-        // this.prevValue = value
-        this.unListen();
-        this.unListenFn = this.callback(value) || null;
-    }
-    unListen() {
-        if (typeof this.unListenFn === 'function') {
-            this.unListenFn();
-            this.unListenFn = null;
+    unBind(value) {
+        this.targetCaches.delete(value);
+        const unBindFn = this.unBindMap.get(value);
+        this.unBindMap.delete(value);
+        if (typeof unBindFn === 'function') {
+            unBindFn();
         }
     }
 }
@@ -446,8 +344,7 @@ class Ref {
  * ```
  */
 function useRef(callback) {
-    const component = getComponentContext();
-    return new Ref(callback, component);
+    return new Ref(callback);
 }
 const depsKey = Symbol('deps');
 /**
@@ -475,8 +372,12 @@ const depsKey = Symbol('deps');
  */
 function useSignal(state) {
     const usedComponents = new Set();
-    function stateManager() {
-        const component = getComponentContext(false);
+    function signal() {
+        const component = getRendingContext();
+        const derivedContext = getDerivedContext();
+        if (derivedContext) {
+            derivedContext.push(signal);
+        }
         if (component && !usedComponents.has(component)) {
             usedComponents.add(component);
             component.destroyCallbacks.push(() => {
@@ -485,44 +386,67 @@ function useSignal(state) {
         }
         return state;
     }
-    stateManager.set = function (newState) {
-        if (typeof newState === 'function') {
-            newState = newState(state);
-        }
-        else if (newState === state) {
+    signal.set = function (newState) {
+        if (newState === state) {
             return;
         }
         state = newState;
         for (const component of usedComponents) {
             component.markAsDirtied();
         }
-        for (const fn of stateManager[depsKey]) {
+        for (const fn of signal[depsKey]) {
             fn();
         }
     };
-    stateManager[depsKey] = new Set();
-    return stateManager;
+    signal[depsKey] = new Set();
+    return signal;
 }
 /**
- * 监听状态变化，当任意一个状态发生变更时，触发回调。
- * useEffect 会返回一个取消监听的函数，调用此函数，可以取消监听。
- * 当在组件中调用时，组件销毁时会自动取消监听。
- * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组
- * @param effect 状态变更后的回调函数
+ * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
+ * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
+ *
+ * @param callback
+ * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
+function useDerived(callback, isContinue) {
+    const deps = [];
+    derivedStack.push(deps);
+    const data = callback();
+    derivedStack.pop();
+    const signal = useSignal(data);
+    if (deps.length) {
+        const unListen = useEffect(deps, () => {
+            const data = callback();
+            signal.set(data);
+            if (typeof isContinue === 'function' && !isContinue(data)) {
+                unListen();
+            }
+        });
+    }
+    return signal;
+}
+/* eslint-enable max-len*/
 function useEffect(deps, effect) {
+    if (typeof deps === 'function' &&
+        typeof deps.set === 'undefined' &&
+        typeof deps[depsKey] === 'undefined') {
+        deps = useDerived(deps);
+    }
     const signals = Array.isArray(deps) ? deps : [deps];
+    let oldValues = signals.map(s => s());
     let prevCleanup;
     function effectCallback() {
         if (typeof prevCleanup === 'function') {
             prevCleanup();
         }
-        prevCleanup = effect();
+        const newValues = signals.map(s => s());
+        prevCleanup = Array.isArray(deps) ? effect(newValues, oldValues) : effect(newValues[0], oldValues[0]);
+        oldValues = newValues;
     }
     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 +471,7 @@ function useEffect(deps, effect) {
  * @param provider
  */
 function provide(provider) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     component.addProvide(provider);
     return component;
 }
@@ -555,16 +479,57 @@ function provide(provider) {
  * 通过组件上下文获取 IoC 容器内数据的勾子方法
  */
 function inject(token, notFoundValue, flags) {
-    const component = getComponentContext();
+    const component = getSetupContext();
     return component.parentInjector.get(token, notFoundValue, flags);
 }
 
+const jsxErrorFn = makeError('JSX');
+const Fragment = function Fragment() {
+    throw jsxErrorFn('Fragment does not support calling.');
+};
+function jsx(setup, config, key) {
+    if (typeof setup === 'string') {
+        return new JSXElement(setup, config, key);
+    }
+    return new JSXComponent(function (context) {
+        return new Component(context, setup, config, key);
+    });
+}
+function jsxs(setup, config, key) {
+    if (typeof setup === 'string') {
+        return new JSXElement(setup, config, key);
+    }
+    return new JSXComponent(function (context) {
+        return new Component(context, setup, config, key);
+    });
+}
+class JSXText {
+    constructor(text) {
+        this.text = text;
+        this.$$typeOf = '#text';
+    }
+    is(target) {
+        return target.$$typeOf === this.$$typeOf;
+    }
+}
+class JSXElement {
+    constructor(name, props, key) {
+        this.name = name;
+        this.props = props;
+        this.key = key;
+        this.$$typeOf = this.name;
+    }
+    is(target) {
+        return target.$$typeOf === this.$$typeOf;
+    }
+}
+
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 class RootComponent extends Component {
-    constructor(factory) {
-        super(new di.NullInjector(), factory, new Props(null));
+    constructor(factory, parentInjector = new di.NullInjector()) {
+        super(parentInjector, factory, {});
         this.changeEmitter = new stream.Subject();
     }
     markAsChanged() {
@@ -574,142 +539,81 @@ class RootComponent extends Component {
 }
 
 const refKey = 'ref';
-function getObjectChanges(target, source) {
+function getObjectChanges(newProps, oldProps) {
     const changes = {
         remove: [],
-        add: []
+        add: [],
+        replace: []
     };
-    // if (!target) {
-    //   if (source) {
-    //     Object.keys(source).forEach(key => {
-    //       changes.remove.push([key, source[key]])
-    //     })
-    //   }
-    //   return changes
-    // }
-    //
-    // if (!source) {
-    //   Object.keys(target).forEach(key => {
-    //     changes.add.push([key, target[key]])
-    //   })
-    //   return changes
-    // }
-    Object.keys(target).forEach(key => {
-        const leftValue = target[key];
-        if (!Reflect.has(source, key)) {
-            changes.add.push([key, leftValue]);
-            return;
+    if (!newProps) {
+        if (oldProps) {
+            Object.keys(oldProps).forEach(key => {
+                changes.remove.push([key, oldProps[key]]);
+            });
         }
-        const rightValue = source[key];
-        if (leftValue === rightValue) {
+        return changes;
+    }
+    if (!oldProps) {
+        Object.keys(newProps).forEach(key => {
+            changes.add.push([key, newProps[key]]);
+        });
+        return changes;
+    }
+    Object.keys(newProps).forEach(key => {
+        const leftValue = newProps[key];
+        const rightValue = oldProps[key];
+        if (Reflect.has(oldProps, key)) {
+            if (leftValue !== rightValue) {
+                changes.replace.push([key, leftValue, rightValue]);
+            }
             return;
         }
         changes.add.push([key, leftValue]);
-        changes.remove.push([key, rightValue]);
     });
-    Object.keys(source).forEach(key => {
-        if (!Reflect.has(target, key)) {
-            changes.remove.push([key, source[key]]);
+    Object.keys(oldProps).forEach(key => {
+        if (!Reflect.has(newProps, key)) {
+            changes.remove.push([key, oldProps[key]]);
         }
     });
     return changes;
 }
-function getMapChanges(target, source) {
-    const changes = {
-        remove: [],
-        set: []
-    };
-    // if (!target) {
-    //   if (source) {
-    //     source.forEach((value, key) => {
-    //       changes.remove.push([key, value])
-    //     })
-    //   }
-    //   return changes
-    // }
-    // if (!source) {
-    //   target.forEach((value, key) => {
-    //     changes.set.push([key, value])
-    //   })
-    //   return changes
-    // }
-    target.forEach((value, key) => {
-        const rightValue = source.get(key);
-        if (value === rightValue) {
-            return;
+function classToString(config) {
+    if (!config) {
+        return '';
+    }
+    if (typeof config === 'string') {
+        return config;
+    }
+    else if (Array.isArray(config)) {
+        return config.map(i => {
+            return classToString(i);
+        }).join(' ');
+    }
+    else if (typeof config === 'object') {
+        if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
+            return config.toString();
         }
-        changes.set.push([key, value]);
-    });
-    source.forEach((value, key) => {
-        if (key === refKey && value instanceof Ref) {
-            const newValue = target.get(key);
-            if (value !== newValue) {
-                changes.remove.push([key, value]);
+        const classes = [];
+        for (const key in config) {
+            if ({}.hasOwnProperty.call(config, key) && config[key]) {
+                classes.push(key);
             }
-            return;
-        }
-        if (!target.has(key)) {
-            changes.remove.push([key, value]);
         }
-    });
-    return changes;
+        return classes.join(' ');
+    }
 }
-function getSetChanges(target, source) {
-    const changes = {
-        add: [],
-        remove: []
-    };
-    // if (!target) {
-    //   if (source) {
-    //     source.forEach(i => {
-    //       changes.remove.push(i)
-    //     })
-    //   }
-    //   return changes
-    // }
-    //
-    // if (!source) {
-    //   target.forEach(i => {
-    //     changes.add.push(i)
-    //   })
-    //   return changes
-    // }
-    target.forEach(i => {
-        if (!source.has(i)) {
-            changes.add.push(i);
-        }
-    });
-    source.forEach(i => {
-        if (!target.has(i)) {
-            changes.remove.push(i);
+function styleToObject(style) {
+    if (typeof style !== 'string') {
+        return style;
+    }
+    const obj = {};
+    style.split(';').map(s => s.split(':')).forEach(v => {
+        if (!v[0] || !v[1]) {
+            return;
         }
+        obj[v[0].trim()] = v[1].trim();
     });
-    return changes;
-}
-const compareText = '0'.repeat(8);
-function getNodeChanges(newVNode, oldVNode) {
-    const newProps = newVNode.props;
-    const oldProps = oldVNode.props;
-    const styleChanges = getMapChanges(newProps.styles, oldProps.styles);
-    const attrChanges = getMapChanges(newProps.attrs, oldProps.attrs);
-    const classesChanges = getSetChanges(newProps.classes, oldProps.classes);
-    const listenerChanges = getObjectChanges(newProps.listeners, oldProps.listeners);
-    return {
-        styleChanges,
-        attrChanges,
-        classesChanges,
-        listenerChanges,
-        isChanged: [
-            attrChanges.set.length,
-            attrChanges.remove.length,
-            styleChanges.set.length,
-            styleChanges.remove.length,
-            classesChanges.add.length,
-            classesChanges.remove.length,
-            listenerChanges.add.length,
-            listenerChanges.remove.length
-        ].join('') !== compareText
-    };
+    return obj;
 }
 
 class RootComponentRef {
@@ -731,10 +635,10 @@ exports.Renderer = class Renderer {
     }
     render() {
         const { component, host } = this.rootComponentRef;
-        const chain = new Atom(component, null);
-        const children = this.buildView(chain);
-        children.forEach(child => {
-            this.nativeRenderer.appendChild(host, child);
+        const atom = new Atom(component, null);
+        this.buildView(atom, {
+            isParent: true,
+            host
         });
     }
     refresh() {
@@ -752,6 +656,37 @@ exports.Renderer = class Renderer {
             const atom = this.componentAtomCaches.get(component).atom.child;
             this.reconcileElement(atom, context);
         }
+        else {
+            const prevSibling = this.getPrevSibling(component);
+            if (prevSibling) {
+                context.isParent = false;
+                context.host = prevSibling;
+            }
+        }
+    }
+    getPrevSibling(component) {
+        let atom = this.componentAtomCaches.get(component).atom.child;
+        const childAtoms = [];
+        while (atom) {
+            childAtoms.push(atom);
+            atom = atom.sibling;
+        }
+        const components = [];
+        while (childAtoms.length) {
+            const last = childAtoms.pop();
+            if (last.jsxNode instanceof Component) {
+                components.push(last.jsxNode);
+                continue;
+            }
+            return last.nativeNode;
+        }
+        for (const component of components) {
+            const nativeNode = this.getPrevSibling(component);
+            if (nativeNode) {
+                return nativeNode;
+            }
+        }
+        return null;
     }
     reconcileElement(atom, context) {
         while (atom) {
@@ -781,76 +716,150 @@ exports.Renderer = class Renderer {
         else {
             atom.child = null;
         }
-        this.diff(atom.child, diffAtom, context);
+        this.diff(atom.child, diffAtom, context, 0, 0);
         component.rendered();
     }
-    diff(start, diffAtom, context) {
+    diff(newAtom, oldAtom, context, expectIndex, index) {
         const oldChildren = [];
-        while (diffAtom) {
-            oldChildren.push(diffAtom);
-            diffAtom = diffAtom.sibling;
+        while (oldAtom) {
+            oldChildren.push({
+                index,
+                atom: oldAtom
+            });
+            oldAtom = oldAtom.sibling;
+            index++;
         }
         const commits = [];
-        const addReuseCommit = (start, reusedAtom) => {
-            commits.push(() => {
-                const isComponent = start.jsxNode instanceof Component;
-                if (!isComponent) {
-                    const host = context.host;
-                    if (context.isParent) {
-                        this.nativeRenderer.prependChild(host, start.nativeNode);
+        const changeCommits = {
+            reuseComponent: (start, reusedAtom, expectIndex, diffIndex) => {
+                commits.push(() => {
+                    const { add, remove, replace } = getObjectChanges(start.jsxNode.props, reusedAtom.jsxNode.props);
+                    if (add.length || remove.length || replace.length) {
+                        reusedAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.props);
                     }
-                    else {
-                        this.nativeRenderer.insertAfter(start.nativeNode, host);
+                    const newProps = start.jsxNode.props;
+                    start.jsxNode = reusedAtom.jsxNode;
+                    start.jsxNode.props = newProps;
+                    const { render } = this.componentAtomCaches.get(start.jsxNode);
+                    const template = render();
+                    if (template) {
+                        this.linkTemplate(template, start.jsxNode, start);
+                    }
+                    this.componentAtomCaches.set(start.jsxNode, {
+                        render,
+                        atom: start
+                    });
+                    if (start.child) {
+                        this.diff(start.child, reusedAtom.child, context, expectIndex, diffIndex);
+                    }
+                    else if (reusedAtom.child) {
+                        let atom = reusedAtom.child;
+                        while (atom) {
+                            this.cleanView(atom, false);
+                            atom = atom.sibling;
+                        }
                     }
-                    context.host = start.nativeNode;
-                    context.isParent = false;
-                }
-                if (start.child) {
-                    const childContext = start.jsxNode instanceof JSXElement ? {
-                        host: start.nativeNode,
-                        isParent: true
-                    } : context;
-                    this.diff(start.child, reusedAtom.child, childContext);
-                }
-                else if (reusedAtom.child) {
-                    this.cleanView(reusedAtom.child, false);
-                }
-                if (isComponent) {
                     start.jsxNode.rendered();
-                }
-            });
-        };
-        const addCreateCommit = (start) => {
-            commits.push(() => {
-                const children = this.createViewByAtom(start);
-                children.forEach(child => {
-                    if (context.isParent) {
-                        this.nativeRenderer.prependChild(context.host, child);
+                });
+            },
+            reuseElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
+                commits.push((offset) => {
+                    newAtom.nativeNode = oldAtom.nativeNode;
+                    const host = context.host;
+                    if (expectIndex !== oldIndex - offset) {
+                        if (context.isParent) {
+                            this.nativeRenderer.prependChild(host, newAtom.nativeNode);
+                        }
+                        else {
+                            this.nativeRenderer.insertAfter(newAtom.nativeNode, host);
+                        }
+                    }
+                    context.host = newAtom.nativeNode;
+                    context.isParent = false;
+                    const applyRefs = this.updateNativeNodeProperties(newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode);
+                    if (newAtom.child) {
+                        this.diff(newAtom.child, oldAtom.child, {
+                            host: newAtom.nativeNode,
+                            isParent: true
+                        }, 0, 0);
                     }
-                    else {
-                        this.nativeRenderer.insertAfter(child, context.host);
+                    else if (oldAtom.child) {
+                        let atom = oldAtom.child;
+                        while (atom) {
+                            this.cleanView(atom, false);
+                            atom = atom.sibling;
+                        }
+                    }
+                    applyRefs();
+                });
+            },
+            reuseText: (newAtom, oldAtom) => {
+                commits.push(() => {
+                    const nativeNode = oldAtom.nativeNode;
+                    if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
+                        this.nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode.text);
                     }
-                    context.host = child;
+                    newAtom.nativeNode = nativeNode;
+                    context.host = nativeNode;
                     context.isParent = false;
                 });
-            });
-        };
-        while (start && !start.nativeNode) {
-            const reusedAtom = this.reuseAndUpdate(start, oldChildren);
-            if (reusedAtom) {
-                addReuseCommit(start, reusedAtom);
+            },
+            create: (start) => {
+                commits.push(() => {
+                    this.buildView(start, context);
+                });
             }
-            else {
-                addCreateCommit(start);
+        };
+        while (newAtom && !newAtom.nativeNode) {
+            this.createChanges(newAtom, expectIndex, oldChildren, changeCommits);
+            newAtom = newAtom.sibling;
+            expectIndex++;
+        }
+        for (const item of oldChildren) {
+            this.cleanView(item.atom, false);
+        }
+        let j = 0;
+        let offset = 0;
+        const len = oldChildren.length;
+        for (let i = 0; i < commits.length; i++) {
+            const commit = commits[i];
+            while (j < len) {
+                const current = oldChildren[j];
+                if (current.index <= i) {
+                    offset++;
+                    j++;
+                    continue;
+                }
+                break;
             }
-            start = start.sibling;
+            commit(offset);
         }
-        for (const atom of oldChildren) {
-            this.cleanView(atom, false);
-        }
-        for (const commit of commits) {
-            commit();
+    }
+    createChanges(newAtom, expectIndex, oldChildren, changeCommits) {
+        for (let i = 0; i < oldChildren.length; i++) {
+            const { atom: diffAtom, index: diffIndex } = oldChildren[i];
+            const key = newAtom.jsxNode.key;
+            const diffKey = diffAtom.jsxNode.key;
+            if (key !== undefined && diffKey !== undefined) {
+                if (diffKey !== key) {
+                    continue;
+                }
+            }
+            if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
+                if (newAtom.jsxNode instanceof JSXElement) {
+                    changeCommits.reuseElement(newAtom, diffAtom, expectIndex, diffIndex);
+                }
+                else if (newAtom.jsxNode instanceof JSXText) {
+                    changeCommits.reuseText(newAtom, diffAtom);
+                }
+                else {
+                    changeCommits.reuseComponent(newAtom, diffAtom, expectIndex, diffIndex);
+                }
+                oldChildren.splice(i, 1);
+                return;
+            }
         }
+        changeCommits.create(newAtom);
     }
     cleanView(atom, isClean) {
         if (atom.nativeNode) {
@@ -859,10 +868,8 @@ exports.Renderer = class Renderer {
                 isClean = true;
             }
             if (atom.jsxNode instanceof JSXElement) {
-                const ref = atom.jsxNode.props.attrs.get(refKey);
-                if (ref instanceof Ref) {
-                    ref.unListen();
-                }
+                const ref = atom.jsxNode.props[refKey];
+                this.applyRefs(ref, atom.nativeNode, false);
             }
         }
         let child = atom.child;
@@ -874,167 +881,77 @@ exports.Renderer = class Renderer {
             atom.jsxNode.destroy();
         }
     }
-    reuseAndUpdate(start, oldChildren) {
-        for (let i = 0; i < oldChildren.length; i++) {
-            const diffAtom = oldChildren[i];
-            if (start.jsxNode instanceof JSXElement) {
-                if (diffAtom.jsxNode instanceof JSXElement && start.jsxNode.name === diffAtom.jsxNode.name) {
-                    const nativeNode = diffAtom.nativeNode;
-                    start.nativeNode = nativeNode;
-                    this.updateNativeNodeProperties(start.jsxNode, diffAtom.jsxNode, nativeNode);
-                    oldChildren.splice(i, 1);
-                    return diffAtom;
-                }
-            }
-            else if (start.jsxNode instanceof JSXText) {
-                if (diffAtom.jsxNode instanceof JSXText) {
-                    const nativeNode = diffAtom.nativeNode;
-                    if (start.jsxNode.text !== diffAtom.jsxNode.text) {
-                        this.nativeRenderer.syncTextContent(nativeNode, start.jsxNode.text);
-                    }
-                    start.nativeNode = nativeNode;
-                    oldChildren.splice(i, 1);
-                    return diffAtom;
-                }
-            }
-            else if (diffAtom.jsxNode instanceof Component) {
-                if (start.jsxNode.setup === diffAtom.jsxNode.setup) {
-                    const { isChanged } = getNodeChanges(start.jsxNode, diffAtom.jsxNode);
-                    if (isChanged) {
-                        diffAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.config);
-                    }
-                    start.jsxNode = diffAtom.jsxNode;
-                    const { render } = this.componentAtomCaches.get(start.jsxNode);
-                    const template = render();
-                    if (template) {
-                        this.linkTemplate(template, start.jsxNode, start);
-                    }
-                    this.componentAtomCaches.set(start.jsxNode, {
-                        render,
-                        atom: start
-                    });
-                    oldChildren.splice(i, 1);
-                    return diffAtom;
-                }
+    buildView(atom, context) {
+        if (atom.jsxNode instanceof Component) {
+            this.componentRender(atom.jsxNode, atom);
+            let child = atom.child;
+            while (child) {
+                this.buildView(child, context);
+                child = child.sibling;
             }
+            atom.jsxNode.rendered();
         }
-        return null;
-    }
-    createViewByAtom(atom) {
-        if (atom.jsxNode instanceof JSXElement) {
-            const nativeNode = this.createElement(atom.jsxNode);
-            atom.nativeNode = nativeNode;
-            if (atom.child) {
-                const children = this.buildView(atom.child);
-                for (const child of children) {
-                    this.nativeRenderer.appendChild(nativeNode, child);
-                }
+        else {
+            let nativeNode;
+            let applyRefs = null;
+            if (atom.jsxNode instanceof JSXElement) {
+                const { nativeNode: n, applyRefs: a } = this.createElement(atom.jsxNode);
+                nativeNode = n;
+                applyRefs = a;
+            }
+            else {
+                nativeNode = this.createTextNode(atom.jsxNode);
             }
-            return [nativeNode];
-        }
-        else if (atom.jsxNode instanceof JSXText) {
-            const nativeNode = this.createTextNode(atom.jsxNode);
             atom.nativeNode = nativeNode;
-            return [nativeNode];
-        }
-        const { template, render } = atom.jsxNode.init();
-        this.componentAtomCaches.set(atom.jsxNode, {
-            atom,
-            render
-        });
-        if (template) {
-            this.linkTemplate(template, atom.jsxNode, atom);
-        }
-        if (atom.child) {
-            return this.buildView(atom.child);
-        }
-        return [];
-    }
-    buildView(chain) {
-        const context = [];
-        const children = [];
-        function getContext() {
-            return context[context.length - 1];
-        }
-        let atom = chain;
-        const stopAtom = chain.parent;
-        wrap: while (atom) {
-            if (atom.jsxNode instanceof Component) {
-                this.componentRender(atom.jsxNode, atom);
-                if (atom.child) {
-                    atom = atom.child;
-                    continue;
-                }
-                atom.jsxNode.rendered();
+            if (context.isParent) {
+                this.nativeRenderer.prependChild(context.host, nativeNode);
             }
             else {
-                const host = getContext();
-                const nativeNode = atom.jsxNode instanceof JSXElement ? this.createElement(atom.jsxNode) : this.createTextNode(atom.jsxNode);
-                atom.nativeNode = nativeNode;
-                if (host) {
-                    this.nativeRenderer.appendChild(host, nativeNode);
-                }
-                else {
-                    children.push(nativeNode);
-                }
-                if (atom.child) {
-                    context.push(nativeNode);
-                    atom = atom.child;
-                    continue;
-                }
+                this.nativeRenderer.insertAfter(nativeNode, context.host);
             }
-            while (atom) {
-                if (atom.sibling) {
-                    atom = atom.sibling;
-                    break;
-                }
-                atom = atom.parent;
-                const isComponent = (atom === null || atom === void 0 ? void 0 : atom.jsxNode) instanceof Component;
-                if (isComponent) {
-                    atom.jsxNode.rendered();
-                }
-                if (atom === stopAtom) {
-                    break wrap;
-                }
-                if (isComponent) {
-                    continue;
+            if (atom.jsxNode instanceof JSXElement) {
+                const childContext = {
+                    isParent: true,
+                    host: nativeNode
+                };
+                let child = atom.child;
+                while (child) {
+                    this.buildView(child, childContext);
+                    child = child.sibling;
                 }
-                context.pop();
+            }
+            context.host = nativeNode;
+            context.isParent = false;
+            if (applyRefs) {
+                applyRefs();
             }
         }
-        return children;
     }
-    componentRender(component, parent) {
+    componentRender(component, from) {
         const { template, render } = component.init();
         if (template) {
-            this.linkTemplate(template, component, parent);
+            this.linkTemplate(template, component, from);
         }
         this.componentAtomCaches.set(component, {
             render,
-            atom: parent
+            atom: from
         });
-        return parent;
+        return from;
     }
     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);
         }
         return new Atom(component, parent);
     }
-    createChain(context, template, parent) {
-        if (template instanceof JSXElement) {
-            return this.createChainByJSXElement(context, template, parent);
-        }
-        if (template instanceof JSXText) {
-            return this.createChainByJSXText(template, parent);
-        }
-        return this.createChainByComponentFactory(context, template, parent);
-    }
     createChainByJSXElement(context, element, parent) {
         const atom = new Atom(element, parent);
-        const children = this.createChainByChildren(context, element.props.children, atom);
-        this.link(atom, children);
+        if (Reflect.has(element.props, 'children')) {
+            const jsxChildren = element.props.children;
+            const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom);
+            this.link(atom, children);
+        }
         return atom;
     }
     createChainByJSXText(node, parent) {
@@ -1043,19 +960,39 @@ exports.Renderer = class Renderer {
     createChainByChildren(context, children, parent) {
         const atoms = [];
         for (const item of children) {
-            const child = this.createChain(context, item, parent);
-            if (Array.isArray(child)) {
-                atoms.push(...child);
+            if (item instanceof JSXElement) {
+                atoms.push(this.createChainByJSXElement(context, item, parent));
+                continue;
             }
-            else {
-                atoms.push(child);
+            if (item instanceof JSXComponent) {
+                const childAtom = this.createChainByComponentFactory(context, item, parent);
+                if (Array.isArray(childAtom)) {
+                    atoms.push(...childAtom);
+                }
+                else {
+                    atoms.push(childAtom);
+                }
+                continue;
+            }
+            if (typeof item === 'string' && item.length) {
+                atoms.push(this.createChainByJSXText(new JSXText(item), parent));
+                continue;
+            }
+            if (Array.isArray(item)) {
+                atoms.push(...this.createChainByChildren(context, item, parent));
+                continue;
+            }
+            if (item !== null && typeof item !== 'undefined') {
+                atoms.push(this.createChainByJSXText(new JSXText(String(item)), parent));
             }
         }
         return atoms;
     }
     linkTemplate(template, component, parent) {
         if (template) {
-            const child = this.createChain(component, template, parent);
+            const child = template instanceof JSXElement ?
+                this.createChainByJSXElement(component, template, parent) :
+                this.createChainByComponentFactory(component, template, parent);
             this.link(parent, Array.isArray(child) ? child : [child]);
         }
     }
@@ -1069,56 +1006,154 @@ exports.Renderer = class Renderer {
     createElement(vNode) {
         const nativeNode = this.nativeRenderer.createElement(vNode.name);
         const props = vNode.props;
-        if (props) {
-            props.attrs.forEach((value, key) => {
-                if (key === refKey && value instanceof Ref) {
-                    value.update(nativeNode);
-                    return;
+        let bindingRefs;
+        const keys = Object.keys(props);
+        for (const key of keys) {
+            if (key === 'children') {
+                continue;
+            }
+            if (key === 'class') {
+                this.nativeRenderer.setClass(nativeNode, classToString(props[key]));
+                continue;
+            }
+            if (key === 'style') {
+                const style = styleToObject(props.style);
+                Object.keys(style).forEach(key => {
+                    this.nativeRenderer.setStyle(nativeNode, key, style[key]);
+                });
+                continue;
+            }
+            if (/^on[A-Z]/.test(key)) {
+                const listener = props[key];
+                if (typeof listener === 'function') {
+                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), listener);
                 }
-                this.nativeRenderer.setProperty(nativeNode, key, value);
-            });
-            props.styles.forEach((value, key) => {
-                this.nativeRenderer.setStyle(nativeNode, key, value);
-            });
-            props.classes.forEach(k => this.nativeRenderer.addClass(nativeNode, k));
-            Object.keys(props.listeners).forEach(type => {
-                this.nativeRenderer.listen(nativeNode, type, props.listeners[type]);
-            });
+                continue;
+            }
+            if (key === refKey) {
+                bindingRefs = props[key];
+                continue;
+            }
+            this.nativeRenderer.setProperty(nativeNode, key, props[key]);
         }
-        return nativeNode;
+        return {
+            nativeNode,
+            applyRefs: () => {
+                this.applyRefs(bindingRefs, nativeNode, true);
+            }
+        };
     }
     createTextNode(child) {
         return this.nativeRenderer.createTextNode(child.text);
     }
     updateNativeNodeProperties(newVNode, oldVNode, nativeNode) {
-        const { styleChanges, attrChanges, classesChanges, listenerChanges, isChanged } = getNodeChanges(newVNode, oldVNode);
-        if (!isChanged) {
-            return;
-        }
-        styleChanges.remove.forEach(i => this.nativeRenderer.removeStyle(nativeNode, i[0]));
-        styleChanges.set.forEach(i => this.nativeRenderer.setStyle(nativeNode, i[0], i[1]));
-        attrChanges.remove.forEach(([key, value]) => {
-            if (key === refKey && value instanceof Ref) {
-                value.unListen();
-                return;
+        const changes = getObjectChanges(newVNode.props, oldVNode.props);
+        let unBindRefs;
+        let bindRefs;
+        for (const [key, value] of changes.remove) {
+            if (key === 'children') {
+                continue;
+            }
+            if (key === 'class') {
+                this.nativeRenderer.setClass(nativeNode, '');
+                continue;
+            }
+            if (key === 'style') {
+                Object.keys(styleToObject(value)).forEach(styleName => {
+                    this.nativeRenderer.removeStyle(nativeNode, styleName);
+                });
+                continue;
+            }
+            if (/^on[A-Z]/.test(key)) {
+                if (typeof value === 'function') {
+                    this.nativeRenderer.unListen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
+                }
+                continue;
+            }
+            if (key === refKey) {
+                unBindRefs = value;
+                continue;
             }
             this.nativeRenderer.removeProperty(nativeNode, key);
-        });
-        attrChanges.set.forEach(([key, value]) => {
-            if (key === refKey && value instanceof Ref) {
-                value.update(nativeNode);
-                return;
+        }
+        for (const [key, newValue, oldValue] of changes.replace) {
+            if (key === 'children') {
+                continue;
+            }
+            if (key === 'class') {
+                const oldClassName = classToString(oldValue);
+                const newClassName = classToString(newValue);
+                if (oldClassName !== newClassName) {
+                    this.nativeRenderer.setClass(nativeNode, newClassName);
+                }
+                continue;
+            }
+            if (key === 'style') {
+                const styleChanges = getObjectChanges(styleToObject(newValue), styleToObject(oldValue));
+                for (const [styleName] of styleChanges.remove) {
+                    this.nativeRenderer.removeStyle(nativeNode, styleName);
+                }
+                for (const [styleName, styleValue] of [...styleChanges.add, ...styleChanges.replace]) {
+                    this.nativeRenderer.setStyle(nativeNode, styleName, styleValue);
+                }
+                continue;
+            }
+            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);
+                }
+                continue;
+            }
+            if (key === refKey) {
+                unBindRefs = oldValue;
+                bindRefs = newValue;
+                continue;
+            }
+            this.nativeRenderer.setProperty(nativeNode, key, newValue);
+        }
+        for (const [key, value] of changes.add) {
+            if (key === 'children') {
+                continue;
+            }
+            if (key === 'class') {
+                this.nativeRenderer.setClass(nativeNode, classToString(value));
+                continue;
+            }
+            if (key === 'style') {
+                const styleObj = styleToObject(value);
+                Object.keys(styleObj).forEach(styleName => {
+                    this.nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName]);
+                });
+                continue;
+            }
+            if (/^on[A-Z]/.test(key)) {
+                if (typeof value === 'function') {
+                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
+                }
+                continue;
+            }
+            if (key === refKey) {
+                bindRefs = value;
+                continue;
             }
             this.nativeRenderer.setProperty(nativeNode, key, value);
-        });
-        classesChanges.remove.forEach(i => this.nativeRenderer.removeClass(nativeNode, i));
-        classesChanges.add.forEach(i => this.nativeRenderer.addClass(nativeNode, i));
-        listenerChanges.remove.forEach(i => {
-            this.nativeRenderer.unListen(nativeNode, i[0], i[1]);
-        });
-        listenerChanges.add.forEach(i => {
-            this.nativeRenderer.listen(nativeNode, i[0], i[1]);
-        });
+        }
+        return () => {
+            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([
@@ -1160,7 +1195,7 @@ class Viewfly extends di.ReflectiveInjector {
     /**
      * 启动 Viewfly
      */
-    start() {
+    run() {
         const renderer = this.get(exports.Renderer);
         renderer.render();
         if (this.config.autoUpdate === false) {
@@ -1185,17 +1220,16 @@ class Viewfly extends di.ReflectiveInjector {
             return () => {
                 return this.destroyed ? null : rootNode;
             };
-        });
+        }, this.config.context);
     }
 }
 
 exports.Component = Component;
 exports.Fragment = Fragment;
+exports.JSXComponent = JSXComponent;
 exports.JSXElement = JSXElement;
-exports.JSXFragment = JSXFragment;
 exports.JSXText = JSXText;
 exports.NativeRenderer = NativeRenderer;
-exports.Props = Props;
 exports.Ref = Ref;
 exports.RootComponent = RootComponent;
 exports.RootComponentRef = RootComponentRef;
@@ -1203,11 +1237,13 @@ exports.Viewfly = Viewfly;
 exports.inject = inject;
 exports.jsx = jsx;
 exports.jsxs = jsxs;
+exports.makeError = makeError;
 exports.onDestroy = onDestroy;
 exports.onMount = onMount;
 exports.onPropsChanged = onPropsChanged;
 exports.onUpdated = onUpdated;
 exports.provide = provide;
+exports.useDerived = useDerived;
 exports.useEffect = useEffect;
 exports.useRef = useRef;
 exports.useSignal = useSignal;