@lvce-editor/renderer-process 20.3.0 → 21.0.0

package/dist/rendererProcessMain.js

@@ -180,228 +180,228 @@ const downloadFile = (fileName, url) => {
   a.click();
 };
 
-const Audio$1$1 = 'audio';
-const Button$1 = 'button';
-const Col$1 = 'col';
-const ColGroup$1 = 'colgroup';
-const Del$1 = 'del';
-const Div$1 = 'div';
-const H1$1 = 'h1';
-const H2$1 = 'h2';
-const H3$1 = 'h3';
-const H4$1 = 'h4';
-const H5$1 = 'h5';
-const H6$1 = 'h6';
-const I$1 = 'i';
-const Img$1 = 'img';
-const Input$1 = 'input';
-const Ins$1 = 'ins';
-const Kbd$1 = 'kbd';
-const Span$1 = 'span';
-const Table$1 = 'table';
-const TBody$1 = 'tbody';
-const Td$1 = 'td';
-const Th$1 = 'th';
-const THead$1 = 'thead';
-const Tr$1 = 'tr';
-const Article$1 = 'article';
-const Aside$1 = 'aside';
-const Footer$1 = 'footer';
-const Header$1 = 'header';
-const Nav$1 = 'nav';
-const Section$1 = 'section';
-const Search$1 = 'search';
-const Dd$1 = 'dd';
-const Dl$1 = 'dl';
-const Figcaption$1 = 'figcaption';
-const Figure$1 = 'figure';
-const Hr$1 = 'hr';
-const Li$1 = 'li';
-const Ol$1 = 'ol';
-const P$1 = 'p';
-const Pre$1 = 'pre';
-const A$1 = 'a';
-const Br$1 = 'br';
-const Cite$1 = 'cite';
-const Data$1 = 'data';
-const Time$1 = 'time';
-const Tfoot$1 = 'tfoot';
-const Ul$1 = 'ul';
-const Video$1 = 'video';
-const TextArea$1 = 'textarea';
-const Select$1 = 'select';
-const Option$1 = 'option';
-const Code$1 = 'code';
-const Label$1 = 'label';
-const Dt$1 = 'dt';
-const Audio$2 = 0;
-const Button = 1;
-const Col = 2;
-const ColGroup = 3;
-const Div = 4;
-const H1 = 5;
-const Input = 6;
-const Kbd = 7;
-const Span = 8;
-const Table = 9;
-const TBody = 10;
-const Td = 11;
+const Audio$2 = 'audio';
+const Button$2 = 'button';
+const Col$2 = 'col';
+const ColGroup$2 = 'colgroup';
+const Del$2 = 'del';
+const Div$2 = 'div';
+const H1$2 = 'h1';
+const H2$2 = 'h2';
+const H3$2 = 'h3';
+const H4$2 = 'h4';
+const H5$2 = 'h5';
+const H6$2 = 'h6';
+const I$2 = 'i';
+const Img$2 = 'img';
+const Input$2 = 'input';
+const Ins$2 = 'ins';
+const Kbd$2 = 'kbd';
+const Span$2 = 'span';
+const Table$2 = 'table';
+const TBody$2 = 'tbody';
+const Td$2 = 'td';
+const Th$2 = 'th';
+const THead$2 = 'thead';
+const Tr$2 = 'tr';
+const Article$2 = 'article';
+const Aside$2 = 'aside';
+const Footer$2 = 'footer';
+const Header$2 = 'header';
+const Nav$2 = 'nav';
+const Section$2 = 'section';
+const Search$2 = 'search';
+const Dd$2 = 'dd';
+const Dl$2 = 'dl';
+const Figcaption$2 = 'figcaption';
+const Figure$2 = 'figure';
+const Hr$2 = 'hr';
+const Li$2 = 'li';
+const Ol$2 = 'ol';
+const P$2 = 'p';
+const Pre$2 = 'pre';
+const A$2 = 'a';
+const Br$2 = 'br';
+const Cite$2 = 'cite';
+const Data$2 = 'data';
+const Time$2 = 'time';
+const Tfoot$2 = 'tfoot';
+const Ul$2 = 'ul';
+const Video$2 = 'video';
+const TextArea$2 = 'textarea';
+const Select$2 = 'select';
+const Option$2 = 'option';
+const Code$2 = 'code';
+const Label$2 = 'label';
+const Dt$2 = 'dt';
+const Audio$1$1 = 0;
+const Button$1 = 1;
+const Col$1 = 2;
+const ColGroup$1 = 3;
+const Div$1 = 4;
+const H1$1 = 5;
+const Input$1 = 6;
+const Kbd$1 = 7;
+const Span$1 = 8;
+const Table$1 = 9;
+const TBody$1 = 10;
+const Td$1 = 11;
 const Text$1 = 12;
