@viewfly/core 0.5.4 → 0.6.0

package/bundles/index.esm.js

@@ -656,25 +656,16 @@ class Component extends ReflectiveInjector {
         return this._changed;
     }
     constructor(parentComponent, type, props, key) {
-        super(parentComponent, [{
-                provide: Injector,
-                useFactory: () => this
-            }], type.scope);
+        super(parentComponent, [], type.scope);
         this.parentComponent = parentComponent;
         this.type = type;
         this.props = props;
         this.key = key;
-        this.$$typeOf = this.type;
         this.changedSubComponents = new Set();
-        this.unmountedCallbacks = [];
-        this.mountCallbacks = [];
-        this.propsChangedCallbacks = [];
-        this.updatedCallbacks = [];
-        this.updatedDestroyCallbacks = [];
-        this.propsChangedDestroyCallbacks = [];
         this._dirty = true;
         this._changed = true;
         this.isFirstRendering = true;
+        this.refs = null;
     }
     markAsDirtied() {
         this._dirty = true;
@@ -712,17 +703,20 @@ class Component extends ReflectiveInjector {
         const render = this.type(proxiesProps);
         const isRenderFn = typeof render === 'function';
         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);
-            }
-        });
-        this.unmountedCallbacks.push(() => {
-            for (const ref of this.refs) {
-                ref.unBind(this.instance);
-            }
-        });
+        const refs = toRefs(this.props.ref);
+        if (refs.length) {
+            this.refs = refs;
+            onMounted(() => {
+                for (const ref of refs) {
+                    ref.bind(this.instance);
+                }
+                return () => {
+                    for (const ref of refs) {
+                        ref.unBind(this.instance);
+                    }
+                };
+            });
+        }
         isSetup = false;
         componentSetupStack.pop();
         signalDepsStack.push([]);
@@ -747,17 +741,19 @@ class Component extends ReflectiveInjector {
             return this.template;
         }
         const newRefs = toRefs(newProps.ref);
