@lvce-editor/virtual-dom 1.7.0 → 1.9.0

package/dist/index.d.ts

@@ -22,3 +22,8 @@ export const rememberFocus: (
 ) => void
 
 export const registerEventListeners: any
+
+export const applyPatch: (
+  $Element: HTMLElement,
+  patches: readonly any[],
+) => void

package/dist/index.js

@@ -1,90 +1,3 @@
-// src/parts/UidSymbol/UidSymbol.ts
-var uidSymbol = Symbol("uid");
-
-// src/parts/GetUidTarget/GetUidTarget.ts
-var getUidTarget = ($Element) => {
-  while ($Element) {
-    if ($Element[uidSymbol]) {
-      return $Element;
-    }
-    $Element = $Element.parentNode;
-  }
-  return void 0;
-};
-
-// src/parts/ComponentUid/ComponentUid.ts
-var setComponentUid = ($Element, uid) => {
-  $Element[uidSymbol] = uid;
-};
-var getComponentUid = ($Element) => {
-  const $Target = getUidTarget($Element);
-  if (!$Target) {
-    return 0;
-  }
-  return $Target[uidSymbol];
-};
-var getComponentUidFromEvent = (event) => {
-  const { target, currentTarget } = event;
-  return getComponentUid(currentTarget || target);
-};
-
-// src/parts/IpcState/IpcState.ts
-var state = {
-  ipc: void 0
-};
-var getIpc = () => {
-  return state.ipc;
-};
-var setIpc = (value) => {
-  state.ipc = value;
-};
-
-// src/parts/NameAnonymousFunction/NameAnonymousFunction.ts
-var nameAnonymousFunction = (fn, name) => {
-  Object.defineProperty(fn, "name", {
-    value: name
-  });
-};
-
-// src/parts/RegisterEventListeners/RegisterEventListeners.ts
-var listeners = /* @__PURE__ */ Object.create(null);
-var getArgs = (params, event) => {
-  return [...params];
-};
-var createFn = (info) => {
-  const fn = (event) => {
-    if (info.preventDefault) {
-      event.preventDefault(event);
-    }
-    const uid = getComponentUidFromEvent(event);
-    const args = getArgs(info.params, event);
-    if (args.length === 0) {
-      return;
-    }
-    const ipc = getIpc();
-    ipc.send("Viewlet.executeViewletCommand", uid, ...args);
-  };
-  nameAnonymousFunction(fn, info.name);
-  return fn;
-};
-var registerEventListeners = (id, eventListeners) => {
-  const map = /* @__PURE__ */ Object.create(null);
-  for (const info of eventListeners) {
-    const fn = createFn(info);
-    map[info.name] = fn;
-  }
-  listeners[id] = map;
-};
-var getEventListenerMap = (id) => {
-  const map = listeners[id];
-  return map;
-};
-
-// src/parts/ClearNode/ClearNode.ts
-var clearNode = ($Node) => {
-  $Node.textContent = "";
-};
-
 // src/parts/ElementTags/ElementTags.ts
 var Audio = "audio";
 var Button = "button";
@@ -314,6 +227,47 @@ var getEventListenerOptions = (eventName) => {
   }
 };
 
