@lvce-editor/virtual-dom 5.2.0 → 6.1.0

package/dist/index.d.ts

@@ -37,8 +37,7 @@ export interface RemovePatch {
 	readonly type: 5;
 }
 export interface ReplacePatch {
-	readonly index: number;
-	readonly node: VirtualDomNode;
+	readonly nodes: readonly VirtualDomNode[];
 	readonly type: 2;
 }
 export interface TextPatch {
@@ -46,7 +45,7 @@ export interface TextPatch {
 	readonly value: string;
 }
 export type Patch = TextPatch | AttributePatch | ReplacePatch | RemoveAttributePatch | RemovePatch | AddPatch | NavigateChildPatch | NavigateParentPatch | RemoveChildPatch | NavigateSiblingPatch;
-export declare const applyPatch: ($Element: Node, patches: readonly Patch[]) => void;
+export declare const applyPatch: ($Element: Node, patches: readonly Patch[], eventMap?: Record<string, any>) => void;
 export declare const setComponentUid: ($Element: any, uid: any) => void;
 export declare const getComponentUid: ($Element: any) => number;
 export declare const getComponentUidFromEvent: (event: any) => number;

package/dist/index.js

@@ -682,11 +682,60 @@ const renderInternal = ($Parent, elements, eventMap, newEventMap) => {
   $Parent.append(...stack);
 };
 
+// Map of property names to attribute names for cases where they differ
+const propertyToAttribute = {
+  className: 'class',
+  htmlFor: 'for',
+  ariaActivedescendant: 'aria-activedescendant',
+  ariaControls: 'aria-controls',
+  ariaLabelledBy: 'aria-labelledby',
+  ariaOwns: 'aria-owns',
+  inputType: 'type'
+};
+
+// Style properties that need to be set on element.style
+const styleProperties = new Set(['width', 'height', 'top', 'left', 'marginTop', 'paddingLeft', 'paddingRight']);
+
+// TODO merge this with the setProp function
+
 const setAttribute = ($Element, key, value) => {
-  $Element.setAttribute(key, value);
+  // Handle width/height for images (set as attributes, not style)
+  if ((key === 'width' || key === 'height') && $Element instanceof HTMLImageElement) {
+    // @ts-ignore - dynamic property access
+    $Element[key] = value;
+    return;
+  }
+
+  // Handle style properties
+  if (styleProperties.has(key)) {
+    // @ts-ignore - dynamic style property access
+    $Element.style[key] = typeof value === 'number' ? `${value}px` : value;
+    return;
+  }
+
+  // Handle aria attributes - map camelCase to hyphenated form
+  if (key in propertyToAttribute) {
+    $Element.setAttribute(propertyToAttribute[key], value);
+    return;
+  }
+
+  // Use property assignment for known DOM properties, attribute for others
+  if (key in $Element) {
+    // @ts-ignore - dynamic property access
+    $Element[key] = value;
+  } else {
+    $Element.setAttribute(key, value);
+  }
 };
 const removeAttribute = ($Element, key) => {
-  $Element.removeAttribute(key);
+  // Handle style properties
+  if (styleProperties.has(key)) {
+    // @ts-ignore - dynamic style property access
+    $Element.style[key] = '';
+    return;
+  }
+  const attributeName = propertyToAttribute[key] || key;
+  $Element.removeAttribute(attributeName);
 };
 const setText = ($Element, value) => {
   $Element.nodeValue = value;
@@ -695,11 +744,21 @@ const removeChild = ($Element, index) => {
   const $Child = $Element.children[index];
   $Child.remove();
 };
-const add$1 = ($Element, nodes) => {
-  renderInternal($Element, nodes, {}, {});
+const add$1 = ($Element, nodes, eventMap = {}) => {
+  renderInternal($Element, nodes, eventMap, eventMap);
+};
+const replace = ($Element, nodes, eventMap = {}) => {
+  // Create a temporary container to render the new nodes
+  const $Temp = document.createElement('div');
+  renderInternal($Temp, nodes, eventMap, eventMap);
+  // Replace the current element with the new ones
+  const $NewElement = $Temp.firstElementChild;
+  $Element.replaceWith($NewElement);
+  return $NewElement;
 };
 
 const SetText = 1;
+const Replace = 2;
 const SetAttribute = 3;
 const RemoveAttribute = 4;
 const Add = 6;
@@ -708,12 +767,12 @@ const NavigateParent = 8;
 const RemoveChild = 9;
 const NavigateSibling = 10;
 
-const applyPatch = ($Element, patches) => {
+const applyPatch = ($Element, patches, eventMap = {}) => {
   let $Current = $Element;
   for (const patch of patches) {
     switch (patch.type) {
       case Add:
-        add$1($Current, patch.nodes);
+        add$1($Current, patch.nodes, eventMap);
         break;
       case NavigateChild:
         $Current = $Current.childNodes[patch.index];
@@ -730,6 +789,9 @@ const applyPatch = ($Element, patches) => {
       case RemoveChild:
         removeChild($Current, patch.index);
         break;
+      case Replace:
+        $Current = replace($Current, patch.nodes, eventMap);
+        break;
       case SetAttribute:
         setAttribute($Current, patch.key, patch.value);
         break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/virtual-dom",
-  "version": "5.2.0",
+  "version": "6.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lvce-editor/virtual-dom.git"