@viewfly/core 0.0.28 → 0.0.30

package/bundles/index.esm.js

@@ -567,6 +567,23 @@ function getObjectChanges(newProps, oldProps) {
     });
     return changes;
 }
+function getArrayChanges(left, right) {
+    const changes = {
+        add: [],
+        remove: []
+    };
+    for (const i of left) {
+        if (!right.includes(i)) {
+            changes.remove.push(i);
+        }
+    }
+    for (const i of right) {
+        if (!left.includes(i)) {
+            changes.add.push(i);
+        }
+    }
+    return changes;
+}
 function classToString(config) {
     if (!config) {
         return '';
@@ -626,15 +643,6 @@ function getSetupContext(need = true) {
 function getSignalDepsContext() {
     return signalDepsStack[signalDepsStack.length - 1];
 }
-class JSXComponent {
-    constructor(props, factory) {
-        this.props = props;
-        this.factory = factory;
-    }
-    createInstance(injector) {
-        return this.factory(injector, this.props);
-    }
-}
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
@@ -645,11 +653,12 @@ class Component extends ReflectiveInjector {
     get changed() {
         return this._changed;
     }
-    constructor(context, type, props, key) {
-        super(context, [{
+    constructor(parentComponent, type, props, key) {
+        super(parentComponent, [{
                 provide: Injector,
                 useFactory: () => this
             }]);
+        this.parentComponent = parentComponent;
         this.type = type;
         this.props = props;
         this.key = key;
@@ -664,22 +673,29 @@ class Component extends ReflectiveInjector {
         this.updatedDestroyCallbacks = [];
         this.propsChangedDestroyCallbacks = [];
         this.isFirstRending = true;
-        this.parentComponent = this.parentInjector;
     }
-    is(target) {
-        return target.$$typeOf === this.$$typeOf;
+    markAsDirtied() {
+        this._dirty = true;
+        this.markAsChanged();
     }
-    provide(providers) {
-        providers = Array.isArray(providers) ? providers : [providers];
-        this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
+    markAsChanged(changedComponent) {
+        if (changedComponent) {
+            this.changedSubComponents.add(changedComponent);
+        }
+        if (this._changed) {
+            return;
+        }
+        this._changed = true;
+        if (this.parentComponent instanceof Component) {
+            this.parentComponent.markAsChanged(this);
+        }
     }
-    setup() {
+    render() {
         const self = this;
-        const props = new Proxy(this.props, {
+        const proxiesProps = new Proxy(this.props, {
             get(_, key) {
-                if (self.props) {
-                    return self.props[key];
-                }
+                // 必须用 self，因为 props 会随着页面更新变更，使用 self 才能更新引用
+                return self.props[key];
             },
             set() {
                 // 防止因外部捕获异常引引起的缓存未清理的问题
@@ -691,78 +707,66 @@ class Component extends ReflectiveInjector {
         });
         componentSetupStack.push(this);
         let isSetup = true;
-        const render = this.type(props);
+        const render = this.type(proxiesProps);
         const isRenderFn = typeof render === 'function';
-        const componentInstance = isRenderFn ? { $render: render } : render;
-        let refs = toRefs(this.props.ref);
-        onMounted(() => {
-            for (const ref of refs) {
-                ref.bind(componentInstance);
+        this.instance = isRenderFn ? { $render: render } : render;
+        this.refs = toRefs(this.props.ref);
+        this.mountCallbacks.push(() => {
+            for (const ref of this.refs) {
+                ref.bind(this.instance);
             }
         });
-        onDestroy(() => {
-            for (const ref of refs) {
-                ref.unBind(componentInstance);
+        this.destroyCallbacks.push(() => {
+            for (const ref of this.refs) {
+                ref.unBind(this.instance);
             }
         });
         isSetup = false;
         componentSetupStack.pop();
         signalDepsStack.push([]);
-        let template = componentInstance.$render();
+        let template = this.instance.$render();
         const deps = signalDepsStack.pop();
-        this.unWatch = useEffect(deps, () => {
+        this.unWatch = useEffect(Array.from(new Set(deps)), () => {
             this.markAsDirtied();
         });
-        return {
-            template,
-            render: (newProps, oldProps) => {
-                if (newProps !== oldProps) {
-                    const { add, remove, replace } = getObjectChanges(newProps, oldProps);
-                    if (add.length || remove.length || replace.length) {
-                        this.invokePropsChangedHooks(newProps);
-                    }
-                    const newRefs = toRefs(newProps.ref);
-                    for (const oldRef of refs) {
-                        if (!newRefs.includes(oldRef)) {
-                            oldRef.unBind(componentInstance);
-                        }
-                    }
-                    for (const newRef of newRefs) {
-                        if (!refs.includes(newRef)) {
-                            newRef.bind(componentInstance);
-                        }
-                    }
-                    refs = newRefs;
-                }
-                if (typeof componentInstance.$shouldUpdate === 'function') {
-                    if (!componentInstance.$shouldUpdate(newProps, oldProps)) {
-                        return template;
-                    }
-                }
-                this.unWatch();
-                signalDepsStack.push([]);
-                template = componentInstance.$render();
-                const deps = signalDepsStack.pop();
-                this.unWatch = useEffect(deps, () => {
-                    this.markAsDirtied();
-                });
-                return template;
-            }
-        };
+        this.template = template;
+        return template;
     }
-    markAsDirtied() {
-        this._dirty = true;
-        this.markAsChanged();
-    }
-    markAsChanged(changedComponent) {
-        if (changedComponent) {
-            this.changedSubComponents.add(changedComponent);
+    update(newProps, forceUpdate = false) {
+        const oldProps = this.props;
+        const { add, remove, replace } = getObjectChanges(newProps, this.props);
+        if (add.length || remove.length || replace.length) {
+            this.invokePropsChangedHooks(newProps);
+        }
+        const newRefs = toRefs(newProps.ref);
+        for (const oldRef of this.refs) {
+            if (!newRefs.includes(oldRef)) {
+                oldRef.unBind(this.instance);
+            }
         }
-        if (this._changed) {
-            return;
+        for (const newRef of newRefs) {
+            if (!this.refs.includes(newRef)) {
+                newRef.bind(this.instance);
+            }
         }
-        this._changed = true;
-        this.parentComponent.markAsChanged(this);
+        this.refs = newRefs;
+        if (!forceUpdate && typeof this.instance.$useMemo === 'function') {
+            if (this.instance.$useMemo(newProps, oldProps)) {
+                return this.template;
+            }
+        }
+        this.unWatch();
+        signalDepsStack.push([]);
+        this.template = this.instance.$render();
+        const deps = signalDepsStack.pop();
+        this.unWatch = useEffect(Array.from(new Set(deps)), () => {
+            this.markAsDirtied();
+        });
+        return this.template;
+    }
+    provide(providers) {
+        providers = Array.isArray(providers) ? providers : [providers];
+        this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
     }
     rendered() {
         this.changedSubComponents.clear();
@@ -1016,10 +1020,48 @@ function invokeDepFn(fn) {
     const data = fn();
     signalDepsStack.pop();
     return {
-        deps,
+        deps: Array.from(new Set(deps)),
         data
     };
 }
+function listen(model, deps, callback, isContinue) {
+    let isStop = false;
+    const nextListen = () => {
+        if (isStop) {
+            return;
+        }
+        isStop = true;
+        const { data: nextData, deps: nextDeps } = invokeDepFn(callback);
+        model.set(nextData);
+        if (typeof isContinue === 'function' && isContinue(nextData) === false) {
+            unListen();
+            return;
+        }
+        const changes = getArrayChanges(deps, nextDeps);
+        deps = deps.filter(i => {
+            const has = changes.remove.includes(i);
+            if (has) {
+                i[depsKey].delete(nextListen);
+                return false;
+            }
+            return true;
+        });
+        for (const s of changes.add) {
+            s[depsKey].add(nextListen);
+        }
+        deps.push(...changes.add);
+        isStop = false;
+    };
+    const unListen = () => {
+        for (const s of deps) {
+            s[depsKey].delete(nextListen);
+        }
+    };
+    for (const s of deps) {
+        s[depsKey].add(nextListen);
+    }
+    return unListen;
+}
 /**
  * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
  * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
@@ -1031,29 +1073,10 @@ function useDerived(callback, isContinue) {
     let { data, deps } = invokeDepFn(callback);
     const signal = useSignal(data);
     const component = getSetupContext(false);
-    const unListenRef = {};
-    function listen(model, deps, callback, unListenRef, isContinue) {
-        const nextListen = () => {
-            unListenRef.unListen();
-            const { data: nextData, deps: nextDeps } = invokeDepFn(callback);
-            model.set(nextData);
-            if (typeof isContinue !== 'function' || isContinue(nextData) !== false) {
-                listen(model, nextDeps, callback, unListenRef, isContinue);
-            }
-        };
-        unListenRef.unListen = () => {
-            for (const s of deps) {
-                s[depsKey].delete(nextListen);
-            }
-        };
-        for (const s of deps) {
-            s[depsKey].add(nextListen);
-        }
-    }
-    listen(signal, deps, callback, unListenRef, isContinue);
+    const unListen = listen(signal, deps, callback, isContinue);
     if (component) {
         component.destroyCallbacks.push(() => {
-            unListenRef.unListen();
+            unListen();
         });
     }
     return signal;
@@ -1116,6 +1139,9 @@ function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags = InjectFlags.S
     return component.get(token, notFoundValue, flags);
 }
 
+class NativeRenderer {
+}
+
 function Fragment(props) {
     return () => {
         return props.children;
@@ -1123,25 +1149,23 @@ function Fragment(props) {
 }
 function jsx(setup, props, key) {
     if (typeof setup === 'string') {
-        return JSXElement.create(setup, props, key);
+        return JSXElement.createInstance(setup, props, key);
     }
-    return new JSXComponent(props, function (context, props) {
+    return new JSXComponent(setup, props, function (context) {
         return new Component(context, setup, props, key);
-    });
+    }, key);
 }
 const jsxs = jsx;
+const JSXTextTypeOf = Symbol('JSXText');
 class JSXText {
     constructor(text) {
         this.text = text;
-        this.$$typeOf = '#text';
-    }
-    is(target) {
-        return target.$$typeOf === this.$$typeOf;
+        this.$$typeOf = JSXTextTypeOf;
     }
 }
 class JSXElement {
-    static create(name, props, key) {
-        return new JSXElement(name, props, key);
+    static createInstance(type, props, key) {
+        return new JSXElement(type, props, key);
     }
     constructor(type, props, key) {
         this.type = type;
@@ -1149,39 +1173,27 @@ class JSXElement {
         this.key = key;
         this.$$typeOf = this.type;
     }
-    is(target) {
-        return target.$$typeOf === this.$$typeOf;
+}
+class JSXComponent {
+    constructor(type, props, factory, key) {
+        this.type = type;
+        this.props = props;
+        this.factory = factory;
+        this.key = key;
+        this.$$typeOf = this.type;
+    }
+    createInstance(parentComponent) {
+        return this.factory(parentComponent);
     }
 }
 
-function withMemo(shouldUpdate, render) {
+function withMemo(canUseMemo, render) {
     return {
-        $shouldUpdate: shouldUpdate,
+        $useMemo: canUseMemo,
         $render: render
     };
 }
 
-/**
- * Viewfly 根组件，用于实现组件状态更新事件通知
- */
-class RootComponent extends Component {
-    constructor(parentInjector, factory) {
-        super(parentInjector, factory, {});
-        this.onChange = null;
-    }
-    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);
-    }
-}
-
-class NativeRenderer {
-}
-
 function createRenderer(component, nativeRenderer) {
     let isInit = true;
     return function render(host) {
@@ -1194,7 +1206,7 @@ function createRenderer(component, nativeRenderer) {
                 child: null,
                 nativeNode: null
             };
-            buildView(nativeRenderer, atom, {
+            componentRender(nativeRenderer, component, atom, {
                 isParent: true,
                 host
             });
@@ -1204,15 +1216,11 @@ function createRenderer(component, nativeRenderer) {
         }
     };
 }
-function buildView(nativeRenderer, atom, context) {
-    if (atom.jsxNode instanceof Component) {
-        componentRender(atom.jsxNode, atom, context);
-        let child = atom.child;
-        while (child) {
-            buildView(nativeRenderer, child, context);
-            child = child.sibling;
-        }
-        atom.jsxNode.rendered();
+function buildView(nativeRenderer, parentComponent, atom, context) {
+    if (atom.jsxNode instanceof JSXComponent) {
+        const component = atom.jsxNode.createInstance(parentComponent);
+        atom.jsxNode = component;
+        componentRender(nativeRenderer, component, atom, context);
     }
     else {
         let nativeNode;
@@ -1239,7 +1247,7 @@ function buildView(nativeRenderer, atom, context) {
             };
             let child = atom.child;
             while (child) {
-                buildView(nativeRenderer, child, childContext);
+                buildView(nativeRenderer, parentComponent, child, childContext);
                 child = child.sibling;
             }
         }
@@ -1263,9 +1271,9 @@ function updateView(nativeRenderer, component) {
     }
 }
 function applyChanges(nativeRenderer, component) {
-    const { atom, render, host, isParent } = component.$$view;
+    const { atom, host, isParent } = component.$$view;
     const diffAtom = atom.child;
-    const template = render(component.props, component.props);
+    const template = component.update(component.props, true);
     if (template) {
         linkTemplate(template, component, atom);
     }
@@ -1276,34 +1284,48 @@ function applyChanges(nativeRenderer, component) {
         host,
         isParent
     };
-    diff(nativeRenderer, atom.child, diffAtom, context, 0, 0);
+    diff(nativeRenderer, component, atom.child, diffAtom, context, 0, 0);
     const next = atom.sibling;
     if (next && next.jsxNode instanceof Component) {
         next.jsxNode.$$view.host = context.host;
         next.jsxNode.$$view.isParent = context.isParent;
     }
 }
-function diff(nativeRenderer, newAtom, oldAtom, context, expectIndex, index) {
-    const oldChildren = [];
-    while (oldAtom) {
-        oldChildren.push({
+function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expectIndex, index) {
+    let prevDiffAtom = null;
+    let firstDiffAtomIndexed = null;
+    if (oldAtom) {
+        prevDiffAtom = {
             index,
-            atom: oldAtom
-        });
-        oldAtom = oldAtom.sibling;
+            atom: oldAtom,
+            prev: null
+        };
         index++;
+        firstDiffAtomIndexed = prevDiffAtom;
+        oldAtom = oldAtom.sibling;
+        while (oldAtom) {
+            const diffAtom = {
+                index,
+                atom: oldAtom,
+                prev: prevDiffAtom
+            };
+            prevDiffAtom.next = diffAtom;
+            prevDiffAtom = diffAtom;
+            oldAtom = oldAtom.sibling;
+            index++;
+        }
     }
     const commits = [];
     const changeCommits = {
         updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
             commits.push((offset) => {
-                const { render, template } = reusedAtom.jsxNode.$$view;
+                const instance = reusedAtom.jsxNode;
                 const newProps = newAtom.jsxNode.props;
-                const oldProps = reusedAtom.jsxNode.props;
-                newAtom.jsxNode = reusedAtom.jsxNode;
-                const newTemplate = render(newProps, oldProps);
-                newAtom.jsxNode.$$view = Object.assign({ render, template: newTemplate, atom: newAtom }, context);
-                if (newTemplate === template) {
+                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 !== diffIndex - offset);
                     return;
                 }
@@ -1311,7 +1333,7 @@ function diff(nativeRenderer, newAtom, oldAtom, context, expectIndex, index) {
                     linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
                 }
                 if (newAtom.child) {
-                    diff(nativeRenderer, newAtom.child, reusedAtom.child, context, expectIndex, diffIndex);
+                    diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, diffIndex);
                 }
                 else if (reusedAtom.child) {
                     let atom = reusedAtom.child;
@@ -1320,7 +1342,7 @@ function diff(nativeRenderer, newAtom, oldAtom, context, expectIndex, index) {
                         atom = atom.sibling;
                     }
                 }
-                newAtom.jsxNode.rendered();
+                instance.rendered();
             });
         },
         updateElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
@@ -1339,7 +1361,7 @@ function diff(nativeRenderer, newAtom, oldAtom, context, expectIndex, index) {
                 context.isParent = false;
                 const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode);
                 if (newAtom.child) {
-                    diff(nativeRenderer, newAtom.child, oldAtom.child, {
+                    diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
                         host: newAtom.nativeNode,
                         isParent: true
                     }, 0, 0);
@@ -1367,28 +1389,27 @@ function diff(nativeRenderer, newAtom, oldAtom, context, expectIndex, index) {
         },
         create: (start) => {
             commits.push(() => {
-                buildView(nativeRenderer, start, context);
+                buildView(nativeRenderer, parentComponent, start, context);
             });
         }
     };
     while (newAtom) {
-        createChanges(newAtom, expectIndex, oldChildren, changeCommits);
+        firstDiffAtomIndexed = createChanges(newAtom, expectIndex, firstDiffAtomIndexed, changeCommits);
         newAtom = newAtom.sibling;
         expectIndex++;
     }
-    for (const item of oldChildren) {
-        cleanView(nativeRenderer, item.atom, false);
+    let dirtyDiffAtom = firstDiffAtomIndexed;
+    while (dirtyDiffAtom) {
+        cleanView(nativeRenderer, dirtyDiffAtom.atom, false);
+        dirtyDiffAtom = dirtyDiffAtom.next;
     }
-    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) {
+        while (firstDiffAtomIndexed) {
+            if (firstDiffAtomIndexed.index <= i) {
                 offset++;
-                j++;
+                firstDiffAtomIndexed = firstDiffAtomIndexed.next;
                 continue;
             }
             break;
@@ -1430,17 +1451,19 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         updateContext(atom);
     }
 }
-function createChanges(newAtom, expectIndex, oldChildren, changeCommits) {
-    for (let i = 0; i < oldChildren.length; i++) {
-        const { atom: diffAtom, index: diffIndex } = oldChildren[i];
+function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
+    const startDiffAtom = diffAtomIndexed;
+    while (diffAtomIndexed) {
+        const { atom: diffAtom, index: diffIndex } = diffAtomIndexed;
         const key = newAtom.jsxNode.key;
         const diffKey = diffAtom.jsxNode.key;
         if (key !== undefined && diffKey !== undefined) {
             if (diffKey !== key) {
+                diffAtomIndexed = diffAtomIndexed.next;
                 continue;
             }
         }
-        if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
+        if (newAtom.jsxNode.$$typeOf === diffAtom.jsxNode.$$typeOf) {
             if (newAtom.jsxNode instanceof JSXElement) {
                 changeCommits.updateElement(newAtom, diffAtom, expectIndex, diffIndex);
             }
@@ -1450,11 +1473,25 @@ function createChanges(newAtom, expectIndex, oldChildren, changeCommits) {
             else {
                 changeCommits.updateComponent(newAtom, diffAtom, expectIndex, diffIndex);
             }
-            oldChildren.splice(i, 1);
-            return;
+            const next = diffAtomIndexed.next;
+            const prev = diffAtomIndexed.prev;
+            if (!prev) {
+                diffAtomIndexed = next;
+                if (diffAtomIndexed) {
+                    diffAtomIndexed.prev = null;
+                }
+                return diffAtomIndexed;
+            }
+            prev.next = next;
+            if (next) {
+                next.prev = prev;
+            }
+            return startDiffAtom;
         }
+        diffAtomIndexed = diffAtomIndexed.next;
     }
     changeCommits.create(newAtom);
+    return startDiffAtom;
 }
 function cleanView(nativeRenderer, atom, isClean) {
     if (atom.nativeNode) {
@@ -1476,26 +1513,29 @@ function cleanView(nativeRenderer, atom, isClean) {
         atom.jsxNode.destroy();
     }
 }
-function componentRender(component, from, context) {
-    const { template, render } = component.setup();
+function componentRender(nativeRenderer, component, from, context) {
+    const template = component.render();
     if (template) {
         linkTemplate(template, component, from);
     }
-    component.$$view = Object.assign({ render,
-        template, atom: from }, context);
-    return from;
+    component.$$view = Object.assign({ atom: from }, context);
+    let child = from.child;
+    while (child) {
+        buildView(nativeRenderer, component, child, context);
+        child = child.sibling;
+    }
+    component.rendered();
 }
-function createChainByComponentFactory(context, factory, parent) {
-    const component = factory.createInstance(context);
+function createChainByComponentFactory(jsxComponent, parent) {
     return {
-        jsxNode: component,
+        jsxNode: jsxComponent,
         parent,
         sibling: null,
         child: null,
         nativeNode: null
     };
 }
-function createChainByJSXElement(context, element, parent) {
+function createChainByJSXElement(component, element, parent) {
     const atom = {
         jsxNode: element,
         parent,
@@ -1505,7 +1545,7 @@ function createChainByJSXElement(context, element, parent) {
     };
     if (Reflect.has(element.props, 'children')) {
         const jsxChildren = element.props.children;
-        const children = createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
+        const children = createChainByChildren(component, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
         link(atom, children);
     }
     return atom;
@@ -1519,26 +1559,26 @@ function createChainByJSXText(node, parent) {
         nativeNode: null
     };
 }
-function createChainByChildren(context, children, parent, atoms) {
+function createChainByChildren(component, children, parent, atoms) {
     for (const item of children) {
-        if (item instanceof JSXElement) {
-            atoms.push(createChainByJSXElement(context, item, parent));
-            continue;
-        }
-        if (item instanceof JSXComponent) {
-            const childAtom = createChainByComponentFactory(context, item, parent);
-            atoms.push(childAtom);
-            continue;
-        }
-        if (typeof item === 'string' && item.length) {
-            atoms.push(createChainByJSXText(new JSXText(item), parent));
-            continue;
-        }
-        if (Array.isArray(item)) {
-            createChainByChildren(context, item, parent, atoms);
-            continue;
-        }
         if (item !== null && typeof item !== 'undefined') {
+            if (item instanceof JSXElement) {
+                atoms.push(createChainByJSXElement(component, item, parent));
+                continue;
+            }
+            if (item instanceof JSXComponent) {
+                const childAtom = createChainByComponentFactory(item, parent);
+                atoms.push(childAtom);
+                continue;
+            }
+            if (typeof item === 'string' && item.length) {
+                atoms.push(createChainByJSXText(new JSXText(item), parent));
+                continue;
+            }
+            if (Array.isArray(item)) {
+                createChainByChildren(component, item, parent, atoms);
+                continue;
+            }
             atoms.push(createChainByJSXText(new JSXText(String(item)), parent));
         }
     }
@@ -1546,7 +1586,8 @@ function createChainByChildren(context, children, parent, atoms) {
 }
 function linkTemplate(template, component, parent) {
     const children = Array.isArray(template) ? template : [template];
-    link(parent, createChainByChildren(component, children, parent, []));
+    const newChildren = createChainByChildren(component, children, parent, []);
+    link(parent, newChildren);
 }
 function link(parent, children) {
     for (let i = 1; i < children.length; i++) {
@@ -1726,6 +1767,24 @@ function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn) {
     nativeRenderer.listen(nativeNode, type, delegate);
 }
 
+/**
+ * Viewfly 根组件，用于实现组件状态更新事件通知
+ */
+class RootComponent extends Component {
+    constructor(parentInjector, factory) {
+        super(parentInjector, factory, {});
+        this.onChange = null;
+    }
+    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);
+    }
+}
+
 const viewflyErrorFn = makeError('Viewfly');
 function viewfly({ context, nativeRenderer, autoUpdate, root }) {
     const appProviders = [];