+// src/parts/UidSymbol/UidSymbol.ts
+var uidSymbol = Symbol("uid");
+
+// src/parts/GetUidTarget/GetUidTarget.ts
+var getUidTarget = ($Element) => {
+  while ($Element) {
+    if ($Element[uidSymbol]) {
+      return $Element;
+    }
+    $Element = $Element.parentNode;
+  }
+  return void 0;
+};
+
+// src/parts/ComponentUid/ComponentUid.ts
+var setComponentUid = ($Element, uid) => {
+  $Element[uidSymbol] = uid;
+};
+var getComponentUid = ($Element) => {
+  const $Target = getUidTarget($Element);
+  if (!$Target) {
+    return 0;
+  }
+  return $Target[uidSymbol];
+};
+var getComponentUidFromEvent = (event) => {
+  const { target, currentTarget } = event;
+  return getComponentUid(currentTarget || target);
+};
+
+// src/parts/IpcState/IpcState.ts
+var state = {
+  ipc: void 0
+};
+var getIpc = () => {
+  return state.ipc;
+};
+var setIpc = (value) => {
+  state.ipc = value;
+};
+
 // src/parts/ListenerCache/ListenerCache.ts
 var cache = /* @__PURE__ */ new Map();
 var has = (listener) => {
@@ -326,6 +280,13 @@ var get = (listener) => {
   return cache.get(listener);
 };
 
+// src/parts/NameAnonymousFunction/NameAnonymousFunction.ts
+var nameAnonymousFunction = (fn, name) => {
+  Object.defineProperty(fn, "name", {
+    value: name
+  });
+};
+
 // src/parts/GetWrappedListener/GetWrappedListener.ts
 var getWrappedListener = (listener, returnValue) => {
   if (!returnValue) {
@@ -500,6 +461,115 @@ var renderInternal2 = ($Parent, elements, eventMap, newEventMap) => {
   $Parent.append(...stack);
 };
 
+// src/parts/PatchFunctions/PatchFunctions.ts
+var setAttribute = ($Element, key, value) => {
+  $Element.setAttribute(key, value);
+};
+var removeAttribute = ($Element, key) => {
+  $Element.removeAttribute(key);
+};
+var setText = ($Element, value) => {
+  $Element.nodeValue = value;
+};
+var removeChild = ($Element, index) => {
+  console.log("el", $Element.className);
+  console.log("index", index);
+  console.log("ch", $Element.children.length);
+  const $Child = $Element.children[index];
+  $Child.remove();
+};
+var add = ($Element, nodes) => {
+  renderInternal2($Element, nodes, {}, {});
+};
+
+// 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/ApplyPatch/ApplyPatch.ts
+var applyPatch = ($Element, patches) => {
+  let $Current = $Element;
+  for (const patch of patches) {
+    switch (patch.type) {
+      case SetAttribute:
+        setAttribute(
+          $Current,
+          patch.key,
+          patch.value
+        );
+        break;
+      case RemoveAttribute:
+        removeAttribute($Current, patch.key);
+        break;
+      case SetText:
+        setText($Current, patch.value);
+        break;
+      case RemoveChild:
+        removeChild($Current, patch.index);
+        break;
+      case Add:
+        add($Current, patch.nodes);
+        break;
+      case NavigateSibling:
+        $Current = $Current.parentNode.childNodes[patch.index];
+        break;
+      case NavigateChild:
+        $Current = $Current.childNodes[patch.index];
+        break;
+      case NavigateParent:
+        $Current = $Current.parentNode;
+        break;
+      default:
+        break;
+    }
+  }
+};
+
+// src/parts/RegisterEventListeners/RegisterEventListeners.ts
+var listeners = /* @__PURE__ */ Object.create(null);
+var getArgs = (params, event) => {
+  return [...params];
+};
+var createFn = (info) => {
+  const fn = (event) => {
+    if (info.preventDefault) {
+      event.preventDefault(event);
+    }
+    const uid = getComponentUidFromEvent(event);
+    const args = getArgs(info.params, event);
+    if (args.length === 0) {
+      return;
+    }
+    const ipc = getIpc();
+    ipc.send("Viewlet.executeViewletCommand", uid, ...args);
+  };
+  nameAnonymousFunction(fn, info.name);
+  return fn;
+};
+var registerEventListeners = (id, eventListeners) => {
+  const map = /* @__PURE__ */ Object.create(null);
+  for (const info of eventListeners) {
+    const fn = createFn(info);
+    map[info.name] = fn;
+  }
+  listeners[id] = map;
+};
+var getEventListenerMap = (id) => {
+  const map = listeners[id];
+  return map;
+};
+
+// src/parts/ClearNode/ClearNode.ts
+var clearNode = ($Node) => {
+  $Node.textContent = "";
+};
+
 // src/parts/VirtualDom/VirtualDom.ts
 var renderInto = ($Parent, dom, eventMap = {}) => {
   clearNode($Parent);
@@ -562,6 +632,7 @@ var rememberFocus = ($Viewlet, dom, eventMap, uid = 0) => {
   return $Viewlet;
 };
 export {
+  applyPatch,
   getComponentUid,
   getComponentUidFromEvent,
   registerEventListeners,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/virtual-dom",
-  "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/ApplyPatch/ApplyPatch.ts

@@ -0,0 +1,41 @@
+import { Patch } from '../Patch/Patch.ts'
+import * as PatchFunctions from '../PatchFunctions/PatchFunctions.ts'
+import * as PatchType from '../PatchType/PatchType.ts'
+
+export const applyPatch = ($Element: Node, patches: readonly Patch[]): void => {
+  let $Current = $Element
+  for (const patch of patches) {
+    switch (patch.type) {
+      case PatchType.SetAttribute:
+        PatchFunctions.setAttribute(
+          $Current as HTMLElement,
+          patch.key,
+          patch.value,
+        )
+        break
+      case PatchType.RemoveAttribute:
+        PatchFunctions.removeAttribute($Current as HTMLElement, patch.key)
+        break
+      case PatchType.SetText:
+        PatchFunctions.setText($Current as Text, patch.value)
+        break
+      case PatchType.RemoveChild:
+        PatchFunctions.removeChild($Current as HTMLElement, patch.index)
+        break
+      case PatchType.Add:
+        PatchFunctions.add($Current as HTMLElement, patch.nodes)
+        break
+      case PatchType.NavigateSibling:
+        $Current = ($Current.parentNode as HTMLElement).childNodes[patch.index]
+        break
+      case PatchType.NavigateChild:
+        $Current = ($Current as HTMLElement).childNodes[patch.index]
+        break
+      case PatchType.NavigateParent:
+        $Current = $Current.parentNode as HTMLElement
+        break
+      default:
+        break
+    }
+  }
+}

package/src/parts/AttributePatch/AttributePatch.ts

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

package/src/parts/Main/Main.ts

@@ -1,3 +1,4 @@
+export { applyPatch } from '../ApplyPatch/ApplyPatch.ts'
 export {
   getComponentUid,
   getComponentUidFromEvent,

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

@@ -0,0 +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'
+
+export type Patch =
+  | TextPatch
+  | AttributePatch
+  | ReplacePatch
+  | RemoveAttributePatch
+  | RemovePatch
+  | AddPatch
+  | NavigateChildPatch
+  | NavigateParentPatch
+  | RemoveChildPatch
+  | NavigateSiblingPatch

package/src/parts/PatchFunctions/PatchFunctions.ts

@@ -0,0 +1,33 @@
+import * as RenderInternal from '../RenderInternal/RenderInternal.ts'
+import { VirtualDomNode } from '../VirtualDomNode/VirtualDomNode.ts'
+
+export const setAttribute = (
+  $Element: HTMLElement,
+  key: string,
+  value: any,
+): void => {
+  $Element.setAttribute(key, value)
+}
+
+export const removeAttribute = ($Element: HTMLElement, key: string): void => {
+  $Element.removeAttribute(key)
+}
+
+export const setText = ($Element: Text, value: string): void => {
+  $Element.nodeValue = value
+}
+
+export const removeChild = ($Element: HTMLElement, index: number): void => {
+  console.log('el', $Element.className)
+  console.log('index', index)
+  console.log('ch', $Element.children.length)
+  const $Child = $Element.children[index]
+  $Child.remove()
+}
+
+export const add = (
+  $Element: HTMLElement,
+  nodes: readonly VirtualDomNode[],
+): void => {
+  RenderInternal.renderInternal($Element, nodes, {}, {})
+}

package/src/parts/PatchType/PatchType.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,5 @@
+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/RenderInternal/RenderInternal.ts

@@ -2,7 +2,7 @@ import * as VirtualDomElement from '../VirtualDomElement/VirtualDomElement.ts'
 
 export const renderInternal = (
   $Parent: HTMLElement,
-  elements: any[],
+  elements: readonly any[],
   eventMap: any,
   newEventMap?: any,
 ) => {

package/src/parts/ReplacePatch/ReplacePatch.ts

@@ -0,0 +1,7 @@
+import type { VirtualDomNode } from '../VirtualDomNode/VirtualDomNode.ts'
+
+export interface ReplacePatch {
+  readonly type: 2
+  readonly index: number
+  readonly node: VirtualDomNode
+}

package/src/parts/TextPatch/TextPatch.ts

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

package/src/parts/VirtualDomNode/VirtualDomNode.ts

@@ -0,0 +1,4 @@
+export interface VirtualDomNode {
+  readonly type: number
+  readonly [key: string]: any
+}