@lvce-editor/preview-sandbox-worker 3.1.0 → 3.3.0

package/dist/previewSandBoxWorkerMain.js

@@ -1343,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 {
@@ -1398,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;
     }
@@ -1410,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++);
@@ -1599,12 +1607,137 @@ const handleInput = (uid, hdId, value) => {
   return handleInputLocal(uid, hdId, value);
 };
 
+const numericCodeMap = {
+  13: 'Enter',
+  27: 'Escape',
+  32: 'Space',
+  37: 'ArrowLeft',
+  38: 'ArrowUp',
+  39: 'ArrowRight',
+  40: 'ArrowDown',
+  8: 'Backspace',
+  9: 'Tab'
+};
+
+// cspell:ignore Spacebar
+
+const invalidCodeValues = new Set(['code', 'event.code', 'e.code', 'key', 'event.key', 'e.key']);
+const getNumericCode = code => {
+  if (typeof code === 'number' && Number.isFinite(code)) {
+    return code;
+  }
+  if (typeof code === 'string' && /^\d+$/.test(code)) {
+    return Number(code);
+  }
+  return undefined;
+};
+const getCodeFromNumericCode = numericCode => {
+  if (numericCodeMap[numericCode]) {
+    return numericCodeMap[numericCode];
+  }
+  if (numericCode >= 48 && numericCode <= 57) {
+    return `Digit${String.fromCodePoint(numericCode)}`;
+  }
+  if (numericCode >= 65 && numericCode <= 90) {
+    return `Key${String.fromCodePoint(numericCode)}`;
+  }
+  return String(numericCode);
+};
+const getCodeFromKey = key => {
+  if (key === ' ' || key === 'Space' || key === 'Spacebar') {
+    return 'Space';
+  }
+  if (key === 'Enter' || key.startsWith('Arrow')) {
+    return key;
+  }
+  if (/^[a-z]$/i.test(key)) {
+    return `Key${key.toUpperCase()}`;
+  }
+  if (/^\d$/.test(key)) {
+    return `Digit${key}`;
+  }
+  return key;
+};
+const isInvalidCodeString = code => {
+  const trimmedCode = code.trim();
+  if (!trimmedCode) {
+    return true;
+  }
+  return invalidCodeValues.has(trimmedCode);
+};
+const getNormalizedCode = (key, code) => {
+  const numericCode = getNumericCode(code);
+  if (numericCode !== undefined) {
+    return getCodeFromNumericCode(numericCode);
+  }
+  if (typeof code === 'string' && !isInvalidCodeString(code)) {
+    return code.trim();
+  }
+  return getCodeFromKey(key);
+};
+const getNormalizedKey = (key, normalizedCode) => {
+  if (key === 'Space' || key === 'Spacebar') {
+    return ' ';
+  }
+  if (key) {
+    return key;
+  }
+  if (normalizedCode === 'Space') {
+    return ' ';
+  }
+  if (/^Key[A-Z]$/.test(normalizedCode)) {
+    return normalizedCode.slice(3).toLowerCase();
+  }
+  if (/^Digit\d$/.test(normalizedCode)) {
+    return normalizedCode.slice(5);
+  }
+  return normalizedCode;
+};
+const getLegacyKeyCode = (normalizedCode, code) => {
+  const numericCode = getNumericCode(code);
+  if (numericCode !== undefined) {
+    return numericCode;
+  }
+  for (const [key, value] of Object.entries(numericCodeMap)) {
+    if (value === normalizedCode) {
+      return Number(key);
+    }
+  }
+  if (/^Key[A-Z]$/.test(normalizedCode)) {
+    return normalizedCode.codePointAt(3) ?? 0;
+  }
+  if (/^Digit\d$/.test(normalizedCode)) {
+    return normalizedCode.codePointAt(5) ?? 0;
+  }
+  return 0;
+};
+const getKeyboardEventInit = (key, code) => {
+  const normalizedCode = getNormalizedCode(key, code);
+  const normalizedKey = getNormalizedKey(key, normalizedCode);
+  const keyCode = getLegacyKeyCode(normalizedCode, code);
+  return {
+    code: normalizedCode,
+    key: normalizedKey,
+    keyCode
+  };
+};
+
+const setLegacyKeyCode$1 = (event, keyCode) => {
+  Object.defineProperty(event, 'keyCode', {
+    value: keyCode
+  });
+  Object.defineProperty(event, 'which', {
+    value: keyCode
+  });
+};
 const dispatchKeydownEvent = (element, window, key, code) => {
+  const keyboardEventInit = getKeyboardEventInit(key, code);
   const keydownEvent = new window.KeyboardEvent('keydown', {
     bubbles: true,
-    code,
-    key
+    code: keyboardEventInit.code,
+    key: keyboardEventInit.key
   });
+  setLegacyKeyCode$1(keydownEvent, keyboardEventInit.keyCode);
   dispatchEvent(element, keydownEvent);
 };
 
@@ -1613,28 +1746,43 @@ const handleKeydownLocal = (uid, hdId, key, code) => {
   if (!happyDomInstance) {
     return;
   }
-  const element = hdId ? happyDomInstance.elementMap[hdId] : happyDomInstance.document;
+  const {
+    document,
+    elementMap,
+    window
+  } = happyDomInstance;
+  const element = hdId ? elementMap[hdId] : document;
   if (!element) {
     return;
   }
-  dispatchKeydownEvent(element, happyDomInstance.window, key, code);
-  const elementMap = Object.create(null);
+  dispatchKeydownEvent(element, window, key, code);
+  const newElementMap = Object.create(null);
   set$1(uid, {
-    document: happyDomInstance.document,
-    elementMap,
-    window: happyDomInstance.window
+    document,
+    elementMap: newElementMap,
+    window
   });
 };
 const handleKeydown = (uid, hdId, key, code) => {
   return handleKeydownLocal(uid, hdId, key, code);
 };
 
+const setLegacyKeyCode = (event, keyCode) => {
+  Object.defineProperty(event, 'keyCode', {
+    value: keyCode
+  });
+  Object.defineProperty(event, 'which', {
+    value: keyCode
+  });
+};
 const dispatchKeyupEvent = (element, window, key, code) => {
+  const keyboardEventInit = getKeyboardEventInit(key, code);
   const keyupEvent = new window.KeyboardEvent('keyup', {
     bubbles: true,
-    code,
-    key
+    code: keyboardEventInit.code,
+    key: keyboardEventInit.key
   });
+  setLegacyKeyCode(keyupEvent, keyboardEventInit.keyCode);
   dispatchEvent(element, keyupEvent);
 };
 
@@ -89681,17 +89829,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
     }
@@ -89801,12 +89951,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 = '';
@@ -89918,6 +90068,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) {
@@ -89965,6 +90118,7 @@ const patchCanvasElements = async (document, uid) => {
       get: () => widthValue,
       set: newWidth => {
         widthValue = toNumber(newWidth);
+        reflectCanvasDimensionAttribute(element, 'width', widthValue);
         // @ts-ignore
         element.__offscreenCanvas.width = widthValue;
       }
@@ -89978,6 +90132,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.1.0",
+  "version": "3.3.0",
   "description": "Preview SandBox Worker",
   "repository": {
     "type": "git",