@lvce-editor/preview-worker 2.4.0 → 2.6.0

package/dist/previewWorkerMain.js

@@ -1411,6 +1411,9 @@ const dispatchEvent = (element, event) => {
   if (typeof handler === 'function') {
     handler.call(element, event);
   } else if (handler === null || handler === undefined) {
+    if (!element.getAttribute) {
+      return;
+    }
     // Check if there's an inline HTML attribute that wasn't converted to a property
     const attrValue = element.getAttribute(handlerName);
     if (attrValue && typeof attrValue === 'string' && element.ownerDocument && element.ownerDocument.defaultView) {
@@ -90366,12 +90369,89 @@ const alert = message => {
   void invoke('ConfirmPrompt.prompt', message);
 };
 
+// const FUNCTION_REGEX = /(?:^|[\n;])\s*function\s+([a-zA-Z_$][\w$]*)/g
+
 const getTopLevelFunctionNames = script => {
   const names = [];
-  const regex = /(?:^|[\n;])\s*function\s+([a-zA-Z_$][\w$]*)/g;
-  let match;
-  while ((match = regex.exec(script)) !== null) {
-    names.push(match[1]);
+  let braceDepth = 0;
+  let i = 0;
+  while (i < script.length) {
+    const char = script[i];
+
+    // Skip strings
+    if (char === '"' || char === "'" || char === '`') {
+      const quote = char;
+      i++;
+      while (i < script.length) {
+        if (script[i] === '\\') {
+          i += 2;
+          continue;
+        }
+        if (script[i] === quote) {
+          i++;
+          break;
+        }
+        i++;
+      }
+      continue;
+    }
+
+    // Skip comments
+    if (char === '/' && script[i + 1] === '/') {
+      // Line comment
+      i += 2;
+      while (i < script.length && script[i] !== '\n') {
+        i++;
+      }
+      continue;
+    }
+    if (char === '/' && script[i + 1] === '*') {
+      // Block comment
+      i += 2;
+      while (i < script.length - 1) {
+        if (script[i] === '*' && script[i + 1] === '/') {
+          i += 2;
+          break;
+        }
+        i++;
+      }
+      continue;
+    }
+
+    // Track braces
+    if (char === '{') {
+      braceDepth++;
+      i++;
+      continue;
+    }
+    if (char === '}') {
+      braceDepth--;
+      i++;
+      continue;
+    }
+
+    // Only look for functions at depth 0
+    if (braceDepth === 0 && char === 'f' && script.slice(i, i + 8) === 'function') {
+      // Check if 'function' is a complete word
+      const charBefore = i > 0 ? script[i - 1] : ' ';
+      const charAfter = script[i + 8] ?? ' ';
+      const isValidBefore = /\s|^|;|{|}/.test(charBefore);
+      const isValidAfter = /\s/.test(charAfter);
+      if (isValidBefore && isValidAfter) {
+        i += 8;
+        // Skip whitespace
+        while (i < script.length && /\s/.test(script[i])) {
+          i++;
+        }
+        // Extract function name
+        const nameMatch = script.slice(i).match(/^([a-zA-Z_$][\w$]*)/);
+        if (nameMatch) {
+          names.push(nameMatch[1]);
+        }
+        continue;
+      }
+    }
+    i++;
   }
   return names;
 };
@@ -90403,40 +90483,6 @@ const states = new Map();
 const set = (uid, entry) => {
   states.set(uid, entry);
 };
-const addAnimationFrameHandle = (uid, handle) => {
-  const entry = states.get(uid);
-  if (entry) {
-    entry.animationFrameHandles.push(handle);
-  }
-};
-
-const FRAME_INTERVAL = 16;
-const overrideRequestAnimationFrame = (window, uid) => {
-  let nextId = 1;
-  const callbacks = new Map();
-  const tick = () => {
-    const currentCallbacks = [...callbacks.entries()];
-    callbacks.clear();
-    const timestamp = performance.now();
-    for (const [, callback] of currentCallbacks) {
-      try {
-        callback(timestamp);
-      } catch (error) {
-        console.warn('[preview-worker] requestAnimationFrame callback error:', error);
-      }
-    }
-  };
-  window.requestAnimationFrame = callback => {
-    const id = nextId++;
-    callbacks.set(id, callback);
-    const handle = setTimeout(tick, FRAME_INTERVAL);
-    addAnimationFrameHandle(uid, handle);
-    return id;
-  };
-  window.cancelAnimationFrame = id => {
-    callbacks.delete(id);
-  };
-};
 
 const patchCanvasElements = async (document, uid) => {
   const canvasElements = document.querySelectorAll('canvas');
@@ -90480,7 +90526,6 @@ const patchCanvasElements = async (document, uid) => {
 const updateContent = async (state, uri) => {
   try {
     // Read the file content using RendererWorker RPC
-    // @ts-ignore
     const content = await readFile(uri);
 
     // Parse the content into virtual DOM and CSS
@@ -90501,7 +90546,6 @@ const updateContent = async (state, uri) => {
           window: happyDomWindow
         } = createWindow(content);
         await patchCanvasElements(happyDomDocument, state.uid);
-        overrideRequestAnimationFrame(happyDomWindow, state.uid);
         executeScripts(happyDomWindow, happyDomDocument, scripts);
         const elementMap = new Map();
         const serialized = serialize(happyDomDocument, elementMap);
@@ -90512,7 +90556,8 @@ const updateContent = async (state, uri) => {
           elementMap,
           window: happyDomWindow
         });
-      } catch {
+      } catch (error) {
+        console.error(error);
         // If script execution fails, fall back to static HTML parsing
       }
     }
@@ -90609,6 +90654,51 @@ const handleInput = (state, hdId, value) => {
   };
 };
 
+const dispatchKeydownEvent = (element, window, key, code) => {
+  const keydownEvent = new window.KeyboardEvent('keydown', {
+    bubbles: true,
+    code,
+    key
+  });
+  dispatchEvent(element, keydownEvent);
+};
+
+const handleKeydown = (state, hdId, key, code) => {
+  const happyDomInstance = get(state.uid);
+  if (!happyDomInstance) {
+    return state;
+  }
+  const element = hdId ? happyDomInstance.elementMap.get(hdId) : happyDomInstance.document;
+  if (!element) {
+    return state;
+  }
+
+  // Dispatch keydown event in happy-dom so event listeners fire
+  dispatchKeydownEvent(element, happyDomInstance.window, key, code);
+
+  // Re-serialize the (potentially mutated) DOM
+  const elementMap = new Map();
+  const serialized = serialize(happyDomInstance.document, elementMap);
+
+  // Update happy-dom state with new element map
+  set$1(state.uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+
 const loadContent = async state => {
   // Try to register to receive editor change notifications from the editor worker.
   // Use dynamic access and ignore errors so this is safe in environments where
@@ -90698,6 +90788,7 @@ const renderCss = (oldState, newState) => {
 
 const HandleInput = 4;
 const HandleClick = 11;
+const HandleKeydown = 12;
 
 const getEmptyPreviewDom = () => {
   return [{
@@ -90730,6 +90821,8 @@ const getPreviewDom = state => {
       className: 'Viewlet Preview',
       onClick: HandleClick,
       onInput: HandleInput,
+      onKeyDown: HandleKeydown,
+      tabIndex: 0,
       type: Div$1
     }, ...parsedDom];
   }
@@ -90738,6 +90831,8 @@ const getPreviewDom = state => {
     className: 'Viewlet Preview',
     onClick: HandleClick,
     onInput: HandleInput,
+    onKeyDown: HandleKeydown,
+    tabIndex: 0,
     type: Div$1
   }, {
     childCount: 1,
@@ -90811,6 +90906,10 @@ const renderEventListeners = () => {
     capture: true,
     name: HandleInput,
     params: ['handleInput', 'event.target.dataset.id', 'event.target.value']
+  }, {
+    capture: true,
+    name: HandleKeydown,
+    params: ['handleKeyDown', 'event.target.dataset.id', 'event.key', 'event.code']
   }];
 };
 
@@ -90869,6 +90968,7 @@ const commandMap = {
   'Preview.handleClick': wrapCommand(handleClick),
   'Preview.handleFileEdited': wrapCommand(handleFileEdited),
   'Preview.handleInput': wrapCommand(handleInput),
+  'Preview.handleKeyDown': wrapCommand(handleKeydown),
   'Preview.loadContent': wrapCommand(loadContent),
   'Preview.render2': render2,
   'Preview.renderEventListeners': renderEventListeners,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/preview-worker",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "Preview Worker",
   "repository": {
     "type": "git",
@@ -11,7 +11,7 @@
   "type": "module",
   "main": "dist/previewWorkerMain.js",
   "dependencies": {
-    "@lvce-editor/virtual-dom-worker": "^7.3.0",
+    "@lvce-editor/virtual-dom-worker": "^8.0.0",
     "happy-dom-without-node": "^14.12.3"
   }
 }