@lvce-editor/virtual-dom 1.6.0 → 1.8.0

package/dist/index.js

@@ -1,89 +1,11 @@
-// 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/PatchType/PatchType.ts
+var SetText = 1;
+var SetAttribute = 3;
+var RemoveAttribute = 4;
+var Add = 6;
+var NavigateChild = 7;
+var RemoveChild = 9;
+var NavigateSibling = 10;
 
 // src/parts/ElementTags/ElementTags.ts
 var Audio = "audio";
@@ -314,6 +236,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 +289,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 +470,99 @@ 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) => {
+  const $Child = $Element.children[index];
+  $Child.remove();
+};
+var add = ($Element, nodes) => {
+  renderInternal2($Element, nodes, {}, {});
+};
+
+// 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;
+      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);
@@ -520,7 +583,10 @@ var rememberFocus = ($Viewlet, dom, eventMap, uid = 0) => {
   const oldTop = $Viewlet.style.top;
   const oldWidth = $Viewlet.style.width;
   const oldHeight = $Viewlet.style.height;
-  const focused = document.activeElement.getAttribute("name");
+  const activeElement = document.activeElement;
+  const isTreeFocused = activeElement?.getAttribute("role") === "tree";
+  const isRootTree = $Viewlet.getAttribute("role") === "tree" && activeElement === $Viewlet;
+  const focused = activeElement?.getAttribute("name");
   const $$Inputs = queryInputs($Viewlet);
   const inputMap = /* @__PURE__ */ Object.create(null);
   for (const $Input of $$Inputs) {
@@ -539,7 +605,14 @@ var rememberFocus = ($Viewlet, dom, eventMap, uid = 0) => {
   for (const $Input of $$NewInputs) {
     $Input.value = inputMap[$Input.name] || $Input.value || "";
   }
-  if (focused) {
+  if (isRootTree) {
+    $Viewlet.focus();
+  } else if (isTreeFocused) {
+    const $Tree = $Viewlet.querySelector('[role="tree"]');
+    if ($Tree) {
+      $Tree.focus();
+    }
+  } else if (focused) {
     const $Focused = $Viewlet.querySelector(`[name="${focused}"]`);
     if ($Focused) {
       $Focused.focus();
@@ -552,6 +625,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.6.0",
+  "version": "1.8.0",
   "main": "dist/index.js",
   "type": "module",
   "keywords": [],

package/src/parts/AddPatch/AddPatch.ts

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

package/src/parts/ApplyPatch/ApplyPatch.ts

@@ -0,0 +1,38 @@
+import { Patch } from '../Patch/Patch.ts'
+import * as PatchType from '../PatchType/PatchType.ts'
+import * as PatchFunctions from '../PatchFunctions/PatchFunctions.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
+      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,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

@@ -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,30 @@
+import { VirtualDomNode } from '../VirtualDomNode/VirtualDomNode.ts'
+import * as RenderInternal from '../RenderInternal/RenderInternal.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 => {
+  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/RememberFocus/RememberFocus.ts

@@ -12,20 +12,25 @@ export const rememberFocus = (
   eventMap: any,
   uid = 0,
 ) => {
-  // TODO replace this workaround with
-  // virtual dom diffing
   const oldLeft = $Viewlet.style.left
   const oldTop = $Viewlet.style.top
   const oldWidth = $Viewlet.style.width
   const oldHeight = $Viewlet.style.height
-  // @ts-expect-error
-  const focused = document.activeElement.getAttribute('name')
+
+  const activeElement = document.activeElement
+  const isTreeFocused = activeElement?.getAttribute('role') === 'tree'
+  const isRootTree =
+    $Viewlet.getAttribute('role') === 'tree' && activeElement === $Viewlet
+
+  const focused = activeElement?.getAttribute('name')
+
   const $$Inputs = queryInputs($Viewlet)
   const inputMap = Object.create(null)
   for (const $Input of $$Inputs) {
     // @ts-ignore
     inputMap[$Input.name] = $Input.value
   }
+
   if (uid) {
     const newEventMap = RegisterEventListeners.getEventListenerMap(uid)
     const $New = VirtualDom.render(dom, eventMap, newEventMap).firstChild
@@ -37,12 +42,22 @@ export const rememberFocus = (
   } else {
     VirtualDom.renderInto($Viewlet, dom, eventMap)
   }
+
   const $$NewInputs = queryInputs($Viewlet)
   for (const $Input of $$NewInputs) {
     // @ts-ignore
     $Input.value = inputMap[$Input.name] || $Input.value || ''
   }
-  if (focused) {
+
+  if (isRootTree) {
+    $Viewlet.focus()
+  } else if (isTreeFocused) {
+    const $Tree = $Viewlet.querySelector('[role="tree"]')
+    if ($Tree) {
+      // @ts-ignore
+      $Tree.focus()
+    }
+  } else if (focused) {
     const $Focused = $Viewlet.querySelector(`[name="${focused}"]`)
     if ($Focused) {
       // @ts-ignore

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
+}