@lvce-editor/preview-sandbox-worker 2.3.0 → 3.1.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 */
@@ -1583,7 +1529,7 @@ const dispatchClickEvent = (element, window, clientX = 0, clientY = 0) => {
   dispatchEvent(element, clickEvent);
 };
 
-const handleClickLocal = (uid, hdId, clientX, clientY) => {
+const handleClickLocal = (uid, hdId, clientX, clientY, x, y) => {
   const happyDomInstance = get(uid);
   if (!happyDomInstance) {
     return;
@@ -1592,16 +1538,36 @@ const handleClickLocal = (uid, hdId, clientX, clientY) => {
   if (!element) {
     return;
   }
-  dispatchClickEvent(element, happyDomInstance.window, clientX, clientY);
-  const elementMap = Object.create(null);
-  set$1(uid, {
-    document: happyDomInstance.document,
-    elementMap,
-    window: happyDomInstance.window
+  const adjustedClientX = clientX - x;
+  const adjustedClientY = clientY - y;
+  dispatchClickEvent(element, happyDomInstance.window, adjustedClientX, adjustedClientY);
+};
+const handleClick = (uid, hdId, clientX = 0, clientY = 0, x = 0, y = 0) => {
+  return handleClickLocal(uid, hdId, clientX, clientY, x, y);
+};
+
+const dispatchContextmenuEvent = (element, window, clientX = 0, clientY = 0) => {
+  const contextmenuEvent = new window.MouseEvent('contextmenu', {
+    bubbles: true,
+    clientX,
+    clientY
   });
+  dispatchEvent(element, contextmenuEvent);
+};
+
+const handleContextmenuLocal = (uid, hdId, clientX, clientY, x, y) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = happyDomInstance.elementMap[hdId];
+  if (!element) {
+    return;
+  }
+  dispatchContextmenuEvent(element, happyDomInstance.window, clientX - x, clientY - y);
 };
-const handleClick = (uid, hdId, clientX = 0, clientY = 0) => {
-  return handleClickLocal(uid, hdId, clientX, clientY);
+const handleContextmenu = (uid, hdId, clientX = 0, clientY = 0, x = 0, y = 0) => {
+  return handleContextmenuLocal(uid, hdId, clientX, clientY, x, y);
 };
 
 const dispatchInputEvent = (element, window) => {
@@ -1725,6 +1691,30 @@ const handleMousedown = (uid, hdId, clientX, clientY) => {
   return handleMousedownLocal(uid, hdId, clientX, clientY);
 };
 
+const dispatchMouseleaveEvent = (element, window, clientX = 0, clientY = 0) => {
+  const mouseleaveEvent = new window.MouseEvent('mouseleave', {
+    bubbles: false,
+    clientX,
+    clientY
+  });
+  dispatchEvent(element, mouseleaveEvent);
+};
+
+const handleMouseleaveLocal = (uid, hdId, clientX, clientY, x, y) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = happyDomInstance.elementMap[hdId];
+  if (!element) {
+    return;
+  }
+  dispatchMouseleaveEvent(element, happyDomInstance.window, clientX - x, clientY - y);
+};
+const handleMouseleave = (uid, hdId, clientX = 0, clientY = 0, x = 0, y = 0) => {
+  return handleMouseleaveLocal(uid, hdId, clientX, clientY, x, y);
+};
+
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 
 const dispatchMousemoveEvent = (element, window, clientX = 0, clientY = 0) => {
@@ -1753,6 +1743,54 @@ const handleMousemove = (uid, hdId, clientX, clientY, x, y) => {
   return handleMousemoveLocal(uid, hdId, clientX, clientY, x, y);
 };
 
+const dispatchMouseoutEvent = (element, window, clientX = 0, clientY = 0) => {
+  const mouseoutEvent = new window.MouseEvent('mouseout', {
+    bubbles: true,
+    clientX,
+    clientY
+  });
+  dispatchEvent(element, mouseoutEvent);
+};
+
+const handleMouseoutLocal = (uid, hdId, clientX, clientY, x, y) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = happyDomInstance.elementMap[hdId];
+  if (!element) {
+    return;
+  }
+  dispatchMouseoutEvent(element, happyDomInstance.window, clientX - x, clientY - y);
+};
+const handleMouseout = (uid, hdId, clientX = 0, clientY = 0, x = 0, y = 0) => {
+  return handleMouseoutLocal(uid, hdId, clientX, clientY, x, y);
+};
+
+const dispatchMouseoverEvent = (element, window, clientX = 0, clientY = 0) => {
+  const mouseoverEvent = new window.MouseEvent('mouseover', {
+    bubbles: true,
+    clientX,
+    clientY
+  });
+  dispatchEvent(element, mouseoverEvent);
+};
+
+const handleMouseoverLocal = (uid, hdId, clientX, clientY, x, y) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = happyDomInstance.elementMap[hdId];
+  if (!element) {
+    return;
+  }
+  dispatchMouseoverEvent(element, happyDomInstance.window, clientX - x, clientY - y);
+};
+const handleMouseover = (uid, hdId, clientX = 0, clientY = 0, x = 0, y = 0) => {
+  return handleMouseoverLocal(uid, hdId, clientX, clientY, x, y);
+};
+
 const dispatchMouseupEvent = (element, window, clientX = 0, clientY = 0) => {
   const mouseupEvent = new window.MouseEvent('mouseup', {
     bubbles: true,
@@ -1777,6 +1815,161 @@ const handleMouseup = (uid, hdId, clientX, clientY) => {
   return handleMouseupLocal(uid, hdId, clientX, clientY);
 };
 
+const getPointerEventConstructor$4 = window => {
+  return window.PointerEvent || window.MouseEvent;
+};
+const dispatchPointerdownEvent = (element, window, clientX = 0, clientY = 0) => {
+  const PointerEventConstructor = getPointerEventConstructor$4(window);
+  const pointerdownEvent = new PointerEventConstructor('pointerdown', {
+    bubbles: true,
+    clientX,
+    clientY,
+    isPrimary: true,
+    pointerId: 1,
+    pointerType: 'mouse'
+  });
+  dispatchEvent(element, pointerdownEvent);
+};
+
+const handlePointerdownLocal = (uid, hdId, clientX, clientY, x, y) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = happyDomInstance.elementMap[hdId];
+  if (!element) {
+    return;
+  }
+  dispatchPointerdownEvent(element, happyDomInstance.window, clientX - x, clientY - y);
+};
+const handlePointerdown = (uid, hdId, clientX = 0, clientY = 0, x = 0, y = 0) => {
+  return handlePointerdownLocal(uid, hdId, clientX, clientY, x, y);
+};
+
+const getPointerEventConstructor$3 = window => {
+  return window.PointerEvent || window.MouseEvent;
+};
+const dispatchPointermoveEvent = (element, window, clientX = 0, clientY = 0) => {
+  const PointerEventConstructor = getPointerEventConstructor$3(window);
+  const pointermoveEvent = new PointerEventConstructor('pointermove', {
+    bubbles: true,
+    clientX,
+    clientY,
+    isPrimary: true,
+    pointerId: 1,
+    pointerType: 'mouse'
+  });
+  dispatchEvent(element, pointermoveEvent);
+};
+
+const handlePointermoveLocal = (uid, hdId, clientX, clientY, x, y) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = happyDomInstance.elementMap[hdId];
+  if (!element) {
+    return;
+  }
+  dispatchPointermoveEvent(element, happyDomInstance.window, clientX - x, clientY - y);
+};
+const handlePointermove = (uid, hdId, clientX = 0, clientY = 0, x = 0, y = 0) => {
+  return handlePointermoveLocal(uid, hdId, clientX, clientY, x, y);
+};
+
+const getPointerEventConstructor$2 = window => {
+  return window.PointerEvent || window.MouseEvent;
+};
+const dispatchPointeroutEvent = (element, window, clientX = 0, clientY = 0) => {
+  const PointerEventConstructor = getPointerEventConstructor$2(window);
+  const pointeroutEvent = new PointerEventConstructor('pointerout', {
+    bubbles: true,
+    clientX,
+    clientY,
+    isPrimary: true,
+    pointerId: 1,
+    pointerType: 'mouse'
+  });
+  dispatchEvent(element, pointeroutEvent);
+};
+
+const handlePointeroutLocal = (uid, hdId, clientX, clientY, x, y) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = happyDomInstance.elementMap[hdId];
+  if (!element) {
+    return;
+  }
+  dispatchPointeroutEvent(element, happyDomInstance.window, clientX - x, clientY - y);
+};
+const handlePointerout = (uid, hdId, clientX = 0, clientY = 0, x = 0, y = 0) => {
+  return handlePointeroutLocal(uid, hdId, clientX, clientY, x, y);
+};
+
+const getPointerEventConstructor$1 = window => {
+  return window.PointerEvent || window.MouseEvent;
+};
+const dispatchPointeroverEvent = (element, window, clientX = 0, clientY = 0) => {
+  const PointerEventConstructor = getPointerEventConstructor$1(window);
+  const pointeroverEvent = new PointerEventConstructor('pointerover', {
+    bubbles: true,
+    clientX,
+    clientY,
+    isPrimary: true,
+    pointerId: 1,
+    pointerType: 'mouse'
+  });
+  dispatchEvent(element, pointeroverEvent);
+};
+
+const handlePointeroverLocal = (uid, hdId, clientX, clientY, x, y) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = happyDomInstance.elementMap[hdId];
+  if (!element) {
+    return;
+  }
+  dispatchPointeroverEvent(element, happyDomInstance.window, clientX - x, clientY - y);
+};
+const handlePointerover = (uid, hdId, clientX = 0, clientY = 0, x = 0, y = 0) => {
+  return handlePointeroverLocal(uid, hdId, clientX, clientY, x, y);
+};
+
+const getPointerEventConstructor = window => {
+  return window.PointerEvent || window.MouseEvent;
+};
+const dispatchPointerupEvent = (element, window, clientX = 0, clientY = 0) => {
+  const PointerEventConstructor = getPointerEventConstructor(window);
+  const pointerupEvent = new PointerEventConstructor('pointerup', {
+    bubbles: true,
+    clientX,
+    clientY,
+    isPrimary: true,
+    pointerId: 1,
+    pointerType: 'mouse'
+  });
+  dispatchEvent(element, pointerupEvent);
+};
+
+const handlePointerupLocal = (uid, hdId, clientX, clientY, x, y) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = happyDomInstance.elementMap[hdId];
+  if (!element) {
+    return;
+  }
+  dispatchPointerupEvent(element, happyDomInstance.window, clientX - x, clientY - y);
+};
+const handlePointerup = (uid, hdId, clientX = 0, clientY = 0, x = 0, y = 0) => {
+  return handlePointerupLocal(uid, hdId, clientX, clientY, x, y);
+};
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -89356,6 +89549,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
@@ -89587,6 +89802,7 @@ const setGlobals = (window, globalGlobals, windowGlobals) => {
 /* eslint-disable @typescript-eslint/no-implied-eval */
 
 const executeScripts = (window, document, scripts, width = 0, height = 0) => {
+  exposeCanvasGlobals(window, document);
   const {
     globalGlobals,
     windowGlobals
@@ -89657,9 +89873,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) {
@@ -89768,6 +89982,52 @@ const patchCanvasElements = async (document, uid) => {
         element.__offscreenCanvas.height = heightValue;
       }
     });
+    Object.defineProperty(element, 'clientWidth', {
+      configurable: true,
+      enumerable: true,
+      get: () => widthValue
+    });
+    Object.defineProperty(element, 'clientHeight', {
+      configurable: true,
+      enumerable: true,
+      get: () => heightValue
+    });
+    Object.defineProperty(element, 'offsetWidth', {
+      configurable: true,
+      enumerable: true,
+      get: () => widthValue
+    });
+    Object.defineProperty(element, 'offsetHeight', {
+      configurable: true,
+      enumerable: true,
+      get: () => heightValue
+    });
+
+    // @ts-ignore
+    element.getBoundingClientRect = () => {
+      return {
+        bottom: heightValue,
+        height: heightValue,
+        left: 0,
+        right: widthValue,
+        toJSON: () => {
+          return {
+            bottom: heightValue,
+            height: heightValue,
+            left: 0,
+            right: widthValue,
+            top: 0,
+            width: widthValue,
+            x: 0,
+            y: 0
+          };
+        },
+        top: 0,
+        width: widthValue,
+        x: 0,
+        y: 0
+      };
+    };
     instances.push({
       dataId,
       dimensions,
@@ -89793,6 +90053,7 @@ const updateContent = async (uid, width, height, content, scripts) => {
       error
     } = executeScripts(happyDomWindow, happyDomDocument, scripts, width, height);
     const elementMap = Object.create(null);
+    serialize(happyDomDocument, elementMap);
     set$1(uid, {
       document: happyDomDocument,
       elementMap,
@@ -89845,13 +90106,22 @@ const commandMap = {
   'SandBox.executeCallback': executeCallback,
   'SandBox.getSerializedDom': getSerializedDom,
   'SandBox.handleClick': handleClick,
+  'SandBox.handleContextMenu': handleContextmenu,
   'SandBox.handleInput': handleInput,
   'SandBox.handleKeyDown': handleKeydown,
   'SandBox.handleKeyUp': handleKeyup,
   'SandBox.handleMessagePort': handleMessagePort,
   'SandBox.handleMousedown': handleMousedown,
+  'SandBox.handleMouseleave': handleMouseleave,
   'SandBox.handleMousemove': handleMousemove,
+  'SandBox.handleMouseout': handleMouseout,
+  'SandBox.handleMouseover': handleMouseover,
   'SandBox.handleMouseup': handleMouseup,
+  'SandBox.handlePointerdown': handlePointerdown,
+  'SandBox.handlePointermove': handlePointermove,
+  'SandBox.handlePointerout': handlePointerout,
+  'SandBox.handlePointerover': handlePointerover,
+  'SandBox.handlePointerup': handlePointerup,
   'SandBox.loadContent': loadContent,
   'SandBox.resize': resize,
   'SandBox.terminate': terminate

package/package.json

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