@lvce-editor/preview-worker 2.2.0 → 2.4.0

package/dist/previewWorkerMain.js

@@ -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 */
@@ -1129,6 +1129,7 @@ const Dt$1 = 67;
 const Iframe$1 = 68;
 const Style = 72;
 const Html = 73;
+const Canvas$1 = 77;
 const Reference = 100;
 
 const EditorWorker = 99;
@@ -1138,7 +1139,7 @@ const SetDom2 = 'Viewlet.setDom2';
 const SetPatches = 'Viewlet.setPatches';
 
 const rpcs = Object.create(null);
-const set$4 = (id, rpc) => {
+const set$5 = (id, rpc) => {
   rpcs[id] = rpc;
 };
 const get$2 = id => {
@@ -1171,7 +1172,7 @@ const create$2 = rpcId => {
       const mockRpc = createMockRpc({
         commandMap
       });
-      set$4(rpcId, mockRpc);
+      set$5(rpcId, mockRpc);
       // @ts-ignore
       mockRpc[Symbol.dispose] = () => {
         remove(rpcId);
@@ -1180,20 +1181,20 @@ const create$2 = rpcId => {
       return mockRpc;
     },
     set(rpc) {
-      set$4(rpcId, rpc);
+      set$5(rpcId, rpc);
     }
   };
 };
 
 const {
   invoke: invoke$1,
-  set: set$3
+  set: set$4
 } = create$2(EditorWorker);
 
 const {
   invoke,
   invokeAndTransfer,
-  set: set$2
+  set: set$3
 } = create$2(RendererWorker);
 const sendMessagePortToEditorWorker = async (port, rpcId) => {
   const command = 'HandleMessagePort.handleMessagePort';
@@ -1297,7 +1298,7 @@ const {
   getCommandIds,
   getKeys: getKeys$1,
   registerCommands,
-  set: set$1,
+  set: set$2,
   wrapCommand,
   wrapGetter
 } = create$1();
@@ -1318,7 +1319,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     uri,
     warningCount: 0
   };
-  set$1(uid, state, state);
+  set$2(uid, state, state);
 };
 
 const iEqual = (oldState, newState) => {
@@ -1364,6 +1365,43 @@ const diff2 = uid => {
   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);
 
@@ -1418,12 +1456,12 @@ const getParsedNodesChildNodeCount = parsedDom => {
 
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 
-const states = new Map();
+const states$1 = new Map();
 const get = uid => {
-  return states.get(uid);
+  return states$1.get(uid);
 };
-const set = (uid, instance) => {
-  states.set(uid, instance);
+const set$1 = (uid, instance) => {
+  states$1.set(uid, instance);
 };
 
 const text = data => {
@@ -1772,6 +1810,7 @@ const Dt = 'dt';
 const Iframe = 'iframe';
 const Del = 'del';
 const H6 = 'h6';
+const Canvas = 'canvas';
 
 const getVirtualDomTag = text => {
   switch (text) {
@@ -1787,6 +1826,8 @@ const getVirtualDomTag = text => {
       return Br$1;
     case Button:
       return Button$1;
+    case Canvas:
+      return Canvas$1;
     case Cite:
       return Cite$1;
     case Code:
@@ -1978,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,
@@ -2086,7 +2141,7 @@ const handleClick = (state, hdId) => {
   const serialized = serialize(happyDomInstance.document, elementMap);
 
   // Update happy-dom state with new element map
-  set(state.uid, {
+  set$1(state.uid, {
     document: happyDomInstance.document,
     elementMap,
     window: happyDomInstance.window
@@ -2701,7 +2756,7 @@ const handleEditorChanged = async () => {
           parsedDom: parseResult.dom,
           scripts: parseResult.scripts
         };
-        set$1(previewUid, state, updatedState);
+        set$2(previewUid, state, updatedState);
       } catch (error) {
         // If getting text fails, update with error message
         const errorMessage = error instanceof Error ? error.message : 'Unknown error';
@@ -2713,7 +2768,7 @@ const handleEditorChanged = async () => {
           parsedDom: [],
           scripts: []
         };
-        set$1(previewUid, state, updatedState);
+        set$2(previewUid, state, updatedState);
       }
     }
   }
@@ -90342,6 +90397,84 @@ const executeScripts = (window, document, scripts) => {
   }
 };
 
+/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
+
+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');
+  if (canvasElements.length === 0) {
+    return;
+  }
+  const instances = [];
+  for (let i = 0; i < canvasElements.length; i++) {
+    const element = canvasElements[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') {
+        return context;
+      }
+      return undefined;
+    };
+    instances.push({
+      dataId,
+      element,
+      offscreenCanvas
+    });
+  }
+  set(uid, {
+    animationFrameHandles: [],
+    instances
+  });
+};
+
 /* eslint-disable prefer-destructuring */
 
 const updateContent = async (state, uri) => {
@@ -90367,12 +90500,14 @@ const updateContent = async (state, uri) => {
           document: happyDomDocument,
           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);
         parsedDom = serialized.dom;
         css = serialized.css;
-        set(state.uid, {
+        set$1(state.uid, {
           document: happyDomDocument,
           elementMap,
           window: happyDomWindow
@@ -90456,7 +90591,7 @@ const handleInput = (state, hdId, value) => {
   const serialized = serialize(happyDomInstance.document, elementMap);
 
   // Update happy-dom state with new element map
-  set(state.uid, {
+  set$1(state.uid, {
     document: happyDomInstance.document,
     elementMap,
     window: happyDomInstance.window
@@ -90662,7 +90797,7 @@ const render2 = (uid, diffResult) => {
     newState,
     oldState
   } = get$1(uid);
-  set$1(uid, newState, newState);
+  set$2(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
   return commands;
 };
@@ -90729,6 +90864,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),
@@ -90748,12 +90884,12 @@ const listen = async () => {
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  set$2(rpc);
+  set$3(rpc);
   const editorRpc = await LazyTransferMessagePortRpcParent.create({
     commandMap: {},
     send: port => sendMessagePortToEditorWorker(port, 9112)
   });
-  set$3(editorRpc);
+  set$4(editorRpc);
 };
 
 const main = async () => {

package/package.json

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