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

package/bundles/foundation/renderer.d.ts

@@ -18,11 +18,10 @@ export declare class Renderer {
     private diff;
     private createChanges;
     private cleanView;
-    private temporarilyRemove;
     private buildView;
     private componentRender;
     private createChainByComponentFactory;
-    private createChain;
+    private createChainByTemplate;
     private createChainByJSXElement;
     private createChainByJSXText;
     private createChainByChildren;

package/bundles/index.esm.js

@@ -72,24 +72,6 @@ class JSXText {
         return target.$$typeOf === this.$$typeOf;
     }
 }
-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)));
-        }
-    }
-    return children;
-}
 class Props {
     constructor(props) {
         this.attrs = new Map();
@@ -104,10 +86,10 @@ 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;
@@ -887,10 +869,10 @@ let Renderer = class Renderer {
                 });
             },
             reuseElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
-                commits.push(() => {
+                commits.push((offset) => {
                     newAtom.nativeNode = oldAtom.nativeNode;
                     const host = context.host;
-                    if (expectIndex !== oldIndex) {
+                    if (expectIndex !== oldIndex - offset) {
                         if (context.isParent) {
                             this.nativeRenderer.prependChild(host, newAtom.nativeNode);
                         }
@@ -914,9 +896,7 @@ let Renderer = class Renderer {
                             atom = atom.sibling;
                         }
                     }
-                    if (applyRefs) {
-                        applyRefs();
-                    }
+                    applyRefs();
                 });
             },
             reuseText: (newAtom, oldAtom) => {
@@ -944,13 +924,24 @@ let Renderer = class Renderer {
         for (const item of oldChildren) {
             this.cleanView(item.atom, false);
         }
+        let j = 0;
+        let offset = 0;
+        const len = oldChildren.length;
         for (let i = 0; i < commits.length; i++) {
             const commit = commits[i];
-            commit();
+            while (j < len) {
+                const current = oldChildren[j];
+                if (current.index <= i) {
+                    offset++;
+                    j++;
+                    continue;
+                }
+                break;
+            }
+            commit(offset);
         }
     }
-    createChanges(newAtom, lastIndex, oldChildren, changeCommits) {
-        let isReuse = false;
+    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;
@@ -959,23 +950,16 @@ let Renderer = class Renderer {
                 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);
+                    changeCommits.reuseElement(newAtom, diffAtom, expectIndex, diffIndex);
                 }
                 else if (newAtom.jsxNode instanceof JSXText) {
                     changeCommits.reuseText(newAtom, diffAtom);
                 }
                 else {
-                    if (isReuse) {
-                        this.temporarilyRemove(diffAtom);
-                    }
-                    changeCommits.reuseComponent(newAtom, diffAtom, lastIndex, diffIndex);
+                    changeCommits.reuseComponent(newAtom, diffAtom, expectIndex, diffIndex);
                 }
                 oldChildren.splice(i, 1);
                 return;
@@ -1003,18 +987,6 @@ let Renderer = class Renderer {
             atom.jsxNode.destroy();
         }
     }
-    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);
@@ -1079,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);
@@ -1100,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]);
         }
     }

package/bundles/index.js

@@ -73,24 +73,6 @@ class JSXText {
         return target.$$typeOf === this.$$typeOf;
     }
 }
-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)));
-        }
-    }
-    return children;
-}
 class Props {
     constructor(props) {
         this.attrs = new Map();
@@ -105,10 +87,10 @@ 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;
@@ -888,10 +870,10 @@ exports.Renderer = class Renderer {
                 });
             },
             reuseElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
-                commits.push(() => {
+                commits.push((offset) => {
                     newAtom.nativeNode = oldAtom.nativeNode;
                     const host = context.host;
-                    if (expectIndex !== oldIndex) {
+                    if (expectIndex !== oldIndex - offset) {
                         if (context.isParent) {
                             this.nativeRenderer.prependChild(host, newAtom.nativeNode);
                         }
@@ -915,9 +897,7 @@ exports.Renderer = class Renderer {
                             atom = atom.sibling;
                         }
                     }
-                    if (applyRefs) {
-                        applyRefs();
-                    }
+                    applyRefs();
                 });
             },
             reuseText: (newAtom, oldAtom) => {
@@ -945,13 +925,24 @@ exports.Renderer = class Renderer {
         for (const item of oldChildren) {
             this.cleanView(item.atom, false);
         }
+        let j = 0;
+        let offset = 0;
+        const len = oldChildren.length;
         for (let i = 0; i < commits.length; i++) {
             const commit = commits[i];
-            commit();
+            while (j < len) {
+                const current = oldChildren[j];
+                if (current.index <= i) {
+                    offset++;
+                    j++;
+                    continue;
+                }
+                break;
+            }
+            commit(offset);
         }
     }
-    createChanges(newAtom, lastIndex, oldChildren, changeCommits) {
-        let isReuse = false;
+    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;
@@ -960,23 +951,16 @@ exports.Renderer = class Renderer {
                 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);
+                    changeCommits.reuseElement(newAtom, diffAtom, expectIndex, diffIndex);
                 }
                 else if (newAtom.jsxNode instanceof JSXText) {
                     changeCommits.reuseText(newAtom, diffAtom);
                 }
                 else {
-                    if (isReuse) {
-                        this.temporarilyRemove(diffAtom);
-                    }
-                    changeCommits.reuseComponent(newAtom, diffAtom, lastIndex, diffIndex);
+                    changeCommits.reuseComponent(newAtom, diffAtom, expectIndex, diffIndex);
                 }
                 oldChildren.splice(i, 1);
                 return;
@@ -1004,18 +988,6 @@ exports.Renderer = class Renderer {
             atom.jsxNode.destroy();
         }
     }
-    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);
@@ -1080,14 +1052,14 @@ exports.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);
@@ -1101,19 +1073,37 @@ exports.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]);
         }
     }

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

@@ -1,5 +1,5 @@
 import { JSXComponent, ComponentSetup } from './component';
-export type JSXChildNode = JSXElement | JSXComponent | string | number | boolean | null | undefined;
+export type JSXChildNode = JSXElement | JSXComponent | string | number | boolean | null | undefined | JSXChildNode[];
 export interface JSXProps<T = JSXChildNode | JSXChildNode[]> {
     children?: T;
     [key: string]: any;
@@ -24,13 +24,12 @@ export declare class JSXText implements JSXTypeof {
     constructor(text: string);
     is(target: JSXTypeof): boolean;
 }
-export type JSXNode = JSXElement | JSXComponent | JSXText;
 export declare class Props {
     attrs: Map<string, any>;
     styles: Map<string, string | number>;
     classes: string;
     listeners: VElementListeners;
-    children: JSXNode[];
+    children: JSXChildNode[];
     constructor(props?: JSXProps<JSXChildNode> | JSXProps<JSXChildNode[]> | null);
     static classToString(config: unknown): any;
     static classToArray(config: unknown): string[];

package/package.json

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