@lvce-editor/preview-worker 2.3.0 → 2.5.0

package/dist/previewWorkerMain.js

@@ -514,7 +514,7 @@ const IpcParentWithMessagePort$1 = {
 
 const Two$1 = '2.0';
 const callbacks$1 = Object.create(null);
-const get$4 = id => {
+const get$3 = id => {
   return callbacks$1[id];
 };
 const remove$1 = id => {
@@ -663,7 +663,7 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$4(id);
+  const fn = get$3(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -865,9 +865,9 @@ const create$s = (id, method, params) => {
   };
   return message;
 };
-let id = 0;
+let id$1 = 0;
 const create$r = () => {
-  return ++id;
+  return ++id$1;
 };
 
 /* eslint-disable n/no-unsupported-features/es-syntax */
@@ -1142,7 +1142,7 @@ const rpcs = Object.create(null);
 const set$5 = (id, rpc) => {
   rpcs[id] = rpc;
 };
-const get$3 = id => {
+const get$2 = id => {
   return rpcs[id];
 };
 const remove = id => {
@@ -1153,18 +1153,18 @@ const remove = id => {
 const create$2 = rpcId => {
   return {
     async dispose() {
-      const rpc = get$3(rpcId);
+      const rpc = get$2(rpcId);
       await rpc.dispose();
     },
     // @ts-ignore
     invoke(method, ...params) {
-      const rpc = get$3(rpcId);
+      const rpc = get$2(rpcId);
       // @ts-ignore
       return rpc.invoke(method, ...params);
     },
     // @ts-ignore
     invokeAndTransfer(method, ...params) {
-      const rpc = get$3(rpcId);
+      const rpc = get$2(rpcId);
       // @ts-ignore
       return rpc.invokeAndTransfer(method, ...params);
     },
@@ -1294,7 +1294,7 @@ const terminate = () => {
 };
 
 const {
-  get: get$2,
+  get: get$1,
   getCommandIds,
   getKeys: getKeys$1,
   registerCommands,
@@ -1360,11 +1360,48 @@ const diff2 = uid => {
   const {
     newState,
     oldState
-  } = get$2(uid);
+  } = get$1(uid);
   const result = diff(oldState, newState);
   return result;
 };
 
+/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
+const callBacks = Object.create(null);
+let id = 0;
+const registerCallback = () => {
+  const nextId = id++;
+  const {
+    promise,
+    resolve
+  } = Promise.withResolvers();
+  callBacks[nextId] = resolve;
+  return {
+    id: nextId,
+    promise
+  };
+};
+const executeCallback = (id, ...args) => {
+  const callback = callBacks[id];
+  if (callback) {
+    callback(args);
+    delete callBacks[id];
+  } else {
+    console.warn(`[preview-worker] No callback found for id ${id}`);
+  }
+};
+const getOffscreenCanvas = async (width, height) => {
+  const {
+    id,
+    promise
+  } = registerCallback();
+  await invoke('OffscreenCanvas.createForPreview', id, width, height);
+  const [offscreenCanvas, canvasId] = await promise;
+  return {
+    canvasId,
+    offscreenCanvas
+  };
+};
+
 const dispatchEvent = (element, event) => {
   element.dispatchEvent(event);
 
@@ -1420,7 +1457,7 @@ const getParsedNodesChildNodeCount = parsedDom => {
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 
 const states$1 = new Map();
-const get$1 = uid => {
+const get = uid => {
   return states$1.get(uid);
 };
 const set$1 = (uid, instance) => {
@@ -1982,6 +2019,20 @@ const serializeNode = (node, dom, css, context) => {
     return childCount;
   }
 
+  // Canvas element with transferred OffscreenCanvas — emit a Reference node
+  if (tagName === 'canvas' && node.__canvasId !== undefined) {
+    const refNode = {
+      childCount: 0,
+      type: Reference,
+      uid: node.__canvasId
+    };
+    if (context.elementMap) {
+      context.elementMap.set(node.__canvasId + '', node);
+    }
+    dom.push(refNode);
+    return 1;
+  }
+
   // Normal element - create a VirtualDomNode
   const newNode = {
     childCount: 0,
@@ -2072,7 +2123,7 @@ const handleClick = (state, hdId) => {
   if (!hdId) {
     return state;
   }
-  const happyDomInstance = get$1(state.uid);
+  const happyDomInstance = get(state.uid);
   if (!happyDomInstance) {
     return state;
   }
@@ -2674,7 +2725,7 @@ const handleEditorChanged = async () => {
   for (const previewUid of previewKeys) {
     const {
       newState: state
-    } = get$2(previewUid);
+    } = get$1(previewUid);
 
     // Skip if no URI is set
     if (!state.uri) {
@@ -90349,65 +90400,11 @@ const executeScripts = (window, document, scripts) => {
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 
 const states = new Map();
-const get = uid => {
-  return states.get(uid);
-};
 const set = (uid, entry) => {
   states.set(uid, entry);
 };
-const addAnimationFrameHandle = (uid, handle) => {
-  const entry = states.get(uid);
-  if (entry) {
-    entry.animationFrameHandles.push(handle);
-  }
-};
-
-const flushCanvasFrame = uid => {
-  const canvasStateEntry = get(uid);
-  if (!canvasStateEntry) {
-    return;
-  }
-  for (const instance of canvasStateEntry.instances) {
-    try {
-      const bitmap = instance.offscreenCanvas.transferToImageBitmap();
-      // @ts-ignore
-      void invoke('Preview.drawCanvas', uid, instance.dataId, bitmap);
-    } catch {
-      // transferToImageBitmap can fail if canvas is zero-sized
-    }
-  }
-};
-
-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);
-      }
-    }
-    flushCanvasFrame(uid);
-  };
-  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 = (document, uid) => {
+const patchCanvasElements = async (document, uid) => {
   const canvasElements = document.querySelectorAll('canvas');
   if (canvasElements.length === 0) {
     return;
@@ -90415,10 +90412,16 @@ const patchCanvasElements = (document, uid) => {
   const instances = [];
   for (let i = 0; i < canvasElements.length; i++) {
     const element = canvasElements[i];
-    const width = Number.parseInt(element.getAttribute('width') || '300', 10);
-    const height = Number.parseInt(element.getAttribute('height') || '150', 10);
-    const offscreenCanvas = new OffscreenCanvas(width, height);
-    const dataId = String(i);
+    const width = element.getAttribute('width') || 300;
+    const height = element.getAttribute('height') || 300;
+    element.width = width;
+    element.height = height;
+    const {
+      canvasId,
+      offscreenCanvas
+    } = await getOffscreenCanvas(width, height);
+    const dataId = String(canvasId);
+    element.__canvasId = canvasId;
     const context = offscreenCanvas.getContext('2d');
     element.getContext = contextType => {
       if (contextType === '2d') {
@@ -90443,7 +90446,6 @@ const patchCanvasElements = (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
@@ -90463,8 +90465,7 @@ const updateContent = async (state, uri) => {
           document: happyDomDocument,
           window: happyDomWindow
         } = createWindow(content);
-        patchCanvasElements(happyDomDocument, state.uid);
-        overrideRequestAnimationFrame(happyDomWindow, state.uid);
+        await patchCanvasElements(happyDomDocument, state.uid);
         executeScripts(happyDomWindow, happyDomDocument, scripts);
         const elementMap = new Map();
         const serialized = serialize(happyDomDocument, elementMap);
@@ -90475,7 +90476,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
       }
     }
@@ -90534,7 +90536,7 @@ const handleInput = (state, hdId, value) => {
   if (!hdId) {
     return state;
   }
-  const happyDomInstance = get$1(state.uid);
+  const happyDomInstance = get(state.uid);
   if (!happyDomInstance) {
     return state;
   }
@@ -90759,7 +90761,7 @@ const render2 = (uid, diffResult) => {
   const {
     newState,
     oldState
-  } = get$2(uid);
+  } = get$1(uid);
   set$2(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
   return commands;
@@ -90827,6 +90829,7 @@ const commandMap = {
   handleEditorChanged: handleEditorChanged,
   'Preview.create': create,
   'Preview.diff2': diff2,
+  'Preview.executeCallback': executeCallback,
   'Preview.getCommandIds': getCommandIds,
   'Preview.handleClick': wrapCommand(handleClick),
   'Preview.handleFileEdited': wrapCommand(handleFileEdited),

package/package.json

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