@lvce-editor/renderer-process 30.45.1 → 30.46.0

package/dist/editorOnlyRendererProcessMain.js

@@ -1625,20 +1625,20 @@ const Head$1 = 'head';
 const Title$1 = 'title';
 const Meta$1 = 'meta';
 const Canvas$1 = 'canvas';
-const Circle$1 = 'circle';
+const Circle$2 = 'circle';
 const Form$1 = 'form';
-const Defs$1 = 'defs';
-const Ellipse$1 = 'ellipse';
-const G$1 = 'g';
-const Line$1 = 'line';
-const Path$1 = 'path';
-const Polygon$1 = 'polygon';
-const Polyline$1 = 'polyline';
+const Defs$2 = 'defs';
+const Ellipse$2 = 'ellipse';
+const G$2 = 'g';
+const Line$2 = 'line';
+const Path$2 = 'path';
+const Polygon$2 = 'polygon';
+const Polyline$2 = 'polyline';
 const Quote$1 = 'quote';
 const BlockQuote$1 = 'blockquote';
-const Rect$1 = 'rect';
-const Svg$1 = 'svg';
-const Use$1 = 'use';
+const Rect$2 = 'rect';
+const Svg$2 = 'svg';
+const Use$2 = 'use';
 
 const Audio = 0;
 const Button = 1;
@@ -1708,17 +1708,17 @@ const Canvas = 77;
 const Form = 78;
 const BlockQuote = 79;
 const Quote = 80;
