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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/virtual-dom-worker",
-  "version": "1.6.0",
+  "version": "1.8.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/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/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/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,4 @@
+export type NavigateParentPatch = {
+  readonly type: 8
+  readonly count: number
+}

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,6 @@
 import type { Patch } from '../Patch/Patch.ts'
 import type { VirtualDomNode } from '../VirtualDomNode/VirtualDomNode.ts'
+import * as GetTotalChildCount from '../GetTotalChildCount/GetTotalChildCount.ts'
 import * as PatchType from '../PatchType/PatchType.ts'
 import * as VirtualDomElements from '../VirtualDomElements/VirtualDomElements.ts'
 
@@ -8,44 +9,46 @@ export const diff = (
   newNodes: readonly VirtualDomNode[],
 ): readonly Patch[] => {
   const patches: Patch[] = []
+  let i = 0 // Index for oldNodes
+  let j = 0 // Index for newNodes
+  let siblingOffset = 0
 
-  // Compare nodes at each index
-  for (let i = 0; i < Math.max(oldNodes.length, newNodes.length); i++) {
+  const oldNodeCount = oldNodes.length
+  const newNodeCount = newNodes.length
+
+  while (i < oldNodeCount && j < newNodeCount) {
     const oldNode = oldNodes[i]
-    const newNode = newNodes[i]
+    const newNode = newNodes[j]
 
-    // Handle node removal
-    if (!newNode) {
+    if (oldNode.type !== newNode.type) {
+      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.Replace,
-        index: i,
-        // @ts-ignore
-        node: undefined,
+        type: PatchType.RemoveChild,
+        index: 0,
       })
-      continue
-    }
-
-    // Handle node addition
-    if (!oldNode) {
       patches.push({
-        type: PatchType.Replace,
-        index: i,
-        node: newNode,
+        type: PatchType.Add,
+        nodes: newNodes.slice(j, j + newTotal),
       })
+      i += oldTotal
+      j += newTotal
       continue
     }
 
-    // Different node types - complete replacement
-    if (oldNode.type !== newNode.type) {
+    if (siblingOffset > 0) {
       patches.push({
-        type: PatchType.Replace,
-        index: i,
-        node: newNode,
+        type: PatchType.NavigateSibling,
+        index: siblingOffset,
       })
-      continue
+      siblingOffset = 0
     }
 
-    // Text node changes
+    // text node
     if (
       oldNode.type === VirtualDomElements.Text &&
       newNode.type === VirtualDomElements.Text
@@ -53,10 +56,12 @@ export const diff = (
       if (oldNode.text !== newNode.text) {
         patches.push({
           type: PatchType.SetText,
-          index: i,
           value: newNode.text,
         })
       }
+      i++
+      j++
+      siblingOffset++
       continue
     }
 
@@ -73,7 +78,6 @@ export const diff = (
       if (oldNode[key] !== newNode[key]) {
         patches.push({
           type: PatchType.SetAttribute,
-          index: i,
           key,
           value: newNode[key],
         })
@@ -85,11 +89,83 @@ export const diff = (
       if (!(key in newNode)) {
         patches.push({
           type: PatchType.RemoveAttribute,
-          index: i,
           key,
         })
       }
     }
+
+    if (oldNode.childCount && newNode.childCount) {
+      patches.push({
+        type: PatchType.NavigateChild,
+        index: 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
+      j++
+      continue
+    }
+
+    if (newNode.childCount) {
+      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++
+  }
+
+  // Handle remaining old nodes
+  while (i < oldNodes.length) {
+    if (siblingOffset > 0) {
+      patches.push({
+        type: PatchType.NavigateSibling,
+        index: siblingOffset,
+      })
+      siblingOffset = 0
+    }
+    patches.push({
+      type: PatchType.RemoveChild,
+      index: 0,
+    })
+    i += GetTotalChildCount.getTotalChildCount(oldNodes, i)
+  }
+
+  // Handle remaining new nodes
+  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