@lvce-editor/preview-sandbox-worker 3.0.0 → 3.2.0

package/dist/previewSandBoxWorkerMain.js

@@ -1238,117 +1238,63 @@ const Del = 'del';
 const H6 = 'h6';
 const Canvas = 'canvas';
 
+const tagMap = {
+  [A]: A$1,
+  [Abbr]: Abbr$1,
+  [Article]: Article$1,
+  [Aside]: Aside$1,
+  [Br]: Br$1,
+  [Button]: Button$1,
+  [Canvas]: Canvas$1,
+  [Cite]: Cite$1,
+  [Code]: Code$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,
+  [Form]: Div$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,
+  [Iframe]: Iframe$1,
+  [Img]: Img$1,
+  [Input]: Input$1,
+  [Label]: Label$1,
+  [Li]: Li$1,
+  [Nav]: Nav$1,
+  [Ol]: Ol$1,
+  [Option]: Option$1,
+  [P]: P$1,
+  [Pre]: Pre$1,
+  [Search]: Search$1,
+  [Section]: Section$1,
+  [Select]: Select$1,
+  [Span]: Span$1,
+  [Table]: Table$1,
+  [TBody]: TBody$1,
+  [Td]: Td$1,
+  [TextArea]: TextArea$1,
+  [Tfoot]: Tfoot$1,
+  [Th]: Th$1,
+  [THead]: THead$1,
+  [Time]: Time$1,
+  [Tr]: Tr$1,
+  [Ul]: Ul$1,
+  html: Html,
+  style: Style
+};
 const getVirtualDomTag = text => {
-  switch (text) {
-    case A:
-      return A$1;
-    case Abbr:
-      return Abbr$1;
-    case Article:
-      return Article$1;
-    case Aside:
-      return Aside$1;
-    case Br:
-      return Br$1;
-    case Button:
-      return Button$1;
-    case Canvas:
-      return Canvas$1;
-    case Cite:
-      return Cite$1;
-    case Code:
-      return Code$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 Form:
-      return Div$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 Iframe:
-      return Iframe$1;
-    case Img:
-      return Img$1;
-    case Input:
-      return Input$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 'html':
-      return Html;
-    case 'style':
-      return Style;
-    default:
-      return Div$1;
-  }
+  return tagMap[text] || Div$1;
 };
 
 /* eslint-disable @cspell/spellchecker */
@@ -1397,6 +1343,32 @@ const TAGS_TO_SKIP_TAG_ONLY = new Set(['html', 'body', 'head']);
 
 // Tags where we extract content as CSS
 const CSS_TAGS = new Set(['style']);
+const serializeAttributeName = attrName => {
+  if (attrName === 'class') {
+    return 'className';
+  }
+  if (attrName === 'type') {
+    return 'inputType';
+  }
+  return attrName;
+};
+const applyAllowedAttributes = (targetNode, sourceNode) => {
+  const {
+    attributes
+  } = sourceNode;
+  if (!attributes) {
+    return;
+  }
+  for (let i = 0; i < attributes.length; i++) {
+    const attr = attributes[i];
+    const attrName = attr.name;
+    if (isDefaultAllowedAttribute(attrName, [])) {
+      const finalName = serializeAttributeName(attrName);
+      targetNode[finalName] = attr.value;
+    }
+  }
+};
+
 // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 const serializeNode = (node, dom, css, context) => {
   const {
@@ -1452,6 +1424,7 @@ const serializeNode = (node, dom, css, context) => {
       type: Reference,
       uid: node.__canvasId
     };
+    applyAllowedAttributes(refNode, node);
     if (context.elementMap) {
       context.elementMap[node.__canvasId + ''] = node;
     }
@@ -1464,26 +1437,7 @@ const serializeNode = (node, dom, css, context) => {
     childCount: 0,
     type: getVirtualDomTag(tagName)
   };
-
-  // Copy allowed attributes
-  const {
-    attributes
-  } = node;
-  if (attributes) {
-    for (let i = 0; i < attributes.length; i++) {
-      const attr = attributes[i];
-      const attrName = attr.name;
-      if (isDefaultAllowedAttribute(attrName, [])) {
-        let finalName = attrName;
-        if (attrName === 'class') {
-          finalName = 'className';
-        } else if (attrName === 'type') {
-          finalName = 'inputType';
-        }
-        newNode[finalName] = attr.value;
-      }
-    }
-  }
+  applyAllowedAttributes(newNode, node);
 
   // Assign element tracking ID for interactivity
   const hdId = String(context.nextId++);
@@ -89603,6 +89557,28 @@ const createWindow = (rawHtml, url = 'http://localhost:3000') => {
   };
 };
 
