@lvce-editor/virtual-dom 7.4.0 → 8.0.0

package/dist/index.js

@@ -66,6 +66,7 @@ const Html$1 = 'html';
 const Head$1 = 'head';
 const Title$1 = 'title';
 const Meta$1 = 'meta';
+const Canvas$1 = 'canvas';
 
 const Audio$1 = 0;
 const Button$1 = 1;
@@ -130,6 +131,7 @@ const Html = 73;
 const Head = 74;
 const Title = 75;
 const Meta = 76;
+const Canvas = 77;
 const Reference$1 = 100;
 
 const VirtualDomElements$1 = {
@@ -141,6 +143,7 @@ const VirtualDomElements$1 = {
   Audio: Audio$1,
   Br: Br$1,
   Button: Button$1,
+  Canvas,
   Cite: Cite$1,
   Code: Code$1,
   Col: Col$1,
@@ -214,6 +217,8 @@ const getElementTag$1 = type => {
       return Br$2;
     case Button$1:
       return Button$2;
+    case Canvas:
+      return Canvas$1;
     case Cite$1:
       return Cite$2;
     case Code$1:
@@ -467,6 +472,22 @@ const attachEvent = ($Node, eventMap, key, value, newEventMap) => {
   $Node.addEventListener(keyLower, wrapped, options);
 };
 
+const STYLE_REGEX = /([^:;]+):\s*([^;]+)/g;
+const KEBAB_CASE_REGEX = /-([a-z])/g;
+const setStyle = ($Element, styleString) => {
+  if (typeof styleString !== 'string') {
+    return;
+  }
+  let match;
+  while ((match = STYLE_REGEX.exec(styleString)) !== null) {
+    const key = match[1].trim();
+    const value = match[2].trim();
+    // Convert kebab-case to camelCase for CSS properties with dashes
+    const camelCaseKey = key.replaceAll(KEBAB_CASE_REGEX, (_, char) => char.toUpperCase());
+    $Element.style[camelCaseKey] = value;
+  }
+};
+
 const setProp = ($Element, key, value, eventMap, newEventMap) => {
   switch (key) {
     case 'ariaActivedescendant':
@@ -490,6 +511,9 @@ const setProp = ($Element, key, value, eventMap, newEventMap) => {
         $Element.removeAttribute('aria-owns');
       }
       break;
+    case 'childCount':
+    case 'type':
+      break;
     case 'height':
     case 'width':
       if ($Element instanceof HTMLImageElement) {
@@ -555,9 +579,7 @@ const setProp = ($Element, key, value, eventMap, newEventMap) => {
       attachEvent($Element, eventMap, eventName, value, newEventMap);
       break;
     case 'style':
-      throw new Error('style property is not supported');
-    case 'childCount':
-    case 'type':
+      setStyle($Element, value);
       break;
     case 'translate':
       $Element.style[key] = value;

package/dist/parts/SetStyle/SetStyle.d.ts

@@ -0,0 +1 @@
+export declare const setStyle: ($Element: HTMLElement, styleString: string) => void;

package/package.json

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