@lvce-editor/preview-sandbox-worker 1.4.0 → 1.6.0

package/dist/previewSandBoxWorkerMain.js

@@ -1774,7 +1774,7 @@ const dispatchMouseupEvent = (element, window, clientX = 0, clientY = 0) => {
   dispatchEvent(element, mouseupEvent);
 };
 
-const handleMouseupLocal = (uid, hdId) => {
+const handleMouseupLocal = (uid, hdId, clientX, clientY) => {
   const happyDomInstance = get(uid);
   if (!happyDomInstance) {
     return;
@@ -1783,7 +1783,7 @@ const handleMouseupLocal = (uid, hdId) => {
   if (!element) {
     return;
   }
-  dispatchMouseupEvent(element, happyDomInstance.window);
+  dispatchMouseupEvent(element, happyDomInstance.window, clientX, clientY);
   const elementMap = new Map();
   set$1(uid, {
     document: happyDomInstance.document,
@@ -1791,8 +1791,8 @@ const handleMouseupLocal = (uid, hdId) => {
     window: happyDomInstance.window
   });
 };
-const handleMouseup = (uid, hdId) => {
-  return handleMouseupLocal(uid, hdId);
+const handleMouseup = (uid, hdId, clientX, clientY) => {
+  return handleMouseupLocal(uid, hdId, clientX, clientY);
 };
 
 function getDefaultExportFromCjs (x) {
@@ -89376,10 +89376,133 @@ const createWindow = rawHtml => {
   };
 };
 
+/**
+ * Extracts line and column information from an error stack trace
+ * Looks for patterns like "<anonymous>:114:26" in the stack trace
+ */
+const extractLineColumnFromStack = stack => {
+  // Match patterns like "<anonymous>:114:26" or eval:114:26
+  const match = stack.match(/<anonymous>:(\d+):(\d+)/);
+  if (match) {
+    return {
+      column: Number.parseInt(match[2], 10),
+      line: Number.parseInt(match[1], 10)
+    };
+  }
+  return null;
+};
+
+/**
+ * Generates a code frame showing the error location with context
+ * @param scriptContent The original script content
+ * @param error The error object
+ * @param contextLines Number of lines to show before/after the error (default: 2)
+ * @returns Formatted code frame string or empty string if line info cannot be extracted
+ */
+const getErrorCodeFrame = (scriptContent, error, contextLines = 2) => {
+  if (!error || !error.stack) {
+    return '';
+  }
+  const lineColumn = extractLineColumnFromStack(error.stack);
+  if (!lineColumn) {
+    return '';
+  }
+  const {
+    column,
+    line
+  } = lineColumn;
+  const lines = scriptContent.split('\n');
+
+  // Line numbers in stack traces are 1-based
+  // Offset by -4 to account for the anonymous function wrapper
+  const errorLineIndex = line - 1 - 2;
+  if (errorLineIndex < 0 || errorLineIndex >= lines.length) {
+    return '';
+  }
+  const startLine = Math.max(0, errorLineIndex - contextLines);
+  const endLine = Math.min(lines.length - 1, errorLineIndex + contextLines);
+
+  // Find the width of line numbers for padding
+  const maxLineNum = endLine + 1;
+  const numberWidth = String(maxLineNum).length;
+  let codeFrame = '\n';
+
+  // Add context lines before
+  for (let i = startLine; i <= endLine; i++) {
+    const lineNum = i + 1;
+    const isErrorLine = i === errorLineIndex;
+    const lineContent = lines[i];
+    const lineNumStr = String(lineNum).padStart(numberWidth, ' ');
+    const prefix = isErrorLine ? '> ' : '  ';
+    codeFrame += `${prefix}${lineNumStr} | ${lineContent}\n`;
+
+    // Add a caret pointing to the error column on the error line
+    if (isErrorLine && column > 0) {
+      const caretPosition = column - 1;
+      codeFrame += `   ${' '.repeat(numberWidth)} | ${' '.repeat(caretPosition)}^\n`;
+    }
+  }
+  return codeFrame;
+};
+
 const alert = message => {
   void invoke('ConfirmPrompt.prompt', message);
 };
 
+const createLocalStorage = () => {
+  const store = new Map();
+  const getItem = key => {
+    if (store.has(key)) {
+      return store.get(key);
+    }
+    return null;
+  };
+  const setItem = (key, value) => {
+    store.set(key, String(value));
+  };
+  const removeItem = key => {
+    store.delete(key);
+  };
+  const clear = () => {
+    store.clear();
+  };
+  const key = index => {
+    const keys = [...store.keys()];
+    if (index < 0 || index >= keys.length) {
+      return null;
+    }
+    return keys[index];
+  };
+  const localStorage = {
+    clear,
+    getItem,
+    key,
+    get length() {
+      return store.size;
+    },
+    removeItem,
+    setItem
+  };
+  return localStorage;
+};
+
+const getGlobals = (width, height) => {
+  const localStorage = createLocalStorage();
+  return {
+    globalGlobals: {
+      alert: alert,
+      innerHeight: height,
+      innerWidth: width,
+      localStorage
+    },
+    windowGlobals: {
+      alert: alert,
+      innerHeight: height,
+      innerWidth: width
+    }
+  };
+};
+
 // const FUNCTION_REGEX = /(?:^|[\n;])\s*function\s+([a-zA-Z_$][\w$]*)/g
 
 const getTopLevelFunctionNames = script => {
@@ -89467,57 +89590,30 @@ const getTopLevelFunctionNames = script => {
   return names;
 };
 
-const createLocalStorage = () => {
-  const store = new Map();
-  const getItem = key => {
-    if (store.has(key)) {
-      return store.get(key);
-    }
-    return null;
-  };
-  const setItem = (key, value) => {
-    store.set(key, String(value));
-  };
-  const removeItem = key => {
-    store.delete(key);
-  };
-  const clear = () => {
-    store.clear();
-  };
-  const key = index => {
-    const keys = [...store.keys()];
-    if (index < 0 || index >= keys.length) {
-      return null;
-    }
-    return keys[index];
-  };
-  const localStorage = {
-    clear,
-    getItem,
-    key,
-    get length() {
-      return store.size;
-    },
-    removeItem,
-    setItem
-  };
-  return localStorage;
+/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
+
+const setGlobals = (window, globalGlobals, windowGlobals) => {
+  for (const [key, value] of Object.entries(globalGlobals)) {
+    // @ts-ignore
+    globalThis[key] = value;
+  }
+  for (const [key, value] of Object.entries(windowGlobals)) {
+    // @ts-ignore
+    window[key] = value;
+  }
 };
 
+/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 /* eslint-disable @typescript-eslint/no-implied-eval */
+
 const executeScripts = (window, document, scripts, width = 0, height = 0) => {
-  window.alert = alert;
-  // @ts-ignore
-  globalThis.alert = alert;
-  const localStorage = createLocalStorage();
-  // @ts-ignore
-  globalThis.localStorage = localStorage;
-  window.innerWidth = width;
-  window.innerHeight = height;
-  // @ts-ignore
-  globalThis.innerWidth = width;
-  // @ts-ignore
-  globalThis.innerHeight = height;
+  const {
+    globalGlobals,
+    windowGlobals
+  } = getGlobals(width, height);
+  setGlobals(window, globalGlobals, windowGlobals);
+  let firstError = null;
+  let firstCodeFrame = '';
   // Execute each script with the happy-dom window and document as context
   for (const scriptContent of scripts) {
     try {
@@ -89529,9 +89625,17 @@ const executeScripts = (window, document, scripts, width = 0, height = 0) => {
       const fn = new Function('window', 'document', 'console', scriptContent + suffix);
       fn(window, document, console);
     } catch (error) {
-      console.warn('[preview-sandbox-worker] Script execution error:', error);
+      // Record the first error but continue executing remaining scripts
+      if (firstError === null) {
+        firstCodeFrame = getErrorCodeFrame(scriptContent, error);
+        firstError = error;
+      }
     }
   }
+  return {
+    codeFrame: firstCodeFrame,
+    error: firstError
+  };
 };
 
 const getParsedNodesChildNodeCount = parsedDom => {
@@ -89705,7 +89809,10 @@ const updateContent = async (uid, width, height, content, scripts) => {
       window: happyDomWindow
     } = createWindow(content);
     await patchCanvasElements(happyDomDocument, uid);
-    executeScripts(happyDomWindow, happyDomDocument, scripts, width, height);
+    const {
+      codeFrame,
+      error
+    } = executeScripts(happyDomWindow, happyDomDocument, scripts, width, height);
     const elementMap = new Map();
     set$1(uid, {
       document: happyDomDocument,
@@ -89714,12 +89821,16 @@ const updateContent = async (uid, width, height, content, scripts) => {
     });
     observe(uid, happyDomDocument, happyDomWindow);
     return {
+      codeFrame,
+      error,
       errorMessage: ''
     };
   } catch (error) {
     // If file reading or parsing fails, return empty content and parsedDom with error message
     const errorMessage = error instanceof Error ? error.message : 'Unknown error';
     return {
+      codeFrame: '',
+      error,
       errorMessage
     };
   }
@@ -89732,8 +89843,13 @@ const loadContent = async (uid, width, height, content, scripts) => {
 
   // Read and parse file contents if we have a URI
   const {
+    codeFrame,
+    error,
     errorMessage
   } = await updateContent(uid, width, height, content, scripts);
+  if (error) {
+    console.warn(`preview error: ${error} ${codeFrame}`);
+  }
   return {
     errorMessage
   };

package/package.json

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