@lvce-editor/virtual-dom-worker 1.8.0 → 1.10.0

package/dist/index.d.ts

@@ -6,3 +6,10 @@ export interface VirtualDomNode {
 export const text: (data: string) => VirtualDomNode
 
 export const mergeClassNames: (...classNames: readonly string[]) => string
+
+export interface Patch {}
+
+export const diff: (
+  oldNodes: readonly VirtualDomNode[],
+  newNodes: readonly VirtualDomNode[],
+) => readonly Patch[]

package/dist/index.js

@@ -130,8 +130,229 @@ var text = (data) => {
     childCount: 0
   };
 };
+
+// src/parts/PatchType/PatchType.ts
+var SetText = 1;
+var SetAttribute = 3;
+var RemoveAttribute = 4;
+var Add = 6;
+var NavigateChild = 7;
+var NavigateParent = 8;
+var RemoveChild = 9;
+var NavigateSibling = 10;
+
+// src/parts/ApplyPendingPatches/ApplyPendingPatches.ts
+var applyPendingPatches = (patches, pendingPatches, skip) => {
+  for (let k = 0; k < pendingPatches.length - skip; k += 2) {
+    const type = pendingPatches[k];
+    const index = pendingPatches[k + 1];
+    if (type === NavigateParent) {
+      patches.push({ type });
+    } else {
+      patches.push({
+        type,
+        index
+      });
+    }
+  }
+  pendingPatches.length = 0;
+};
+
+// src/parts/IsKey/IsKey.ts
+var isKey = (key) => {
+  return key !== "type" && key !== "childCount";
+};
+
+// src/parts/GetKeys/GetKeys.ts
+var getKeys = (node) => {
+  const keys = Object.keys(node).filter(isKey);
+  return keys;
+};
+
+// src/parts/GetTotalChildCount/GetTotalChildCount.ts
+var getTotalChildCount = (nodes, index) => {
+  let i = index;
+  let pending = 1;
+  while (pending) {
+    const node = nodes[i];
+    pending += node.childCount;
+    pending--;
+    i++;
+  }
+  return i - index;
+};
+
+// src/parts/VirtualDomDiff/VirtualDomDiff.ts
+var diff = (oldNodes, newNodes) => {
+  const patches = [];
+  const pendingPatches = [];
+  let i = 0;
+  let j = 0;
+  let siblingOffset = 0;
+  let maxSiblingOffset = 1;
+  const indexStack = [0, 1];
+  while (i < oldNodes.length && j < newNodes.length) {
+    const oldNode = oldNodes[i];
+    const newNode = newNodes[j];
+    if (siblingOffset > 0) {
+    }
+    if (siblingOffset === maxSiblingOffset) {
+      indexStack.pop();
+      indexStack.pop();
+      pendingPatches.push(NavigateParent, 0);
+      maxSiblingOffset = indexStack.pop();
+      siblingOffset = indexStack.pop() + 1;
+    }
+    while (siblingOffset === maxSiblingOffset) {
+      pendingPatches.push(NavigateParent, 0);
+      maxSiblingOffset = indexStack.pop();
+      siblingOffset = indexStack.pop() + 1;
+    }
+    if (oldNode.type !== newNode.type) {
+      let skip = 0;
+      if (pendingPatches.length > 0 && pendingPatches.at(-2) === NavigateChild) {
+        skip = 2;
+      }
+      applyPendingPatches(patches, pendingPatches, skip);
+      const oldTotal = getTotalChildCount(oldNodes, i);
+      const newTotal = getTotalChildCount(newNodes, j);
+      patches.push({
+        type: RemoveChild,
+        index: siblingOffset
+      });
+      patches.push({
+        type: Add,
+        nodes: newNodes.slice(j, j + newTotal)
+      });
+      siblingOffset++;
+      i += oldTotal;
+      j += newTotal;
+      continue;
+    }
+    if (oldNode.type === Text && newNode.type === Text) {
+      if (oldNode.text !== newNode.text) {
+        if (siblingOffset !== 0) {
+          pendingPatches.push(NavigateSibling, siblingOffset);
+        }
+        applyPendingPatches(patches, pendingPatches, 0);
+        patches.push({
+          type: SetText,
+          value: newNode.text
+        });
+      }
+      i++;
+      j++;
+      siblingOffset++;
+      continue;
+    }
+    const oldKeys = getKeys(oldNode);
+    const newKeys = getKeys(newNode);
+    let hasAttributeChanges = false;
+    for (const key of newKeys) {
+      if (oldNode[key] !== newNode[key]) {
+        hasAttributeChanges = true;
+        break;
+      }
+    }
+    for (const key of oldKeys) {
+      if (!(key in newNode)) {
+        hasAttributeChanges = true;
+        break;
+      }
+    }
+    if (hasAttributeChanges) {
+      if (siblingOffset > 0) {
+        pendingPatches.push(NavigateSibling, siblingOffset);
+      }
+      applyPendingPatches(patches, pendingPatches, 0);
+      for (const key of newKeys) {
+        if (oldNode[key] !== newNode[key]) {
+          patches.push({
+            type: SetAttribute,
+            key,
+            value: newNode[key]
+          });
+        }
+      }
+      for (const key of oldKeys) {
+        if (!(key in newNode)) {
+          patches.push({
+            type: RemoveAttribute,
+            key
+          });
+        }
+      }
+    }
+    if (oldNode.childCount && newNode.childCount) {
+      maxSiblingOffset = oldNode.childCount;
+      indexStack.push(0, maxSiblingOffset);
+      pendingPatches.push(NavigateChild, 0);
+      i++;
+      j++;
+      continue;
+    }
+    if (oldNode.childCount) {
+      applyPendingPatches(patches, pendingPatches, 0);
+      for (let k = 0; k < oldNode.childCount; k++) {
+        patches.push({
+          type: RemoveChild,
+          index: 0
+        });
+      }
+      i += getTotalChildCount(oldNodes, i);
+      j++;
+      siblingOffset++;
+      continue;
+    }
+    if (newNode.childCount) {
+      applyPendingPatches(patches, pendingPatches, 0);
+      const total = getTotalChildCount(newNodes, j);
+      patches.push({
+        type: Add,
+        nodes: newNodes.slice(j + 1, j + total)
+      });
+      i++;
+      j += total;
+      continue;
+    }
+    i++;
+    j++;
+    siblingOffset++;
+  }
+  while (i < oldNodes.length) {
+    if (indexStack.length !== 2) {
+      patches.push({
+        type: NavigateParent
+      });
+    }
+    patches.push({
+      type: RemoveChild,
+      index: siblingOffset
+    });
+    i += getTotalChildCount(oldNodes, i);
+    indexStack.pop();
+    indexStack.pop();
+  }
+  while (j < newNodes.length) {
+    if (siblingOffset > 0) {
+      patches.push({
+        type: NavigateSibling,
+        index: siblingOffset
+      });
+      siblingOffset = 0;
+    }
+    const count = getTotalChildCount(newNodes, j);
+    patches.push({
+      type: Add,
+      nodes: newNodes.slice(j, j + count)
+    });
+    j += count;
+  }
+  return patches;
+};
 export {
   VirtualDomElements_exports as VirtualDomElements,
+  diff,
   mergeClassNames,
   text
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/virtual-dom-worker",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "main": "dist/index.js",
   "type": "module",
   "keywords": [],

package/src/parts/ApplyPendingPatches/ApplyPendingPatches.ts

@@ -0,0 +1,22 @@
+import type { Patch } from '../Patch/Patch.ts'
+import * as PatchType from '../PatchType/PatchType.ts'
+
+export const applyPendingPatches = (
+  patches: Patch[],
+  pendingPatches: number[],
+  skip: number,
+): void => {
+  for (let k = 0; k < pendingPatches.length - skip; k += 2) {
+    const type = pendingPatches[k]
+    const index = pendingPatches[k + 1]
+    if (type === PatchType.NavigateParent) {
+      patches.push({ type })
+    } else {
+      patches.push({
+        type,
+        index,
+      } as Patch)
+    }
+  }
+  pendingPatches.length = 0
+}

package/src/parts/GetKeys/GetKeys.ts

@@ -0,0 +1,7 @@
+import * as IsKey from '../IsKey/IsKey.ts'
+import { VirtualDomNode } from '../VirtualDomNode/VirtualDomNode.ts'
+
+export const getKeys = (node: VirtualDomNode): readonly string[] => {
+  const keys = Object.keys(node).filter(IsKey.isKey)
+  return keys
+}

package/src/parts/IsKey/IsKey.ts

@@ -0,0 +1,3 @@
+export const isKey = (key: string): boolean => {
+  return key !== 'type' && key !== 'childCount'
+}

package/src/parts/Main/Main.ts

@@ -1,3 +1,4 @@
 export * from '../MergeClassNames/MergeClassNames.ts'
 export * from '../Text/Text.ts'
+export { diff } from '../VirtualDomDiff/VirtualDomDiff.ts'
 export * as VirtualDomElements from '../VirtualDomElements/VirtualDomElements.ts'

package/src/parts/NavigateParentPatch/NavigateParentPatch.ts

@@ -1,4 +1,3 @@
 export type NavigateParentPatch = {
   readonly type: 8
-  readonly count: number
 }

package/src/parts/VirtualDomDiff/VirtualDomDiff.ts

@@ -1,5 +1,7 @@
 import type { Patch } from '../Patch/Patch.ts'
 import type { VirtualDomNode } from '../VirtualDomNode/VirtualDomNode.ts'
+import * as ApplyPendingPatches from '../ApplyPendingPatches/ApplyPendingPatches.ts'
+import * as GetKeys from '../GetKeys/GetKeys.ts'
 import * as GetTotalChildCount from '../GetTotalChildCount/GetTotalChildCount.ts'
 import * as PatchType from '../PatchType/PatchType.ts'
 import * as VirtualDomElements from '../VirtualDomElements/VirtualDomElements.ts'
@@ -9,51 +11,70 @@ export const diff = (
   newNodes: readonly VirtualDomNode[],
 ): readonly Patch[] => {
   const patches: Patch[] = []
-  let i = 0 // Index for oldNodes
-  let j = 0 // Index for newNodes
+  const pendingPatches: number[] = []
+  let i = 0
+  let j = 0
   let siblingOffset = 0
-
-  const oldNodeCount = oldNodes.length
-  const newNodeCount = newNodes.length
-
-  while (i < oldNodeCount && j < newNodeCount) {
+  let maxSiblingOffset = 1
+  const indexStack: number[] = [0, 1]
+  while (i < oldNodes.length && j < newNodes.length) {
     const oldNode = oldNodes[i]
     const newNode = newNodes[j]
 
+    if (siblingOffset > 0) {
+      // pendingPatches.push(PatchType.NavigateSibling, siblingOffset)
+    }
+
+    // TODO maybe don't have the current element in indexstack
+    if (siblingOffset === maxSiblingOffset) {
+      indexStack.pop()
+      indexStack.pop()
+      pendingPatches.push(PatchType.NavigateParent, 0)
+      maxSiblingOffset = indexStack.pop() as number
+      siblingOffset = (indexStack.pop() as number) + 1
+    }
+
+    while (siblingOffset === maxSiblingOffset) {
+      pendingPatches.push(PatchType.NavigateParent, 0)
+      maxSiblingOffset = indexStack.pop() as number
+      siblingOffset = (indexStack.pop() as number) + 1
+    }
+
     if (oldNode.type !== newNode.type) {
+      let skip = 0
+      if (
+        pendingPatches.length > 0 &&
+        pendingPatches.at(-2) === PatchType.NavigateChild
+      ) {
+        skip = 2
+      }
+      ApplyPendingPatches.applyPendingPatches(patches, pendingPatches, skip)
       const oldTotal = GetTotalChildCount.getTotalChildCount(oldNodes, i)
       const newTotal = GetTotalChildCount.getTotalChildCount(newNodes, j)
-      const last = patches.at(-1)
-      if (last && last.type === PatchType.NavigateChild) {
-        patches.pop()
-      }
+
       patches.push({
         type: PatchType.RemoveChild,
-        index: 0,
+        index: siblingOffset,
       })
       patches.push({
         type: PatchType.Add,
         nodes: newNodes.slice(j, j + newTotal),
       })
+      siblingOffset++
       i += oldTotal
       j += newTotal
       continue
     }
 
-    if (siblingOffset > 0) {
-      patches.push({
-        type: PatchType.NavigateSibling,
-        index: siblingOffset,
-      })
-      siblingOffset = 0
-    }
-
-    // text node
     if (
       oldNode.type === VirtualDomElements.Text &&
       newNode.type === VirtualDomElements.Text
     ) {
       if (oldNode.text !== newNode.text) {
+        if (siblingOffset !== 0) {
+          pendingPatches.push(PatchType.NavigateSibling, siblingOffset)
+        }
+        ApplyPendingPatches.applyPendingPatches(patches, pendingPatches, 0)
         patches.push({
           type: PatchType.SetText,
           value: newNode.text,
@@ -65,61 +86,72 @@ export const diff = (
       continue
     }
 
-    // Attribute changes
-    const oldKeys = Object.keys(oldNode).filter(
-      (key) => key !== 'type' && key !== 'childCount',
-    )
-    const newKeys = Object.keys(newNode).filter(
-      (key) => key !== 'type' && key !== 'childCount',
-    )
-
-    // Check for changed or added attributes
+    const oldKeys = GetKeys.getKeys(oldNode)
+    const newKeys = GetKeys.getKeys(newNode)
+    let hasAttributeChanges = false
     for (const key of newKeys) {
       if (oldNode[key] !== newNode[key]) {
-        patches.push({
-          type: PatchType.SetAttribute,
-          key,
-          value: newNode[key],
-        })
+        hasAttributeChanges = true
+        break
       }
     }
-
-    // Check for removed attributes
     for (const key of oldKeys) {
       if (!(key in newNode)) {
-        patches.push({
-          type: PatchType.RemoveAttribute,
-          key,
-        })
+        hasAttributeChanges = true
+        break
+      }
+    }
+
+    if (hasAttributeChanges) {
+      if (siblingOffset > 0) {
+        pendingPatches.push(PatchType.NavigateSibling, siblingOffset)
+      }
+      ApplyPendingPatches.applyPendingPatches(patches, pendingPatches, 0)
+
+      for (const key of newKeys) {
+        if (oldNode[key] !== newNode[key]) {
+          patches.push({
+            type: PatchType.SetAttribute,
+            key,
+            value: newNode[key],
+          })
+        }
+      }
+      for (const key of oldKeys) {
+        if (!(key in newNode)) {
+          patches.push({
+            type: PatchType.RemoveAttribute,
+            key,
+          })
+        }
       }
     }
 
     if (oldNode.childCount && newNode.childCount) {
-      patches.push({
-        type: PatchType.NavigateChild,
-        index: 0,
-      })
+      maxSiblingOffset = oldNode.childCount
+      indexStack.push(0, maxSiblingOffset)
+      pendingPatches.push(PatchType.NavigateChild, 0)
       i++
       j++
       continue
     }
 
     if (oldNode.childCount) {
-      const total = GetTotalChildCount.getTotalChildCount(oldNodes, i)
-      // const last = patches.at(-1)
-      // if (last && last.type === PatchType.NavigateChild) {
-      //   patches.pop()
-      // }
-      patches.push({
-        type: PatchType.RemoveChild,
-        index: 0,
-      })
-      i += total
+      ApplyPendingPatches.applyPendingPatches(patches, pendingPatches, 0)
+      for (let k = 0; k < oldNode.childCount; k++) {
+        patches.push({
+          type: PatchType.RemoveChild,
+          index: 0,
+        })
+      }
+      i += GetTotalChildCount.getTotalChildCount(oldNodes, i)
       j++
+      siblingOffset++
       continue
     }
 
     if (newNode.childCount) {
+      ApplyPendingPatches.applyPendingPatches(patches, pendingPatches, 0)
       const total = GetTotalChildCount.getTotalChildCount(newNodes, j)
       patches.push({
         type: PatchType.Add,
@@ -135,23 +167,21 @@ export const diff = (
     siblingOffset++
   }
 
-  // Handle remaining old nodes
   while (i < oldNodes.length) {
-    if (siblingOffset > 0) {
+    if (indexStack.length !== 2) {
       patches.push({
-        type: PatchType.NavigateSibling,
-        index: siblingOffset,
+        type: PatchType.NavigateParent,
       })
-      siblingOffset = 0
     }
     patches.push({
       type: PatchType.RemoveChild,
-      index: 0,
+      index: siblingOffset,
     })
     i += GetTotalChildCount.getTotalChildCount(oldNodes, i)
+    indexStack.pop()
+    indexStack.pop()
   }
 
-  // Handle remaining new nodes
   while (j < newNodes.length) {
     if (siblingOffset > 0) {
       patches.push({