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

package/bundles/index.js

@@ -48,25 +48,29 @@ 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 {
     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) {
@@ -172,11 +201,16 @@ class Props {
     }
 }
 class JSXElement {
-    constructor(name, config) {
+    constructor(name, config, key) {
         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 = [];
@@ -213,10 +247,12 @@ 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.$$typeOf = this.setup;
         this.destroyCallbacks = [];
         this.mountCallbacks = [];
         this.propsChangedCallbacks = [];
@@ -229,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 => {
@@ -634,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)) {
@@ -674,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) {
@@ -709,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
@@ -786,10 +760,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() {
@@ -867,81 +841,149 @@ 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 = [];
-        while (diffAtom) {
-            oldChildren.push(diffAtom);
-            diffAtom = diffAtom.sibling;
+        while (oldAtom) {
+            oldChildren.push({
+                index,
+                atom: oldAtom
+            });
+            oldAtom = oldAtom.sibling;
+            index++;
         }
         const commits = [];
-        const addReuseCommit = (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;
-                }
-                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 (isComponent) {
                     start.jsxNode.rendered();
-                }
-            });
-        };
-        const addCreateCommit = (start) => {
-            commits.push(() => {
-                const children = this.createViewByAtom(start);
-                children.forEach(child => {
-                    if (context.isParent) {
-                        this.nativeRenderer.prependChild(context.host, child);
+                });
+            },
+            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);
+                        }
                     }
-                    else {
-                        this.nativeRenderer.insertAfter(child, context.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);
                     }
-                    context.host = child;
+                    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;
                 });
-            });
-        };
-        while (start && !start.nativeNode) {
-            const reusedAtom = this.reuseAndUpdate(start, oldChildren);
-            if (reusedAtom) {
-                addReuseCommit(start, reusedAtom);
-            }
-            else {
-                addCreateCommit(start);
+            },
+            create: (start) => {
+                commits.push(() => {
+                    this.buildView(start, context);
+                });
             }
-            start = start.sibling;
+        };
+        while (newAtom && !newAtom.nativeNode) {
+            this.createChanges(newAtom, expectIndex, oldChildren, changeCommits);
+            newAtom = newAtom.sibling;
+            expectIndex++;
         }
-        for (const atom of oldChildren) {
-            this.cleanView(atom, false);
+        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();
         }
     }
+    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 = newAtom.jsxNode.key;
+            const diffKey = diffAtom.jsxNode.key;
+            if (key !== undefined && diffKey !== undefined) {
+                if (diffKey !== key) {
+                    continue;
+                }
+                isReuse = lastIndex > diffIndex;
+            }
+            if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
+                if (newAtom.jsxNode instanceof JSXElement) {
+                    if (isReuse) {
+                        this.nativeRenderer.remove(diffAtom.nativeNode);
+                    }
+                    changeCommits.reuseElement(newAtom, diffAtom, lastIndex, diffIndex);
+                }
+                else if (newAtom.jsxNode instanceof JSXText) {
+                    changeCommits.reuseText(newAtom, diffAtom);
+                }
+                else {
+                    if (isReuse) {
+                        this.temporarilyRemove(diffAtom);
+                    }
+                    changeCommits.reuseComponent(newAtom, diffAtom, lastIndex, diffIndex);
+                }
+                oldChildren.splice(i, 1);
+                return;
+            }
+        }
+        changeCommits.create(newAtom);
+    }
     cleanView(atom, isClean) {
         if (atom.nativeNode) {
             if (!isClean) {
@@ -962,148 +1004,74 @@ exports.Renderer = class Renderer {
             atom.jsxNode.destroy();
         }
     }
-    reuseAndUpdate(start, oldChildren) {
-        for (let i = 0; i < oldChildren.length; i++) {
-            const diffAtom = oldChildren[i];
-            if (start.jsxNode instanceof JSXElement) {
-                if (diffAtom.jsxNode instanceof JSXElement && start.jsxNode.name === diffAtom.jsxNode.name) {
-                    const nativeNode = diffAtom.nativeNode;
-                    start.nativeNode = nativeNode;
-                    this.updateNativeNodeProperties(start.jsxNode, diffAtom.jsxNode, nativeNode);
-                    oldChildren.splice(i, 1);
-                    return diffAtom;
-                }
+    temporarilyRemove(atom) {
+        let next = atom.child;
+        while (next) {
+            if (next.jsxNode instanceof Component) {
+                this.temporarilyRemove(next);
             }
-            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 (diffAtom.jsxNode instanceof Component) {
-                if (start.jsxNode.setup === diffAtom.jsxNode.setup) {
-                    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;
-                }
+            else {
+                this.nativeRenderer.remove(next.nativeNode);
             }
+            next = next.sibling;
         }
-        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);
-                }
+    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;
             }
-            return [nativeNode];
+            atom.jsxNode.rendered();
         }
-        else if (atom.jsxNode instanceof JSXText) {
-            const nativeNode = this.createTextNode(atom.jsxNode);
+        else {
+            let nativeNode;
+            let applyRefs = null;
+            if (atom.jsxNode instanceof JSXElement) {
+                const { nativeNode: n, applyRefs: a } = this.createElement(atom.jsxNode);
+                nativeNode = n;
+                applyRefs = a;
+            }
+            else {
+                nativeNode = this.createTextNode(atom.jsxNode);
+            }
             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);
-        }
-        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();
+            if (context.isParent) {
+                this.nativeRenderer.prependChild(context.host, nativeNode);
             }
             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;
-                }
+                this.nativeRenderer.insertAfter(nativeNode, context.host);
             }
-            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;
+            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,34 +1127,39 @@ 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);
+        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);
+        });
+        if (props.classes) {
+            this.nativeRenderer.setClass(nativeNode, props.classes);
         }
-        return nativeNode;
+        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);
     }
     updateNativeNodeProperties(newVNode, oldVNode, nativeNode) {
-        const { styleChanges, attrChanges, classesChanges, listenerChanges, isChanged } = getNodeChanges(newVNode, oldVNode);
-        if (!isChanged) {
-            return;
-        }
+        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;
@@ -1205,16 +1178,19 @@ 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]);
         });
         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];