@viewfly/core 0.3.1 → 0.4.1

package/bundles/foundation/component.d.ts

@@ -26,7 +26,7 @@ export declare class Component extends ReflectiveInjector implements JSXTypeof<J
     protected _dirty: boolean;
     protected _changed: boolean;
     private unWatch?;
-    private isFirstRending;
+    private isFirstRendering;
     private refs;
     constructor(parentComponent: Injector | null, type: JSXInternal.ComponentSetup, props: Props, key?: Key | undefined);
     markAsDirtied(): void;

package/bundles/foundation/injection-tokens.d.ts

@@ -3,7 +3,6 @@ export declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode
     abstract createElement(name: string, isSvg: boolean): ElementNode;
     abstract createTextNode(textContent: string, isSvg: boolean): TextNode;
     abstract setProperty(node: ElementNode, key: string, value: any, isSvg: boolean): void;
-    abstract appendChild(parent: ElementNode, newChild: ElementNode | TextNode, isSvg: boolean): void;
     abstract prependChild(parent: ElementNode, newChild: ElementNode | TextNode, isSvg: boolean): void;
     abstract removeProperty(node: ElementNode, key: string, isSvg: boolean): void;
     abstract setStyle(target: ElementNode, key: string, value: any, isSvg: boolean): void;

package/bundles/foundation/renderer.d.ts

@@ -1,3 +1,3 @@
 import { NativeNode, NativeRenderer } from './injection-tokens';
 import { Component } from './component';
-export declare function createRenderer(component: Component, nativeRenderer: NativeRenderer, version: string): (host: NativeNode) => void;
+export declare function createRenderer(component: Component, nativeRenderer: NativeRenderer): (host: NativeNode) => void;

package/bundles/foundation/root.component.d.ts

@@ -5,7 +5,7 @@ import { Injector } from '../di/_api';
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 export declare class RootComponent extends Component {
-    onChange: (() => void) | null;
-    constructor(parentInjector: Injector | null, factory: JSXInternal.ComponentSetup);
+    private refresh;
+    constructor(parentInjector: Injector | null, factory: JSXInternal.ComponentSetup, refresh: () => void);
     markAsChanged(changedComponent?: Component): void;
 }

package/bundles/index.esm.js

@@ -551,22 +551,22 @@ function getObjectChanges(newProps, oldProps) {
         add: [],
         replace: []
     };
