@lvce-editor/preview-worker 2.1.0 → 2.3.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$3 = id => {
+const get$4 = 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$3(id);
+  const fn = get$4(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -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,10 +1139,10 @@ 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 => {
+const get$3 = id => {
   return rpcs[id];
 };
 const remove = id => {
@@ -1152,18 +1153,18 @@ const remove = id => {
 const create$2 = rpcId => {
   return {
     async dispose() {
-      const rpc = get$2(rpcId);
+      const rpc = get$3(rpcId);
       await rpc.dispose();
     },
     // @ts-ignore
     invoke(method, ...params) {
-      const rpc = get$2(rpcId);
+      const rpc = get$3(rpcId);
       // @ts-ignore
       return rpc.invoke(method, ...params);
     },
     // @ts-ignore
     invokeAndTransfer(method, ...params) {
-      const rpc = get$2(rpcId);
+      const rpc = get$3(rpcId);
       // @ts-ignore
       return rpc.invokeAndTransfer(method, ...params);
     },
@@ -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';
@@ -1293,11 +1294,11 @@ const terminate = () => {
 };
 
 const {
-  get: get$1,
+  get: get$2,
   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) => {
@@ -1359,7 +1360,7 @@ const diff2 = uid => {
   const {
     newState,
     oldState
-  } = get$1(uid);
+  } = get$2(uid);
   const result = diff(oldState, newState);
   return result;
 };
@@ -1418,12 +1419,12 @@ const getParsedNodesChildNodeCount = parsedDom => {
 
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 
-const states = new Map();
-const get = uid => {
-  return states.get(uid);
+const states$1 = new Map();
+const get$1 = 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 +1773,7 @@ const Dt = 'dt';
 const Iframe = 'iframe';
 const Del = 'del';
 const H6 = 'h6';
+const Canvas = 'canvas';
 
 const getVirtualDomTag = text => {
   switch (text) {
@@ -1787,6 +1789,8 @@ const getVirtualDomTag = text => {
       return Br$1;
     case Button:
       return Button$1;
+    case Canvas:
+      return Canvas$1;
     case Cite:
       return Cite$1;
     case Code:
@@ -2068,7 +2072,7 @@ const handleClick = (state, hdId) => {
   if (!hdId) {
     return state;
   }
-  const happyDomInstance = get(state.uid);
+  const happyDomInstance = get$1(state.uid);
   if (!happyDomInstance) {
     return state;
   }
@@ -2086,7 +2090,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
@@ -2670,7 +2674,7 @@ const handleEditorChanged = async () => {
   for (const previewUid of previewKeys) {
     const {
       newState: state
-    } = get$1(previewUid);
+    } = get$2(previewUid);
 
     // Skip if no URI is set
     if (!state.uri) {
@@ -2701,7 +2705,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 +2717,7 @@ const handleEditorChanged = async () => {
           parsedDom: [],
           scripts: []
         };
-        set$1(previewUid, state, updatedState);
+        set$2(previewUid, state, updatedState);
       }
     }
   }
@@ -90342,6 +90346,98 @@ 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 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 = 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 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 +90463,14 @@ const updateContent = async (state, uri) => {
           document: happyDomDocument,
           window: happyDomWindow
         } = createWindow(content);
+        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
@@ -90424,6 +90522,56 @@ const handleFileEdited = async state => {
   };
 };
 
+const dispatchInputEvent = (element, window) => {
+  const inputEvent = new window.Event('input', {
+    bubbles: true
+  });
+  dispatchEvent(element, inputEvent);
+};
+
+const handleInput = (state, hdId, value) => {
+  // console.log('input,', hdId, value)
+  if (!hdId) {
+    return state;
+  }
+  const happyDomInstance = get$1(state.uid);
+  if (!happyDomInstance) {
+    return state;
+  }
+  const element = happyDomInstance.elementMap.get(hdId);
+  if (!element) {
+    return state;
+  }
+
+  // console.log({ element })
+  // Update the element's value from the preview
+  element.value = value;
+  // Dispatch input event in happy-dom so event listeners fire
+  dispatchInputEvent(element, happyDomInstance.window);
+
+  // 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
@@ -90511,6 +90659,7 @@ const renderCss = (oldState, newState) => {
   return ['Viewlet.setCss', uid, cssString];
 };
 
+const HandleInput = 4;
 const HandleClick = 11;
 
 const getEmptyPreviewDom = () => {
@@ -90543,6 +90692,7 @@ const getPreviewDom = state => {
       childCount: parsedNodesChildNodeCount,
       className: 'Viewlet Preview',
       onClick: HandleClick,
+      onInput: HandleInput,
       type: Div$1
     }, ...parsedDom];
   }
@@ -90550,6 +90700,7 @@ const getPreviewDom = state => {
     childCount: 1,
     className: 'Viewlet Preview',
     onClick: HandleClick,
+    onInput: HandleInput,
     type: Div$1
   }, {
     childCount: 1,
@@ -90608,8 +90759,8 @@ const render2 = (uid, diffResult) => {
   const {
     newState,
     oldState
-  } = get$1(uid);
-  set$1(uid, newState, newState);
+  } = get$2(uid);
+  set$2(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
   return commands;
 };
@@ -90619,6 +90770,10 @@ const renderEventListeners = () => {
     capture: true,
     name: HandleClick,
     params: ['handleClick', 'event.target.dataset.id']
+  }, {
+    capture: true,
+    name: HandleInput,
+    params: ['handleInput', 'event.target.dataset.id', 'event.target.value']
   }];
 };
 
@@ -90675,6 +90830,7 @@ const commandMap = {
   'Preview.getCommandIds': getCommandIds,
   'Preview.handleClick': wrapCommand(handleClick),
   'Preview.handleFileEdited': wrapCommand(handleFileEdited),
+  'Preview.handleInput': wrapCommand(handleInput),
   'Preview.loadContent': wrapCommand(loadContent),
   'Preview.render2': render2,
   'Preview.renderEventListeners': renderEventListeners,
@@ -90690,12 +90846,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.1.0",
+  "version": "2.3.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"
   }
 }