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

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,13 +16,12 @@ export declare class Renderer {
     private reconcileElement;
     private applyChanges;
     private diff;
+    private createChanges;
     private cleanView;
-    private reuseAndUpdate;
-    private temporarilyRemove;
     private buildView;
     private componentRender;
     private createChainByComponentFactory;
-    private createChain;
+    private createChainByTemplate;
     private createChainByJSXElement;
     private createChainByJSXText;
     private createChainByChildren;

package/bundles/index.esm.js

@@ -66,31 +66,17 @@ function jsxs(setup, config, key) {
 class JSXText {
     constructor(text) {
         this.text = text;
+        this.$$typeOf = '#text';
     }
-}
-function flatChildren(jsxNodes) {
-    const children = [];
-    for (const node of jsxNodes) {
-        if (node instanceof JSXElement || node instanceof JSXComponent) {
-            children.push(node);
-        }
-        else if (typeof node === 'string' && node.length) {
-            children.push(new JSXText(node));
-        }
-        else if (Array.isArray(node)) {
-            children.push(...flatChildren(node));
-        }
-        else if (node !== null && typeof node !== 'undefined') {
-            children.push(new JSXText(String(node)));
-        }
+    is(target) {
+        return target.$$typeOf === this.$$typeOf;
     }
-    return children;
 }
 class Props {
     constructor(props) {
         this.attrs = new Map();
         this.styles = new Map();
-        this.classes = new Set();
+        this.classes = '';
         this.listeners = {};
         this.children = [];
         if (!props) {
@@ -100,16 +86,16 @@ class Props {
             if (key === 'children') {
                 if (props.children !== null && typeof props.children !== 'undefined') {
                     if (Array.isArray(props.children)) {
-                        this.children = flatChildren(props.children);
+                        this.children = props.children;
                     }
                     else {
-                        this.children = flatChildren([props.children]);
+                        this.children = [props.children];
                     }
                 }
                 return;
             }
             if (key === 'class') {
-                this.classes = new Set(Props.classToArray(props[key]));
+                this.classes = Props.classToString(props[key]);
                 return;
             }
             if (key === 'style') {
@@ -142,6 +128,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 +186,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 +233,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 +246,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 +654,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 +679,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 +700,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,85 +822,151 @@ 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);
+                    }
+                    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;
+                        }
                     }
-                    context.host = start.nativeNode;
+                    start.jsxNode.rendered();
+                });
+            },
+            reuseElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
+                commits.push((offset) => {
+                    newAtom.nativeNode = oldAtom.nativeNode;
+                    const host = context.host;
+                    if (expectIndex !== oldIndex - offset) {
+                        if (context.isParent) {
+                            this.nativeRenderer.prependChild(host, newAtom.nativeNode);
+                        }
+                        else {
+                            this.nativeRenderer.insertAfter(newAtom.nativeNode, host);
+                        }
+                    }
+                    context.host = newAtom.nativeNode;
                     context.isParent = false;
-                }
-                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;
+                    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();
-                }
-                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);
+                });
+            },
+            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) {
-            commit();
+        let j = 0;
+        let offset = 0;
+        const len = oldChildren.length;
+        for (let i = 0; i < commits.length; i++) {
+            const commit = commits[i];
+            while (j < len) {
+                const current = oldChildren[j];
+                if (current.index <= i) {
+                    offset++;
+                    j++;
+                    continue;
+                }
+                break;
+            }
+            commit(offset);
         }
     }