-    Object.keys(newProps).forEach(key => {
+    for (const key in newProps) {
         const leftValue = newProps[key];
         const rightValue = oldProps[key];
         if (Reflect.has(oldProps, key)) {
             if (leftValue !== rightValue) {
                 changes.replace.push([key, leftValue, rightValue]);
             }
-            return;
+            continue;
         }
         changes.add.push([key, leftValue]);
-    });
-    Object.keys(oldProps).forEach(key => {
+    }
+    for (const key in oldProps) {
         if (!Reflect.has(newProps, key)) {
             changes.remove.push([key, oldProps[key]]);
         }
-    });
+    }
     return changes;
 }
 function getArrayChanges(left, right) {
@@ -674,7 +674,7 @@ class Component extends ReflectiveInjector {
         this.propsChangedDestroyCallbacks = [];
         this._dirty = true;
         this._changed = true;
-        this.isFirstRending = true;
+        this.isFirstRendering = true;
     }
     markAsDirtied() {
         this._dirty = true;
@@ -775,15 +775,19 @@ class Component extends ReflectiveInjector {
     }
     rendered() {
         this.changedSubComponents.clear();
-        const is = this.isFirstRending;
-        this.isFirstRending = false;
+        const is = this.isFirstRendering;
+        this.isFirstRendering = false;
         this._dirty = this._changed = false;
+        this.invokeUpdatedHooks();
         if (is) {
-            this.invokeUpdatedHooks();
             this.invokeMountHooks();
         }
-        else {
-            this.invokeUpdatedHooks();
+        if (this.changed) {
+            Promise.resolve().then(() => {
+                if (this.parentComponent instanceof Component) {
+                    this.parentComponent.markAsChanged(this);
+                }
+            });
         }
     }
     destroy() {
@@ -1215,11 +1219,10 @@ function withMemo(canUseMemo, render) {
     };
 }
 
-function createRenderer(component, nativeRenderer, version) {
+function createRenderer(component, nativeRenderer) {
     let isInit = true;
     return function render(host) {
         if (isInit) {
-            nativeRenderer.setProperty(host, 'viewfly-version', version, false);
             isInit = false;
             const atom = {
                 jsxNode: component,
@@ -1339,87 +1342,11 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
         }
     }
     const commits = [];
-    const changeCommits = {
-        updateComponent: (newAtom, reusedAtom, expectIndex, oldIndex) => {
-            commits.push((offset) => {
-                const instance = reusedAtom.jsxNode;
-                const newProps = newAtom.jsxNode.props;
-                const oldTemplate = instance.template;
-                const newTemplate = instance.update(newProps);
-                instance.$$view = Object.assign({ atom: newAtom }, context);
-                newAtom.jsxNode = instance;
-                if (newTemplate === oldTemplate) {
-                    reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
-                    updateView(nativeRenderer, instance);
-                    return;
-                }
-                if (newTemplate) {
-                    linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
-                }
-                if (newAtom.child) {
-                    diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex);
-                }
-                else if (reusedAtom.child) {
-                    let atom = reusedAtom.child;
-                    while (atom) {
-                        cleanView(nativeRenderer, atom, false);
-                        atom = atom.sibling;
-                    }
-                }
-                instance.rendered();
-            });
-        },
-        updateElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
-            commits.push((offset) => {
-                newAtom.nativeNode = oldAtom.nativeNode;
-                const host = context.host;
-                if (expectIndex - offset !== oldIndex) {
-                    if (context.isParent) {
-                        nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
-                    }
-                    else {
-                        nativeRenderer.insertAfter(newAtom.nativeNode, host, newAtom.isSvg);
-                    }
-                }
-                context.host = newAtom.nativeNode;
-                context.isParent = false;
-                const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode, newAtom.isSvg);
-                if (newAtom.child) {
-                    diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
-                        host: newAtom.nativeNode,
-                        isParent: true
-                    }, 0, 0);
-                }
-                else if (oldAtom.child) {
-                    let atom = oldAtom.child;
-                    while (atom) {
-                        cleanView(nativeRenderer, atom, false);
-                        atom = atom.sibling;
-                    }
-                }
-                applyRefs();
-            });
-        },
-        updateText: (newAtom, oldAtom) => {
-            commits.push(() => {
-                const nativeNode = oldAtom.nativeNode;
-                if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
-                    nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode.text, newAtom.isSvg);
-                }
-                newAtom.nativeNode = nativeNode;
-                context.host = nativeNode;
-                context.isParent = false;
-            });
-        },
-        create: (start) => {
-            commits.push(() => {
-                buildView(nativeRenderer, parentComponent, start, context);
-                offset++;
-            });
-        }
-    };
+    function changeOffset() {
+        offset++;
+    }
     while (newAtom) {
-        firstDiffAtomIndexed = createChanges(newAtom, expectIndex, firstDiffAtomIndexed, changeCommits);
+        firstDiffAtomIndexed = createChanges(newAtom, expectIndex, firstDiffAtomIndexed, nativeRenderer, commits, context, parentComponent, changeOffset);
         newAtom = newAtom.sibling;
         expectIndex++;
     }
@@ -1442,28 +1369,34 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
         commit(offset);
     }
 }
