@viewfly/core 0.0.25 → 0.0.27

package/bundles/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-require('reflect-metadata');
-
 class ForwardRef {
     constructor(forwardRefFn) {
         this.forwardRefFn = forwardRefFn;
@@ -662,6 +660,7 @@ class Component extends ReflectiveInjector {
         this.mountCallbacks = [];
         this.propsChangedCallbacks = [];
         this.updatedCallbacks = [];
+        this.changedSubComponents = new Set();
         this._dirty = true;
         this._changed = true;
         this.updatedDestroyCallbacks = [];
@@ -757,14 +756,18 @@ class Component extends ReflectiveInjector {
         this._dirty = true;
         this.markAsChanged();
     }
-    markAsChanged() {
+    markAsChanged(changedComponent) {
+        if (changedComponent) {
+            this.changedSubComponents.add(changedComponent);
+        }
         if (this._changed) {
             return;
         }
         this._changed = true;
-        this.parentComponent.markAsChanged();
+        this.parentComponent.markAsChanged(this);
     }
     rendered() {
+        this.changedSubComponents.clear();
         const is = this.isFirstRending;
         this.isFirstRending = false;
         this._dirty = this._changed = false;
@@ -1110,9 +1113,9 @@ function provide(provider) {
 /**
  * 通过组件上下文获取 IoC 容器内数据的勾子方法
  */
-function inject(token, notFoundValue, flags) {
+function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags = exports.InjectFlags.SkipSelf) {
     const component = getSetupContext();
-    return component.get(token, notFoundValue, flags || exports.InjectFlags.SkipSelf);
+    return component.get(token, notFoundValue, flags);
 }
 
 function Fragment(props) {
@@ -1122,7 +1125,7 @@ function Fragment(props) {
 }
 function jsx(setup, props, key) {
     if (typeof setup === 'string') {
-        return new JSXElement(setup, props, key);
+        return JSXElement.create(setup, props, key);
     }
     return new JSXComponent(props, function (context, props) {
         return new Component(context, setup, props, key);
@@ -1139,6 +1142,9 @@ class JSXText {
     }
 }
 class JSXElement {
+    static create(name, props, key) {
+        return new JSXElement(name, props, key);
+    }
     constructor(type, props, key) {
         this.type = type;
         this.props = props;
@@ -1161,13 +1167,16 @@ function withMemo(shouldUpdate, render) {
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 class RootComponent extends Component {
-    constructor(factory, parentInjector) {
+    constructor(parentInjector, factory) {
         super(parentInjector, factory, {});
         this.onChange = null;
     }
-    markAsChanged() {
+    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);
     }
 }
@@ -1175,54 +1184,11 @@ class RootComponent extends Component {
 class NativeRenderer {
 }
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-function __decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
-function __metadata(metadataKey, metadataValue) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-class RootComponentRef {
-}
-class HostRef {
-}
-exports.Renderer = class Renderer {
-    constructor(nativeRenderer, rootComponentRef, hostRef) {
-        this.nativeRenderer = nativeRenderer;
-        this.rootComponentRef = rootComponentRef;
-        this.hostRef = hostRef;
-        this.isInit = true;
-    }
-    render() {
-        const component = this.rootComponentRef.component;
-        const host = this.hostRef.host;
-        if (this.isInit) {
+function createRenderer(component, nativeRenderer) {
+    let isInit = true;
+    return function render(host) {
+        if (isInit) {
+            isInit = false;
             const atom = {
                 jsxNode: component,
                 parent: null,
@@ -1230,693 +1196,609 @@ exports.Renderer = class Renderer {
                 child: null,
                 nativeNode: null
             };
-            this.buildView(atom, {
+            buildView(nativeRenderer, atom, {
                 isParent: true,
                 host
             });
         }
         else {
-            this.reconcile(component, {
-                host,
-                isParent: true
-            });
+            updateView(nativeRenderer, component);
         }
-        this.isInit = false;
-    }
-    reconcile(component, context) {
-        if (component.dirty) {
-            this.applyChanges(component, context);
-            component.rendered();
+    };
+}
+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;
         }
-        else if (component.changed) {
-            const atom = component.$$view.atom.child;
-            this.reconcileElement(atom, context);
-            component.rendered();
+        atom.jsxNode.rendered();
+    }
+    else {
+        let nativeNode;
+        let applyRefs = null;
+        if (atom.jsxNode instanceof JSXElement) {
+            const { nativeNode: n, applyRefs: a } = createElement(nativeRenderer, atom.jsxNode);
+            nativeNode = n;
+            applyRefs = a;
         }
         else {
-            const prevSibling = this.getPrevSibling(component);
-            if (prevSibling) {
-                context.isParent = false;
-                context.host = prevSibling;
-            }
+            nativeNode = createTextNode(nativeRenderer, atom.jsxNode);
         }
-    }
-    getPrevSibling(component) {
-        let atom = component.$$view.atom.child;
-        const childAtoms = [];
-        while (atom) {
-            childAtoms.push(atom);
-            atom = atom.sibling;
+        atom.nativeNode = nativeNode;
+        if (context.isParent) {
+            nativeRenderer.prependChild(context.host, nativeNode);
         }
-        const components = [];
-        while (childAtoms.length) {
-            const last = childAtoms.pop();
-            if (last.jsxNode instanceof Component) {
-                components.push(last.jsxNode);
-                continue;
-            }
-            return last.nativeNode;
+        else {
+            nativeRenderer.insertAfter(nativeNode, context.host);
         }
-        for (const component of components) {
-            const nativeNode = this.getPrevSibling(component);
-            if (nativeNode) {
-                return nativeNode;
+        if (atom.jsxNode instanceof JSXElement) {
+            const childContext = {
+                isParent: true,
+                host: nativeNode
+            };
+            let child = atom.child;
+            while (child) {
+                buildView(nativeRenderer, child, childContext);
+                child = child.sibling;
             }
         }
-        return null;
-    }
-    reconcileElement(atom, context) {
-        while (atom) {
-            if (atom.jsxNode instanceof Component) {
-                this.reconcile(atom.jsxNode, context);
-                atom = atom.sibling;
-                continue;
-            }
-            if (atom.jsxNode instanceof JSXElement) {
-                this.reconcileElement(atom.child, {
-                    host: atom.nativeNode,
-                    isParent: true
-                });
-                context.host = atom.nativeNode;
-                context.isParent = false;
-            }
-            atom = atom.sibling;
+        context.host = nativeNode;
+        context.isParent = false;
+        if (applyRefs) {
+            applyRefs();
         }
     }
-    applyChanges(component, context) {
-        const { atom, render } = component.$$view;
-        const diffAtom = atom.child;
-        const template = render(component.props, component.props);
-        if (template) {
-            this.linkTemplate(template, component, atom);
-        }
-        else {
-            atom.child = null;
-        }
-        this.diff(atom.child, diffAtom, context, 0, 0);
+}
+function updateView(nativeRenderer, component) {
+    if (component.dirty) {
+        applyChanges(nativeRenderer, component);
+        component.rendered();
+    }
+    else if (component.changed) {
+        component.changedSubComponents.forEach(child => {
+            updateView(nativeRenderer, child);
+        });
+        component.rendered();
     }
-    diff(newAtom, oldAtom, context, expectIndex, index) {
-        const oldChildren = [];
-        while (oldAtom) {
-            oldChildren.push({
-                index,
-                atom: oldAtom
-            });
-            oldAtom = oldAtom.sibling;
-            index++;
-        }
-        const commits = [];
-        const changeCommits = {
-            updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
-                commits.push((offset) => {
-                    const { render, template } = reusedAtom.jsxNode.$$view;
-                    const newProps = newAtom.jsxNode.props;
-                    const oldProps = reusedAtom.jsxNode.props;
-                    newAtom.jsxNode = reusedAtom.jsxNode;
-                    const newTemplate = render(newProps, oldProps);
-                    newAtom.jsxNode.$$view = {
-                        render,
-                        template: newTemplate,
-                        atom: newAtom
-                    };
-                    if (newTemplate === template) {
-                        this.reuseComponentView(newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
-                        return;
-                    }
-                    if (newTemplate) {
-                        this.linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
-                    }
-                    if (newAtom.child) {
-                        this.diff(newAtom.child, reusedAtom.child, context, expectIndex, diffIndex);
-                    }
-                    else if (reusedAtom.child) {
-                        let atom = reusedAtom.child;
-                        while (atom) {
-                            this.cleanView(atom, false);
-                            atom = atom.sibling;
-                        }
-                    }
-                    newAtom.jsxNode.rendered();
-                });
-            },
-            updateElement: (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 if (oldAtom.child) {
-                        let atom = oldAtom.child;
-                        while (atom) {
-                            this.cleanView(atom, false);
-                            atom = atom.sibling;
-                        }
-                    }
-                    applyRefs();
-                });
-            },
-            updateText: (newAtom, oldAtom) => {
-                commits.push(() => {
-                    const nativeNode = oldAtom.nativeNode;
-                    if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
-                        this.nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode.text);
-                    }
-                    newAtom.nativeNode = nativeNode;
-                    context.host = nativeNode;
-                    context.isParent = false;
-                });
-            },
-            create: (start) => {
-                commits.push(() => {
-                    this.buildView(start, context);
-                });
-            }
-        };
-        while (newAtom) {
-            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;
-            }
-            commit(offset);
-        }
+}
+function applyChanges(nativeRenderer, component) {
+    const { atom, render, host, isParent } = component.$$view;
+    const diffAtom = atom.child;
+    const template = render(component.props, component.props);
+    if (template) {
+        linkTemplate(template, component, atom);
     }
-    reuseComponentView(newAtom, reusedAtom, context, moveView) {
-        let child = reusedAtom.child;
-        newAtom.child = child;
-        const children = [];
-        while (child) {
-            children.push(child);
-            child.parent = newAtom;
-            child = child.sibling;
-        }
-        const updateContext = (atom) => {
-            if (atom.jsxNode instanceof Component) {
-                let child = atom.child;
-                while (child) {
-                    updateContext(child);
-                    child = child.sibling;
+    else {
+        atom.child = null;
+    }
+    const context = {
+        host,
+        isParent
+    };
+    diff(nativeRenderer, 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({
+            index,
+            atom: oldAtom
+        });
+        oldAtom = oldAtom.sibling;
+        index++;
+    }
+    const commits = [];
+    const changeCommits = {
+        updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
+            commits.push((offset) => {
+                const { render, template } = reusedAtom.jsxNode.$$view;
+                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) {
+                    reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
+                    return;
                 }
-            }
-            else {
-                if (moveView) {
+                if (newTemplate) {
+                    linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
+                }
+                if (newAtom.child) {
+                    diff(nativeRenderer, newAtom.child, reusedAtom.child, context, expectIndex, diffIndex);
+                }
+                else if (reusedAtom.child) {
+                    let atom = reusedAtom.child;
+                    while (atom) {
+                        cleanView(nativeRenderer, atom, false);
+                        atom = atom.sibling;
+                    }
+                }
+                newAtom.jsxNode.rendered();
+            });
+        },
+        updateElement: (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(context.host, atom.nativeNode);
+                        nativeRenderer.prependChild(host, newAtom.nativeNode);
                     }
                     else {
-                        this.nativeRenderer.insertAfter(atom.nativeNode, context.host);
+                        nativeRenderer.insertAfter(newAtom.nativeNode, host);
                     }
                 }
+                context.host = newAtom.nativeNode;
                 context.isParent = false;
-                context.host = atom.nativeNode;
-            }
-        };
-        for (const atom of children) {
-            updateContext(atom);
-        }
-    }
-    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;
+                const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode);
+                if (newAtom.child) {
+                    diff(nativeRenderer, newAtom.child, oldAtom.child, {
+                        host: newAtom.nativeNode,
+                        isParent: true
+                    }, 0, 0);
                 }
-            }
-            if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
-                if (newAtom.jsxNode instanceof JSXElement) {
-                    changeCommits.updateElement(newAtom, diffAtom, expectIndex, diffIndex);
-                }
-                else if (newAtom.jsxNode instanceof JSXText) {
-                    changeCommits.updateText(newAtom, diffAtom);
+                else if (oldAtom.child) {
+                    let atom = oldAtom.child;
+                    while (atom) {
+                        cleanView(nativeRenderer, atom, false);
+                        atom = atom.sibling;
+                    }
                 }
-                else {
-                    changeCommits.updateComponent(newAtom, diffAtom, expectIndex, diffIndex);
+                applyRefs();
+            });
+        },
+        updateText: (newAtom, oldAtom) => {
+            commits.push(() => {
+                const nativeNode = oldAtom.nativeNode;
+                if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
+                    nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode.text);
                 }
-                oldChildren.splice(i, 1);
-                return;
-            }
+                newAtom.nativeNode = nativeNode;
+                context.host = nativeNode;
+                context.isParent = false;
+            });
+        },
+        create: (start) => {
+            commits.push(() => {
+                buildView(nativeRenderer, start, context);
+            });
         }
-        changeCommits.create(newAtom);
-    }
-    cleanView(atom, isClean) {
-        if (atom.nativeNode) {
-            if (!isClean) {
-                this.nativeRenderer.remove(atom.nativeNode);
-                isClean = true;
-            }
-            if (atom.jsxNode instanceof JSXElement) {
-                const ref = atom.jsxNode.props[refKey];
-                this.applyRefs(ref, atom.nativeNode, false);
+    };
+    while (newAtom) {
+        createChanges(newAtom, expectIndex, oldChildren, changeCommits);
+        newAtom = newAtom.sibling;
+        expectIndex++;
+    }
+    for (const item of oldChildren) {
+        cleanView(nativeRenderer, 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;
         }
-        let child = atom.child;
-        while (child) {
-            this.cleanView(child, isClean);
-            child = child.sibling;
-        }
-        if (atom.jsxNode instanceof Component) {
-            atom.jsxNode.destroy();
-        }
+        commit(offset);
     }
-    buildView(atom, context) {
+}
+function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
+    let child = reusedAtom.child;
+    newAtom.child = child;
+    const children = [];
+    while (child) {
+        children.push(child);
+        child.parent = newAtom;
+        child = child.sibling;
+    }
+    const updateContext = (atom) => {
         if (atom.jsxNode instanceof Component) {
-            this.componentRender(atom.jsxNode, atom);
             let child = atom.child;
             while (child) {
-                this.buildView(child, context);
+                updateContext(child);
                 child = child.sibling;
             }
-            atom.jsxNode.rendered();
         }
         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);
+            if (moveView) {
+                if (context.isParent) {
+                    nativeRenderer.prependChild(context.host, atom.nativeNode);
+                }
+                else {
+                    nativeRenderer.insertAfter(atom.nativeNode, context.host);
+                }
             }
-            atom.nativeNode = nativeNode;
-            if (context.isParent) {
-                this.nativeRenderer.prependChild(context.host, nativeNode);
+            context.isParent = false;
+            context.host = atom.nativeNode;
+        }
+    };
+    for (const atom of children) {
+        updateContext(atom);
+    }
+}
+function 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;
             }
-            else {
-                this.nativeRenderer.insertAfter(nativeNode, context.host);
+        }
+        if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
+            if (newAtom.jsxNode instanceof JSXElement) {
+                changeCommits.updateElement(newAtom, diffAtom, expectIndex, diffIndex);
             }
-            if (atom.jsxNode instanceof JSXElement) {
-                const childContext = {
-                    isParent: true,
-                    host: nativeNode
-                };
-                let child = atom.child;
-                while (child) {
-                    this.buildView(child, childContext);
-                    child = child.sibling;
-                }
+            else if (newAtom.jsxNode instanceof JSXText) {
+                changeCommits.updateText(newAtom, diffAtom);
             }
-            context.host = nativeNode;
-            context.isParent = false;
-            if (applyRefs) {
-                applyRefs();
+            else {
+                changeCommits.updateComponent(newAtom, diffAtom, expectIndex, diffIndex);
             }
+            oldChildren.splice(i, 1);
+            return;
         }
     }
-    componentRender(component, from) {
-        const { template, render } = component.setup();
-        if (template) {
-            this.linkTemplate(template, component, from);
+    changeCommits.create(newAtom);
+}
+function cleanView(nativeRenderer, atom, isClean) {
+    if (atom.nativeNode) {
+        if (!isClean) {
+            nativeRenderer.remove(atom.nativeNode);
+            isClean = true;
+        }
+        if (atom.jsxNode instanceof JSXElement) {
+            const ref = atom.jsxNode.props[refKey];
+            applyRefs(ref, atom.nativeNode, false);
         }
-        component.$$view = {
-            render,
-            template,
-            atom: from
-        };
-        return from;
     }
-    createChainByComponentFactory(context, factory, parent) {
-        const component = factory.createInstance(context);
-        return {
-            jsxNode: component,
-            parent,
-            sibling: null,
-            child: null,
-            nativeNode: null
-        };
+    let child = atom.child;
+    while (child) {
+        cleanView(nativeRenderer, child, isClean);
+        child = child.sibling;
     }
-    createChainByJSXElement(context, element, parent) {
-        const atom = {
-            jsxNode: element,
-            parent,
-            sibling: null,
-            child: null,
-            nativeNode: null
-        };
-        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;
+    if (atom.jsxNode instanceof Component) {
+        atom.jsxNode.destroy();
     }
-    createChainByJSXText(node, parent) {
-        return {
-            jsxNode: node,
-            parent,
-            sibling: null,
-            child: null,
-            nativeNode: null
-        };
+}
+function componentRender(component, from, context) {
+    const { template, render } = component.setup();
+    if (template) {
+        linkTemplate(template, component, from);
+    }
+    component.$$view = Object.assign({ render,
+        template, atom: from }, context);
+    return from;
+}
+function createChainByComponentFactory(context, factory, parent) {
+    const component = factory.createInstance(context);
+    return {
+        jsxNode: component,
+        parent,
+        sibling: null,
+        child: null,
+        nativeNode: null
+    };
+}
+function createChainByJSXElement(context, element, parent) {
+    const atom = {
+        jsxNode: element,
+        parent,
+        sibling: null,
+        child: null,
+        nativeNode: null
+    };
+    if (Reflect.has(element.props, 'children')) {
+        const jsxChildren = element.props.children;
+        const children = createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
+        link(atom, children);
     }
-    createChainByChildren(context, children, parent, atoms) {
-        for (const item of children) {
-            if (item instanceof JSXElement) {
-                atoms.push(this.createChainByJSXElement(context, item, parent));
-                continue;
-            }
-            if (item instanceof JSXComponent) {
-                const childAtom = this.createChainByComponentFactory(context, item, parent);
-                atoms.push(childAtom);
-                continue;
-            }
-            if (typeof item === 'string' && item.length) {
-                atoms.push(this.createChainByJSXText(new JSXText(item), parent));
-                continue;
-            }
-            if (Array.isArray(item)) {
-                this.createChainByChildren(context, item, parent, atoms);
-                continue;
-            }
-            if (item !== null && typeof item !== 'undefined') {
-                atoms.push(this.createChainByJSXText(new JSXText(String(item)), parent));
-            }
+    return atom;
+}
+function createChainByJSXText(node, parent) {
+    return {
+        jsxNode: node,
+        parent,
+        sibling: null,
+        child: null,
+        nativeNode: null
+    };
+}
+function createChainByChildren(context, 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') {
+            atoms.push(createChainByJSXText(new JSXText(String(item)), parent));
         }
-        return atoms;
     }
-    linkTemplate(template, component, parent) {
-        const children = Array.isArray(template) ? template : [template];
-        this.link(parent, this.createChainByChildren(component, children, parent, []));
+    return atoms;
+}
+function linkTemplate(template, component, parent) {
+    const children = Array.isArray(template) ? template : [template];
+    link(parent, createChainByChildren(component, children, parent, []));
+}
+function link(parent, children) {
+    for (let i = 1; i < children.length; i++) {
+        const prev = children[i - 1];
+        prev.sibling = children[i];
     }
-    link(parent, children) {
-        for (let i = 1; i < children.length; i++) {
-            const prev = children[i - 1];
-            prev.sibling = children[i];
+    parent.child = children[0] || null;
+}
+function createElement(nativeRenderer, vNode) {
+    const nativeNode = nativeRenderer.createElement(vNode.type);
+    const props = vNode.props;
+    let bindingRefs;
+    const keys = Object.keys(props);
+    for (const key of keys) {
+        if (key === 'children') {
+            continue;
+        }
+        if (key === 'class') {
+            const className = classToString(props[key]);
+            if (className) {
+                nativeRenderer.setClass(nativeNode, className);
+            }
+            continue;
+        }
+        if (key === 'style') {
+            const style = styleToObject(props.style);
+            Object.keys(style).forEach(key => {
+                nativeRenderer.setStyle(nativeNode, key, style[key]);
+            });
+            continue;
         }
-        parent.child = children[0] || null;
-    }
-    createElement(vNode) {
-        const nativeNode = this.nativeRenderer.createElement(vNode.type);
-        const props = vNode.props;
-        let bindingRefs;
-        const keys = Object.keys(props);
-        for (const key of keys) {
-            if (key === 'children') {
-                continue;
-            }
-            if (key === 'class') {
-                const className = classToString(props[key]);
-                if (className) {
-                    this.nativeRenderer.setClass(nativeNode, className);
-                }
-                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.bindEvent(vNode, key, nativeNode, listener);
-                }
-                continue;
+        if (/^on[A-Z]/.test(key)) {
+            const listener = props[key];
+            if (typeof listener === 'function') {
+                bindEvent(nativeRenderer, vNode, key, nativeNode, listener);
             }
-            if (key === refKey) {
-                bindingRefs = props[key];
-                continue;
-            }
-            this.nativeRenderer.setProperty(nativeNode, key, props[key]);
+            continue;
         }
-        return {
-            nativeNode,
-            applyRefs: () => {
-                this.applyRefs(bindingRefs, nativeNode, true);
-            }
-        };
-    }
-    createTextNode(child) {
-        return this.nativeRenderer.createTextNode(child.text);
+        if (key === refKey) {
+            bindingRefs = props[key];
+            continue;
+        }
+        nativeRenderer.setProperty(nativeNode, key, props[key]);
     }
-    updateNativeNodeProperties(newVNode, oldVNode, nativeNode) {
-        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') {
-                    const type = key.replace(/^on/, '').toLowerCase();
-                    const oldOn = oldVNode.on;
-                    this.nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate);
-                    Reflect.deleteProperty(oldOn, type);
-                }
-                continue;
-            }
-            if (key === refKey) {
-                unBindRefs = value;
-                continue;
-            }
-            this.nativeRenderer.removeProperty(nativeNode, key);
+    return {
+        nativeNode,
+        applyRefs: () => {
+            applyRefs(bindingRefs, nativeNode, true);
         }
-        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();
-                newVNode.on = oldVNode.on;
-                newVNode.on[listenType].listenFn = newValue;
-                continue;
-            }
-            if (key === refKey) {
-                unBindRefs = oldValue;
-                bindRefs = newValue;
-                continue;
-            }
-            this.nativeRenderer.setProperty(nativeNode, key, newValue);
+    };
+}
+function createTextNode(nativeRenderer, child) {
+    return nativeRenderer.createTextNode(child.text);
+}
+function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode) {
+    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') {
+            nativeRenderer.setClass(nativeNode, '');
+            continue;
+        }
+        if (key === 'style') {
+            Object.keys(styleToObject(value)).forEach(styleName => {
+                nativeRenderer.removeStyle(nativeNode, styleName);
+            });
+            continue;
         }
-        for (const [key, value] of changes.add) {
-            if (key === 'children') {
-                continue;
-            }
-            if (key === 'class') {
-                this.nativeRenderer.setClass(nativeNode, classToString(value));
-                continue;
+        if (/^on[A-Z]/.test(key)) {
+            if (typeof value === 'function') {
+                const type = key.replace(/^on/, '').toLowerCase();
+                const oldOn = oldVNode.on;
+                nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate);
+                Reflect.deleteProperty(oldOn, type);
             }
-            if (key === 'style') {
-                const styleObj = styleToObject(value);
-                Object.keys(styleObj).forEach(styleName => {
-                    this.nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName]);
-                });
-                continue;
+            continue;
+        }
+        if (key === refKey) {
+            unBindRefs = value;
+            continue;
+        }
+        nativeRenderer.removeProperty(nativeNode, key);
+    }
+    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) {
+                nativeRenderer.setClass(nativeNode, newClassName);
             }
-            if (/^on[A-Z]/.test(key)) {
-                if (typeof value === 'function') {
-                    this.bindEvent(newVNode, key, nativeNode, value);
-                }
-                continue;
+            continue;
+        }
+        if (key === 'style') {
+            const styleChanges = getObjectChanges(styleToObject(newValue) || {}, styleToObject(oldValue) || {});
+            for (const [styleName] of styleChanges.remove) {
+                nativeRenderer.removeStyle(nativeNode, styleName);
             }
-            if (key === refKey) {
-                bindRefs = value;
-                continue;
+            for (const [styleName, styleValue] of [...styleChanges.add, ...styleChanges.replace]) {
+                nativeRenderer.setStyle(nativeNode, styleName, styleValue);
             }
-            this.nativeRenderer.setProperty(nativeNode, key, value);
+            continue;
         }
-        return () => {
-            this.applyRefs(unBindRefs, nativeNode, false);
-            this.applyRefs(bindRefs, nativeNode, true);
-        };
+        if (/^on[A-Z]/.test(key)) {
+            const listenType = key.replace(/^on/, '').toLowerCase();
+            newVNode.on = oldVNode.on;
+            newVNode.on[listenType].listenFn = newValue;
+            continue;
+        }
+        if (key === refKey) {
+            unBindRefs = oldValue;
+            bindRefs = newValue;
+            continue;
+        }
+        nativeRenderer.setProperty(nativeNode, key, newValue);
     }
-    applyRefs(refs, nativeNode, binding) {
-        const refList = Array.isArray(refs) ? refs : [refs];
-        for (const item of refList) {
-            if (item instanceof Ref) {
-                binding ? item.bind(nativeNode) : item.unBind(nativeNode);
+    for (const [key, value] of changes.add) {
+        if (key === 'children') {
+            continue;
+        }
+        if (key === 'class') {
+            nativeRenderer.setClass(nativeNode, classToString(value));
+            continue;
+        }
+        if (key === 'style') {
+            const styleObj = styleToObject(value);
+            Object.keys(styleObj).forEach(styleName => {
+                nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName]);
+            });
+            continue;
+        }
+        if (/^on[A-Z]/.test(key)) {
+            if (typeof value === 'function') {
+                bindEvent(nativeRenderer, newVNode, key, nativeNode, value);
             }
+            continue;
+        }
+        if (key === refKey) {
+            bindRefs = value;
+            continue;
         }
+        nativeRenderer.setProperty(nativeNode, key, value);
     }
-    bindEvent(vNode, key, nativeNode, listenFn) {
-        let on = vNode.on;
-        if (!on) {
-            vNode.on = on = {};
+    return () => {
+        applyRefs(unBindRefs, nativeNode, false);
+        applyRefs(bindRefs, nativeNode, true);
+    };
+}
+function applyRefs(refs, nativeNode, binding) {
+    const refList = Array.isArray(refs) ? refs : [refs];
+    for (const item of refList) {
+        if (item instanceof Ref) {
+            binding ? item.bind(nativeNode) : item.unBind(nativeNode);
         }
-        const type = key.replace(/^on/, '').toLowerCase();
-        const delegate = function (...args) {
-            return delegateObj.listenFn.apply(this, args);
-        };
-        const delegateObj = {
-            delegate,
-            listenFn
-        };
-        on[type] = delegateObj;
-        this.nativeRenderer.listen(nativeNode, type, delegate);
     }
-};
-exports.Renderer = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [NativeRenderer,
-        RootComponentRef,
-        HostRef])
-], exports.Renderer);
+}
+function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn) {
+    let on = vNode.on;
+    if (!on) {
+        vNode.on = on = {};
+    }
+    const type = key.replace(/^on/, '').toLowerCase();
+    const delegate = function (...args) {
+        return delegateObj.listenFn.apply(this, args);
+    };
+    const delegateObj = {
+        delegate,
+        listenFn
+    };
+    on[type] = delegateObj;
+    nativeRenderer.listen(nativeNode, type, delegate);
+}
 
 const viewflyErrorFn = makeError('Viewfly');
-/**
- * Viewfly 核心类，用于启动一个 Viewfly 应用
- */
-class Viewfly extends ReflectiveInjector {
-    constructor(config) {
-        super(config.context || new NullInjector(), [
-            exports.Renderer,
-            {
-                provide: RootComponentRef,
-                useFactory: () => {
-                    return {
-                        component: this.rootComponent
-                    };
-                }
-            },
-            {
-                provide: NativeRenderer,
-                useFactory() {
-                    throw viewflyErrorFn('You must implement the `NativeRenderer` interface to start Viewfly!');
-                }
-            },
-            {
-                provide: HostRef,
-                useFactory() {
-                    throw viewflyErrorFn('Viewfly has not mounted!');
-                }
-            }
-        ]);
-        this.config = config;
-        this.destroyed = false;
-        this.task = null;
-        this.rootComponent = this.createRootComponent(config.root);
-    }
-    provide(providers) {
-        providers = Array.isArray(providers) ? providers : [providers];
-        this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
-        return this;
-    }
-    /**
-     * 启动 Viewfly
-     * @param host 应用根节点
-     */
-    mount(host) {
-        this.provide({
-            provide: HostRef,
-            useValue: {
-                host
-            }
-        });
-        const renderer = this.get(exports.Renderer);
-        renderer.render();
-        if (this.config.autoUpdate === false) {
-            return this;
-        }
-        const refresh = () => {
-            if (this.destroyed) {
-                return;
-            }
-            renderer.render();
-        };
-        this.rootComponent.onChange = () => {
-            this.microTask(refresh);
+function viewfly({ context, nativeRenderer, autoUpdate, root }) {
+    const appProviders = [];
+    let destroyed = false;
+    const rootComponent = new RootComponent(context || null, () => {
+        provide(appProviders);
+        return () => {
+            return destroyed ? null : root;
         };
-        return this;
-    }
-    render() {
-        const renderer = this.get(exports.Renderer);
-        renderer.render();
-    }
-    /**
-     * 销毁 Viewfly 实例
-     */
-    destroy() {
-        this.destroyed = true;
-        this.rootComponent.markAsDirtied();
-        this.render();
-    }
-    createRootComponent(rootNode) {
-        return new RootComponent(() => {
-            return () => {
-                return this.destroyed ? null : rootNode;
-            };
-        }, this);
-    }
-    microTask(callback) {
-        if (!this.task) {
-            this.task = Promise.resolve().then(() => {
-                this.task = null;
+    });
+    const render = createRenderer(rootComponent, nativeRenderer);
+    let isStarted = false;
+    let task = null;
+    function microTask(callback) {
+        if (!task) {
+            task = Promise.resolve().then(() => {
+                task = null;
                 callback();
             });
         }
     }
+    let appHost = null;
+    const app = {
+        provide(providers) {
+            if (Array.isArray(providers)) {
+                appProviders.unshift(...providers);
+            }
+            else {
+                appProviders.unshift(providers);
+            }
+            return app;
+        },
+        mount(host) {
+            if (isStarted) {
+                throw viewflyErrorFn('application has already started.');
+            }
+            isStarted = true;
+            appHost = host;
+            render(host);
+            if (!autoUpdate) {
+                return app;
+            }
+            const refresh = () => {
+                if (destroyed) {
+                    return;
+                }
+                render(host);
+            };
+            rootComponent.onChange = function () {
+                microTask(refresh);
+            };
+            return app;
+        },
+        render() {
+            if (appHost) {
+                render(appHost);
+            }
+            return app;
+        },
+        destroy() {
+            destroyed = true;
+            rootComponent.markAsDirtied();
+            app.render();
+        }
+    };
+    return app;
 }
 
 exports.Component = Component;
 exports.ForwardRef = ForwardRef;
 exports.Fragment = Fragment;
-exports.HostRef = HostRef;
 exports.Inject = Inject;
 exports.Injectable = Injectable;
 exports.InjectionToken = InjectionToken;
@@ -1931,13 +1813,12 @@ exports.Prop = Prop;
 exports.Ref = Ref;
 exports.ReflectiveInjector = ReflectiveInjector;
 exports.RootComponent = RootComponent;
-exports.RootComponentRef = RootComponentRef;
 exports.Scope = Scope;
 exports.Self = Self;
 exports.SkipSelf = SkipSelf;
 exports.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
 exports.Type = Type;
-exports.Viewfly = Viewfly;
+exports.createRenderer = createRenderer;
 exports.forwardRef = forwardRef;
 exports.inject = inject;
 exports.jsx = jsx;
@@ -1953,4 +1834,5 @@ exports.useDerived = useDerived;
 exports.useEffect = useEffect;
 exports.useRef = useRef;
 exports.useSignal = useSignal;
+exports.viewfly = viewfly;
 exports.withMemo = withMemo;