@viewfly/core 0.0.1-alpha.6 → 0.0.1-alpha.7

package/bundles/foundation/renderer.d.ts

@@ -18,7 +18,7 @@ export declare class Renderer {
     private diff;
     private cleanView;
     private reuseAndUpdate;
-    private createViewByAtom;
+    private temporarilyRemove;
     private buildView;
     private componentRender;
     private createChainByComponentFactory;

package/bundles/index.esm.js

@@ -47,20 +47,20 @@ const jsxErrorFn = makeError('JSX');
 const Fragment = function Fragment() {
     throw jsxErrorFn('Fragment does not support calling.');
 };
-function jsx(setup, config) {
+function jsx(setup, config, key) {
     if (typeof setup === 'string') {
-        return new JSXElement(setup, config);
+        return new JSXElement(setup, config, key);
     }
     return new JSXComponent(function (context) {
-        return new Component(context, setup, config);
+        return new Component(context, setup, config, key);
     });
 }
-function jsxs(setup, config) {
+function jsxs(setup, config, key) {
     if (typeof setup === 'string') {
-        return new JSXElement(setup, config);
+        return new JSXElement(setup, config, key);
     }
     return new JSXComponent(function (context) {
-        return new Component(context, setup, config);
+        return new Component(context, setup, config, key);
     });
 }
 class JSXText {
@@ -171,9 +171,10 @@ class Props {
     }
 }
 class JSXElement {
-    constructor(name, config) {
+    constructor(name, config, key) {
         this.name = name;
         this.config = config;
+        this.key = key;
         this.props = new Props(config);
     }
 }
@@ -212,10 +213,11 @@ class Component extends ReflectiveInjector {
     get changed() {
         return this._changed;
     }
-    constructor(context, setup, config) {
+    constructor(context, setup, config, key) {
         super(context, []);
         this.setup = setup;
         this.config = config;
+        this.key = key;
         this.destroyCallbacks = [];
         this.mountCallbacks = [];
         this.propsChangedCallbacks = [];
@@ -785,10 +787,10 @@ let Renderer = class Renderer {
     }
     render() {
         const { component, host } = this.rootComponentRef;
-        const chain = new Atom(component, null);
-        const children = this.buildView(chain);
-        children.forEach(child => {
-            this.nativeRenderer.appendChild(host, child);
+        const atom = new Atom(component, null);
+        this.buildView(atom, {
+            isParent: true,
+            host
         });
     }
     refresh() {
@@ -871,12 +873,17 @@ let Renderer = class Renderer {
     }
     diff(start, diffAtom, context) {
         const oldChildren = [];
+        let index = 0;
         while (diffAtom) {
-            oldChildren.push(diffAtom);
+            oldChildren.push({
+                index,
+                atom: diffAtom
+            });
             diffAtom = diffAtom.sibling;
+            index++;
         }
         const commits = [];
-        const addReuseCommit = (start, reusedAtom) => {
+        const addUpdateCommit = (start, reusedAtom) => {
             commits.push(() => {
                 const isComponent = start.jsxNode instanceof Component;
                 if (!isComponent) {
@@ -890,6 +897,10 @@ let Renderer = class Renderer {
                     context.host = start.nativeNode;
                     context.isParent = false;
                 }
+                let applyRefs = null;
+                if (start.jsxNode instanceof JSXElement) {
+                    applyRefs = this.updateNativeNodeProperties(start.jsxNode, reusedAtom.jsxNode, start.nativeNode);
+                }
                 if (start.child) {
                     const childContext = start.jsxNode instanceof JSXElement ? {
                         host: start.nativeNode,
@@ -904,6 +915,9 @@ let Renderer = class Renderer {
                         atom = atom.sibling;
                     }
                 }
+                if (applyRefs) {
+                    applyRefs();
+                }
                 if (isComponent) {
                     start.jsxNode.rendered();
                 }
@@ -911,31 +925,23 @@ let Renderer = class Renderer {
         };
         const addCreateCommit = (start) => {
             commits.push(() => {
-                const children = this.createViewByAtom(start);
-                children.forEach(child => {
-                    if (context.isParent) {
-                        this.nativeRenderer.prependChild(context.host, child);
-                    }
-                    else {
-                        this.nativeRenderer.insertAfter(child, context.host);
-                    }
-                    context.host = child;
-                    context.isParent = false;
-                });
+                this.buildView(start, context);
             });
         };
+        let i = 0;
         while (start && !start.nativeNode) {
-            const reusedAtom = this.reuseAndUpdate(start, oldChildren);
+            const reusedAtom = this.reuseAndUpdate(start, i, oldChildren);
             if (reusedAtom) {
-                addReuseCommit(start, reusedAtom);
+                addUpdateCommit(start, reusedAtom);
             }
             else {
                 addCreateCommit(start);
             }
+            i++;
             start = start.sibling;
         }
-        for (const atom of oldChildren) {
-            this.cleanView(atom, false);
+        for (const item of oldChildren) {
+            this.cleanView(item.atom, false);
         }
         for (const commit of commits) {
             commit();
@@ -961,14 +967,25 @@ let Renderer = class Renderer {
             atom.jsxNode.destroy();
         }
     }
-    reuseAndUpdate(start, oldChildren) {
+    reuseAndUpdate(start, lastIndex, oldChildren) {
+        let isReuse = false;
         for (let i = 0; i < oldChildren.length; i++) {
-            const diffAtom = oldChildren[i];
+            const { atom: diffAtom, index: diffIndex } = oldChildren[i];
+            const key = start.jsxNode.key;
+            const diffKey = diffAtom.jsxNode.key;
+            if (key !== undefined && diffKey !== undefined) {
+                if (diffKey !== key) {
+                    continue;
+                }
+                isReuse = lastIndex > diffIndex;
+            }
             if (start.jsxNode instanceof JSXElement) {
                 if (diffAtom.jsxNode instanceof JSXElement && start.jsxNode.name === diffAtom.jsxNode.name) {
                     const nativeNode = diffAtom.nativeNode;
+                    if (isReuse) {
+                        this.nativeRenderer.remove(nativeNode);
+                    }
                     start.nativeNode = nativeNode;
-                    this.updateNativeNodeProperties(start.jsxNode, diffAtom.jsxNode, nativeNode);
                     oldChildren.splice(i, 1);
                     return diffAtom;
                 }
@@ -986,6 +1003,9 @@ let Renderer = class Renderer {
             }
             else if (diffAtom.jsxNode instanceof Component) {
                 if (start.jsxNode.setup === diffAtom.jsxNode.setup) {
+                    if (isReuse) {
+                        this.temporarilyRemove(diffAtom);
+                    }
                     const { isChanged } = getNodeChanges(start.jsxNode, diffAtom.jsxNode);
                     if (isChanged) {
                         diffAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.config);
@@ -1009,100 +1029,74 @@ let Renderer = class Renderer {
         }
         return null;
     }
-    createViewByAtom(atom) {
-        if (atom.jsxNode instanceof JSXElement) {
-            const nativeNode = this.createElement(atom.jsxNode);
-            atom.nativeNode = nativeNode;
-            if (atom.child) {
-                const children = this.buildView(atom.child);
-                for (const child of children) {
-                    this.nativeRenderer.appendChild(nativeNode, child);
-                }
+    temporarilyRemove(atom) {
+        let next = atom.child;
+        while (next) {
+            if (next.jsxNode instanceof Component) {
+                this.temporarilyRemove(next);
             }
-            return [nativeNode];
-        }
-        else if (atom.jsxNode instanceof JSXText) {
-            const nativeNode = this.createTextNode(atom.jsxNode);
-            atom.nativeNode = nativeNode;
-            return [nativeNode];
-        }
-        const { template, render } = atom.jsxNode.init();
-        this.componentAtomCaches.set(atom.jsxNode, {
-            atom,
-            render
-        });
-        if (template) {
-            this.linkTemplate(template, atom.jsxNode, atom);
-        }
-        if (atom.child) {
-            return this.buildView(atom.child);
+            else {
+                this.nativeRenderer.remove(next.nativeNode);
+            }
+            next = next.sibling;
         }
-        return [];
     }
-    buildView(chain) {
-        const context = [];
-        const children = [];
-        function getContext() {
-            return context[context.length - 1];
-        }
-        let atom = chain;
-        const stopAtom = chain.parent;
-        wrap: while (atom) {
-            if (atom.jsxNode instanceof Component) {
-                this.componentRender(atom.jsxNode, atom);
-                if (atom.child) {
-                    atom = atom.child;
-                    continue;
-                }
-                atom.jsxNode.rendered();
+    buildView(atom, context) {
+        if (atom.jsxNode instanceof Component) {
+            this.componentRender(atom.jsxNode, atom);
+            let child = atom.child;
+            while (child) {
+                this.buildView(child, context);
+                child = child.sibling;
+            }
+            atom.jsxNode.rendered();
+        }
+        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 {
-                const host = getContext();
-                const nativeNode = atom.jsxNode instanceof JSXElement ? this.createElement(atom.jsxNode) : this.createTextNode(atom.jsxNode);
-                atom.nativeNode = nativeNode;
-                if (host) {
-                    this.nativeRenderer.appendChild(host, nativeNode);
-                }
-                else {
-                    children.push(nativeNode);
-                }
-                if (atom.child) {
-                    context.push(nativeNode);
-                    atom = atom.child;
-                    continue;
-                }
+                nativeNode = this.createTextNode(atom.jsxNode);
             }
-            while (atom) {
-                if (atom.sibling) {
-                    atom = atom.sibling;
-                    break;
-                }
-                atom = atom.parent;
-                const isComponent = (atom === null || atom === void 0 ? void 0 : atom.jsxNode) instanceof Component;
-                if (isComponent) {
-                    atom.jsxNode.rendered();
-                }
-                if (atom === stopAtom) {
-                    break wrap;
-                }
-                if (isComponent) {
-                    continue;
+            atom.nativeNode = nativeNode;
+            if (context.isParent) {
+                this.nativeRenderer.prependChild(context.host, nativeNode);
+            }
+            else {
+                this.nativeRenderer.insertAfter(nativeNode, context.host);
+            }
+            if (atom.jsxNode instanceof JSXElement) {
+                const childContext = {
+                    isParent: true,
+                    host: nativeNode
+                };
+                let child = atom.child;
+                while (child) {
+                    this.buildView(child, childContext);
+                    child = child.sibling;
                 }
-                context.pop();
+            }
+            context.host = nativeNode;
+            context.isParent = false;
+            if (applyRefs) {
+                applyRefs();
             }
         }
-        return children;
     }
-    componentRender(component, parent) {
+    componentRender(component, from) {
         const { template, render } = component.init();
         if (template) {
-            this.linkTemplate(template, component, parent);
+            this.linkTemplate(template, component, from);
         }
         this.componentAtomCaches.set(component, {
             render,
-            atom: parent
+            atom: from
         });
-        return parent;
+        return from;
     }
     createChainByComponentFactory(context, factory, parent) {
         const component = factory.createInstance(context);
@@ -1158,25 +1152,27 @@ let Renderer = class Renderer {
     createElement(vNode) {
         const nativeNode = this.nativeRenderer.createElement(vNode.name);
         const props = vNode.props;
-        if (props) {
-            let bindingRefs;
-            props.attrs.forEach((value, key) => {
-                if (key === refKey) {
-                    bindingRefs = value;
-                    return;
-                }
-                this.nativeRenderer.setProperty(nativeNode, key, value);
-            });
-            props.styles.forEach((value, key) => {
-                this.nativeRenderer.setStyle(nativeNode, key, value);
-            });
-            props.classes.forEach(k => this.nativeRenderer.addClass(nativeNode, k));
-            Object.keys(props.listeners).forEach(type => {
-                this.nativeRenderer.listen(nativeNode, type, props.listeners[type]);
-            });
-            this.applyRefs(bindingRefs, nativeNode, true);
-        }
-        return nativeNode;
+        let bindingRefs;
+        props.attrs.forEach((value, key) => {
+            if (key === refKey) {
+                bindingRefs = value;
+                return;
+            }
+            this.nativeRenderer.setProperty(nativeNode, key, value);
+        });
+        props.styles.forEach((value, key) => {
+            this.nativeRenderer.setStyle(nativeNode, key, value);
+        });
+        props.classes.forEach(k => this.nativeRenderer.addClass(nativeNode, k));
+        Object.keys(props.listeners).forEach(type => {
+            this.nativeRenderer.listen(nativeNode, type, props.listeners[type]);
+        });
+        return {
+            nativeNode,
+            applyRefs: () => {
+                this.applyRefs(bindingRefs, nativeNode, true);
+            }
+        };
     }
     createTextNode(child) {
         return this.nativeRenderer.createTextNode(child.text);
@@ -1184,7 +1180,7 @@ let Renderer = class Renderer {
     updateNativeNodeProperties(newVNode, oldVNode, nativeNode) {
         const { styleChanges, attrChanges, classesChanges, listenerChanges, isChanged } = getNodeChanges(newVNode, oldVNode);
         if (!isChanged) {
-            return;
+            return null;
         }
         styleChanges.remove.forEach(i => this.nativeRenderer.removeStyle(nativeNode, i[0]));
         styleChanges.set.forEach(i => this.nativeRenderer.setStyle(nativeNode, i[0], i[1]));
@@ -1212,8 +1208,10 @@ let Renderer = class Renderer {
         listenerChanges.add.forEach(i => {
             this.nativeRenderer.listen(nativeNode, i[0], i[1]);
         });
-        this.applyRefs(unBindRefs, nativeNode, false);
-        this.applyRefs(bindRefs, nativeNode, true);
+        return () => {
+            this.applyRefs(unBindRefs, nativeNode, false);
+            this.applyRefs(bindRefs, nativeNode, true);
+        };
     }
     applyRefs(refs, nativeNode, binding) {
         refs = Array.isArray(refs) ? refs : [refs];

package/bundles/index.js

@@ -48,20 +48,20 @@ const jsxErrorFn = makeError('JSX');
 const Fragment = function Fragment() {
     throw jsxErrorFn('Fragment does not support calling.');
 };
-function jsx(setup, config) {
+function jsx(setup, config, key) {
     if (typeof setup === 'string') {
-        return new JSXElement(setup, config);
+        return new JSXElement(setup, config, key);
     }
     return new JSXComponent(function (context) {
-        return new Component(context, setup, config);
+        return new Component(context, setup, config, key);
     });
 }
-function jsxs(setup, config) {
+function jsxs(setup, config, key) {
     if (typeof setup === 'string') {
-        return new JSXElement(setup, config);
+        return new JSXElement(setup, config, key);
     }
     return new JSXComponent(function (context) {
-        return new Component(context, setup, config);
+        return new Component(context, setup, config, key);
     });
 }
 class JSXText {
@@ -172,9 +172,10 @@ class Props {
     }
 }
 class JSXElement {
-    constructor(name, config) {
+    constructor(name, config, key) {
         this.name = name;
         this.config = config;
+        this.key = key;
         this.props = new Props(config);
     }
 }
@@ -213,10 +214,11 @@ class Component extends di.ReflectiveInjector {
     get changed() {
         return this._changed;
     }
-    constructor(context, setup, config) {
+    constructor(context, setup, config, key) {
         super(context, []);
         this.setup = setup;
         this.config = config;
+        this.key = key;
         this.destroyCallbacks = [];
         this.mountCallbacks = [];
         this.propsChangedCallbacks = [];
@@ -786,10 +788,10 @@ exports.Renderer = class Renderer {
     }
     render() {
         const { component, host } = this.rootComponentRef;
-        const chain = new Atom(component, null);
-        const children = this.buildView(chain);
-        children.forEach(child => {
-            this.nativeRenderer.appendChild(host, child);
+        const atom = new Atom(component, null);
+        this.buildView(atom, {
+            isParent: true,
+            host
         });
     }
     refresh() {
@@ -872,12 +874,17 @@ exports.Renderer = class Renderer {
     }
     diff(start, diffAtom, context) {
         const oldChildren = [];
+        let index = 0;
         while (diffAtom) {
-            oldChildren.push(diffAtom);
+            oldChildren.push({
+                index,
+                atom: diffAtom
+            });
             diffAtom = diffAtom.sibling;
+            index++;
         }
         const commits = [];
-        const addReuseCommit = (start, reusedAtom) => {
+        const addUpdateCommit = (start, reusedAtom) => {
             commits.push(() => {
                 const isComponent = start.jsxNode instanceof Component;
                 if (!isComponent) {
@@ -891,6 +898,10 @@ exports.Renderer = class Renderer {
                     context.host = start.nativeNode;
                     context.isParent = false;
                 }
+                let applyRefs = null;
+                if (start.jsxNode instanceof JSXElement) {
+                    applyRefs = this.updateNativeNodeProperties(start.jsxNode, reusedAtom.jsxNode, start.nativeNode);
+                }
                 if (start.child) {
                     const childContext = start.jsxNode instanceof JSXElement ? {
                         host: start.nativeNode,
@@ -905,6 +916,9 @@ exports.Renderer = class Renderer {
                         atom = atom.sibling;
                     }
                 }
+                if (applyRefs) {
+                    applyRefs();
+                }
                 if (isComponent) {
                     start.jsxNode.rendered();
                 }
@@ -912,31 +926,23 @@ exports.Renderer = class Renderer {
         };
         const addCreateCommit = (start) => {
             commits.push(() => {
-                const children = this.createViewByAtom(start);
-                children.forEach(child => {
-                    if (context.isParent) {
-                        this.nativeRenderer.prependChild(context.host, child);
-                    }
-                    else {
-                        this.nativeRenderer.insertAfter(child, context.host);
-                    }
-                    context.host = child;
-                    context.isParent = false;
-                });
+                this.buildView(start, context);
             });
         };
+        let i = 0;
         while (start && !start.nativeNode) {
-            const reusedAtom = this.reuseAndUpdate(start, oldChildren);
+            const reusedAtom = this.reuseAndUpdate(start, i, oldChildren);
             if (reusedAtom) {
-                addReuseCommit(start, reusedAtom);
+                addUpdateCommit(start, reusedAtom);
             }
             else {
                 addCreateCommit(start);
             }
+            i++;
             start = start.sibling;
         }
-        for (const atom of oldChildren) {
-            this.cleanView(atom, false);
+        for (const item of oldChildren) {
+            this.cleanView(item.atom, false);
         }
         for (const commit of commits) {
             commit();
@@ -962,14 +968,25 @@ exports.Renderer = class Renderer {
             atom.jsxNode.destroy();
         }
     }
-    reuseAndUpdate(start, oldChildren) {
+    reuseAndUpdate(start, lastIndex, oldChildren) {
+        let isReuse = false;
         for (let i = 0; i < oldChildren.length; i++) {
-            const diffAtom = oldChildren[i];
+            const { atom: diffAtom, index: diffIndex } = oldChildren[i];
+            const key = start.jsxNode.key;
+            const diffKey = diffAtom.jsxNode.key;
+            if (key !== undefined && diffKey !== undefined) {
+                if (diffKey !== key) {
+                    continue;
+                }
+                isReuse = lastIndex > diffIndex;
+            }
             if (start.jsxNode instanceof JSXElement) {
                 if (diffAtom.jsxNode instanceof JSXElement && start.jsxNode.name === diffAtom.jsxNode.name) {
                     const nativeNode = diffAtom.nativeNode;
+                    if (isReuse) {
+                        this.nativeRenderer.remove(nativeNode);
+                    }
                     start.nativeNode = nativeNode;
-                    this.updateNativeNodeProperties(start.jsxNode, diffAtom.jsxNode, nativeNode);
                     oldChildren.splice(i, 1);
                     return diffAtom;
                 }
@@ -987,6 +1004,9 @@ exports.Renderer = class Renderer {
             }
             else if (diffAtom.jsxNode instanceof Component) {
                 if (start.jsxNode.setup === diffAtom.jsxNode.setup) {
+                    if (isReuse) {
+                        this.temporarilyRemove(diffAtom);
+                    }
                     const { isChanged } = getNodeChanges(start.jsxNode, diffAtom.jsxNode);
                     if (isChanged) {
                         diffAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.config);
@@ -1010,100 +1030,74 @@ exports.Renderer = class Renderer {
         }
         return null;
     }
-    createViewByAtom(atom) {
-        if (atom.jsxNode instanceof JSXElement) {
-            const nativeNode = this.createElement(atom.jsxNode);
-            atom.nativeNode = nativeNode;
-            if (atom.child) {
-                const children = this.buildView(atom.child);
-                for (const child of children) {
-                    this.nativeRenderer.appendChild(nativeNode, child);
-                }
+    temporarilyRemove(atom) {
+        let next = atom.child;
+        while (next) {
+            if (next.jsxNode instanceof Component) {
+                this.temporarilyRemove(next);
             }
-            return [nativeNode];
-        }
-        else if (atom.jsxNode instanceof JSXText) {
-            const nativeNode = this.createTextNode(atom.jsxNode);
-            atom.nativeNode = nativeNode;
-            return [nativeNode];
-        }
-        const { template, render } = atom.jsxNode.init();
-        this.componentAtomCaches.set(atom.jsxNode, {
-            atom,
-            render
-        });
-        if (template) {
-            this.linkTemplate(template, atom.jsxNode, atom);
-        }
-        if (atom.child) {
-            return this.buildView(atom.child);
+            else {
+                this.nativeRenderer.remove(next.nativeNode);
+            }
+            next = next.sibling;
         }
-        return [];
     }
-    buildView(chain) {
-        const context = [];
-        const children = [];
-        function getContext() {
-            return context[context.length - 1];
-        }
-        let atom = chain;
-        const stopAtom = chain.parent;
-        wrap: while (atom) {
-            if (atom.jsxNode instanceof Component) {
-                this.componentRender(atom.jsxNode, atom);
-                if (atom.child) {
-                    atom = atom.child;
-                    continue;
-                }
-                atom.jsxNode.rendered();
+    buildView(atom, context) {
+        if (atom.jsxNode instanceof Component) {
+            this.componentRender(atom.jsxNode, atom);
+            let child = atom.child;
+            while (child) {
+                this.buildView(child, context);
+                child = child.sibling;
+            }
+            atom.jsxNode.rendered();
+        }
+        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 {
-                const host = getContext();
-                const nativeNode = atom.jsxNode instanceof JSXElement ? this.createElement(atom.jsxNode) : this.createTextNode(atom.jsxNode);
-                atom.nativeNode = nativeNode;
-                if (host) {
-                    this.nativeRenderer.appendChild(host, nativeNode);
-                }
-                else {
-                    children.push(nativeNode);
-                }
-                if (atom.child) {
-                    context.push(nativeNode);
-                    atom = atom.child;
-                    continue;
-                }
+                nativeNode = this.createTextNode(atom.jsxNode);
             }
-            while (atom) {
-                if (atom.sibling) {
-                    atom = atom.sibling;
-                    break;
-                }
-                atom = atom.parent;
-                const isComponent = (atom === null || atom === void 0 ? void 0 : atom.jsxNode) instanceof Component;
-                if (isComponent) {
-                    atom.jsxNode.rendered();
-                }
-                if (atom === stopAtom) {
-                    break wrap;
-                }
-                if (isComponent) {
-                    continue;
+            atom.nativeNode = nativeNode;
+            if (context.isParent) {
+                this.nativeRenderer.prependChild(context.host, nativeNode);
+            }
+            else {
+                this.nativeRenderer.insertAfter(nativeNode, context.host);
+            }
+            if (atom.jsxNode instanceof JSXElement) {
+                const childContext = {
+                    isParent: true,
+                    host: nativeNode
+                };
+                let child = atom.child;
+                while (child) {
+                    this.buildView(child, childContext);
+                    child = child.sibling;
                 }
-                context.pop();
+            }
+            context.host = nativeNode;
+            context.isParent = false;
+            if (applyRefs) {
+                applyRefs();
             }
         }
-        return children;
     }
-    componentRender(component, parent) {
+    componentRender(component, from) {
         const { template, render } = component.init();
         if (template) {
-            this.linkTemplate(template, component, parent);
+            this.linkTemplate(template, component, from);
         }
         this.componentAtomCaches.set(component, {
             render,
-            atom: parent
+            atom: from
         });
-        return parent;
+        return from;
     }
     createChainByComponentFactory(context, factory, parent) {
         const component = factory.createInstance(context);
@@ -1159,25 +1153,27 @@ exports.Renderer = class Renderer {
     createElement(vNode) {
         const nativeNode = this.nativeRenderer.createElement(vNode.name);
         const props = vNode.props;
-        if (props) {
-            let bindingRefs;
-            props.attrs.forEach((value, key) => {
-                if (key === refKey) {
-                    bindingRefs = value;
-                    return;
-                }
-                this.nativeRenderer.setProperty(nativeNode, key, value);
-            });
-            props.styles.forEach((value, key) => {
-                this.nativeRenderer.setStyle(nativeNode, key, value);
-            });
-            props.classes.forEach(k => this.nativeRenderer.addClass(nativeNode, k));
-            Object.keys(props.listeners).forEach(type => {
-                this.nativeRenderer.listen(nativeNode, type, props.listeners[type]);
-            });
-            this.applyRefs(bindingRefs, nativeNode, true);
-        }
-        return nativeNode;
+        let bindingRefs;
+        props.attrs.forEach((value, key) => {
+            if (key === refKey) {
+                bindingRefs = value;
+                return;
+            }
+            this.nativeRenderer.setProperty(nativeNode, key, value);
+        });
+        props.styles.forEach((value, key) => {
+            this.nativeRenderer.setStyle(nativeNode, key, value);
+        });
+        props.classes.forEach(k => this.nativeRenderer.addClass(nativeNode, k));
+        Object.keys(props.listeners).forEach(type => {
+            this.nativeRenderer.listen(nativeNode, type, props.listeners[type]);
+        });
+        return {
+            nativeNode,
+            applyRefs: () => {
+                this.applyRefs(bindingRefs, nativeNode, true);
+            }
+        };
     }
     createTextNode(child) {
         return this.nativeRenderer.createTextNode(child.text);
@@ -1185,7 +1181,7 @@ exports.Renderer = class Renderer {
     updateNativeNodeProperties(newVNode, oldVNode, nativeNode) {
         const { styleChanges, attrChanges, classesChanges, listenerChanges, isChanged } = getNodeChanges(newVNode, oldVNode);
         if (!isChanged) {
-            return;
+            return null;
         }
         styleChanges.remove.forEach(i => this.nativeRenderer.removeStyle(nativeNode, i[0]));
         styleChanges.set.forEach(i => this.nativeRenderer.setStyle(nativeNode, i[0], i[1]));
@@ -1213,8 +1209,10 @@ exports.Renderer = class Renderer {
         listenerChanges.add.forEach(i => {
             this.nativeRenderer.listen(nativeNode, i[0], i[1]);
         });
-        this.applyRefs(unBindRefs, nativeNode, false);
-        this.applyRefs(bindRefs, nativeNode, true);
+        return () => {
+            this.applyRefs(unBindRefs, nativeNode, false);
+            this.applyRefs(bindRefs, nativeNode, true);
+        };
     }
     applyRefs(refs, nativeNode, binding) {
         refs = Array.isArray(refs) ? refs : [refs];

package/bundles/model/component.d.ts

@@ -1,5 +1,5 @@
 import { Provider, ReflectiveInjector, AbstractType, Type, InjectionToken, InjectFlags, Injector } from '@tanbo/di';
-import { JSXProps, JSXElement, Props } from './jsx-element';
+import { JSXProps, JSXElement, Props, Key } from './jsx-element';
 export declare class JSXComponent {
     createInstance: (injector: Component) => Component;
     constructor(createInstance: (injector: Component) => Component);
@@ -14,6 +14,7 @@ export interface ComponentSetup<T extends JSXProps<any> = JSXProps<any>> {
 export declare class Component extends ReflectiveInjector {
     setup: ComponentSetup;
     config?: JSXProps<any> | null | undefined;
+    key?: Key | undefined;
     destroyCallbacks: LifeCycleCallback[];
     mountCallbacks: LifeCycleCallback[];
     propsChangedCallbacks: PropsChangedCallback<any>[];
@@ -27,7 +28,7 @@ export declare class Component extends ReflectiveInjector {
     private updatedDestroyCallbacks;
     private propsChangedDestroyCallbacks;
     private isFirstRending;
-    constructor(context: Injector, setup: ComponentSetup, config?: JSXProps<any> | null | undefined);
+    constructor(context: Injector, setup: ComponentSetup, config?: JSXProps<any> | null | undefined, key?: Key | undefined);
     addProvide<T>(providers: Provider<T> | Provider<T>[]): void;
     init(): {
         template: JSXTemplate;

package/bundles/model/jsx-element.d.ts

@@ -6,10 +6,11 @@ export interface JSXProps<T = JSXChildNode | JSXChildNode[]> {
     [key: symbol]: any;
 }
 export declare const Fragment: () => never;
-export declare function jsx<T extends JSXChildNode>(name: string, config?: JSXProps<T> | null): JSXElement;
-export declare function jsx<T extends JSXChildNode>(setup: ComponentSetup, config?: JSXProps<T> | null): JSXComponent;
-export declare function jsxs<T extends JSXChildNode[]>(name: string, config?: JSXProps<T> | null): JSXElement;
-export declare function jsxs<T extends JSXChildNode[]>(setup: ComponentSetup, config?: JSXProps<T> | null): JSXComponent;
+export type Key = number | string;
+export declare function jsx<T extends JSXChildNode>(name: string, config?: JSXProps<T> | null, key?: Key): JSXElement;
+export declare function jsx<T extends JSXChildNode>(setup: ComponentSetup, config?: JSXProps<T> | null, key?: Key): JSXComponent;
+export declare function jsxs<T extends JSXChildNode[]>(name: string, config?: JSXProps<T> | null, key?: Key): JSXElement;
+export declare function jsxs<T extends JSXChildNode[]>(setup: ComponentSetup, config?: JSXProps<T> | null, key?: Key): JSXComponent;
 export interface VElementListeners {
     [listenKey: string]: <T extends Event>(ev: T) => any;
 }
@@ -30,6 +31,7 @@ export declare class Props {
 export declare class JSXElement {
     name: string;
     config?: JSXProps<any> | null | undefined;
+    key?: Key | undefined;
     props: Props;
-    constructor(name: string, config?: JSXProps<any> | null | undefined);
+    constructor(name: string, config?: JSXProps<any> | null | undefined, key?: Key | undefined);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.1-alpha.6",
+  "version": "0.0.1-alpha.7",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -37,5 +37,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "aedb326658afa6a712aebe3f22fe5209ae18a9f9"
+  "gitHead": "b4aa728ce10f6aaca2bb2e242c7b8b8f8befbfec"
 }