-function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
+function createChanges(newAtom, expectIndex, diffAtomIndexed, nativeRenderer, commits, context, parentComponent, effect) {
     const startDiffAtom = diffAtomIndexed;
+    const key = newAtom.jsxNode.key;
     while (diffAtomIndexed) {
         const { atom: diffAtom, index: diffIndex } = diffAtomIndexed;
-        const key = newAtom.jsxNode.key;
         const diffKey = diffAtom.jsxNode.key;
-        if (key !== undefined && diffKey !== undefined) {
+        if (key !== undefined) {
             if (diffKey !== key) {
                 diffAtomIndexed = diffAtomIndexed.next;
                 continue;
             }
         }
+        else if (diffKey !== undefined) {
+            diffAtomIndexed = diffAtomIndexed.next;
+            continue;
+        }
         if (newAtom.jsxNode.$$typeOf === diffAtom.jsxNode.$$typeOf) {
+            let commit;
             if (newAtom.jsxNode instanceof JSXElement) {
-                changeCommits.updateElement(newAtom, diffAtom, expectIndex, diffIndex);
+                commit = updateElement(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context, parentComponent);
             }
             else if (newAtom.jsxNode instanceof JSXText) {
-                changeCommits.updateText(newAtom, diffAtom);
+                commit = updateText(newAtom, diffAtom, nativeRenderer, context);
             }
             else {
-                changeCommits.updateComponent(newAtom, diffAtom, expectIndex, diffIndex);
+                commit = updateComponent(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context);
             }
+            commits.push(commit);
             const next = diffAtomIndexed.next;
             const prev = diffAtomIndexed.prev;
             if (!prev) {
@@ -1481,9 +1414,86 @@ function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
         }
         diffAtomIndexed = diffAtomIndexed.next;
     }
-    changeCommits.create(newAtom);
+    commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
     return startDiffAtom;
 }
+function createNewView(start, nativeRenderer, context, parentComponent, effect) {
+    return function () {
+        buildView(nativeRenderer, parentComponent, start, context);
+        effect();
+    };
+}
+function updateText(newAtom, oldAtom, nativeRenderer, context) {
+    return function () {
+        const nativeNode = oldAtom.nativeNode;
+        if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
+            nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode.text, newAtom.isSvg);
+        }
+        newAtom.nativeNode = nativeNode;
+        context.host = nativeNode;
+        context.isParent = false;
+    };
+}
+function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer, context, parentComponent) {
+    return function (offset) {
+        newAtom.nativeNode = oldAtom.nativeNode;
+        const host = context.host;
+        if (expectIndex - offset !== oldIndex) {
+            if (context.isParent) {
+                nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
+            }
+            else {
+                nativeRenderer.insertAfter(newAtom.nativeNode, host, newAtom.isSvg);
+            }
+        }
+        context.host = newAtom.nativeNode;
+        context.isParent = false;
+        const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode, newAtom.isSvg);
+        if (newAtom.child) {
+            diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
+                host: newAtom.nativeNode,
+                isParent: true
+            }, 0, 0);
+        }
+        else if (oldAtom.child) {
+            let atom = oldAtom.child;
+            while (atom) {
+                cleanView(nativeRenderer, atom, false);
+                atom = atom.sibling;
+            }
+        }
+        applyRefs();
+    };
+}
+function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRenderer, context) {
+    return function (offset) {
+        const instance = reusedAtom.jsxNode;
+        const newProps = newAtom.jsxNode.props;
+        const oldTemplate = instance.template;
+        const newTemplate = instance.update(newProps);
+        instance.$$view = Object.assign({ atom: newAtom }, context);
+        newAtom.jsxNode = instance;
+        if (newTemplate === oldTemplate) {
+            reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
+            updateView(nativeRenderer, instance);
+            return;
+        }
+        if (newTemplate) {
+            linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
+        }
+        if (newAtom.child) {
+            diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex);
+        }
+        else if (reusedAtom.child) {
+            let atom = reusedAtom.child;
+            while (atom) {
+                cleanView(nativeRenderer, atom, false);
+                atom = atom.sibling;
+            }
+        }
+        instance.rendered();
+    };
+}
 function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
     let child = reusedAtom.child;
     newAtom.child = child;
@@ -1551,9 +1561,9 @@ function componentRender(nativeRenderer, component, from, context) {
     }
     component.rendered();
 }
