@lvce-editor/virtual-dom-worker 1.7.0 → 1.9.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,216 @@ 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/GetKeys/GetKeys.ts
+var isKey = (key) => {
+  return key !== "type" && key !== "childCount";
+};
+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) {
+      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) {
+      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++;
+      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.7.0",
+  "version": "1.9.0",
   "main": "dist/index.js",
   "type": "module",
   "keywords": [],

package/src/parts/AddPatch/AddPatch.ts

@@ -0,0 +1,6 @@
+import type { VirtualDomNode } from '../VirtualDomNode/VirtualDomNode.ts'
+
+export interface AddPatch {
+  readonly type: 6
+  readonly nodes: readonly VirtualDomNode[]
+}

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/AttributePatch/AttributePatch.ts

@@ -1,6 +1,5 @@
 export interface AttributePatch {
   readonly type: 3
-  readonly index: number
   readonly key: string
   readonly value: any
 }

package/src/parts/GetKeys/GetKeys.ts

@@ -0,0 +1,10 @@
+import { VirtualDomNode } from '../VirtualDomNode/VirtualDomNode.ts'
+
+const isKey = (key: string): boolean => {
+  return key !== 'type' && key !== 'childCount'
+}
+
+export const getKeys = (node: VirtualDomNode): readonly string[] => {
+  const keys = Object.keys(node).filter(isKey)
+  return keys
+}

package/src/parts/GetTotalChildCount/GetTotalChildCount.ts

@@ -0,0 +1,16 @@
+import type { VirtualDomNode } from '../VirtualDomNode/VirtualDomNode.ts'
+
+export const getTotalChildCount = (
+  nodes: readonly VirtualDomNode[],
+  index: number,
+): number => {
+  let i = index
+  let pending = 1
+  while (pending) {
+    const node = nodes[i]
+    pending += node.childCount
+    pending--
+    i++
+  }
+  return i - index
+}

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/NavigateChildPatch/NavigateChildPatch.ts

@@ -0,0 +1,4 @@
+export type NavigateChildPatch = {
+  readonly type: 7
+  readonly index: number
+}

package/src/parts/NavigateParentPatch/NavigateParentPatch.ts

@@ -0,0 +1,3 @@
+export type NavigateParentPatch = {
+  readonly type: 8
+}

package/src/parts/NavigateSiblingPatch/NavigateSiblingPatch.ts

@@ -0,0 +1,4 @@
+export type NavigateSiblingPatch = {
+  readonly type: 10
+  readonly index: number
+}

package/src/parts/Patch/Patch.ts

@@ -1,10 +1,22 @@
+import type { AddPatch } from '../AddPatch/AddPatch.ts'
 import type { AttributePatch } from '../AttributePatch/AttributePatch.ts'
+import type { NavigateChildPatch } from '../NavigateChildPatch/NavigateChildPatch.ts'
+import type { NavigateParentPatch } from '../NavigateParentPatch/NavigateParentPatch.ts'
+import type { NavigateSiblingPatch } from '../NavigateSiblingPatch/NavigateSiblingPatch.ts'
+import type { RemoveAttributePatch } from '../RemoveAttributePatch/RemoveAttributePatch.ts'
+import type { RemoveChildPatch } from '../RemoveChildPatch/RemoveChildPatch.ts'
+import type { RemovePatch } from '../RemovePatch/RemovePatch.ts'
 import type { ReplacePatch } from '../ReplacePatch/ReplacePatch.ts'
 import type { TextPatch } from '../TextPatch/TextPatch.ts'
-import type { RemoveAttributePatch } from '../RemoveAttributePatch/RemoveAttributePatch.ts'
 
 export type Patch =
   | TextPatch
   | AttributePatch
   | ReplacePatch
   | RemoveAttributePatch
+  | RemovePatch
+  | AddPatch
+  | NavigateChildPatch
+  | NavigateParentPatch
+  | RemoveChildPatch
+  | NavigateSiblingPatch

package/src/parts/PatchType/PatchType.ts

@@ -2,3 +2,9 @@ export const SetText = 1
 export const Replace = 2
 export const SetAttribute = 3
 export const RemoveAttribute = 4
+export const Remove = 5
+export const Add = 6
+export const NavigateChild = 7
+export const NavigateParent = 8
+export const RemoveChild = 9
+export const NavigateSibling = 10

package/src/parts/RemoveAttributePatch/RemoveAttributePatch.ts

@@ -1,5 +1,4 @@
 export interface RemoveAttributePatch {
   readonly type: 4
-  readonly index: number
   readonly key: string
 }

package/src/parts/RemoveChildPatch/RemoveChildPatch.ts

@@ -0,0 +1,4 @@
+export interface RemoveChildPatch {
+  readonly type: 9
+  readonly index: number
+}

package/src/parts/RemovePatch/RemovePatch.ts

@@ -0,0 +1,4 @@
+export interface RemovePatch {
+  readonly type: 5
+  readonly index: number
+}

package/src/parts/TextPatch/TextPatch.ts

@@ -1,5 +1,4 @@
 export interface TextPatch {
   readonly type: 1
-  readonly index: number
   readonly value: string
 }

package/src/parts/VirtualDomDiff/VirtualDomDiff.ts

@@ -1,5 +1,8 @@
 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'
 
@@ -8,88 +11,177 @@ export const diff = (
   newNodes: readonly VirtualDomNode[],
 ): readonly Patch[] => {
   const patches: Patch[] = []
-
-  // Compare nodes at each index
-  for (let i = 0; i < Math.max(oldNodes.length, newNodes.length); i++) {
+  const pendingPatches: number[] = []
+  let i = 0
+  let j = 0
+  let siblingOffset = 0
+  let maxSiblingOffset = 1
+  const indexStack: number[] = [0, 1]
+  while (i < oldNodes.length && j < newNodes.length) {
     const oldNode = oldNodes[i]
-    const newNode = newNodes[i]
+    const newNode = newNodes[j]
 
-    // Handle node removal
-    if (!newNode) {
-      patches.push({
-        type: PatchType.Replace,
-        index: i,
-        // @ts-ignore
-        node: undefined,
-      })
-      continue
+    if (siblingOffset > 0) {
+      // pendingPatches.push(PatchType.NavigateSibling, siblingOffset)
     }
-
-    // Handle node addition
-    if (!oldNode) {
-      patches.push({
-        type: PatchType.Replace,
-        index: i,
-        node: newNode,
-      })
-      continue
+    if (siblingOffset === maxSiblingOffset) {
+      pendingPatches.push(PatchType.NavigateParent, 0)
+      maxSiblingOffset = indexStack.pop() as number
+      siblingOffset = (indexStack.pop() as number) + 1
     }
 
-    // Different node types - complete replacement
     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)
+
+      patches.push({
+        type: PatchType.RemoveChild,
+        index: siblingOffset,
+      })
       patches.push({
-        type: PatchType.Replace,
-        index: i,
-        node: newNode,
+        type: PatchType.Add,
+        nodes: newNodes.slice(j, j + newTotal),
       })
+      siblingOffset++
+      i += oldTotal
+      j += newTotal
       continue
     }
 
-    // Text node changes
     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,
-          index: i,
           value: newNode.text,
         })
       }
+      i++
+      j++
+      siblingOffset++
       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,
-          index: i,
-          key,
-          value: newNode[key],
-        })
+        hasAttributeChanges = true
+        break
       }
     }
