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

package/bundles/foundation/_utils.d.ts

@@ -3,10 +3,6 @@ export interface MapChanges {
     remove: [string, any][];
     set: [string, any][];
 }
-export interface ArrayChanges {
-    remove: string[];
-    add: string[];
-}
 export interface ObjectChanges {
     remove: [string, any][];
     add: [string, any][];
@@ -14,11 +10,9 @@ export interface ObjectChanges {
 export declare const refKey = "ref";
 export declare function getObjectChanges(target: Record<string, any>, source: Record<string, any>): ObjectChanges;
 export declare function getMapChanges(target: Map<string, any>, source: Map<string, any>): MapChanges;
-export declare function getSetChanges(target: Set<string>, source: Set<string>): ArrayChanges;
 export declare function getNodeChanges(newVNode: JSXElement | Component, oldVNode: JSXElement | Component): {
     styleChanges: MapChanges;
     attrChanges: MapChanges;
-    classesChanges: ArrayChanges;
     listenerChanges: ObjectChanges;
     isChanged: boolean;
 };

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

@@ -8,8 +8,7 @@ export declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode
     abstract removeProperty(node: ElementNode, key: string): void;
     abstract setStyle(target: ElementNode, key: string, value: any): void;
     abstract removeStyle(target: ElementNode, key: string): void;
-    abstract addClass(target: ElementNode, name: string): void;
-    abstract removeClass(target: ElementNode, name: string): void;
+    abstract setClass(target: ElementNode, value: string): void;
     abstract listen<T = any>(node: ElementNode, type: string, callback: (ev: T) => any): void;
     abstract unListen(node: ElementNode, type: string, callback: (ev: any) => any): void;
     abstract remove(node: ElementNode | TextNode): void;

package/bundles/foundation/renderer.d.ts

@@ -16,8 +16,8 @@ export declare class Renderer {
     private reconcileElement;
     private applyChanges;
     private diff;
+    private createChanges;
     private cleanView;
-    private reuseAndUpdate;
     private temporarilyRemove;
     private buildView;
     private componentRender;

package/bundles/index.esm.js

@@ -66,6 +66,10 @@ function jsxs(setup, config, key) {
 class JSXText {
     constructor(text) {
         this.text = text;
+        this.$$typeOf = '#text';
+    }
+    is(target) {
+        return target.$$typeOf === this.$$typeOf;
     }
 }
 function flatChildren(jsxNodes) {
@@ -90,7 +94,7 @@ class Props {
     constructor(props) {
         this.attrs = new Map();
         this.styles = new Map();
-        this.classes = new Set();
+        this.classes = '';
         this.listeners = {};
         this.children = [];
         if (!props) {
@@ -109,7 +113,7 @@ class Props {
                 return;
             }
             if (key === 'class') {
-                this.classes = new Set(Props.classToArray(props[key]));
+                this.classes = Props.classToString(props[key]);
                 return;
             }
             if (key === 'style') {
@@ -142,6 +146,31 @@ class Props {
             this.attrs.set(key, props[key]);
         });
     }
+    static classToString(config) {
+        if (!config) {
+            return '';
+        }
+        if (typeof config === 'string') {
+            return config;
+        }
+        else if (Array.isArray(config)) {
+            return config.map(i => {
+                return Props.classToString(i);
+            }).join(' ');
+        }
+        else if (typeof config === 'object') {
+            if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
+                return config.toString();
+            }
+            const classes = [];
+            for (const key in config) {
+                if ({}.hasOwnProperty.call(config, key) && config[key]) {
+                    classes.push(key);
+                }
+            }
+            return classes.join(' ');
+        }
+    }
     static classToArray(config) {
         const classes = [];
         if (!config) {
@@ -175,8 +204,12 @@ class JSXElement {
         this.name = name;
         this.config = config;
         this.key = key;
+        this.$$typeOf = this.name;
         this.props = new Props(config);
     }
+    is(target) {
+        return target.$$typeOf === this.$$typeOf;
+    }
 }
 
 const componentSetupStack = [];
@@ -218,6 +251,7 @@ class Component extends ReflectiveInjector {
         this.setup = setup;
         this.config = config;
         this.key = key;
+        this.$$typeOf = this.setup;
         this.destroyCallbacks = [];
         this.mountCallbacks = [];
         this.propsChangedCallbacks = [];
@@ -230,6 +264,9 @@ class Component extends ReflectiveInjector {
         this.props = new Props(config);
         this.parentComponent = this.parentInjector;
     }
+    is(target) {
+        return target.$$typeOf === this.$$typeOf;
+    }
     addProvide(providers) {
         providers = Array.isArray(providers) ? providers : [providers];
         providers.forEach(p => {
@@ -635,21 +672,6 @@ function getObjectChanges(target, source) {
         remove: [],
         add: []
     };
-    // if (!target) {
-    //   if (source) {
-    //     Object.keys(source).forEach(key => {
-    //       changes.remove.push([key, source[key]])
-    //     })
-    //   }
-    //   return changes
-    // }
-    //
-    // if (!source) {
-    //   Object.keys(target).forEach(key => {
-    //     changes.add.push([key, target[key]])
-    //   })
-    //   return changes
-    // }
     Object.keys(target).forEach(key => {
         const leftValue = target[key];
         if (!Reflect.has(source, key)) {
@@ -675,20 +697,6 @@ function getMapChanges(target, source) {
         remove: [],
         set: []
     };
-    // if (!target) {
-    //   if (source) {
-    //     source.forEach((value, key) => {
-    //       changes.remove.push([key, value])
-    //     })
-    //   }
-    //   return changes
-    // }
-    // if (!source) {
-    //   target.forEach((value, key) => {
-    //     changes.set.push([key, value])
-    //   })
-    //   return changes
-    // }
     target.forEach((value, key) => {
         const rightValue = source.get(key);
         if (value === rightValue) {
@@ -710,58 +718,22 @@ function getMapChanges(target, source) {
     });
     return changes;
 }
-function getSetChanges(target, source) {
-    const changes = {
-        add: [],
-        remove: []
-    };
-    // if (!target) {
-    //   if (source) {
-    //     source.forEach(i => {
-    //       changes.remove.push(i)
-    //     })
-    //   }
-    //   return changes
-    // }
-    //
-    // if (!source) {
-    //   target.forEach(i => {
-    //     changes.add.push(i)
-    //   })
-    //   return changes
-    // }
-    target.forEach(i => {
-        if (!source.has(i)) {
-            changes.add.push(i);
-        }
-    });
-    source.forEach(i => {
-        if (!target.has(i)) {
-            changes.remove.push(i);
-        }
-    });
-    return changes;
-}
-const compareText = '0'.repeat(8);
+const compareText = '0'.repeat(6);
 function getNodeChanges(newVNode, oldVNode) {
     const newProps = newVNode.props;
     const oldProps = oldVNode.props;
     const styleChanges = getMapChanges(newProps.styles, oldProps.styles);
     const attrChanges = getMapChanges(newProps.attrs, oldProps.attrs);
-    const classesChanges = getSetChanges(newProps.classes, oldProps.classes);
     const listenerChanges = getObjectChanges(newProps.listeners, oldProps.listeners);
     return {
         styleChanges,
         attrChanges,
-        classesChanges,
         listenerChanges,
         isChanged: [
             attrChanges.set.length,
             attrChanges.remove.length,
             styleChanges.set.length,
             styleChanges.remove.length,
-            classesChanges.add.length,
-            classesChanges.remove.length,
             listenerChanges.add.length,
             listenerChanges.remove.length
         ].join('') !== compareText
@@ -868,110 +840,120 @@ let Renderer = class Renderer {
         else {
             atom.child = null;
         }
-        this.diff(atom.child, diffAtom, context);
+        this.diff(atom.child, diffAtom, context, 0, 0);
         component.rendered();
     }
-    diff(start, diffAtom, context) {
+    diff(newAtom, oldAtom, context, expectIndex, index) {
         const oldChildren = [];
-        let index = 0;
-        while (diffAtom) {
+        while (oldAtom) {
             oldChildren.push({
                 index,
-                atom: diffAtom
+                atom: oldAtom
             });
-            diffAtom = diffAtom.sibling;
+            oldAtom = oldAtom.sibling;
             index++;
         }
         const commits = [];
-        const addUpdateCommit = (start, reusedAtom) => {
-            commits.push(() => {
-                const isComponent = start.jsxNode instanceof Component;
-                if (!isComponent) {
-                    const host = context.host;
-                    if (context.isParent) {
-                        this.nativeRenderer.prependChild(host, start.nativeNode);
+        const changeCommits = {
+            reuseComponent: (start, reusedAtom, expectIndex, diffIndex) => {
+                commits.push(() => {
+                    const { isChanged } = getNodeChanges(start.jsxNode, reusedAtom.jsxNode);
+                    if (isChanged) {
+                        reusedAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.config);
                     }
-                    else {
-                        this.nativeRenderer.insertAfter(start.nativeNode, host);
+                    const newProps = start.jsxNode.props;
+                    start.jsxNode = reusedAtom.jsxNode;
+                    start.jsxNode.props = newProps;
+                    const { render } = this.componentAtomCaches.get(start.jsxNode);
+                    const template = render();
+                    if (template) {
+                        this.linkTemplate(template, start.jsxNode, start);
                     }
-                    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,
-                        isParent: true
-                    } : context;
-                    this.diff(start.child, reusedAtom.child, childContext);
-                }
-                else if (reusedAtom.child) {
-                    let atom = reusedAtom.child;
-                    while (atom) {
-                        this.cleanView(atom, false);
-                        atom = atom.sibling;
+                    this.componentAtomCaches.set(start.jsxNode, {
+                        render,
+                        atom: start
+                    });
+                    if (start.child) {
+                        this.diff(start.child, reusedAtom.child, context, expectIndex, diffIndex);
+                    }
+                    else if (reusedAtom.child) {
+                        let atom = reusedAtom.child;
+                        while (atom) {
+                            this.cleanView(atom, false);
+                            atom = atom.sibling;
+                        }
                     }
-                }
-                if (applyRefs) {
-                    applyRefs();
-                }
-                if (isComponent) {
                     start.jsxNode.rendered();
-                }
-            });
-        };
-        const addCreateCommit = (start) => {
-            commits.push(() => {
-                this.buildView(start, context);
-            });
-        };
-        let i = 0;
-        while (start && !start.nativeNode) {
-            const reusedAtom = this.reuseAndUpdate(start, i, oldChildren);
-            if (reusedAtom) {
-                addUpdateCommit(start, reusedAtom);
-            }
-            else {
-                addCreateCommit(start);
+                });
+            },
+            reuseElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
+                commits.push(() => {
+                    newAtom.nativeNode = oldAtom.nativeNode;
+                    const host = context.host;
+                    if (expectIndex !== oldIndex) {
+                        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;
+                        }
+                    }
+                    if (applyRefs) {
+                        applyRefs();
+                    }
+                });
+            },
+            reuseText: (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);
+                });
             }
-            i++;
-            start = start.sibling;
+        };
+        while (newAtom && !newAtom.nativeNode) {
+            this.createChanges(newAtom, expectIndex, oldChildren, changeCommits);
+            newAtom = newAtom.sibling;
+            expectIndex++;
         }
         for (const item of oldChildren) {
             this.cleanView(item.atom, false);
         }
-        for (const commit of commits) {
+        for (let i = 0; i < commits.length; i++) {
+            const commit = commits[i];
             commit();
         }
     }
-    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.attrs.get(refKey);
-                this.applyRefs(ref, atom.nativeNode, false);
-            }
-        }
-        let child = atom.child;
-        while (child) {
-            this.cleanView(child, isClean);
-            child = child.sibling;
-        }
-        if (atom.jsxNode instanceof Component) {
-            atom.jsxNode.destroy();
-        }
-    }
-    reuseAndUpdate(start, lastIndex, oldChildren) {
+    createChanges(newAtom, lastIndex, oldChildren, changeCommits) {
         let isReuse = false;
         for (let i = 0; i < oldChildren.length; i++) {
             const { atom: diffAtom, index: diffIndex } = oldChildren[i];
-            const key = start.jsxNode.key;
+            const key = newAtom.jsxNode.key;
             const diffKey = diffAtom.jsxNode.key;
             if (key !== undefined && diffKey !== undefined) {
                 if (diffKey !== key) {
@@ -979,55 +961,47 @@ let Renderer = class Renderer {
                 }
                 isReuse = lastIndex > diffIndex;
             }
-            if (start.jsxNode instanceof JSXElement) {
-                if (diffAtom.jsxNode instanceof JSXElement && start.jsxNode.name === diffAtom.jsxNode.name) {
-                    const nativeNode = diffAtom.nativeNode;
+            if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
+                if (newAtom.jsxNode instanceof JSXElement) {
                     if (isReuse) {
-                        this.nativeRenderer.remove(nativeNode);
+                        this.nativeRenderer.remove(diffAtom.nativeNode);
                     }
-                    start.nativeNode = nativeNode;
-                    oldChildren.splice(i, 1);
-                    return diffAtom;
+                    changeCommits.reuseElement(newAtom, diffAtom, lastIndex, diffIndex);
                 }
-            }
-            else if (start.jsxNode instanceof JSXText) {
-                if (diffAtom.jsxNode instanceof JSXText) {
-                    const nativeNode = diffAtom.nativeNode;
-                    if (start.jsxNode.text !== diffAtom.jsxNode.text) {
-                        this.nativeRenderer.syncTextContent(nativeNode, start.jsxNode.text);
-                    }
-                    start.nativeNode = nativeNode;
-                    oldChildren.splice(i, 1);
-                    return diffAtom;
+                else if (newAtom.jsxNode instanceof JSXText) {
+                    changeCommits.reuseText(newAtom, diffAtom);
                 }
-            }
-            else if (diffAtom.jsxNode instanceof Component) {
-                if (start.jsxNode.setup === diffAtom.jsxNode.setup) {
+                else {
                     if (isReuse) {
                         this.temporarilyRemove(diffAtom);
                     }
-                    const { isChanged } = getNodeChanges(start.jsxNode, diffAtom.jsxNode);
-                    if (isChanged) {
-                        diffAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.config);
-                    }
-                    const newProps = start.jsxNode.props;
-                    start.jsxNode = diffAtom.jsxNode;
-                    start.jsxNode.props = newProps;
-                    const { render } = this.componentAtomCaches.get(start.jsxNode);
-                    const template = render();
-                    if (template) {
-                        this.linkTemplate(template, start.jsxNode, start);
-                    }
-                    this.componentAtomCaches.set(start.jsxNode, {
-                        render,
-                        atom: start
-                    });
-                    oldChildren.splice(i, 1);
-                    return diffAtom;
+                    changeCommits.reuseComponent(newAtom, diffAtom, lastIndex, diffIndex);
                 }
+                oldChildren.splice(i, 1);
+                return;
             }
         }
-        return null;
+        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.attrs.get(refKey);
+                this.applyRefs(ref, atom.nativeNode, false);
+            }
+        }
+        let child = atom.child;
+        while (child) {
+            this.cleanView(child, isClean);
+            child = child.sibling;
+        }
+        if (atom.jsxNode instanceof Component) {
+            atom.jsxNode.destroy();
+        }
     }
     temporarilyRemove(atom) {
         let next = atom.child;
@@ -1163,7 +1137,9 @@ let Renderer = class Renderer {
         props.styles.forEach((value, key) => {
             this.nativeRenderer.setStyle(nativeNode, key, value);
         });
-        props.classes.forEach(k => this.nativeRenderer.addClass(nativeNode, k));
+        if (props.classes) {
+            this.nativeRenderer.setClass(nativeNode, props.classes);
+        }
         Object.keys(props.listeners).forEach(type => {
             this.nativeRenderer.listen(nativeNode, type, props.listeners[type]);
         });
@@ -1178,10 +1154,11 @@ let Renderer = class Renderer {
         return this.nativeRenderer.createTextNode(child.text);
     }
     updateNativeNodeProperties(newVNode, oldVNode, nativeNode) {
-        const { styleChanges, attrChanges, classesChanges, listenerChanges, isChanged } = getNodeChanges(newVNode, oldVNode);
-        if (!isChanged) {
-            return null;
-        }
+        const newProps = newVNode.props;
+        const oldProps = oldVNode.props;
+        const styleChanges = getMapChanges(newProps.styles, oldProps.styles);
+        const attrChanges = getMapChanges(newProps.attrs, oldProps.attrs);
+        const listenerChanges = getObjectChanges(newProps.listeners, oldProps.listeners);
         styleChanges.remove.forEach(i => this.nativeRenderer.removeStyle(nativeNode, i[0]));
         styleChanges.set.forEach(i => this.nativeRenderer.setStyle(nativeNode, i[0], i[1]));
         let unBindRefs;
@@ -1200,8 +1177,9 @@ let Renderer = class Renderer {
             }
             this.nativeRenderer.setProperty(nativeNode, key, value);
         });
-        classesChanges.remove.forEach(i => this.nativeRenderer.removeClass(nativeNode, i));
-        classesChanges.add.forEach(i => this.nativeRenderer.addClass(nativeNode, i));
+        if (newProps.classes !== oldProps.classes) {
+            this.nativeRenderer.setClass(nativeNode, newProps.classes);
+        }
         listenerChanges.remove.forEach(i => {
             this.nativeRenderer.unListen(nativeNode, i[0], i[1]);
         });

package/bundles/index.js

@@ -67,6 +67,10 @@ function jsxs(setup, config, key) {
 class JSXText {
     constructor(text) {
         this.text = text;
+        this.$$typeOf = '#text';
+    }
+    is(target) {
+        return target.$$typeOf === this.$$typeOf;
     }
 }
 function flatChildren(jsxNodes) {
@@ -91,7 +95,7 @@ class Props {
     constructor(props) {
         this.attrs = new Map();
         this.styles = new Map();
-        this.classes = new Set();
+        this.classes = '';
         this.listeners = {};
         this.children = [];
         if (!props) {
@@ -110,7 +114,7 @@ class Props {
                 return;
             }
             if (key === 'class') {
-                this.classes = new Set(Props.classToArray(props[key]));
+                this.classes = Props.classToString(props[key]);
                 return;
             }
             if (key === 'style') {
@@ -143,6 +147,31 @@ class Props {
             this.attrs.set(key, props[key]);
         });
     }
+    static classToString(config) {
+        if (!config) {
+            return '';
+        }
+        if (typeof config === 'string') {
+            return config;
+        }
+        else if (Array.isArray(config)) {
+            return config.map(i => {
+                return Props.classToString(i);
+            }).join(' ');
+        }
+        else if (typeof config === 'object') {
+            if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
+                return config.toString();
+            }
+            const classes = [];
+            for (const key in config) {
+                if ({}.hasOwnProperty.call(config, key) && config[key]) {
+                    classes.push(key);
+                }
+            }
+            return classes.join(' ');
+        }
+    }
     static classToArray(config) {
         const classes = [];
         if (!config) {
@@ -176,8 +205,12 @@ class JSXElement {
         this.name = name;
         this.config = config;
         this.key = key;
+        this.$$typeOf = this.name;
         this.props = new Props(config);
     }
+    is(target) {
+        return target.$$typeOf === this.$$typeOf;
+    }
 }
 
 const componentSetupStack = [];
@@ -219,6 +252,7 @@ class Component extends di.ReflectiveInjector {
         this.setup = setup;
         this.config = config;
         this.key = key;
+        this.$$typeOf = this.setup;
         this.destroyCallbacks = [];
         this.mountCallbacks = [];
         this.propsChangedCallbacks = [];
@@ -231,6 +265,9 @@ class Component extends di.ReflectiveInjector {
         this.props = new Props(config);
         this.parentComponent = this.parentInjector;
     }
+    is(target) {
+        return target.$$typeOf === this.$$typeOf;
+    }
     addProvide(providers) {
         providers = Array.isArray(providers) ? providers : [providers];
         providers.forEach(p => {
@@ -636,21 +673,6 @@ function getObjectChanges(target, source) {
         remove: [],
         add: []
     };
-    // if (!target) {
-    //   if (source) {
-    //     Object.keys(source).forEach(key => {
-    //       changes.remove.push([key, source[key]])
-    //     })
-    //   }
-    //   return changes
-    // }
-    //
-    // if (!source) {
-    //   Object.keys(target).forEach(key => {
-    //     changes.add.push([key, target[key]])
-    //   })
-    //   return changes
-    // }
     Object.keys(target).forEach(key => {
         const leftValue = target[key];
         if (!Reflect.has(source, key)) {
@@ -676,20 +698,6 @@ function getMapChanges(target, source) {
         remove: [],
         set: []
     };
-    // if (!target) {
-    //   if (source) {
-    //     source.forEach((value, key) => {
-    //       changes.remove.push([key, value])
-    //     })
-    //   }
-    //   return changes
-    // }
-    // if (!source) {
-    //   target.forEach((value, key) => {
-    //     changes.set.push([key, value])
-    //   })
-    //   return changes
-    // }
     target.forEach((value, key) => {
         const rightValue = source.get(key);
         if (value === rightValue) {
@@ -711,58 +719,22 @@ function getMapChanges(target, source) {
     });
     return changes;
 }
-function getSetChanges(target, source) {
-    const changes = {
-        add: [],
-        remove: []
-    };
-    // if (!target) {
-    //   if (source) {
-    //     source.forEach(i => {
-    //       changes.remove.push(i)
-    //     })
-    //   }
-    //   return changes
-    // }
-    //
-    // if (!source) {
-    //   target.forEach(i => {
-    //     changes.add.push(i)
-    //   })
-    //   return changes
-    // }
-    target.forEach(i => {
-        if (!source.has(i)) {
-            changes.add.push(i);
-        }
-    });
-    source.forEach(i => {
-        if (!target.has(i)) {
-            changes.remove.push(i);
-        }
-    });
-    return changes;
-}
-const compareText = '0'.repeat(8);
+const compareText = '0'.repeat(6);
 function getNodeChanges(newVNode, oldVNode) {
     const newProps = newVNode.props;
     const oldProps = oldVNode.props;
     const styleChanges = getMapChanges(newProps.styles, oldProps.styles);
     const attrChanges = getMapChanges(newProps.attrs, oldProps.attrs);
-    const classesChanges = getSetChanges(newProps.classes, oldProps.classes);
     const listenerChanges = getObjectChanges(newProps.listeners, oldProps.listeners);
     return {
         styleChanges,
         attrChanges,
-        classesChanges,
         listenerChanges,
         isChanged: [
             attrChanges.set.length,
             attrChanges.remove.length,
             styleChanges.set.length,
             styleChanges.remove.length,
-            classesChanges.add.length,
-            classesChanges.remove.length,
             listenerChanges.add.length,
             listenerChanges.remove.length
         ].join('') !== compareText
@@ -869,110 +841,120 @@ exports.Renderer = class Renderer {
         else {
             atom.child = null;
         }
-        this.diff(atom.child, diffAtom, context);
+        this.diff(atom.child, diffAtom, context, 0, 0);
         component.rendered();
     }
-    diff(start, diffAtom, context) {
+    diff(newAtom, oldAtom, context, expectIndex, index) {
         const oldChildren = [];
-        let index = 0;
-        while (diffAtom) {
+        while (oldAtom) {
             oldChildren.push({
                 index,
-                atom: diffAtom
+                atom: oldAtom
             });
-            diffAtom = diffAtom.sibling;
+            oldAtom = oldAtom.sibling;
             index++;
         }
         const commits = [];
-        const addUpdateCommit = (start, reusedAtom) => {
-            commits.push(() => {
-                const isComponent = start.jsxNode instanceof Component;
-                if (!isComponent) {
-                    const host = context.host;
-                    if (context.isParent) {
-                        this.nativeRenderer.prependChild(host, start.nativeNode);
+        const changeCommits = {
+            reuseComponent: (start, reusedAtom, expectIndex, diffIndex) => {
+                commits.push(() => {
+                    const { isChanged } = getNodeChanges(start.jsxNode, reusedAtom.jsxNode);
+                    if (isChanged) {
+                        reusedAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.config);
                     }
-                    else {
-                        this.nativeRenderer.insertAfter(start.nativeNode, host);
+                    const newProps = start.jsxNode.props;
+                    start.jsxNode = reusedAtom.jsxNode;
+                    start.jsxNode.props = newProps;
+                    const { render } = this.componentAtomCaches.get(start.jsxNode);
+                    const template = render();
+                    if (template) {
+                        this.linkTemplate(template, start.jsxNode, start);
                     }
-                    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,
-                        isParent: true
-                    } : context;
-                    this.diff(start.child, reusedAtom.child, childContext);
-                }
-                else if (reusedAtom.child) {
-                    let atom = reusedAtom.child;
-                    while (atom) {
-                        this.cleanView(atom, false);
-                        atom = atom.sibling;
+                    this.componentAtomCaches.set(start.jsxNode, {
+                        render,
+                        atom: start
+                    });
+                    if (start.child) {
+                        this.diff(start.child, reusedAtom.child, context, expectIndex, diffIndex);
+                    }
+                    else if (reusedAtom.child) {
+                        let atom = reusedAtom.child;
+                        while (atom) {
+                            this.cleanView(atom, false);
+                            atom = atom.sibling;
+                        }
                     }
-                }
-                if (applyRefs) {
-                    applyRefs();
-                }
-                if (isComponent) {
                     start.jsxNode.rendered();
-                }
-            });
-        };
-        const addCreateCommit = (start) => {
-            commits.push(() => {
-                this.buildView(start, context);
-            });
-        };
-        let i = 0;
-        while (start && !start.nativeNode) {
-            const reusedAtom = this.reuseAndUpdate(start, i, oldChildren);
-            if (reusedAtom) {
-                addUpdateCommit(start, reusedAtom);
-            }
-            else {
-                addCreateCommit(start);
+                });
+            },
+            reuseElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
+                commits.push(() => {
+                    newAtom.nativeNode = oldAtom.nativeNode;
+                    const host = context.host;
+                    if (expectIndex !== oldIndex) {
+                        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;
+                        }
+                    }
+                    if (applyRefs) {
+                        applyRefs();
+                    }
+                });
+            },
+            reuseText: (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);
+                });
             }
-            i++;
-            start = start.sibling;
+        };
+        while (newAtom && !newAtom.nativeNode) {
+            this.createChanges(newAtom, expectIndex, oldChildren, changeCommits);
+            newAtom = newAtom.sibling;
+            expectIndex++;
         }
         for (const item of oldChildren) {
             this.cleanView(item.atom, false);
         }
-        for (const commit of commits) {
+        for (let i = 0; i < commits.length; i++) {
+            const commit = commits[i];
             commit();
         }
     }
-    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.attrs.get(refKey);
-                this.applyRefs(ref, atom.nativeNode, false);
-            }
-        }
-        let child = atom.child;
-        while (child) {
-            this.cleanView(child, isClean);
-            child = child.sibling;
-        }
-        if (atom.jsxNode instanceof Component) {
-            atom.jsxNode.destroy();
-        }
-    }
-    reuseAndUpdate(start, lastIndex, oldChildren) {
+    createChanges(newAtom, lastIndex, oldChildren, changeCommits) {
         let isReuse = false;
         for (let i = 0; i < oldChildren.length; i++) {
             const { atom: diffAtom, index: diffIndex } = oldChildren[i];
-            const key = start.jsxNode.key;
+            const key = newAtom.jsxNode.key;
             const diffKey = diffAtom.jsxNode.key;
             if (key !== undefined && diffKey !== undefined) {
                 if (diffKey !== key) {
@@ -980,55 +962,47 @@ exports.Renderer = class Renderer {
                 }
                 isReuse = lastIndex > diffIndex;
             }
-            if (start.jsxNode instanceof JSXElement) {
-                if (diffAtom.jsxNode instanceof JSXElement && start.jsxNode.name === diffAtom.jsxNode.name) {
-                    const nativeNode = diffAtom.nativeNode;
+            if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
+                if (newAtom.jsxNode instanceof JSXElement) {
                     if (isReuse) {
-                        this.nativeRenderer.remove(nativeNode);
+                        this.nativeRenderer.remove(diffAtom.nativeNode);
                     }
-                    start.nativeNode = nativeNode;
-                    oldChildren.splice(i, 1);
-                    return diffAtom;
+                    changeCommits.reuseElement(newAtom, diffAtom, lastIndex, diffIndex);
                 }
-            }
-            else if (start.jsxNode instanceof JSXText) {
-                if (diffAtom.jsxNode instanceof JSXText) {
-                    const nativeNode = diffAtom.nativeNode;
-                    if (start.jsxNode.text !== diffAtom.jsxNode.text) {
-                        this.nativeRenderer.syncTextContent(nativeNode, start.jsxNode.text);
-                    }
-                    start.nativeNode = nativeNode;
-                    oldChildren.splice(i, 1);
-                    return diffAtom;
+                else if (newAtom.jsxNode instanceof JSXText) {
+                    changeCommits.reuseText(newAtom, diffAtom);
                 }
-            }
-            else if (diffAtom.jsxNode instanceof Component) {
-                if (start.jsxNode.setup === diffAtom.jsxNode.setup) {
+                else {
                     if (isReuse) {
                         this.temporarilyRemove(diffAtom);
                     }
-                    const { isChanged } = getNodeChanges(start.jsxNode, diffAtom.jsxNode);
-                    if (isChanged) {
-                        diffAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.config);
-                    }
-                    const newProps = start.jsxNode.props;
-                    start.jsxNode = diffAtom.jsxNode;
-                    start.jsxNode.props = newProps;
-                    const { render } = this.componentAtomCaches.get(start.jsxNode);
-                    const template = render();
-                    if (template) {
-                        this.linkTemplate(template, start.jsxNode, start);
-                    }
-                    this.componentAtomCaches.set(start.jsxNode, {
-                        render,
-                        atom: start
-                    });
-                    oldChildren.splice(i, 1);
-                    return diffAtom;
+                    changeCommits.reuseComponent(newAtom, diffAtom, lastIndex, diffIndex);
                 }
+                oldChildren.splice(i, 1);
+                return;
             }
         }
-        return null;
+        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.attrs.get(refKey);
+                this.applyRefs(ref, atom.nativeNode, false);
+            }
+        }
+        let child = atom.child;
+        while (child) {
+            this.cleanView(child, isClean);
+            child = child.sibling;
+        }
+        if (atom.jsxNode instanceof Component) {
+            atom.jsxNode.destroy();
+        }
     }
     temporarilyRemove(atom) {
         let next = atom.child;
@@ -1164,7 +1138,9 @@ exports.Renderer = class Renderer {
         props.styles.forEach((value, key) => {
             this.nativeRenderer.setStyle(nativeNode, key, value);
         });
-        props.classes.forEach(k => this.nativeRenderer.addClass(nativeNode, k));
+        if (props.classes) {
+            this.nativeRenderer.setClass(nativeNode, props.classes);
+        }
         Object.keys(props.listeners).forEach(type => {
             this.nativeRenderer.listen(nativeNode, type, props.listeners[type]);
         });
@@ -1179,10 +1155,11 @@ exports.Renderer = class Renderer {
         return this.nativeRenderer.createTextNode(child.text);
     }
     updateNativeNodeProperties(newVNode, oldVNode, nativeNode) {
-        const { styleChanges, attrChanges, classesChanges, listenerChanges, isChanged } = getNodeChanges(newVNode, oldVNode);
-        if (!isChanged) {
-            return null;
-        }
+        const newProps = newVNode.props;
+        const oldProps = oldVNode.props;
+        const styleChanges = getMapChanges(newProps.styles, oldProps.styles);
+        const attrChanges = getMapChanges(newProps.attrs, oldProps.attrs);
+        const listenerChanges = getObjectChanges(newProps.listeners, oldProps.listeners);
         styleChanges.remove.forEach(i => this.nativeRenderer.removeStyle(nativeNode, i[0]));
         styleChanges.set.forEach(i => this.nativeRenderer.setStyle(nativeNode, i[0], i[1]));
         let unBindRefs;
@@ -1201,8 +1178,9 @@ exports.Renderer = class Renderer {
             }
             this.nativeRenderer.setProperty(nativeNode, key, value);
         });
-        classesChanges.remove.forEach(i => this.nativeRenderer.removeClass(nativeNode, i));
-        classesChanges.add.forEach(i => this.nativeRenderer.addClass(nativeNode, i));
+        if (newProps.classes !== oldProps.classes) {
+            this.nativeRenderer.setClass(nativeNode, newProps.classes);
+        }
         listenerChanges.remove.forEach(i => {
             this.nativeRenderer.unListen(nativeNode, i[0], i[1]);
         });

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, Key } from './jsx-element';
+import { JSXProps, JSXElement, Props, Key, JSXTypeof } from './jsx-element';
 export declare class JSXComponent {
     createInstance: (injector: Component) => Component;
     constructor(createInstance: (injector: Component) => Component);
@@ -11,10 +11,11 @@ export interface ComponentSetup<T extends JSXProps<any> = JSXProps<any>> {
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
-export declare class Component extends ReflectiveInjector {
+export declare class Component extends ReflectiveInjector implements JSXTypeof {
     setup: ComponentSetup;
     config?: JSXProps<any> | null | undefined;
     key?: Key | undefined;
+    $$typeOf: ComponentSetup<JSXProps<any>>;
     destroyCallbacks: LifeCycleCallback[];
     mountCallbacks: LifeCycleCallback[];
     propsChangedCallbacks: PropsChangedCallback<any>[];
@@ -29,6 +30,7 @@ export declare class Component extends ReflectiveInjector {
     private propsChangedDestroyCallbacks;
     private isFirstRending;
     constructor(context: Injector, setup: ComponentSetup, config?: JSXProps<any> | null | undefined, key?: Key | undefined);
+    is(target: JSXTypeof): boolean;
     addProvide<T>(providers: Provider<T> | Provider<T>[]): void;
     init(): {
         template: JSXTemplate;

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

@@ -11,27 +11,36 @@ export declare function jsx<T extends JSXChildNode>(name: string, config?: JSXPr
 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 JSXTypeof {
+    $$typeOf: string | ComponentSetup;
+    is(target: JSXTypeof): boolean;
+}
 export interface VElementListeners {
     [listenKey: string]: <T extends Event>(ev: T) => any;
 }
-export declare class JSXText {
+export declare class JSXText implements JSXTypeof {
     text: string;
+    $$typeOf: string;
     constructor(text: string);
+    is(target: JSXTypeof): boolean;
 }
-export type VNode = JSXElement | JSXComponent | JSXText;
+export type JSXNode = JSXElement | JSXComponent | JSXText;
 export declare class Props {
     attrs: Map<string, any>;
     styles: Map<string, string | number>;
-    classes: Set<string>;
+    classes: string;
     listeners: VElementListeners;
-    children: VNode[];
+    children: JSXNode[];
     constructor(props?: JSXProps<JSXChildNode> | JSXProps<JSXChildNode[]> | null);
+    static classToString(config: unknown): any;
     static classToArray(config: unknown): string[];
 }
-export declare class JSXElement {
+export declare class JSXElement implements JSXTypeof {
     name: string;
     config?: JSXProps<any> | null | undefined;
     key?: Key | undefined;
+    $$typeOf: string;
     props: Props;
     constructor(name: string, config?: JSXProps<any> | null | undefined, key?: Key | undefined);
+    is(target: JSXTypeof): boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.8",
   "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": "b4aa728ce10f6aaca2bb2e242c7b8b8f8befbfec"
+  "gitHead": "462b51e8623348002ba7c6ba2caf7df131534506"
 }