-const Circle = 81;
-const Defs = 82;
-const Ellipse = 83;
-const G = 84;
-const Line = 85;
-const Path = 86;
-const Polygon = 87;
-const Polyline = 88;
-const Rect = 89;
-const Svg = 90;
-const Use = 91;
+const Circle$1 = 81;
+const Defs$1 = 82;
+const Ellipse$1 = 83;
+const G$1 = 84;
+const Line$1 = 85;
+const Path$1 = 86;
+const Polygon$1 = 87;
+const Polyline$1 = 88;
+const Rect$1 = 89;
+const Svg$1 = 90;
+const Use$1 = 91;
 const Reference$1 = 100;
 
 const VirtualDomElements = {
@@ -1731,25 +1731,25 @@ const VirtualDomElements = {
   Br,
   Button,
   Canvas,
-  Circle,
+  Circle: Circle$1,
   Cite,
   Code,
   Col,
   ColGroup,
   Data,
   Dd,
-  Defs,
+  Defs: Defs$1,
   Del,
   Div,
   Dl,
   Dt,
-  Ellipse,
+  Ellipse: Ellipse$1,
   Em,
   Figcaption,
   Figure,
   Footer,
   Form,
-  G,
+  G: G$1,
   H1,
   H2,
   H3,
@@ -1768,19 +1768,19 @@ const VirtualDomElements = {
   Kbd,
   Label,
   Li,
-  Line,
+  Line: Line$1,
   Main,
   Meta,
   Nav,
   Ol,
   Option,
   P,
-  Path,
-  Polygon,
-  Polyline,
+  Path: Path$1,
+  Polygon: Polygon$1,
+  Polyline: Polyline$1,
   Pre,
   Quote,
-  Rect,
+  Rect: Rect$1,
   Reference: Reference$1,
   Search,
   Section,
@@ -1788,7 +1788,7 @@ const VirtualDomElements = {
   Span,
   Strong,
   Style,
-  Svg,
+  Svg: Svg$1,
   TBody,
   THead,
   Table,
@@ -1801,7 +1801,7 @@ const VirtualDomElements = {
   Title,
   Tr,
   Ul,
-  Use,
+  Use: Use$1,
   Video
 };
 
@@ -1814,25 +1814,25 @@ const elementTagMap = {
   [Br]: Br$1,
   [Button]: Button$1,
   [Canvas]: Canvas$1,
-  [Circle]: Circle$1,
+  [Circle$1]: Circle$2,
   [Cite]: Cite$1,
   [Code]: Code$1,
   [Col]: Col$1,
   [ColGroup]: ColGroup$1,
   [Data]: Data$1,
   [Dd]: Dd$1,
-  [Defs]: Defs$1,
+  [Defs$1]: Defs$2,
   [Del]: Del$1,
   [Div]: Div$1,
   [Dl]: Dl$1,
   [Dt]: Dt$1,
-  [Ellipse]: Ellipse$1,
+  [Ellipse$1]: Ellipse$2,
   [Em]: Em$1,
   [Figcaption]: Figcaption$1,
   [Figure]: Figure$1,
   [Footer]: Footer$1,
   [Form]: Form$1,
-  [G]: G$1,
+  [G$1]: G$2,
   [H1]: H1$1,
   [H2]: H2$1,
   [H3]: H3$1,
@@ -1851,26 +1851,26 @@ const elementTagMap = {
   [Kbd]: Kbd$1,
   [Label]: Label$1,
   [Li]: Li$1,
-  [Line]: Line$1,
+  [Line$1]: Line$2,
   [Main]: Main$1,
   [Meta]: Meta$1,
   [Nav]: Nav$1,
   [Ol]: Ol$1,
   [Option]: Option$1,
   [P]: P$1,
-  [Path]: Path$1,
-  [Polygon]: Polygon$1,
-  [Polyline]: Polyline$1,
+  [Path$1]: Path$2,
+  [Polygon$1]: Polygon$2,
+  [Polyline$1]: Polyline$2,
   [Pre]: Pre$1,
   [Quote]: Quote$1,
-  [Rect]: Rect$1,
+  [Rect$1]: Rect$2,
   [Search]: Search$1,
   [Section]: Section$1,
   [Select]: Select$1,
   [Span]: Span$1,
   [Strong]: Strong$1,
   [Style]: Style$1,
-  [Svg]: Svg$1,
+  [Svg$1]: Svg$2,
   [Table]: Table$1,
   [TBody]: TBody$1,
   [Td]: Td$1,
@@ -1882,7 +1882,7 @@ const elementTagMap = {
   [Title]: Title$1,
   [Tr]: Tr$1,
   [Ul]: Ul$1,
-  [Use]: Use$1,
+  [Use$1]: Use$2,
   [Video]: Video$1
 };
 const getElementTag$1 = type => {
@@ -2090,6 +2090,11 @@ const removeProp = ($Element, key) => {
     detachEvent($Element, eventName);
     return;
   }
+  if ($Element instanceof SVGElement) {
+    const attributeName = removedAttributeProps.get(key) || key;
+    $Element.removeAttribute(attributeName);
+    return;
+  }
   if ((key === 'height' || key === 'width') && $Element instanceof HTMLImageElement) {
     $Element.removeAttribute(key);
     return;
@@ -2101,7 +2106,15 @@ const removeProp = ($Element, key) => {
   const attributeName = removedAttributeProps.get(key) || key;
   $Element.removeAttribute(attributeName);
 };
-const setProp = ($Element, key, value, eventMap, newEventMap) => {
+const setSvgProp = ($Element, key, value) => {
+  if (key === 'style') {
+    setStyle($Element, value);
+    return;
+  }
+  const attributeName = removedAttributeProps.get(key) || key;
+  $Element.setAttribute(attributeName, String(value));
+};
+const setHtmlProp = ($Element, key, value) => {
   if (key.startsWith('aria-')) {
     $Element.setAttribute(key, String(value));
     return;
@@ -2152,10 +2165,6 @@ const setProp = ($Element, key, value, eventMap, newEventMap) => {
     $Element.style.webkitMaskImage = `url('${value}')`;
     return;
   }
-  if (eventProps.has(key)) {
-    setEventProp($Element, key, value, eventMap, newEventMap);
-    return;
-  }
   if (key === 'style') {
     setStyle($Element, value);
     return;
@@ -2170,6 +2179,17 @@ const setProp = ($Element, key, value, eventMap, newEventMap) => {
   }
   $Element[key] = value;
 };
+const setProp = ($Element, key, value, eventMap, newEventMap) => {
+  if (eventProps.has(key)) {
+    setEventProp($Element, key, value, eventMap, newEventMap);
+    return;
+  }
+  if ($Element instanceof SVGElement) {
+    setSvgProp($Element, key, value);
+    return;
+  }
+  setHtmlProp($Element, key, value);
+};
 
 const setProps = ($Element, props, eventMap, newEventMap) => {
   for (const key in props) {
@@ -2181,15 +2201,28 @@ const setProps = ($Element, props, eventMap, newEventMap) => {
 };
 
 const {
+  Circle,
+  Defs,
+  Ellipse,
+  G,
+  Line,
+  Path,
+  Polygon,
+  Polyline,
+  Rect,
+  Svg,
   Text,
+  Use,
   Reference} = VirtualDomElements;
 
+const svgNamespace = 'http://www.w3.org/2000/svg';
+const svgElementTypes = new Set([Circle, Defs, Ellipse, G, Line, Path, Polygon, Polyline, Rect, Svg, Use]);
 const renderDomTextNode = element => {
   return document.createTextNode(element.text);
 };
 const renderDomElement = (element, eventMap, newEventMap) => {
   const tag = getElementTag(element.type);
-  const $Element = document.createElement(tag);
+  const $Element = svgElementTypes.has(element.type) ? document.createElementNS(svgNamespace, tag) : document.createElement(tag);
   setProps($Element, element, eventMap, newEventMap);
   return $Element;
 };

package/dist/rendererProcessMain.js

@@ -780,20 +780,20 @@ const Head$1 = 'head';
 const Title$1 = 'title';
 const Meta$1 = 'meta';
 const Canvas$1 = 'canvas';
-const Circle$1 = 'circle';
+const Circle$2 = 'circle';
 const Form$1 = 'form';
-const Defs$1 = 'defs';
-const Ellipse$1 = 'ellipse';
-const G$1 = 'g';
-const Line$1 = 'line';
-const Path$1 = 'path';
-const Polygon$1 = 'polygon';
-const Polyline$1 = 'polyline';
+const Defs$2 = 'defs';
+const Ellipse$2 = 'ellipse';
+const G$2 = 'g';
+const Line$2 = 'line';
+const Path$2 = 'path';
+const Polygon$2 = 'polygon';
+const Polyline$2 = 'polyline';
 const Quote$3 = 'quote';
 const BlockQuote$1 = 'blockquote';
-const Rect$1 = 'rect';
-const Svg$1 = 'svg';
-const Use$1 = 'use';
+const Rect$2 = 'rect';
+const Svg$2 = 'svg';
+const Use$2 = 'use';
 
 const Audio$2 = 0;
 const Button = 1;
@@ -863,17 +863,17 @@ const Canvas = 77;
 const Form = 78;
 const BlockQuote = 79;
 const Quote$2 = 80;
-const Circle = 81;
-const Defs = 82;
-const Ellipse = 83;
-const G = 84;
-const Line = 85;
-const Path = 86;
-const Polygon = 87;
-const Polyline = 88;
-const Rect = 89;
-const Svg = 90;
-const Use = 91;
+const Circle$1 = 81;
+const Defs$1 = 82;
+const Ellipse$1 = 83;
+const G$1 = 84;
+const Line$1 = 85;
+const Path$1 = 86;
+const Polygon$1 = 87;
+const Polyline$1 = 88;
+const Rect$1 = 89;
+const Svg$1 = 90;
+const Use$1 = 91;
 const Reference$1 = 100;
 
 const VirtualDomElements = {
@@ -886,25 +886,25 @@ const VirtualDomElements = {
   Br,
   Button,
   Canvas,
-  Circle,
+  Circle: Circle$1,
   Cite,
   Code,
   Col,
   ColGroup,
   Data,
   Dd,
-  Defs,
+  Defs: Defs$1,
   Del,
   Div,
   Dl,
   Dt,
-  Ellipse,
+  Ellipse: Ellipse$1,
   Em,
   Figcaption,
   Figure,
   Footer,
   Form,
-  G,
+  G: G$1,
   H1,
   H2,
   H3,
@@ -923,19 +923,19 @@ const VirtualDomElements = {
   Kbd,
   Label,
   Li,
-  Line,
+  Line: Line$1,
   Main,
   Meta,
   Nav,
   Ol,
   Option,
   P,
-  Path,
-  Polygon,
-  Polyline,
+  Path: Path$1,
+  Polygon: Polygon$1,
+  Polyline: Polyline$1,
   Pre,
   Quote: Quote$2,
-  Rect,
+  Rect: Rect$1,
   Reference: Reference$1,
   Search,
   Section,
@@ -943,7 +943,7 @@ const VirtualDomElements = {
   Span,
   Strong,
   Style,
-  Svg,
+  Svg: Svg$1,
   TBody,
   THead,
   Table,
@@ -956,7 +956,7 @@ const VirtualDomElements = {
   Title,
   Tr,
   Ul,
-  Use,
+  Use: Use$1,
   Video: Video$1
 };
 
@@ -969,25 +969,25 @@ const elementTagMap = {
   [Br]: Br$1,
   [Button]: Button$1,
   [Canvas]: Canvas$1,
-  [Circle]: Circle$1,
+  [Circle$1]: Circle$2,
   [Cite]: Cite$1,
   [Code]: Code$1,
   [Col]: Col$1,
   [ColGroup]: ColGroup$1,
   [Data]: Data$1,
   [Dd]: Dd$1,
-  [Defs]: Defs$1,
+  [Defs$1]: Defs$2,
   [Del]: Del$1,
   [Div]: Div$1,
   [Dl]: Dl$1,
   [Dt]: Dt$1,
-  [Ellipse]: Ellipse$1,
+  [Ellipse$1]: Ellipse$2,
   [Em]: Em$1,
   [Figcaption]: Figcaption$1,
   [Figure]: Figure$1,
   [Footer]: Footer$1,
   [Form]: Form$1,
-  [G]: G$1,
+  [G$1]: G$2,
   [H1]: H1$1,
   [H2]: H2$1,
   [H3]: H3$1,
@@ -1006,26 +1006,26 @@ const elementTagMap = {
   [Kbd]: Kbd$1,
   [Label]: Label$1,
   [Li]: Li$1,
-  [Line]: Line$1,
+  [Line$1]: Line$2,
   [Main]: Main$1,
   [Meta]: Meta$1,
   [Nav]: Nav$1,
   [Ol]: Ol$1,
   [Option]: Option$1,
   [P]: P$1,
-  [Path]: Path$1,
-  [Polygon]: Polygon$1,
-  [Polyline]: Polyline$1,
+  [Path$1]: Path$2,
+  [Polygon$1]: Polygon$2,
+  [Polyline$1]: Polyline$2,
   [Pre]: Pre$1,
   [Quote$2]: Quote$3,
-  [Rect]: Rect$1,
+  [Rect$1]: Rect$2,
   [Search]: Search$1,
   [Section]: Section$1,
   [Select]: Select$1,
   [Span]: Span$1,
   [Strong]: Strong$1,
   [Style]: Style$1,
-  [Svg]: Svg$1,
+  [Svg$1]: Svg$2,
   [Table]: Table$1,
   [TBody]: TBody$1,
   [Td]: Td$1,
@@ -1037,7 +1037,7 @@ const elementTagMap = {
   [Title]: Title$1,
   [Tr]: Tr$1,
   [Ul]: Ul$1,
-  [Use]: Use$1,
+  [Use$1]: Use$2,
   [Video$1]: Video$2
 };
 const getElementTag$1 = type => {
@@ -1526,6 +1526,11 @@ const removeProp = ($Element, key) => {
     detachEvent($Element, eventName);
     return;
   }
+  if ($Element instanceof SVGElement) {
+    const attributeName = removedAttributeProps.get(key) || key;
+    $Element.removeAttribute(attributeName);
+    return;
+  }
   if ((key === 'height' || key === 'width') && $Element instanceof HTMLImageElement) {
     $Element.removeAttribute(key);
     return;
@@ -1537,7 +1542,15 @@ const removeProp = ($Element, key) => {
   const attributeName = removedAttributeProps.get(key) || key;
   $Element.removeAttribute(attributeName);
 };
-const setProp = ($Element, key, value, eventMap, newEventMap) => {
+const setSvgProp = ($Element, key, value) => {
+  if (key === 'style') {
+    setStyle($Element, value);
+    return;
+  }
+  const attributeName = removedAttributeProps.get(key) || key;
+  $Element.setAttribute(attributeName, String(value));
+};
+const setHtmlProp = ($Element, key, value) => {
   if (key.startsWith('aria-')) {
     $Element.setAttribute(key, String(value));
     return;
@@ -1588,10 +1601,6 @@ const setProp = ($Element, key, value, eventMap, newEventMap) => {
     $Element.style.webkitMaskImage = `url('${value}')`;
     return;
   }
-  if (eventProps.has(key)) {
-    setEventProp($Element, key, value, eventMap, newEventMap);
-    return;
-  }
   if (key === 'style') {
     setStyle($Element, value);
     return;
@@ -1606,6 +1615,17 @@ const setProp = ($Element, key, value, eventMap, newEventMap) => {
   }
   $Element[key] = value;
 };
+const setProp = ($Element, key, value, eventMap, newEventMap) => {
+  if (eventProps.has(key)) {
+    setEventProp($Element, key, value, eventMap, newEventMap);
+    return;
+  }
+  if ($Element instanceof SVGElement) {
+    setSvgProp($Element, key, value);
+    return;
+  }
+  setHtmlProp($Element, key, value);
+};
 
 const setProps = ($Element, props, eventMap, newEventMap) => {
   for (const key in props) {
@@ -1617,15 +1637,28 @@ const setProps = ($Element, props, eventMap, newEventMap) => {
 };
 
 const {
+  Circle,
+  Defs,
+  Ellipse,
+  G,
+  Line,
+  Path,
+  Polygon,
+  Polyline,
+  Rect,
+  Svg,
   Text,
+  Use,
   Reference} = VirtualDomElements;
 
+const svgNamespace = 'http://www.w3.org/2000/svg';
+const svgElementTypes = new Set([Circle, Defs, Ellipse, G, Line, Path, Polygon, Polyline, Rect, Svg, Use]);
 const renderDomTextNode = element => {
   return document.createTextNode(element.text);
 };
 const renderDomElement = (element, eventMap, newEventMap) => {
   const tag = getElementTag(element.type);
-  const $Element = document.createElement(tag);
+  const $Element = svgElementTypes.has(element.type) ? document.createElementNS(svgNamespace, tag) : document.createElement(tag);
   setProps($Element, element, eventMap, newEventMap);
   return $Element;
 };

package/package.json

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