-
-    // Check for removed attributes
     for (const key of oldKeys) {
       if (!(key in newNode)) {
+        hasAttributeChanges = true
+        break
+      }
+    }
+
+    if (hasAttributeChanges) {
+      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) {
+      maxSiblingOffset = oldNode.childCount
+      indexStack.push(0, maxSiblingOffset)
+      pendingPatches.push(PatchType.NavigateChild, 0)
+      i++
+      j++
+      continue
+    }
+
+    if (oldNode.childCount) {
+      ApplyPendingPatches.applyPendingPatches(patches, pendingPatches, 0)
+      for (let k = 0; k < oldNode.childCount; k++) {
         patches.push({
-          type: PatchType.RemoveAttribute,
-          index: i,
-          key,
+          type: PatchType.RemoveChild,
+          index: 0,
         })
       }
+      i += GetTotalChildCount.getTotalChildCount(oldNodes, i)
+      j++
+      continue
+    }
+
+    if (newNode.childCount) {
+      ApplyPendingPatches.applyPendingPatches(patches, pendingPatches, 0)
+      const total = GetTotalChildCount.getTotalChildCount(newNodes, j)
+      patches.push({
+        type: PatchType.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: PatchType.NavigateParent,
+      })
+    }
+    patches.push({
+      type: PatchType.RemoveChild,
+      index: siblingOffset,
+    })
+    i += GetTotalChildCount.getTotalChildCount(oldNodes, i)
+    indexStack.pop()
+    indexStack.pop()
+  }
+
+  while (j < newNodes.length) {
+    if (siblingOffset > 0) {
+      patches.push({
+        type: PatchType.NavigateSibling,
+        index: siblingOffset,
+      })
+      siblingOffset = 0
     }
+    const count = GetTotalChildCount.getTotalChildCount(newNodes, j)
+    patches.push({
+      type: PatchType.Add,
+      nodes: newNodes.slice(j, j + count),
+    })
+    j += count
   }
 
   return patches