@viewfly/core 1.0.0-alpha.16 → 1.0.0-alpha.18

package/bundles/index.d.ts

@@ -523,6 +523,8 @@ interface TextAtom {
     type: typeof TextAtomType;
     index: number;
     jsxNode: string;
+    nodeType: string;
+    key?: null;
     nativeNode: NativeNode | null;
     child: Atom | null;
     sibling: Atom | null;
@@ -531,6 +533,8 @@ interface TextAtom {
 interface ElementAtom {
     type: typeof ElementAtomType;
     index: number;
+    nodeType: string;
+    key?: Key;
     jsxNode: ViewFlyNode<string>;
     nativeNode: NativeNode | null;
     child: Atom | null;
@@ -540,6 +544,8 @@ interface ElementAtom {
 interface ComponentAtom {
     type: typeof ComponentAtomType;
     index: number;
+    nodeType: ComponentSetup;
+    key?: Key;
     jsxNode: ViewFlyNode<ComponentSetup> | Component;
     nativeNode: NativeNode | null;
     child: Atom | null;

package/bundles/index.esm.js

@@ -1294,6 +1294,7 @@ function createRenderer(component, nativeRenderer) {
             const atom = {
                 type: ComponentAtomType,
                 index: 0,
+                nodeType: component.type,
                 jsxNode: component,
                 sibling: null,
                 child: null,
@@ -1397,28 +1398,19 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
 }
 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) {
-        if (type === oldAtom.type) {
+        const newAtomType = newAtom.type;
+        if (oldAtom.type === newAtomType && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
             let commit;
-            if (type === TextAtomType) {
+            if (newAtomType === TextAtomType) {
                 commit = updateText(newAtom, oldAtom, nativeRenderer, context);
             }
+            else if (newAtomType === ComponentAtomType) {
+                commit = updateComponent(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 {
-                    commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
-                }
+                commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
             }
             commits.push(commit);
             const next = oldAtom.sibling;
@@ -1441,12 +1433,12 @@ function createNewView(start, nativeRenderer, context, parentComponent, effect)
     };
 }
 function updateText(newAtom, oldAtom, nativeRenderer, context) {
-    return function () {
+    return function (offset) {
         const nativeNode = oldAtom.nativeNode;
-        if (newAtom.jsxNode !== oldAtom.jsxNode) {
-            nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode, newAtom.isSvg);
-        }
         newAtom.nativeNode = nativeNode;
+        if (newAtom.index - offset !== oldAtom.index) {
+            insertNode(nativeRenderer, newAtom, context);
+        }
         context.host = nativeNode;
         context.isParent = false;
     };
@@ -1560,7 +1552,7 @@ function componentRender(nativeRenderer, component, from, context) {
     }
     component.rendered();
 }
-function createChainByJSXNode(type, jsxNode, prevAtom, isSvg) {
+function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
     const atom = {
         type,
         index: prevAtom.index + 1,
@@ -1568,7 +1560,9 @@ function createChainByJSXNode(type, jsxNode, prevAtom, isSvg) {
         sibling: null,
         child: null,
         nativeNode: null,
-        isSvg
+        isSvg,
+        nodeType,
+        key
     };
     prevAtom.sibling = atom;
     return atom;
@@ -1577,7 +1571,7 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
     const type = typeof jsxNode;
     if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
         if (typeof jsxNode === 'string') {
-            return createChainByJSXNode(TextAtomType, jsxNode, prevAtom, isSvg);
+            return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, isSvg);
         }
         if (Array.isArray(jsxNode)) {
             return createChainByChildren(jsxNode, prevAtom, isSvg);
@@ -1585,13 +1579,14 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
         if (type === 'object') {
             const nodeType = typeof jsxNode.type;
             if (nodeType === 'string') {
-                return createChainByJSXNode(ElementAtomType, jsxNode, prevAtom, isSvg || jsxNode.type === 'svg');
+                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, isSvg || jsxNode.type === 'svg', jsxNode.key);
             }
             else if (nodeType === 'function') {
-                return createChainByJSXNode(ComponentAtomType, jsxNode, prevAtom, isSvg);
+                return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, isSvg, jsxNode.key);
             }
         }
-        return createChainByJSXNode(TextAtomType, String(jsxNode), prevAtom, isSvg);
+        const text = String(jsxNode);
+        return createChainByJSXNode(TextAtomType, text, text, prevAtom, isSvg);
     }
     return prevAtom;
 }

package/bundles/index.js

@@ -1296,6 +1296,7 @@ function createRenderer(component, nativeRenderer) {
             const atom = {
                 type: ComponentAtomType,
                 index: 0,
+                nodeType: component.type,
                 jsxNode: component,
                 sibling: null,
                 child: null,
@@ -1399,28 +1400,19 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
 }
 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) {
-        if (type === oldAtom.type) {
+        const newAtomType = newAtom.type;
+        if (oldAtom.type === newAtomType && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
             let commit;
-            if (type === TextAtomType) {
+            if (newAtomType === TextAtomType) {
                 commit = updateText(newAtom, oldAtom, nativeRenderer, context);
             }
+            else if (newAtomType === ComponentAtomType) {
+                commit = updateComponent(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 {
-                    commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
-                }
+                commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
             }
             commits.push(commit);
             const next = oldAtom.sibling;
@@ -1443,12 +1435,12 @@ function createNewView(start, nativeRenderer, context, parentComponent, effect)
     };
 }
 function updateText(newAtom, oldAtom, nativeRenderer, context) {
-    return function () {
+    return function (offset) {
         const nativeNode = oldAtom.nativeNode;
-        if (newAtom.jsxNode !== oldAtom.jsxNode) {
-            nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode, newAtom.isSvg);
-        }
         newAtom.nativeNode = nativeNode;
+        if (newAtom.index - offset !== oldAtom.index) {
+            insertNode(nativeRenderer, newAtom, context);
+        }
         context.host = nativeNode;
         context.isParent = false;
     };
@@ -1562,7 +1554,7 @@ function componentRender(nativeRenderer, component, from, context) {
     }
     component.rendered();
 }
-function createChainByJSXNode(type, jsxNode, prevAtom, isSvg) {
+function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
     const atom = {
         type,
         index: prevAtom.index + 1,
@@ -1570,7 +1562,9 @@ function createChainByJSXNode(type, jsxNode, prevAtom, isSvg) {
         sibling: null,
         child: null,
         nativeNode: null,
-        isSvg
+        isSvg,
+        nodeType,
+        key
     };
     prevAtom.sibling = atom;
     return atom;
@@ -1579,7 +1573,7 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
     const type = typeof jsxNode;
     if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
         if (typeof jsxNode === 'string') {
-            return createChainByJSXNode(TextAtomType, jsxNode, prevAtom, isSvg);
+            return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, isSvg);
         }
         if (Array.isArray(jsxNode)) {
             return createChainByChildren(jsxNode, prevAtom, isSvg);
@@ -1587,13 +1581,14 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
         if (type === 'object') {
             const nodeType = typeof jsxNode.type;
             if (nodeType === 'string') {
-                return createChainByJSXNode(ElementAtomType, jsxNode, prevAtom, isSvg || jsxNode.type === 'svg');
+                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, isSvg || jsxNode.type === 'svg', jsxNode.key);
             }
             else if (nodeType === 'function') {
-                return createChainByJSXNode(ComponentAtomType, jsxNode, prevAtom, isSvg);
+                return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, isSvg, jsxNode.key);
             }
         }
-        return createChainByJSXNode(TextAtomType, String(jsxNode), prevAtom, isSvg);
+        const text = String(jsxNode);
+        return createChainByJSXNode(TextAtomType, text, text, prevAtom, isSvg);
     }
     return prevAtom;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "1.0.0-alpha.16",
+  "version": "1.0.0-alpha.18",
   "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": "d2c8ce1c906fd80e05e27d677e7f678ccae0e9a1",
+  "gitHead": "b66ca589f7662cd518fc2e5955b3e3ff9de83f94",
   "dependencies": {
     "reflect-metadata": "^0.2.2"
   }