-const Th = 13;
-const THead = 14;
-const Tr = 15;
-const I = 16;
-const Img = 17;
-const Ins = 20;
-const Del = 21;
-const H2 = 22;
-const H3 = 23;
-const H4 = 24;
-const H5 = 25;
-const H6 = 26;
-const Article = 27;
-const Aside = 28;
-const Footer = 29;
-const Header = 30;
-const Nav = 40;
-const Section = 41;
-const Search = 42;
-const Dd = 43;
-const Dl = 44;
-const Figcaption = 45;
-const Figure = 46;
-const Hr = 47;
-const Li = 48;
-const Ol = 49;
-const P = 50;
-const Pre = 51;
-const A = 53;
-const Br = 55;
-const Cite = 56;
-const Data = 57;
-const Time = 58;
-const Tfoot = 59;
-const Ul = 60;
-const Video$2 = 61;
-const TextArea = 62;
-const Select = 63;
-const Option = 64;
-const Code$2 = 65;
-const Label = 66;
-const Dt = 67;
-const VirtualDomElements = {
+const Th$1 = 13;
+const THead$1 = 14;
+const Tr$1 = 15;
+const I$1 = 16;
+const Img$1 = 17;
+const Ins$1 = 20;
+const Del$1 = 21;
+const H2$1 = 22;
+const H3$1 = 23;
+const H4$1 = 24;
+const H5$1 = 25;
+const H6$1 = 26;
+const Article$1 = 27;
+const Aside$1 = 28;
+const Footer$1 = 29;
+const Header$1 = 30;
+const Nav$1 = 40;
+const Section$1 = 41;
+const Search$1 = 42;
+const Dd$1 = 43;
+const Dl$1 = 44;
+const Figcaption$1 = 45;
+const Figure$1 = 46;
+const Hr$1 = 47;
+const Li$1 = 48;
+const Ol$1 = 49;
+const P$1 = 50;
+const Pre$1 = 51;
+const A$1 = 53;
+const Br$1 = 55;
+const Cite$1 = 56;
+const Data$1 = 57;
+const Time$1 = 58;
+const Tfoot$1 = 59;
+const Ul$1 = 60;
+const Video$1 = 61;
+const TextArea$1 = 62;
+const Select$1 = 63;
+const Option$1 = 64;
+const Code$1 = 65;
+const Label$1 = 66;
+const Dt$1 = 67;
+const VirtualDomElements$1 = {
   __proto__: null,
   Text: Text$1};
 const getElementTag$1 = type => {
   switch (type) {
-    case A:
-      return A$1;
-    case Article:
-      return Article$1;
-    case Aside:
-      return Aside$1;
-    case Audio$2:
-      return Audio$1$1;
-    case Br:
-      return Br$1;
-    case Button:
-      return Button$1;
-    case Cite:
-      return Cite$1;
-    case Code$2:
-      return Code$1;
-    case Col:
-      return Col$1;
-    case ColGroup:
-      return ColGroup$1;
-    case Data:
-      return Data$1;
-    case Dd:
-      return Dd$1;
-    case Del:
-      return Del$1;
-    case Div:
-      return Div$1;
-    case Dl:
-      return Dl$1;
-    case Dt:
-      return Dt$1;
-    case Figcaption:
-      return Figcaption$1;
-    case Figure:
-      return Figure$1;
-    case Footer:
-      return Footer$1;
-    case H1:
-      return H1$1;
-    case H2:
-      return H2$1;
-    case H3:
-      return H3$1;
-    case H4:
-      return H4$1;
-    case H5:
-      return H5$1;
-    case H6:
-      return H6$1;
-    case Header:
-      return Header$1;
-    case Hr:
-      return Hr$1;
-    case I:
-      return I$1;
-    case Img:
-      return Img$1;
-    case Input:
-      return Input$1;
-    case Ins:
-      return Ins$1;
-    case Kbd:
-      return Kbd$1;
-    case Label:
-      return Label$1;
-    case Li:
-      return Li$1;
-    case Nav:
-      return Nav$1;
-    case Ol:
-      return Ol$1;
-    case Option:
-      return Option$1;
-    case P:
-      return P$1;
-    case Pre:
-      return Pre$1;
-    case Search:
-      return Search$1;
-    case Section:
-      return Section$1;
-    case Select:
-      return Select$1;
-    case Span:
-      return Span$1;
-    case Table:
-      return Table$1;
-    case TBody:
-      return TBody$1;
-    case Td:
-      return Td$1;
-    case TextArea:
-      return TextArea$1;
-    case Tfoot:
-      return Tfoot$1;
-    case Th:
-      return Th$1;
-    case THead:
-      return THead$1;
-    case Time:
-      return Time$1;
-    case Tr:
-      return Tr$1;
-    case Ul:
-      return Ul$1;
-    case Video$2:
-      return Video$1;
+    case A$1:
+      return A$2;
+    case Article$1:
+      return Article$2;
+    case Aside$1:
+      return Aside$2;
+    case Audio$1$1:
+      return Audio$2;
+    case Br$1:
+      return Br$2;
+    case Button$1:
+      return Button$2;
+    case Cite$1:
+      return Cite$2;
+    case Code$1:
+      return Code$2;
+    case Col$1:
+      return Col$2;
+    case ColGroup$1:
+      return ColGroup$2;
+    case Data$1:
+      return Data$2;
+    case Dd$1:
+      return Dd$2;
+    case Del$1:
+      return Del$2;
+    case Div$1:
+      return Div$2;
+    case Dl$1:
+      return Dl$2;
+    case Dt$1:
+      return Dt$2;
+    case Figcaption$1:
+      return Figcaption$2;
+    case Figure$1:
+      return Figure$2;
+    case Footer$1:
+      return Footer$2;
+    case H1$1:
+      return H1$2;
+    case H2$1:
+      return H2$2;
+    case H3$1:
+      return H3$2;
+    case H4$1:
+      return H4$2;
+    case H5$1:
+      return H5$2;
+    case H6$1:
+      return H6$2;
+    case Header$1:
+      return Header$2;
+    case Hr$1:
+      return Hr$2;
+    case I$1:
+      return I$2;
+    case Img$1:
+      return Img$2;
+    case Input$1:
+      return Input$2;
+    case Ins$1:
+      return Ins$2;
+    case Kbd$1:
+      return Kbd$2;
+    case Label$1:
+      return Label$2;
+    case Li$1:
+      return Li$2;
+    case Nav$1:
+      return Nav$2;
+    case Ol$1:
+      return Ol$2;
+    case Option$1:
+      return Option$2;
+    case P$1:
+      return P$2;
+    case Pre$1:
+      return Pre$2;
+    case Search$1:
+      return Search$2;
+    case Section$1:
+      return Section$2;
+    case Select$1:
+      return Select$2;
+    case Span$1:
+      return Span$2;
+    case Table$1:
+      return Table$2;
+    case TBody$1:
+      return TBody$2;
+    case Td$1:
+      return Td$2;
+    case TextArea$1:
+      return TextArea$2;
+    case Tfoot$1:
+      return Tfoot$2;
+    case Th$1:
+      return Th$2;
+    case THead$1:
+      return THead$2;
+    case Time$1:
+      return Time$2;
+    case Tr$1:
+      return Tr$2;
+    case Ul$1:
+      return Ul$2;
+    case Video$1:
+      return Video$2;
     default:
       throw new Error(`element tag not found ${type}`);
   }
@@ -634,8 +634,7 @@ const setProps = ($Element, props, eventMap, newEventMap) => {
   }
 };
 const {
-  Text: Text$2
-} = VirtualDomElements;
+  Text: Text$2} = VirtualDomElements$1;
 const renderDomTextNode = element => {
   return document.createTextNode(element.text);
 };