+/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
+
+const exposeCanvasGlobals = (window, document) => {
+  const existingCanvasRenderingContext2D = window.CanvasRenderingContext2D || globalThis.CanvasRenderingContext2D;
+  if (existingCanvasRenderingContext2D) {
+    window.CanvasRenderingContext2D = existingCanvasRenderingContext2D;
+    globalThis.CanvasRenderingContext2D = existingCanvasRenderingContext2D;
+    return;
+  }
+  const canvas = document.querySelector('canvas');
+  if (!canvas || typeof canvas.getContext !== 'function') {
+    return;
+  }
+  const context = canvas.getContext('2d');
+  const CanvasRenderingContext2D = context?.constructor;
+  if (typeof CanvasRenderingContext2D !== 'function') {
+    return;
+  }
+  window.CanvasRenderingContext2D = CanvasRenderingContext2D;
+  globalThis.CanvasRenderingContext2D = CanvasRenderingContext2D;
+};
+
 /**
  * Extracts line and column information from an error stack trace
  * Looks for patterns like "<anonymous>:114:26" in the stack trace
@@ -89713,17 +89689,19 @@ const createLocalStorage = () => {
   return localStorage;
 };
 
-const getGlobals = (width, height) => {
+const getGlobals = (width, height, devicePixelRatio = 1) => {
   const localStorage = createLocalStorage();
   return {
     globalGlobals: {
       alert: alert,
+      devicePixelRatio,
       innerHeight: height,
       innerWidth: width,
       localStorage
     },
     windowGlobals: {
       alert: alert,
+      devicePixelRatio,
       innerHeight: height,
       innerWidth: width
     }
@@ -89833,11 +89811,12 @@ const setGlobals = (window, globalGlobals, windowGlobals) => {
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 /* eslint-disable @typescript-eslint/no-implied-eval */
 
-const executeScripts = (window, document, scripts, width = 0, height = 0) => {
+const executeScripts = (window, document, scripts, width = 0, height = 0, devicePixelRatio = 1) => {
+  exposeCanvasGlobals(window, document);
   const {
     globalGlobals,
     windowGlobals
-  } = getGlobals(width, height);
+  } = getGlobals(width, height, devicePixelRatio);
   setGlobals(window, globalGlobals, windowGlobals);
   let firstError = null;
   let firstCodeFrame = '';
@@ -89904,9 +89883,7 @@ const handleMutations = async uid => {
     elementMap,
     window: happyDomInstance.window
   });
-  const parsedDom = serialized.dom;
-  // @ts-ignore
-  getParsedNodesChildNodeCount(parsedDom);
+  getParsedNodesChildNodeCount(serialized.dom);
   try {
     await invoke$1('Preview.handleMutation', uid);
   } catch (error) {
@@ -89951,6 +89928,9 @@ const toNumber = value => {
 
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 
+const reflectCanvasDimensionAttribute = (element, name, value) => {
+  element.setAttribute(name, String(value));
+};
 const patchCanvasElements = async (document, uid) => {
   const canvasElements = document.querySelectorAll('canvas');
   if (canvasElements.length === 0) {
@@ -89998,6 +89978,7 @@ const patchCanvasElements = async (document, uid) => {
       get: () => widthValue,
       set: newWidth => {
         widthValue = toNumber(newWidth);
+        reflectCanvasDimensionAttribute(element, 'width', widthValue);
         // @ts-ignore
         element.__offscreenCanvas.width = widthValue;
       }
@@ -90011,6 +89992,7 @@ const patchCanvasElements = async (document, uid) => {
       get: () => heightValue,
       set: newHeight => {
         heightValue = toNumber(newHeight);
+        reflectCanvasDimensionAttribute(element, 'height', heightValue);
         // @ts-ignore
         element.__offscreenCanvas.height = heightValue;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/preview-sandbox-worker",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "Preview SandBox Worker",
   "repository": {
     "type": "git",