@lvce-editor/virtual-dom 5.2.0 → 6.0.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 {

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;
@@ -698,8 +747,18 @@ const removeChild = ($Element, index) => {
 const add$1 = ($Element, nodes) => {
   renderInternal($Element, nodes, {}, {});
 };
+const replace = ($Element, nodes) => {
+  // Create a temporary container to render the new nodes
+  const $Temp = document.createElement('div');
+  renderInternal($Temp, nodes, {}, {});
+  // 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;
@@ -730,6 +789,9 @@ const applyPatch = ($Element, patches) => {
       case RemoveChild:
         removeChild($Current, patch.index);
         break;
+      case Replace:
+        $Current = replace($Current, patch.nodes);
+        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.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lvce-editor/virtual-dom.git"