-function createChainByComponentFactory(jsxComponent, parent, isSvg) {
+function createChainByJSXComponentOrJSXText(jsxNode, parent, isSvg) {
     return {
-        jsxNode: jsxComponent,
+        jsxNode,
         parent,
         sibling: null,
         child: null,
@@ -1578,16 +1588,6 @@ function createChainByJSXElement(component, element, parent, isSvg) {
     }
     return atom;
 }
-function createChainByJSXText(node, parent, isSvg) {
-    return {
-        jsxNode: node,
-        parent,
-        sibling: null,
-        child: null,
-        nativeNode: null,
-        isSvg
-    };
-}
 function createChainByChildren(component, children, parent, atoms, isSvg) {
     for (const item of children) {
         if (item !== null && typeof item !== 'undefined' && typeof item !== 'boolean') {
@@ -1595,20 +1595,20 @@ function createChainByChildren(component, children, parent, atoms, isSvg) {
                 atoms.push(createChainByJSXElement(component, item, parent, isSvg));
                 continue;
             }
-            if (item instanceof JSXComponent) {
-                const childAtom = createChainByComponentFactory(item, parent, isSvg);
-                atoms.push(childAtom);
-                continue;
-            }
             if (typeof item === 'string' && item.length) {
-                atoms.push(createChainByJSXText(new JSXText(item), parent, isSvg));
+                atoms.push(createChainByJSXComponentOrJSXText(new JSXText(item), parent, isSvg));
                 continue;
             }
             if (Array.isArray(item)) {
                 createChainByChildren(component, item, parent, atoms, isSvg);
                 continue;
             }
-            atoms.push(createChainByJSXText(new JSXText(String(item)), parent, isSvg));
+            if (item instanceof JSXComponent) {
+                const childAtom = createChainByJSXComponentOrJSXText(item, parent, isSvg);
+                atoms.push(childAtom);
+                continue;
+            }
+            atoms.push(createChainByJSXComponentOrJSXText(new JSXText(String(item)), parent, isSvg));
         }
     }
     return atoms;
@@ -1629,8 +1629,7 @@ function createElement(nativeRenderer, vNode, isSvg) {
     const nativeNode = nativeRenderer.createElement(vNode.type, isSvg);
     const props = vNode.props;
     let bindingRefs;
-    const keys = Object.keys(props);
-    for (const key of keys) {
+    for (const key in props) {
         if (key === 'children') {
             continue;
         }
@@ -1643,9 +1642,9 @@ function createElement(nativeRenderer, vNode, isSvg) {
         }
         if (key === 'style') {
             const style = styleToObject(props.style);
-            Object.keys(style).forEach(key => {
+            for (const key in style) {
                 nativeRenderer.setStyle(nativeNode, key, style[key], isSvg);
-            });
+            }
             continue;
         }
         if (/^on[A-Z]/.test(key)) {
@@ -1685,9 +1684,9 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             continue;
         }
         if (key === 'style') {
-            Object.keys(styleToObject(value)).forEach(styleName => {
+            for (const styleName in styleToObject(value)) {
                 nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
-            });
+            }
             continue;
         }
         if (/^on[A-Z]/.test(key)) {
@@ -1749,9 +1748,9 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
         }
         if (key === 'style') {
             const styleObj = styleToObject(value);
-            Object.keys(styleObj).forEach(styleName => {
+            for (const styleName in styleObj) {
                 nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
-            });
+            }
             continue;
         }
         if (/^on[A-Z]/.test(key)) {
@@ -1785,61 +1784,65 @@ function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn, isSvg) {
         vNode.on = on = {};
     }
     const type = key.replace(/^on/, '').toLowerCase();
-    const delegate = function (...args) {
-        return delegateObj.listenFn.apply(this, args);
-    };
     const delegateObj = {
-        delegate,
+        delegate(...args) {
+            return delegateObj.listenFn.apply(this, args);
+        },
         listenFn
     };
     on[type] = delegateObj;
-    nativeRenderer.listen(nativeNode, type, delegate, isSvg);
+    nativeRenderer.listen(nativeNode, type, delegateObj.delegate, isSvg);
 }
 
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 class RootComponent extends Component {
-    constructor(parentInjector, factory) {
+    constructor(parentInjector, factory, refresh) {
         super(parentInjector, factory, {});
-        this.onChange = null;
+        this.refresh = refresh;
     }
     markAsChanged(changedComponent) {
-        var _a;
         this._changed = true;
         if (changedComponent) {
             this.changedSubComponents.add(changedComponent);
         }
-        (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.refresh();
     }
 }
 
 const viewflyErrorFn = makeError('Viewfly');
-const VERSION = "0.3.1";
 function viewfly(config) {
     const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
     const appProviders = [];
     const modules = [];
     let destroyed = false;
+    let appHost = null;
     const rootComponent = new RootComponent(context || null, () => {
         provide(appProviders);
         return () => {
             return destroyed ? null : root;
         };
+    }, function () {
+        if (destroyed) {
+            return;
+        }
+        nextTick(() => {
+            render(appHost);
+        });
     });
-    const render = createRenderer(rootComponent, nativeRenderer, VERSION);
+    const render = createRenderer(rootComponent, nativeRenderer);
     let isStarted = false;
     let task = null;
     function nextTick(callback) {
         if (task !== null) {
             return;
         }
-        task = setTimeout(() => {
+        task = Promise.resolve().then(() => {
             task = null;
             callback();
         });
     }
-    let appHost = null;
     const app = {
         provide(providers) {
             if (Array.isArray(providers)) {
@@ -1876,15 +1879,6 @@ function viewfly(config) {
             if (!autoUpdate) {
                 return app;
             }
-            const refresh = () => {
-                if (destroyed) {
-                    return;
-                }
-                render(host);
-            };
-            rootComponent.onChange = function () {
-                nextTick(refresh);
-            };
             return app;
         },
         render() {
@@ -1906,4 +1900,4 @@ function viewfly(config) {
     return app;
 }
 
-export { Component, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXComponent, JSXElement, JSXText, NativeRenderer, NullInjector, Optional, Prop, Ref, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, THROW_IF_NOT_FOUND, Type, VERSION, createRenderer, forwardRef, getCurrentInstance, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, provide, useDerived, useEffect, useRef, useSignal, viewfly, withMemo };
+export { Component, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXComponent, JSXElement, JSXText, NativeRenderer, NullInjector, Optional, Prop, Ref, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, THROW_IF_NOT_FOUND, Type, createRenderer, forwardRef, getCurrentInstance, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, provide, useDerived, useEffect, useRef, useSignal, viewfly, withMemo };

package/bundles/index.js

@@ -553,22 +553,22 @@ function getObjectChanges(newProps, oldProps) {
         add: [],
         replace: []
     };
-    Object.keys(newProps).forEach(key => {
+    for (const key in newProps) {
         const leftValue = newProps[key];
         const rightValue = oldProps[key];
         if (Reflect.has(oldProps, key)) {
             if (leftValue !== rightValue) {
                 changes.replace.push([key, leftValue, rightValue]);
             }
-            return;
+            continue;
         }
         changes.add.push([key, leftValue]);
-    });
-    Object.keys(oldProps).forEach(key => {
+    }
+    for (const key in oldProps) {
         if (!Reflect.has(newProps, key)) {
             changes.remove.push([key, oldProps[key]]);
         }
-    });
+    }
     return changes;
 }
 function getArrayChanges(left, right) {
@@ -676,7 +676,7 @@ class Component extends ReflectiveInjector {
         this.propsChangedDestroyCallbacks = [];
         this._dirty = true;
         this._changed = true;
-        this.isFirstRending = true;
+        this.isFirstRendering = true;
     }
     markAsDirtied() {
         this._dirty = true;
@@ -777,15 +777,19 @@ class Component extends ReflectiveInjector {
     }
     rendered() {
         this.changedSubComponents.clear();
-        const is = this.isFirstRending;
-        this.isFirstRending = false;
+        const is = this.isFirstRendering;
+        this.isFirstRendering = false;
         this._dirty = this._changed = false;
+        this.invokeUpdatedHooks();
         if (is) {
-            this.invokeUpdatedHooks();
             this.invokeMountHooks();
         }
-        else {
-            this.invokeUpdatedHooks();
+        if (this.changed) {
+            Promise.resolve().then(() => {
+                if (this.parentComponent instanceof Component) {
+                    this.parentComponent.markAsChanged(this);
+                }
+            });
         }
     }
     destroy() {
@@ -1217,11 +1221,10 @@ function withMemo(canUseMemo, render) {
     };
 }
 
-function createRenderer(component, nativeRenderer, version) {
+function createRenderer(component, nativeRenderer) {
     let isInit = true;
     return function render(host) {
         if (isInit) {
-            nativeRenderer.setProperty(host, 'viewfly-version', version, false);
             isInit = false;
             const atom = {
                 jsxNode: component,
@@ -1341,87 +1344,11 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
         }
     }
     const commits = [];
-    const changeCommits = {
-        updateComponent: (newAtom, reusedAtom, expectIndex, oldIndex) => {
-            commits.push((offset) => {
-                const instance = reusedAtom.jsxNode;
-                const newProps = newAtom.jsxNode.props;
-                const oldTemplate = instance.template;
-                const newTemplate = instance.update(newProps);
-                instance.$$view = Object.assign({ atom: newAtom }, context);
-                newAtom.jsxNode = instance;
-                if (newTemplate === oldTemplate) {
-                    reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
-                    updateView(nativeRenderer, instance);
-                    return;
-                }
-                if (newTemplate) {
-                    linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
-                }
-                if (newAtom.child) {
-                    diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex);
-                }
-                else if (reusedAtom.child) {
-                    let atom = reusedAtom.child;
-                    while (atom) {
-                        cleanView(nativeRenderer, atom, false);
-                        atom = atom.sibling;
-                    }
-                }
-                instance.rendered();
-            });
-        },
-        updateElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
-            commits.push((offset) => {
-                newAtom.nativeNode = oldAtom.nativeNode;
-                const host = context.host;
-                if (expectIndex - offset !== oldIndex) {
-                    if (context.isParent) {
-                        nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
-                    }
-                    else {
-                        nativeRenderer.insertAfter(newAtom.nativeNode, host, newAtom.isSvg);
-                    }
-                }
-                context.host = newAtom.nativeNode;
-                context.isParent = false;
-                const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode, newAtom.isSvg);
-                if (newAtom.child) {
-                    diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
-                        host: newAtom.nativeNode,
-                        isParent: true
-                    }, 0, 0);
-                }
-                else if (oldAtom.child) {
-                    let atom = oldAtom.child;
-                    while (atom) {
-                        cleanView(nativeRenderer, atom, false);
-                        atom = atom.sibling;
-                    }
-                }
-                applyRefs();
-            });
-        },
-        updateText: (newAtom, oldAtom) => {
-            commits.push(() => {
-                const nativeNode = oldAtom.nativeNode;
-                if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
-                    nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode.text, newAtom.isSvg);
-                }
-                newAtom.nativeNode = nativeNode;
-                context.host = nativeNode;
-                context.isParent = false;
-            });
-        },
-        create: (start) => {
-            commits.push(() => {
-                buildView(nativeRenderer, parentComponent, start, context);
-                offset++;
-            });
-        }
-    };
+    function changeOffset() {
+        offset++;
+    }
     while (newAtom) {
-        firstDiffAtomIndexed = createChanges(newAtom, expectIndex, firstDiffAtomIndexed, changeCommits);
+        firstDiffAtomIndexed = createChanges(newAtom, expectIndex, firstDiffAtomIndexed, nativeRenderer, commits, context, parentComponent, changeOffset);
         newAtom = newAtom.sibling;
         expectIndex++;
     }
@@ -1444,28 +1371,34 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
         commit(offset);
     }
 }
-function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
+function createChanges(newAtom, expectIndex, diffAtomIndexed, nativeRenderer, commits, context, parentComponent, effect) {
     const startDiffAtom = diffAtomIndexed;
+    const key = newAtom.jsxNode.key;
     while (diffAtomIndexed) {
         const { atom: diffAtom, index: diffIndex } = diffAtomIndexed;
-        const key = newAtom.jsxNode.key;
         const diffKey = diffAtom.jsxNode.key;
-        if (key !== undefined && diffKey !== undefined) {
+        if (key !== undefined) {
             if (diffKey !== key) {
                 diffAtomIndexed = diffAtomIndexed.next;
                 continue;
             }
         }
+        else if (diffKey !== undefined) {
+            diffAtomIndexed = diffAtomIndexed.next;
+            continue;
+        }
         if (newAtom.jsxNode.$$typeOf === diffAtom.jsxNode.$$typeOf) {
+            let commit;
             if (newAtom.jsxNode instanceof JSXElement) {
-                changeCommits.updateElement(newAtom, diffAtom, expectIndex, diffIndex);
+                commit = updateElement(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context, parentComponent);
             }
             else if (newAtom.jsxNode instanceof JSXText) {
-                changeCommits.updateText(newAtom, diffAtom);
+                commit = updateText(newAtom, diffAtom, nativeRenderer, context);
             }
             else {
-                changeCommits.updateComponent(newAtom, diffAtom, expectIndex, diffIndex);
+                commit = updateComponent(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context);
             }
+            commits.push(commit);
             const next = diffAtomIndexed.next;
             const prev = diffAtomIndexed.prev;
             if (!prev) {
@@ -1483,9 +1416,86 @@ function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
         }
         diffAtomIndexed = diffAtomIndexed.next;
     }
-    changeCommits.create(newAtom);
+    commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
     return startDiffAtom;
 }
+function createNewView(start, nativeRenderer, context, parentComponent, effect) {
+    return function () {
+        buildView(nativeRenderer, parentComponent, start, context);
+        effect();
+    };
+}
+function updateText(newAtom, oldAtom, nativeRenderer, context) {
+    return function () {
+        const nativeNode = oldAtom.nativeNode;
+        if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
+            nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode.text, newAtom.isSvg);
+        }
+        newAtom.nativeNode = nativeNode;
+        context.host = nativeNode;
+        context.isParent = false;
+    };
+}
+function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer, context, parentComponent) {
+    return function (offset) {
+        newAtom.nativeNode = oldAtom.nativeNode;
+        const host = context.host;
+        if (expectIndex - offset !== oldIndex) {
+            if (context.isParent) {
+                nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
+            }
+            else {
+                nativeRenderer.insertAfter(newAtom.nativeNode, host, newAtom.isSvg);
+            }
+        }
+        context.host = newAtom.nativeNode;
+        context.isParent = false;
+        const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode, newAtom.isSvg);
+        if (newAtom.child) {
+            diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
+                host: newAtom.nativeNode,
+                isParent: true
+            }, 0, 0);
+        }
+        else if (oldAtom.child) {
+            let atom = oldAtom.child;
+            while (atom) {
+                cleanView(nativeRenderer, atom, false);
+                atom = atom.sibling;
+            }
+        }
+        applyRefs();
+    };
+}
+function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRenderer, context) {
+    return function (offset) {
+        const instance = reusedAtom.jsxNode;
+        const newProps = newAtom.jsxNode.props;
+        const oldTemplate = instance.template;
+        const newTemplate = instance.update(newProps);
+        instance.$$view = Object.assign({ atom: newAtom }, context);
+        newAtom.jsxNode = instance;
+        if (newTemplate === oldTemplate) {
+            reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
+            updateView(nativeRenderer, instance);
+            return;
+        }
+        if (newTemplate) {
+            linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
+        }
+        if (newAtom.child) {
+            diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex);
+        }
+        else if (reusedAtom.child) {
+            let atom = reusedAtom.child;
+            while (atom) {
+                cleanView(nativeRenderer, atom, false);
+                atom = atom.sibling;
+            }
+        }
+        instance.rendered();
+    };
+}
 function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
     let child = reusedAtom.child;
     newAtom.child = child;
@@ -1553,9 +1563,9 @@ function componentRender(nativeRenderer, component, from, context) {
     }
     component.rendered();
 }
-function createChainByComponentFactory(jsxComponent, parent, isSvg) {
+function createChainByJSXComponentOrJSXText(jsxNode, parent, isSvg) {
     return {
-        jsxNode: jsxComponent,
+        jsxNode,
         parent,
         sibling: null,
         child: null,
@@ -1580,16 +1590,6 @@ function createChainByJSXElement(component, element, parent, isSvg) {
     }
     return atom;
 }
-function createChainByJSXText(node, parent, isSvg) {
-    return {
-        jsxNode: node,
-        parent,
-        sibling: null,
-        child: null,
-        nativeNode: null,
-        isSvg
-    };
-}
 function createChainByChildren(component, children, parent, atoms, isSvg) {
     for (const item of children) {
         if (item !== null && typeof item !== 'undefined' && typeof item !== 'boolean') {
@@ -1597,20 +1597,20 @@ function createChainByChildren(component, children, parent, atoms, isSvg) {
                 atoms.push(createChainByJSXElement(component, item, parent, isSvg));
                 continue;
             }
-            if (item instanceof JSXComponent) {
-                const childAtom = createChainByComponentFactory(item, parent, isSvg);
-                atoms.push(childAtom);
-                continue;
-            }
             if (typeof item === 'string' && item.length) {
-                atoms.push(createChainByJSXText(new JSXText(item), parent, isSvg));
+                atoms.push(createChainByJSXComponentOrJSXText(new JSXText(item), parent, isSvg));
                 continue;
             }
             if (Array.isArray(item)) {
                 createChainByChildren(component, item, parent, atoms, isSvg);
                 continue;
             }
-            atoms.push(createChainByJSXText(new JSXText(String(item)), parent, isSvg));
+            if (item instanceof JSXComponent) {
+                const childAtom = createChainByJSXComponentOrJSXText(item, parent, isSvg);
+                atoms.push(childAtom);
+                continue;
+            }
+            atoms.push(createChainByJSXComponentOrJSXText(new JSXText(String(item)), parent, isSvg));
         }
     }
     return atoms;
@@ -1631,8 +1631,7 @@ function createElement(nativeRenderer, vNode, isSvg) {
     const nativeNode = nativeRenderer.createElement(vNode.type, isSvg);
     const props = vNode.props;
     let bindingRefs;
-    const keys = Object.keys(props);
-    for (const key of keys) {
+    for (const key in props) {
         if (key === 'children') {
             continue;
         }
@@ -1645,9 +1644,9 @@ function createElement(nativeRenderer, vNode, isSvg) {
         }
         if (key === 'style') {
             const style = styleToObject(props.style);
-            Object.keys(style).forEach(key => {
+            for (const key in style) {
                 nativeRenderer.setStyle(nativeNode, key, style[key], isSvg);
-            });
+            }
             continue;
         }
         if (/^on[A-Z]/.test(key)) {
@@ -1687,9 +1686,9 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             continue;
         }
         if (key === 'style') {
-            Object.keys(styleToObject(value)).forEach(styleName => {
+            for (const styleName in styleToObject(value)) {
                 nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
-            });
+            }
             continue;
         }
         if (/^on[A-Z]/.test(key)) {
@@ -1751,9 +1750,9 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
         }
         if (key === 'style') {
             const styleObj = styleToObject(value);
-            Object.keys(styleObj).forEach(styleName => {
+            for (const styleName in styleObj) {
                 nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
-            });
+            }
             continue;
         }
         if (/^on[A-Z]/.test(key)) {
@@ -1787,61 +1786,65 @@ function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn, isSvg) {
         vNode.on = on = {};
     }
     const type = key.replace(/^on/, '').toLowerCase();
-    const delegate = function (...args) {
-        return delegateObj.listenFn.apply(this, args);
-    };
     const delegateObj = {
-        delegate,
+        delegate(...args) {
+            return delegateObj.listenFn.apply(this, args);
+        },
         listenFn
     };
     on[type] = delegateObj;
-    nativeRenderer.listen(nativeNode, type, delegate, isSvg);
+    nativeRenderer.listen(nativeNode, type, delegateObj.delegate, isSvg);
 }
 
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 class RootComponent extends Component {
-    constructor(parentInjector, factory) {
+    constructor(parentInjector, factory, refresh) {
         super(parentInjector, factory, {});
-        this.onChange = null;
+        this.refresh = refresh;
     }
     markAsChanged(changedComponent) {
-        var _a;
         this._changed = true;
         if (changedComponent) {
             this.changedSubComponents.add(changedComponent);
         }
-        (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.refresh();
     }
 }
 
 const viewflyErrorFn = makeError('Viewfly');
-const VERSION = "0.3.1";
 function viewfly(config) {
     const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
     const appProviders = [];
     const modules = [];
     let destroyed = false;
+    let appHost = null;
     const rootComponent = new RootComponent(context || null, () => {
         provide(appProviders);
         return () => {
             return destroyed ? null : root;
         };
+    }, function () {
+        if (destroyed) {
+            return;
+        }
+        nextTick(() => {
+            render(appHost);
+        });
     });
-    const render = createRenderer(rootComponent, nativeRenderer, VERSION);
+    const render = createRenderer(rootComponent, nativeRenderer);
     let isStarted = false;
     let task = null;
     function nextTick(callback) {
         if (task !== null) {
             return;
         }
-        task = setTimeout(() => {
+        task = Promise.resolve().then(() => {
             task = null;
             callback();
         });
     }
-    let appHost = null;
     const app = {
         provide(providers) {
             if (Array.isArray(providers)) {
@@ -1878,15 +1881,6 @@ function viewfly(config) {
             if (!autoUpdate) {
                 return app;
             }
-            const refresh = () => {
-                if (destroyed) {
-                    return;
-                }
-                render(host);
-            };
-            rootComponent.onChange = function () {
-                nextTick(refresh);
-            };
             return app;
         },
         render() {
@@ -1930,7 +1924,6 @@ exports.Self = Self;
 exports.SkipSelf = SkipSelf;
 exports.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
 exports.Type = Type;
-exports.VERSION = VERSION;
 exports.createRenderer = createRenderer;
 exports.forwardRef = forwardRef;
 exports.getCurrentInstance = getCurrentInstance;

package/bundles/viewfly.d.ts

@@ -1,7 +1,6 @@
 import type { Provider } from './di/_api';
 import { JSXInternal, NativeNode, NativeRenderer } from './foundation/_api';
 import { Injector } from './di/_api';
-export declare const VERSION: string;
 /**
  * Viewfly 配置项
  */
@@ -17,7 +16,7 @@ export interface Config {
 }
 export interface Application<T extends NativeNode = NativeNode> {
     provide(providers: Provider | Provider[]): Application<T>;
-    mount(host: T, autoUpdate?: boolean): Application<T>;
+    mount(host: T): Application<T>;
     use(module: Module | Module[]): Application<T>;
     render(): Application<T>;
     destroy(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "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",
@@ -47,7 +47,7 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "b66ca589f7662cd518fc2e5955b3e3ff9de83f94",
+  "gitHead": "7ca289c06cf646dab99157efea91ae9220b2abfd",
   "dependencies": {
     "reflect-metadata": "^0.1.13"
   }