@lvce-editor/virtual-dom 5.1.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 {
@@ -75,5 +74,14 @@ export declare const renderInto: ($Parent: any, dom: any, eventMap?: {}) => void
  * @returns
  */
 export declare const render: (elements: any, eventMap?: {}, newEventMap?: {}) => HTMLElement;
+declare const A: number, Abbr: number, Article: number, Aside: number, Audio$1: number, Br: number, Button: number, Cite: number, Code: number, Col: number, ColGroup: number, Data: number, Dd: number, Del: number, Div: number, Dl: number, Dt: number, Figcaption: number, Figure: number, Footer: number, H1: number, H2: number, H3: number, H4: number, H5: number, H6: number, Header: number, Hr: number, I: number, Img: number, Input: number, Ins: number, Kbd: number, Label: number, Li: number, Nav: number, Ol: number, Option$1: number, P: number, Pre: number, Root: number, Search: number, Section: number, Select: number, Span: number, Table: number, TBody: number, Td: number, Text$1: number, TextArea: number, Tfoot: number, Th: number, THead: number, Time: number, Tr: number, Ul: number, Video: number;
+
+declare namespace VirtualDomElements {
+	export { A, Abbr, Article, Aside, Audio$1 as Audio, Br, Button, Cite, Code, Col, ColGroup, Data, Dd, Del, Div, Dl, Dt, Figcaption, Figure, Footer, H1, H2, H3, H4, H5, H6, Header, Hr, I, Img, Input, Ins, Kbd, Label, Li, Nav, Ol, Option$1 as Option, P, Pre, Root, Search, Section, Select, Span, TBody, THead, Table, Td, Text$1 as Text, TextArea, Tfoot, Th, Time, Tr, Ul, Video };
+}
+
+export {
+	VirtualDomElements,
+};
 
 export {};

package/dist/index.js

@@ -1,287 +1,287 @@
-const Audio$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 = '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 = 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$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 Root = 0;
-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 Abbr = 54;
-const Br = 55;
-const Cite = 56;
-const Data = 57;
-const Time = 58;
-const Tfoot = 59;
-const Ul = 60;
-const Video = 61;
-const TextArea = 62;
-const Select = 63;
-const Option = 64;
-const Code = 65;
-const Label = 66;
-const Dt = 67;
+const Th$1 = 13;
+const THead$1 = 14;
+const Tr$1 = 15;
+const I$1 = 16;
+const Img$1 = 17;
+const Root$1 = 0;
+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 Abbr$1 = 54;
+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 = {
+const VirtualDomElements$1 = {
     __proto__: null,
-    A,
-    Abbr,
-    Article,
-    Aside,
-    Audio,
-    Br,
-    Button,
-    Cite,
-    Code,
-    Col,
-    ColGroup,
-    Data,
-    Dd,
-    Del,
-    Div,
-    Dl,
-    Dt,
-    Figcaption,
-    Figure,
-    Footer,
-    H1,
-    H2,
-    H3,
-    H4,
-    H5,
-    H6,
-    Header,
-    Hr,
-    I,
-    Img,
-    Input,
-    Ins,
-    Kbd,
-    Label,
-    Li,
-    Nav,
-    Ol,
-    Option,
-    P,
-    Pre,
-    Root,
-    Search,
-    Section,
-    Select,
-    Span,
-    TBody,
-    THead,
-    Table,
-    Td,
+    A: A$1,
+    Abbr: Abbr$1,
+    Article: Article$1,
+    Aside: Aside$1,
+    Audio: Audio$1,
+    Br: Br$1,
+    Button: Button$1,
+    Cite: Cite$1,
+    Code: Code$1,
+    Col: Col$1,
+    ColGroup: ColGroup$1,
+    Data: Data$1,
+    Dd: Dd$1,
+    Del: Del$1,
+    Div: Div$1,
+    Dl: Dl$1,
+    Dt: Dt$1,
+    Figcaption: Figcaption$1,
+    Figure: Figure$1,
+    Footer: Footer$1,
+    H1: H1$1,
+    H2: H2$1,
+    H3: H3$1,
+    H4: H4$1,
+    H5: H5$1,
+    H6: H6$1,
+    Header: Header$1,
+    Hr: Hr$1,
+    I: I$1,
+    Img: Img$1,
+    Input: Input$1,
+    Ins: Ins$1,
+    Kbd: Kbd$1,
+    Label: Label$1,
+    Li: Li$1,
+    Nav: Nav$1,
+    Ol: Ol$1,
+    Option: Option$1,
+    P: P$1,
+    Pre: Pre$1,
+    Root: Root$1,
+    Search: Search$1,
+    Section: Section$1,
+    Select: Select$1,
+    Span: Span$1,
+    TBody: TBody$1,
+    THead: THead$1,
+    Table: Table$1,
+    Td: Td$1,
     Text: Text$1,
-    TextArea,
-    Tfoot,
-    Th,
-    Time,
-    Tr,
-    Ul,
-    Video
+    TextArea: TextArea$1,
+    Tfoot: Tfoot$1,
+    Th: Th$1,
+    Time: Time$1,
+    Tr: Tr$1,
+    Ul: Ul$1,
+    Video: Video$1
 };
 
 const getElementTag$1 = type => {
   switch (type) {
-    case A:
-      return A$1;
-    case Article:
-      return Article$1;
-    case Aside:
-      return Aside$1;
-    case Audio:
-      return Audio$1;
-    case Br:
-      return Br$1;
-    case Button:
-      return Button$1;
-    case Cite:
-      return Cite$1;
-    case Code:
-      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:
-      return Video$1;
+    case A$1:
+      return A$2;
+    case Article$1:
+      return Article$2;
+    case Aside$1:
+      return Aside$2;
+    case Audio$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}`);
   }
@@ -528,7 +528,125 @@ const setProps = ($Element, props, eventMap, newEventMap) => {
 };
 
 const {
-  Text} = VirtualDomElements;
+  A,
+  Abbr,
+  Article,
+  Aside,
+  Audio,
+  Br,
+  Button,
+  Cite,
+  Code,
+  Col,
+  ColGroup,
+  Data,
+  Dd,
+  Del,
+  Div,
+  Dl,
+  Dt,
+  Figcaption,
+  Figure,
+  Footer,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Header,
+  Hr,
+  I,
+  Img,
+  Input,
+  Ins,
+  Kbd,
+  Label,
+  Li,
+  Nav,
+  Ol,
+  Option,
+  P,
+  Pre,
+  Root,
+  Search,
+  Section,
+  Select,
+  Span,
+  Table,
+  TBody,
+  Td,
+  Text,
+  TextArea,
+  Tfoot,
+  Th,
+  THead,
+  Time,
+  Tr,
+  Ul,
+  Video
+} = VirtualDomElements$1;
+
+const VirtualDomElements = {
+    __proto__: null,
+    A,
+    Abbr,
+    Article,
+    Aside,
+    Audio,
+    Br,
+    Button,
+    Cite,
+    Code,
+    Col,
+    ColGroup,
+    Data,
+    Dd,
+    Del,
+    Div,
+    Dl,
+    Dt,
+    Figcaption,
+    Figure,
+    Footer,
+    H1,
+    H2,
+    H3,
+    H4,
+    H5,
+    H6,
+    Header,
+    Hr,
+    I,
+    Img,
+    Input,
+    Ins,
+    Kbd,
+    Label,
+    Li,
+    Nav,
+    Ol,
+    Option,
+    P,
+    Pre,
+    Root,
+    Search,
+    Section,
+    Select,
+    Span,
+    TBody,
+    THead,
+    Table,
+    Td,
+    Text,
+    TextArea,
+    Tfoot,
+    Th,
+    Time,
+    Tr,
+    Ul,
+    Video
+};
 
 const renderDomTextNode = element => {
   return document.createTextNode(element.text);
@@ -564,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;
@@ -580,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;
@@ -612,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;
@@ -1024,4 +1204,4 @@ const rememberFocus = ($Viewlet, dom, eventMap, uid = 0) => {
   return $Viewlet;
 };
 
-export { addFileHandle, applyPatch, getComponentUid, getComponentUidFromEvent, getDragInfo, getFileHandles, registerEventListeners, rememberFocus, removeDragInfo, render, renderInto, setComponentUid, setDragInfo, setIpc };
+export { VirtualDomElements, addFileHandle, applyPatch, getComponentUid, getComponentUidFromEvent, getDragInfo, getFileHandles, registerEventListeners, rememberFocus, removeDragInfo, render, renderInto, setComponentUid, setDragInfo, setIpc };

package/package.json

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