@@ -668,11 +667,61 @@ 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$3 = ($Element, value) => {
   $Element.nodeValue = value;
@@ -684,7 +733,17 @@ 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;
@@ -714,6 +773,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;
@@ -889,6 +951,8 @@ const getEventListenerArg = (param, event) => {
       return event.shiftKey;
     case 'event.target.className':
       return event.target.className;
+    case 'event.target.dataset.groupIndex':
+      return event.target.dataset.groupIndex;
     case 'event.target.dataset.index':
       return event.target.dataset.index;
     case 'event.target.dataset.name':
@@ -8903,6 +8967,10 @@ const invoke = (viewletId, method, ...args) => {
   return instance.factory[method](instance.state, ...args);
 };
 const focus$1 = viewletId => {
+  if (location.search.includes('traceFocus')) {
+    // eslint-disable-next-line no-console
+    console.trace(`focus ${viewletId}`);
+  }
   const instance = state$1.instances[viewletId];
   if (instance.factory?.setFocused) {
     instance.factory.setFocused(instance.state, true);
@@ -8915,6 +8983,10 @@ const focusElementByName = (viewletId, name) => {
     return;
   }
   const selector = `[name="${name}"]`;
+  if (location.search.includes('traceFocus')) {
+    // eslint-disable-next-line no-console
+    console.trace(`focusByName ${viewletId} ${name}`);
+  }
   const instance = state$1.instances[viewletId];
   if (!instance) {
     return;
@@ -9082,6 +9154,10 @@ const setPatches = (uid, patches) => {
   if (!$Viewlet) {
     throw new Error('element not found');
   }
+  if (patches.length === 1 && patches[0].type === 6) {
+    setDom2(uid, patches[0].nodes);
+    return;
+  }
   applyPatch($Viewlet, patches);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/renderer-process",
-  "version": "20.3.0",
+  "version": "21.0.0",
   "keywords": [
     "lvce-editor",
     "renderer-process"