@viewfly/core 1.0.0-alpha.14 → 1.0.0-alpha.15

package/bundles/index.d.ts

@@ -530,8 +530,6 @@ interface TextAtom {
     child: Atom | null;
     sibling: Atom | null;
     isSvg: boolean;
-    update: null | ((insertOffset: number) => void);
-    next: Atom | null;
 }
 interface ElementAtom {
     type: typeof ElementAtomType;
@@ -541,8 +539,6 @@ interface ElementAtom {
     child: Atom | null;
     sibling: Atom | null;
     isSvg: boolean;
-    update: null | ((insertOffset: number) => void);
-    next: Atom | null;
 }
 interface ComponentAtom {
     type: typeof ComponentAtomType;
@@ -552,8 +548,6 @@ interface ComponentAtom {
     child: Atom | null;
     sibling: Atom | null;
     isSvg: boolean;
-    update: null | ((insertOffset: number) => void);
-    next: Atom | null;
 }
 type Atom = TextAtom | ElementAtom | ComponentAtom;
 interface ComponentView {

package/bundles/index.esm.js

@@ -1298,9 +1298,7 @@ function createRenderer(component, nativeRenderer) {
                 sibling: null,
                 child: null,
                 nativeNode: null,
-                isSvg: false,
-                update: null,
-                next: null
+                isSvg: false
             };
             componentRender(nativeRenderer, component, atom, {
                 isParent: true,
@@ -1370,61 +1368,71 @@ function applyChanges(nativeRenderer, component) {
     }
 }
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
-    let updateAtom = newAtom;
-    let insertOffset = 0;
-    let deleteOffset = 0;
+    const commits = [];
+    function changeOffset() {
+        offset++;
+    }
+    while (newAtom) {
+        oldAtom = createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, changeOffset);
+        newAtom = newAtom.sibling;
+    }
+    let dirtyDiffAtom = oldAtom;
+    while (dirtyDiffAtom) {
+        cleanView(nativeRenderer, dirtyDiffAtom, true);
+        dirtyDiffAtom = dirtyDiffAtom.sibling;
+    }
+    let offset = 0;
+    for (let i = 0; i < commits.length; i++) {
+        const commit = commits[i];
+        while (oldAtom) {
+            if (oldAtom.index <= i) {
+                offset--;
+                oldAtom = oldAtom.sibling;
+                continue;
+            }
+            break;
+        }
+        commit(offset);
+    }
+}
+function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
+    const startDiffAtom = oldAtom;
+    const { jsxNode: newJsxNode, type } = newAtom;
+    const key = newJsxNode.key;
+    let prev = null;
     while (oldAtom) {
-        const startDiffAtom = newAtom;
-        let prev = null;
-        let isUsed = false;
-        while (newAtom) {
-            const newAtomType = newAtom.type;
-            if (oldAtom.type === newAtomType) {
-                if (newAtomType === TextAtomType) {
-                    newAtom.update = updateText(newAtom, oldAtom, nativeRenderer, context);
-                    isUsed = true;
+        if (type === oldAtom.type) {
+            let commit;
+            if (type === TextAtomType) {
+                commit = updateText(newAtom, oldAtom, nativeRenderer, context);
+            }
+            else {
+                const { key: diffKey, type: diffType } = oldAtom.jsxNode;
+                if (diffKey !== key || newJsxNode.type !== diffType) {
+                    prev = oldAtom;
+                    oldAtom = oldAtom.sibling;
+                    continue;
+                }
+                if (type === ComponentAtomType) {
+                    commit = updateComponent(newAtom, oldAtom, nativeRenderer, context);
                 }
                 else {
-                    const { key: newKey, type: newType } = newAtom.jsxNode;
-                    const { key: oldKey, type: oldType } = oldAtom.jsxNode;
-                    if (newType === oldType && newKey === oldKey) {
-                        if (newAtomType === ComponentAtomType) {
-                            newAtom.update = updateComponent(newAtom, oldAtom, deleteOffset, nativeRenderer, context);
-                        }
-                        else {
-                            newAtom.update = updateElement(newAtom, oldAtom, deleteOffset, nativeRenderer, context, parentComponent);
-                        }
-                        isUsed = true;
-                    }
+                    commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
                 }
             }
-            if (isUsed) {
-                const sibling = newAtom.next || newAtom.sibling;
-                if (prev) {
-                    prev.next = sibling;
-                }
-                newAtom = newAtom === startDiffAtom ? sibling : startDiffAtom;
-                break;
+            commits.push(commit);
+            const next = oldAtom.sibling;
+            if (!prev) {
+                return next;
             }
-            prev = newAtom;
-            newAtom = newAtom.next || newAtom.sibling;
-        }
-        if (!isUsed) {
-            newAtom = startDiffAtom;
-            deleteOffset++;
-            cleanView(nativeRenderer, oldAtom, true);
+            prev.sibling = next;
+            return startDiffAtom;
         }
+        prev = oldAtom;
         oldAtom = oldAtom.sibling;
     }
-    function changeOffset() {
-        insertOffset++;
-    }
-    while (updateAtom) {
-        const update = updateAtom.update || createNewView(updateAtom, nativeRenderer, context, parentComponent, changeOffset);
-        update(insertOffset);
-        updateAtom.next = updateAtom.update = null;
-        updateAtom = updateAtom.sibling;
-    }
+    commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
+    return startDiffAtom;
 }
 function createNewView(start, nativeRenderer, context, parentComponent, effect) {
     return function () {
@@ -1443,10 +1451,10 @@ function updateText(newAtom, oldAtom, nativeRenderer, context) {
         context.isParent = false;
     };
 }
-function updateElement(newAtom, oldAtom, deleteOffset, nativeRenderer, context, parentComponent) {
-    return function (insertOffset) {
+function updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent) {
+    return function (offset) {
         newAtom.nativeNode = oldAtom.nativeNode;
-        if (newAtom.index - insertOffset !== oldAtom.index - deleteOffset) {
+        if (newAtom.index - offset !== oldAtom.index) {
             insertNode(nativeRenderer, newAtom, context);
         }
         context.host = newAtom.nativeNode;
@@ -1454,8 +1462,8 @@ function updateElement(newAtom, oldAtom, deleteOffset, nativeRenderer, context,
         updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context);
     };
 }
-function updateComponent(newAtom, reusedAtom, deleteOffset, nativeRenderer, context) {
-    return function (insertOffset) {
+function updateComponent(newAtom, reusedAtom, nativeRenderer, context) {
+    return function (offset) {
         const component = reusedAtom.jsxNode;
         const newProps = newAtom.jsxNode.props;
         const oldTemplate = component.template;
@@ -1465,7 +1473,7 @@ function updateComponent(newAtom, reusedAtom, deleteOffset, nativeRenderer, cont
         componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
         newAtom.jsxNode = component;
         if (newTemplate === oldTemplate) {
-            reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, newAtom.index - insertOffset !== reusedAtom.index - deleteOffset);
+            reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, newAtom.index - offset !== reusedAtom.index);
             updateView(nativeRenderer, component);
             return;
         }
@@ -1560,9 +1568,7 @@ function createChainByJSXNode(type, jsxNode, prevAtom, isSvg) {
         sibling: null,
         child: null,
         nativeNode: null,
-        isSvg,
-        update: null,
-        next: null
+        isSvg
     };
     prevAtom.sibling = atom;
     return atom;

package/bundles/index.js

@@ -1300,9 +1300,7 @@ function createRenderer(component, nativeRenderer) {
                 sibling: null,
                 child: null,
                 nativeNode: null,
-                isSvg: false,
-                update: null,
-                next: null
+                isSvg: false
             };
             componentRender(nativeRenderer, component, atom, {
                 isParent: true,
@@ -1372,61 +1370,71 @@ function applyChanges(nativeRenderer, component) {
     }
 }
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
-    let updateAtom = newAtom;
-    let insertOffset = 0;
-    let deleteOffset = 0;
+    const commits = [];
+    function changeOffset() {
+        offset++;
+    }
+    while (newAtom) {
+        oldAtom = createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, changeOffset);
+        newAtom = newAtom.sibling;
+    }
+    let dirtyDiffAtom = oldAtom;
+    while (dirtyDiffAtom) {
+        cleanView(nativeRenderer, dirtyDiffAtom, true);
+        dirtyDiffAtom = dirtyDiffAtom.sibling;
+    }
+    let offset = 0;
+    for (let i = 0; i < commits.length; i++) {
+        const commit = commits[i];
+        while (oldAtom) {
+            if (oldAtom.index <= i) {
+                offset--;
+                oldAtom = oldAtom.sibling;
+                continue;
+            }
+            break;
+        }
+        commit(offset);
+    }
+}
+function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
+    const startDiffAtom = oldAtom;
+    const { jsxNode: newJsxNode, type } = newAtom;
+    const key = newJsxNode.key;
+    let prev = null;
     while (oldAtom) {
-        const startDiffAtom = newAtom;
-        let prev = null;
-        let isUsed = false;
-        while (newAtom) {
-            const newAtomType = newAtom.type;
-            if (oldAtom.type === newAtomType) {
-                if (newAtomType === TextAtomType) {
-                    newAtom.update = updateText(newAtom, oldAtom, nativeRenderer, context);
-                    isUsed = true;
+        if (type === oldAtom.type) {
+            let commit;
+            if (type === TextAtomType) {
+                commit = updateText(newAtom, oldAtom, nativeRenderer, context);
+            }
+            else {
+                const { key: diffKey, type: diffType } = oldAtom.jsxNode;
+                if (diffKey !== key || newJsxNode.type !== diffType) {
+                    prev = oldAtom;
+                    oldAtom = oldAtom.sibling;
+                    continue;
+                }
+                if (type === ComponentAtomType) {
+                    commit = updateComponent(newAtom, oldAtom, nativeRenderer, context);
                 }
                 else {
-                    const { key: newKey, type: newType } = newAtom.jsxNode;
-                    const { key: oldKey, type: oldType } = oldAtom.jsxNode;
-                    if (newType === oldType && newKey === oldKey) {
-                        if (newAtomType === ComponentAtomType) {
-                            newAtom.update = updateComponent(newAtom, oldAtom, deleteOffset, nativeRenderer, context);
-                        }
-                        else {
-                            newAtom.update = updateElement(newAtom, oldAtom, deleteOffset, nativeRenderer, context, parentComponent);
-                        }
-                        isUsed = true;
-                    }
+                    commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
                 }
             }
-            if (isUsed) {
-                const sibling = newAtom.next || newAtom.sibling;
-                if (prev) {
-                    prev.next = sibling;
-                }
-                newAtom = newAtom === startDiffAtom ? sibling : startDiffAtom;
-                break;
+            commits.push(commit);
+            const next = oldAtom.sibling;
+            if (!prev) {
+                return next;
             }
-            prev = newAtom;
-            newAtom = newAtom.next || newAtom.sibling;
-        }
-        if (!isUsed) {
-            newAtom = startDiffAtom;
-            deleteOffset++;
-            cleanView(nativeRenderer, oldAtom, true);
+            prev.sibling = next;
+            return startDiffAtom;
         }
+        prev = oldAtom;
         oldAtom = oldAtom.sibling;
     }
-    function changeOffset() {
-        insertOffset++;
-    }
-    while (updateAtom) {
-        const update = updateAtom.update || createNewView(updateAtom, nativeRenderer, context, parentComponent, changeOffset);
-        update(insertOffset);
-        updateAtom.next = updateAtom.update = null;
-        updateAtom = updateAtom.sibling;
-    }
+    commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
+    return startDiffAtom;
 }
 function createNewView(start, nativeRenderer, context, parentComponent, effect) {
     return function () {
@@ -1445,10 +1453,10 @@ function updateText(newAtom, oldAtom, nativeRenderer, context) {
         context.isParent = false;
     };
 }
-function updateElement(newAtom, oldAtom, deleteOffset, nativeRenderer, context, parentComponent) {
-    return function (insertOffset) {
+function updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent) {
+    return function (offset) {
         newAtom.nativeNode = oldAtom.nativeNode;
-        if (newAtom.index - insertOffset !== oldAtom.index - deleteOffset) {
+        if (newAtom.index - offset !== oldAtom.index) {
             insertNode(nativeRenderer, newAtom, context);
         }
         context.host = newAtom.nativeNode;
@@ -1456,8 +1464,8 @@ function updateElement(newAtom, oldAtom, deleteOffset, nativeRenderer, context,
         updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context);
     };
 }
-function updateComponent(newAtom, reusedAtom, deleteOffset, nativeRenderer, context) {
-    return function (insertOffset) {
+function updateComponent(newAtom, reusedAtom, nativeRenderer, context) {
+    return function (offset) {
         const component = reusedAtom.jsxNode;
         const newProps = newAtom.jsxNode.props;
         const oldTemplate = component.template;
@@ -1467,7 +1475,7 @@ function updateComponent(newAtom, reusedAtom, deleteOffset, nativeRenderer, cont
         componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
         newAtom.jsxNode = component;
         if (newTemplate === oldTemplate) {
-            reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, newAtom.index - insertOffset !== reusedAtom.index - deleteOffset);
+            reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, newAtom.index - offset !== reusedAtom.index);
             updateView(nativeRenderer, component);
             return;
         }
@@ -1562,9 +1570,7 @@ function createChainByJSXNode(type, jsxNode, prevAtom, isSvg) {
         sibling: null,
         child: null,
         nativeNode: null,
-        isSvg,
-        update: null,
-        next: null
+        isSvg
     };
     prevAtom.sibling = atom;
     return atom;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "1.0.0-alpha.14",
+  "version": "1.0.0-alpha.15",
   "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",
@@ -50,7 +50,7 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "48779d88f1390751bbd06e4c4581bf3dbe613a26",
+  "gitHead": "20910725ab3302fe98b04db6e6f6b44a3f5b64b5",
   "dependencies": {
     "reflect-metadata": "^0.2.2"
   }