+    createChanges(newAtom, expectIndex, oldChildren, changeCommits) {
+        for (let i = 0; i < oldChildren.length; i++) {
+            const { atom: diffAtom, index: diffIndex } = oldChildren[i];
+            const key = newAtom.jsxNode.key;
+            const diffKey = diffAtom.jsxNode.key;
+            if (key !== undefined && diffKey !== undefined) {
+                if (diffKey !== key) {
+                    continue;
+                }
+            }
+            if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
+                if (newAtom.jsxNode instanceof JSXElement) {
+                    changeCommits.reuseElement(newAtom, diffAtom, expectIndex, diffIndex);
+                }
+                else if (newAtom.jsxNode instanceof JSXText) {
+                    changeCommits.reuseText(newAtom, diffAtom);
+                }
+                else {
+                    changeCommits.reuseComponent(newAtom, diffAtom, expectIndex, diffIndex);
+                }
+                oldChildren.splice(i, 1);
+                return;
+            }
+        }
+        changeCommits.create(newAtom);
+    }
     cleanView(atom, isClean) {
         if (atom.nativeNode) {
             if (!isClean) {
@@ -967,80 +987,6 @@ let Renderer = class Renderer {
             atom.jsxNode.destroy();
         }
     }
-    reuseAndUpdate(start, lastIndex, oldChildren) {
-        let isReuse = false;
-        for (let i = 0; i < oldChildren.length; 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;
-                    oldChildren.splice(i, 1);
-                    return diffAtom;
-                }
-            }
-            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) {
-                    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;
-                }
-            }
-        }
-        return null;
-    }
-    temporarilyRemove(atom) {
-        let next = atom.child;
-        while (next) {
-            if (next.jsxNode instanceof Component) {
-                this.temporarilyRemove(next);
-            }
-            else {
-                this.nativeRenderer.remove(next.nativeNode);
-            }
-            next = next.sibling;
-        }
-    }
     buildView(atom, context) {
         if (atom.jsxNode instanceof Component) {
             this.componentRender(atom.jsxNode, atom);
@@ -1105,14 +1051,14 @@ let Renderer = class Renderer {
         }
         return new Atom(component, parent);
     }
-    createChain(context, template, parent) {
+    createChainByTemplate(context, template, parent) {
         if (template instanceof JSXElement) {
             return this.createChainByJSXElement(context, template, parent);
         }
-        if (template instanceof JSXText) {
-            return this.createChainByJSXText(template, parent);
+        if (template instanceof JSXComponent) {
+            return this.createChainByComponentFactory(context, template, parent);
         }
-        return this.createChainByComponentFactory(context, template, parent);
+        return parent;
     }
     createChainByJSXElement(context, element, parent) {
         const atom = new Atom(element, parent);
@@ -1126,19 +1072,37 @@ let Renderer = class Renderer {
     createChainByChildren(context, children, parent) {
         const atoms = [];
         for (const item of children) {
-            const child = this.createChain(context, item, parent);
-            if (Array.isArray(child)) {
-                atoms.push(...child);
+            if (item instanceof JSXElement) {
+                atoms.push(this.createChainByJSXElement(context, item, parent));
+                continue;
             }
-            else {
-                atoms.push(child);
+            if (item instanceof JSXComponent) {
+                const childAtom = this.createChainByComponentFactory(context, item, parent);
+                if (Array.isArray(childAtom)) {
+                    atoms.push(...childAtom);
+                }
+                else {
+                    atoms.push(childAtom);
+                }
+                continue;
+            }
+            if (typeof item === 'string' && item.length) {
+                atoms.push(this.createChainByJSXText(new JSXText(item), parent));
+                continue;
+            }
+            if (Array.isArray(item)) {
+                atoms.push(...this.createChainByChildren(context, item, parent));
+                continue;
+            }
+            if (item !== null && typeof item !== 'undefined') {
+                atoms.push(this.createChainByJSXText(new JSXText(String(item)), parent));
             }
         }
         return atoms;
     }
     linkTemplate(template, component, parent) {
         if (template) {
-            const child = this.createChain(component, template, parent);
+            const child = this.createChainByTemplate(component, template, parent);
             this.link(parent, Array.isArray(child) ? child : [child]);
         }
     }
@@ -1163,7 +1127,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 +1144,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 +1167,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]);
         });