-        for (const oldRef of this.refs) {
-            if (!newRefs.includes(oldRef)) {
-                oldRef.unBind(this.instance);
+        if (this.refs) {
+            for (const oldRef of this.refs) {
+                if (!newRefs.includes(oldRef)) {
+                    oldRef.unBind(this.instance);
+                }
             }
         }
         for (const newRef of newRefs) {
-            if (!this.refs.includes(newRef)) {
-                newRef.bind(this.instance);
-            }
+            newRef.bind(this.instance);
+        }
+        if (newRefs.length) {
+            this.refs = newRefs;
         }
-        this.refs = newRefs;
         if (!forceUpdate && typeof this.instance.$useMemo === 'function') {
             if (this.instance.$useMemo(newProps, oldProps)) {
                 return this.template;
@@ -794,55 +790,73 @@ class Component extends ReflectiveInjector {
         }
     }
     destroy() {
+        var _a, _b, _c;
         this.unWatch();
-        this.updatedDestroyCallbacks.forEach(fn => {
+        (_a = this.updatedDestroyCallbacks) === null || _a === void 0 ? void 0 : _a.forEach(fn => {
             fn();
         });
-        this.updatedDestroyCallbacks = [];
-        this.propsChangedDestroyCallbacks.forEach(fn => {
+        (_b = this.propsChangedDestroyCallbacks) === null || _b === void 0 ? void 0 : _b.forEach(fn => {
             fn();
         });
-        this.propsChangedDestroyCallbacks = [];
-        for (const fn of this.unmountedCallbacks) {
+        (_c = this.unmountedCallbacks) === null || _c === void 0 ? void 0 : _c.forEach(fn => {
             fn();
-        }
-        this.mountCallbacks = [];
-        this.updatedCallbacks = [];
-        this.propsChangedCallbacks = [];
-        this.unmountedCallbacks = [];
+        });
+        this.propsChangedDestroyCallbacks =
+            this.updatedDestroyCallbacks =
+                this.mountCallbacks =
+                    this.updatedCallbacks =
+                        this.propsChangedCallbacks =
+                            this.unmountedCallbacks = null;
     }
     invokePropsChangedHooks(newProps) {
         const oldProps = this.props;
         this.props = newProps;
-        this.propsChangedDestroyCallbacks.forEach(fn => {
-            fn();
-        });
-        this.propsChangedDestroyCallbacks = [];
-        for (const fn of this.propsChangedCallbacks) {
-            const destroyFn = fn(newProps, oldProps);
-            if (typeof destroyFn === 'function') {
-                this.propsChangedDestroyCallbacks.push(destroyFn);
+        if (this.propsChangedCallbacks) {
+            if (this.propsChangedDestroyCallbacks) {
+                this.propsChangedDestroyCallbacks.forEach(fn => {
+                    fn();
+                });
+            }
+            const propsChangedDestroyCallbacks = [];
+            for (const fn of this.propsChangedCallbacks) {
+                const destroyFn = fn(newProps, oldProps);
+                if (typeof destroyFn === 'function') {
+                    propsChangedDestroyCallbacks.push(destroyFn);
+                }
             }
+            this.propsChangedDestroyCallbacks = propsChangedDestroyCallbacks.length ? propsChangedDestroyCallbacks : null;
         }
     }
     invokeMountHooks() {
-        for (const fn of this.mountCallbacks) {
-            const destroyFn = fn();
-            if (typeof destroyFn === 'function') {
-                this.unmountedCallbacks.push(destroyFn);
+        const unmountedCallbacks = [];
+        if (this.mountCallbacks) {
+            for (const fn of this.mountCallbacks) {
+                const destroyFn = fn();
+                if (typeof destroyFn === 'function') {
+                    unmountedCallbacks.push(destroyFn);
+                }
             }
         }
+        if (unmountedCallbacks.length) {
+            this.unmountedCallbacks = unmountedCallbacks;
+        }
+        this.mountCallbacks = null;
     }
     invokeUpdatedHooks() {
-        this.updatedDestroyCallbacks.forEach(fn => {
-            fn();
-        });
-        this.updatedDestroyCallbacks = [];
-        for (const fn of this.updatedCallbacks) {
-            const destroyFn = fn();
-            if (typeof destroyFn === 'function') {
-                this.updatedDestroyCallbacks.push(destroyFn);
+        if (this.updatedCallbacks) {
+            if (this.updatedDestroyCallbacks) {
+                this.updatedDestroyCallbacks.forEach(fn => {
+                    fn();
+                });
             }
+            const updatedDestroyCallbacks = [];
+            for (const fn of this.updatedCallbacks) {
+                const destroyFn = fn();
+                if (typeof destroyFn === 'function') {
+                    updatedDestroyCallbacks.push(destroyFn);
+                }
+            }
+            this.updatedDestroyCallbacks = updatedDestroyCallbacks.length ? updatedDestroyCallbacks : null;
         }
     }
 }
@@ -865,6 +879,9 @@ function toRefs(ref) {
  */
 function onMounted(callback) {
     const component = getSetupContext();
+    if (!component.mountCallbacks) {
+        component.mountCallbacks = [];
+    }
     component.mountCallbacks.push(callback);
 }
 /**
@@ -884,6 +901,9 @@ function onMounted(callback) {
  */
 function onUpdated(callback) {
     const component = getSetupContext();
+    if (!component.updatedCallbacks) {
+        component.updatedCallbacks = [];
+    }
     component.updatedCallbacks.push(callback);
     return () => {
         const index = component.updatedCallbacks.indexOf(callback);
@@ -913,6 +933,9 @@ function onUpdated(callback) {
  */
 function onPropsChanged(callback) {
     const component = getSetupContext();
+    if (!component.propsChangedCallbacks) {
+        component.propsChangedCallbacks = [];
+    }
     component.propsChangedCallbacks.push(callback);
     return () => {
         const index = component.propsChangedCallbacks.indexOf(callback);
@@ -927,6 +950,9 @@ function onPropsChanged(callback) {
  */
 function onUnmounted(callback) {
     const component = getSetupContext();
+    if (!component.unmountedCallbacks) {
+        component.unmountedCallbacks = [];
+    }
     component.unmountedCallbacks.push(callback);
 }
 class DynamicRef {
@@ -1121,6 +1147,9 @@ function createDerived(callback, isContinue) {
     const component = getSetupContext(false);
     const unListen = listen(signal, deps, callback, isContinue);
     if (component) {
+        if (!component.unmountedCallbacks) {
+            component.unmountedCallbacks = [];
+        }
         component.unmountedCallbacks.push(() => {
             unListen();
         });
@@ -1153,7 +1182,7 @@ function watch(deps, callback) {
             return;
         }
         isClean = true;
-        if (component) {
+        if (component === null || component === void 0 ? void 0 : component.unmountedCallbacks) {
             const index = component.unmountedCallbacks.indexOf(destroyFn);
             component.unmountedCallbacks.splice(index, 1);
         }
@@ -1162,6 +1191,9 @@ function watch(deps, callback) {
         }
     };
     if (component) {
+        if (!component.unmountedCallbacks) {
+            component.unmountedCallbacks = [];
+        }
         component.unmountedCallbacks.push(destroyFn);
     }
     return destroyFn;
@@ -1196,48 +1228,19 @@ function Fragment(props) {
         return props.children;
     };
 }
-function jsx(setup, props, key) {
-    if (typeof setup === 'string') {
-        return JSXElement.createInstance(setup, props, key);
-    }
-    return JSXComponent.createInstance(setup, props, function (context) {
-        return new Component(context, setup, props, key);
-    }, key);
+function jsx(type, props, key) {
+    return JSXNodeFactory.createNode(type, props, key);
 }
 const jsxs = jsx;
-const JSXTextTypeOf = Symbol('JSXText');
-class JSXText {
-    constructor(text) {
-        this.text = text;
-        this.$$typeOf = JSXTextTypeOf;
-    }
-}
-class JSXElement {
-    static createInstance(type, props, key) {
-        return new JSXElement(type, props, key);
-    }
-    constructor(type, props, key) {
-        this.type = type;
-        this.props = props;
-        this.key = key;
-        this.$$typeOf = this.type;
-    }
-}
-class JSXComponent {
-    static createInstance(type, props, factory, key) {
-        return new JSXComponent(type, props, factory, key);
-    }
-    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);
+const JSXNodeFactory = {
+    createNode(type, props, key) {
+        return {
+            type,
+            props,
+            key
+        };
     }
-}
+};
 
 function withMemo(canUseMemo, render) {
     return {
@@ -1246,14 +1249,15 @@ function withMemo(canUseMemo, render) {
     };
 }
 
+const listenerReg = /^on(?=[A-Z])/;
 function createRenderer(component, nativeRenderer) {
     let isInit = true;
     return function render(host) {
         if (isInit) {
             isInit = false;
             const atom = {
+                type: 'component',
                 jsxNode: component,
-                parent: null,
                 sibling: null,
                 child: null,
                 nativeNode: null,
@@ -1271,35 +1275,26 @@ function createRenderer(component, nativeRenderer) {
     };
 }
 function buildView(nativeRenderer, parentComponent, atom, context) {
-    if (atom.jsxNode instanceof JSXComponent) {
-        const component = atom.jsxNode.createInstance(parentComponent);
+    const { jsxNode, type } = atom;
+    if (type === 'component') {
+        const component = new Component(parentComponent, jsxNode.type, jsxNode.props, jsxNode.key);
         atom.jsxNode = component;
         componentRender(nativeRenderer, component, atom, context);
     }
     else {
         let nativeNode;
         let applyRefs = null;
-        if (atom.jsxNode instanceof JSXElement) {
-            const { nativeNode: n, applyRefs: a } = createElement(nativeRenderer, atom.jsxNode, atom.isSvg);
+        if (type === 'element') {
+            const { nativeNode: n, applyRefs: a } = createElement(nativeRenderer, jsxNode, atom.isSvg);
             nativeNode = n;
             applyRefs = a;
         }
         else {
-            nativeNode = createTextNode(nativeRenderer, atom.jsxNode, atom.isSvg);
+            nativeNode = createTextNode(nativeRenderer, jsxNode, atom.isSvg);
         }
         atom.nativeNode = nativeNode;
-        if (context.isParent) {
-            if (context.host === context.rootHost) {
-                nativeRenderer.appendChild(context.host, nativeNode, atom.isSvg);
-            }
-            else {
-                nativeRenderer.prependChild(context.host, nativeNode, atom.isSvg);
-            }
-        }
-        else {
-            nativeRenderer.insertAfter(nativeNode, context.host, atom.isSvg);
-        }
-        if (atom.jsxNode instanceof JSXElement) {
+        insertNode(nativeRenderer, atom, context);
+        if (type === 'element') {
             const childContext = {
                 isParent: true,
                 host: nativeNode,
@@ -1334,12 +1329,7 @@ function applyChanges(nativeRenderer, component) {
     const { atom, host, isParent, rootHost } = component.$$view;
     const diffAtom = atom.child;
     const template = component.update(component.props, true);
-    if (template) {
-        linkTemplate(template, component, atom);
-    }
-    else {
-        atom.child = null;
-    }
+    atom.child = createChildChain(template, atom.isSvg);
     const context = {
         host,
         isParent,
@@ -1406,30 +1396,27 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
 }
 function createChanges(newAtom, expectIndex, diffAtomIndexed, nativeRenderer, commits, context, parentComponent, effect) {
     const startDiffAtom = diffAtomIndexed;
-    const key = newAtom.jsxNode.key;
+    const { jsxNode: newJsxNode, type } = newAtom;
+    const key = newJsxNode.key;
     while (diffAtomIndexed) {
         const { atom: diffAtom, index: diffIndex } = diffAtomIndexed;
-        const diffKey = diffAtom.jsxNode.key;
-        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) {
+        if (type === diffAtom.type) {
             let commit;
-            if (newAtom.jsxNode instanceof JSXElement) {
-                commit = updateElement(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context, parentComponent);
-            }
-            else if (newAtom.jsxNode instanceof JSXText) {
+            if (type === 'text') {
                 commit = updateText(newAtom, diffAtom, nativeRenderer, context);
             }
             else {
-                commit = updateComponent(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context);
+                const { key: diffKey, type: diffType } = diffAtom.jsxNode;
+                if (diffKey !== key || newJsxNode.type !== diffType) {
+                    diffAtomIndexed = diffAtomIndexed.next;
+                    continue;
+                }
+                if (type === 'component') {
+                    commit = updateComponent(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context);
+                }
+                else {
+                    commit = updateElement(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context, parentComponent);
+                }
             }
             commits.push(commit);
             const next = diffAtomIndexed.next;
@@ -1461,8 +1448,8 @@ function createNewView(start, nativeRenderer, context, parentComponent, 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);
+        if (newAtom.jsxNode !== oldAtom.jsxNode) {
+            nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode, newAtom.isSvg);
         }
         newAtom.nativeNode = nativeNode;
         context.host = nativeNode;
@@ -1472,19 +1459,8 @@ function updateText(newAtom, oldAtom, nativeRenderer, context) {
 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) {
-                if (host === context.rootHost) {
-                    nativeRenderer.appendChild(host, newAtom.nativeNode, newAtom.isSvg);
-                }
-                else {
-                    nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
-                }
-            }
-            else {
-                nativeRenderer.insertAfter(newAtom.nativeNode, host, newAtom.isSvg);
-            }
+            insertNode(nativeRenderer, newAtom, context);
         }
         context.host = newAtom.nativeNode;
         context.isParent = false;
@@ -1498,8 +1474,9 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
         }
         else if (oldAtom.child) {
             let atom = oldAtom.child;
+            nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
             while (atom) {
-                cleanView(nativeRenderer, atom, false);
+                cleanView(nativeRenderer, atom, true);
                 atom = atom.sibling;
             }
         }
@@ -1522,7 +1499,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
             return;
         }
         if (newTemplate) {
-            linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
+            newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
         }
         if (newAtom.child) {
             diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex);
@@ -1540,12 +1517,6 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
 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) {
             let child = atom.child;
@@ -1556,33 +1527,24 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         }
         else {
             if (moveView) {
-                if (context.isParent) {
-                    if (context.host === context.rootHost) {
-                        nativeRenderer.appendChild(context.host, atom.nativeNode, atom.isSvg);
-                    }
-                    else {
-                        nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
-                    }
-                }
-                else {
-                    nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
-                }
+                insertNode(nativeRenderer, atom, context);
             }
             context.isParent = false;
             context.host = atom.nativeNode;
         }
     };
-    for (const atom of children) {
-        updateContext(atom);
+    while (child) {
+        updateContext(child);
+        child = child.sibling;
     }
 }
-function cleanView(nativeRenderer, atom, isClean) {
+function cleanView(nativeRenderer, atom, needClean) {
     if (atom.nativeNode) {
-        if (!isClean) {
+        if (!needClean) {
             nativeRenderer.remove(atom.nativeNode, atom.isSvg);
-            isClean = true;
+            needClean = true;
         }
-        if (atom.jsxNode instanceof JSXElement) {
+        if (atom.type === 'element') {
             const ref = atom.jsxNode.props[refKey];
             applyRefs(ref, atom.nativeNode, false);
         }
@@ -1590,9 +1552,9 @@ function cleanView(nativeRenderer, atom, isClean) {
     let child = atom.child;
     while (child) {
         if (child.jsxNode instanceof Component && child.jsxNode.instance.$portalHost) {
-            isClean = false;
+            needClean = false;
         }
-        cleanView(nativeRenderer, child, isClean);
+        cleanView(nativeRenderer, child, needClean);
         child = child.sibling;
     }
     if (atom.jsxNode instanceof Component) {
@@ -1601,9 +1563,7 @@ function cleanView(nativeRenderer, atom, isClean) {
 }
 function componentRender(nativeRenderer, component, from, context) {
     const { template, portalHost } = component.render();
-    if (template) {
-        linkTemplate(template, component, from);
-    }
+    from.child = createChildChain(template, from.isSvg);
     context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
     component.$$view = Object.assign({ atom: from }, context);
     let child = from.child;
@@ -1613,69 +1573,89 @@ function componentRender(nativeRenderer, component, from, context) {
     }
     component.rendered();
 }
-function createChainByJSXComponentOrJSXText(jsxNode, parent, isSvg) {
-    return {
+function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
+    const atom = {
+        type: 'component',
         jsxNode,
-        parent,
         sibling: null,
         child: null,
         nativeNode: null,
         isSvg
     };
+    prevAtom.sibling = atom;
+    return atom;
 }
-function createChainByJSXElement(component, element, parent, isSvg) {
+function createChainByJSXText(jsxNode, prevAtom, isSvg) {
+    const atom = {
+        type: 'text',
+        jsxNode,
+        sibling: null,
+        child: null,
+        nativeNode: null,
+        isSvg
+    };
+    prevAtom.sibling = atom;
+    return atom;
+}
+function createChainByJSXElement(element, prevAtom, isSvg) {
     isSvg = isSvg || element.type === 'svg';
     const atom = {
+        type: 'element',
         jsxNode: element,
-        parent,
         sibling: null,
         child: null,
         nativeNode: null,
         isSvg
     };
-    if (Reflect.has(element.props, 'children')) {
-        const jsxChildren = element.props.children;
-        const children = createChainByChildren(component, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, [], isSvg);
-        link(atom, children);
-    }
+    prevAtom.sibling = atom;
+    atom.child = createChildChain(element.props.children, isSvg);
     return atom;
 }
-function createChainByChildren(component, children, parent, atoms, isSvg) {
-    for (const item of children) {
-        if (item !== null && typeof item !== 'undefined' && typeof item !== 'boolean') {
-            if (item instanceof JSXElement) {
-                atoms.push(createChainByJSXElement(component, item, parent, isSvg));
-                continue;
-            }
-            if (typeof item === 'string' && item.length) {
-                atoms.push(createChainByJSXComponentOrJSXText(new JSXText(item), parent, isSvg));
-                continue;
+function createChainByNode(jsxNode, prevAtom, isSvg) {
+    const type = typeof jsxNode;
+    if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
+        if (typeof jsxNode === 'string') {
+            return createChainByJSXText(jsxNode, prevAtom, isSvg);
+        }
+        if (Array.isArray(jsxNode)) {
+            return createChainByChildren(jsxNode, prevAtom, isSvg);
+        }
+        if (type === 'object') {
+            const nodeType = typeof jsxNode.type;
+            if (nodeType === 'string') {
+                return createChainByJSXElement(jsxNode, prevAtom, isSvg);
             }
-            if (Array.isArray(item)) {
-                createChainByChildren(component, item, parent, atoms, isSvg);
-                continue;
+            else if (nodeType === 'function') {
+                return createChainByJSXComponent(jsxNode, prevAtom, 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 createChainByJSXText(String(jsxNode), prevAtom, isSvg);
+    }
+    return prevAtom;
+}
+function createChainByChildren(children, prevAtom, isSvg) {
+    for (const item of children) {
+        prevAtom = createChainByNode(item, prevAtom, isSvg);
     }
-    return atoms;
+    return prevAtom;
 }
-function linkTemplate(template, component, parent) {
-    const children = Array.isArray(template) ? template : [template];
-    const newChildren = createChainByChildren(component, children, parent, [], parent.isSvg);
-    link(parent, newChildren);
+function createChildChain(template, isSvg) {
+    const beforeAtom = { sibling: null };
+    createChainByNode(template, beforeAtom, isSvg);
+    return beforeAtom.sibling;
 }
-function link(parent, children) {
-    for (let i = 1; i < children.length; i++) {
-        const prev = children[i - 1];
-        prev.sibling = children[i];
+function insertNode(nativeRenderer, atom, context) {
+    if (context.isParent) {
+        if (context.host === context.rootHost) {
+            nativeRenderer.appendChild(context.host, atom.nativeNode, atom.isSvg);
+        }
+        else {
+            nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+        }
+    }
+    else {
+        nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
     }
-    parent.child = children[0] || null;
 }
 function createElement(nativeRenderer, vNode, isSvg) {
     const nativeNode = nativeRenderer.createElement(vNode.type, isSvg);
@@ -1699,7 +1679,7 @@ function createElement(nativeRenderer, vNode, isSvg) {
             }
             continue;
         }
-        if (/^on[A-Z]/.test(key)) {
+        if (listenerReg.test(key)) {
             const listener = props[key];
             if (typeof listener === 'function') {
                 bindEvent(nativeRenderer, vNode, key, nativeNode, listener, isSvg);
@@ -1719,8 +1699,8 @@ function createElement(nativeRenderer, vNode, isSvg) {
         }
     };
 }
-function createTextNode(nativeRenderer, child, isSvg) {
-    return nativeRenderer.createTextNode(child.text, isSvg);
+function createTextNode(nativeRenderer, text, isSvg) {
+    return nativeRenderer.createTextNode(text, isSvg);
 }
 function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode, isSvg) {
     const changes = getObjectChanges(newVNode.props, oldVNode.props);
@@ -1741,9 +1721,9 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             }
             continue;
         }
-        if (/^on[A-Z]/.test(key)) {
+        if (listenerReg.test(key)) {
             if (typeof value === 'function') {
-                const type = key.replace(/^on/, '').toLowerCase();
+                const type = key.replace(listenerReg, '').toLowerCase();
                 const oldOn = oldVNode.on;
                 nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate, isSvg);
                 Reflect.deleteProperty(oldOn, type);
@@ -1778,8 +1758,8 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             }
             continue;
         }
-        if (/^on[A-Z]/.test(key)) {
-            const listenType = key.replace(/^on/, '').toLowerCase();
+        if (listenerReg.test(key)) {
+            const listenType = key.replace(listenerReg, '').toLowerCase();
             newVNode.on[listenType].listenFn = newValue;
             continue;
         }
@@ -1805,7 +1785,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             }
             continue;
         }
-        if (/^on[A-Z]/.test(key)) {
+        if (listenerReg.test(key)) {
             if (typeof value === 'function') {
                 bindEvent(nativeRenderer, newVNode, key, nativeNode, value, isSvg);
             }
@@ -1823,10 +1803,12 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
     };
 }
 function applyRefs(refs, nativeNode, binding) {
-    const refList = Array.isArray(refs) ? refs : [refs];
-    for (const item of refList) {
-        if (item instanceof DynamicRef) {
-            binding ? item.bind(nativeNode) : item.unBind(nativeNode);
+    if (refs) {
+        const refList = Array.isArray(refs) ? refs : [refs];
+        for (const item of refList) {
+            if (item instanceof DynamicRef) {
+                binding ? item.bind(nativeNode) : item.unBind(nativeNode);
+            }
         }
     }
 }
@@ -1835,7 +1817,7 @@ function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn, isSvg) {
     if (!on) {
         vNode.on = on = {};
     }
-    const type = key.replace(/^on/, '').toLowerCase();
+    const type = key.replace(listenerReg, '').toLowerCase();
     const delegateObj = {
         delegate(...args) {
             return delegateObj.listenFn.apply(this, args);
@@ -1955,4 +1937,4 @@ function viewfly(config) {
     return app;
 }
 
-export { Component, DynamicRef, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXComponent, JSXElement, JSXText, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, provide, viewfly, watch, withMemo };
+export { Component, DynamicRef, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, provide, viewfly, watch, withMemo };