@lvce-editor/preview-worker 2.6.0 → 2.8.0

package/dist/previewWorkerMain.js

@@ -1293,6 +1293,14 @@ const terminate = () => {
   globalThis.close();
 };
 
+const createSandboxRpc = async () => {
+  const sandboxRpc = await LazyTransferMessagePortRpcParent.create({
+    commandMap: {},
+    send: async port => await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToPreviewSandBoxWorker', port, 'SandBox.handleMessagePort')
+  });
+  return sandboxRpc;
+};
+
 const {
   get: get$1,
   getCommandIds,
@@ -1303,7 +1311,8 @@ const {
   wrapGetter
 } = create$1();
 
-const create = (uid, uri, x, y, width, height, platform, assetDir) => {
+const create = async (uid, uri, x, y, width, height, platform, assetDir) => {
+  const sandboxRpc = await createSandboxRpc();
   const state = {
     assetDir,
     content: '',
@@ -1314,9 +1323,11 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     parsedDom: [],
     parsedNodesChildNodeCount: 0,
     platform,
+    sandboxRpc,
     scripts: [],
     uid,
     uri,
+    useSandboxWorker: false,
     warningCount: 0
   };
   set$2(uid, state, state);
@@ -2121,11 +2132,26 @@ const serialize = (document, elementMap) => {
   };
 };
 
-const handleClick = (state, hdId) => {
-  // console.log('click,', hdId)
-  if (!hdId) {
-    return state;
-  }
+const handleClickSandbox = async (state, hdId) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleClick', uid, hdId);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleClickLocal = (state, hdId) => {
   const happyDomInstance = get(state.uid);
   if (!happyDomInstance) {
     return state;
@@ -2134,16 +2160,9 @@ const handleClick = (state, hdId) => {
   if (!element) {
     return state;
   }
-
-  // console.log({ element })
-  // Dispatch click event in happy-dom so event listeners fire
   dispatchClickEvent(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,
@@ -2161,6 +2180,15 @@ const handleClick = (state, hdId) => {
     parsedNodesChildNodeCount
   };
 };
+const handleClick = (state, hdId) => {
+  if (!hdId) {
+    return state;
+  }
+  if (state.useSandboxWorker) {
+    return handleClickSandbox(state, hdId);
+  }
+  return handleClickLocal(state, hdId);
+};
 
 const None = 0;
 const OpeningAngleBracket = 1;
@@ -90456,11 +90484,51 @@ 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/no-implied-eval */
 const executeScripts = (window, document, scripts) => {
   window.alert = alert;
   // @ts-ignore
   globalThis.alert = alert;
+  const localStorage = createLocalStorage();
+  // @ts-ignore
+  globalThis.localStorage = localStorage;
   // Execute each script with the happy-dom window and document as context
   for (const scriptContent of scripts) {
     try {
@@ -90538,8 +90606,8 @@ const updateContent = async (state, uri) => {
       scripts
     } = parseResult;
 
-    // If scripts are present, execute them via happy-dom and re-serialize the DOM
-    if (scripts.length > 0) {
+    // If scripts are present and not using sandbox worker, execute them via happy-dom and re-serialize the DOM
+    if (scripts.length > 0 && !state.useSandboxWorker) {
       try {
         const {
           document: happyDomDocument,
@@ -90611,11 +90679,26 @@ const dispatchInputEvent = (element, window) => {
   dispatchEvent(element, inputEvent);
 };
 
-const handleInput = (state, hdId, value) => {
-  // console.log('input,', hdId, value)
-  if (!hdId) {
-    return state;
-  }
+const handleInputSandbox = async (state, hdId, value) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleInput', uid, hdId, value);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleInputLocal = (state, hdId, value) => {
   const happyDomInstance = get(state.uid);
   if (!happyDomInstance) {
     return state;
@@ -90624,18 +90707,10 @@ const handleInput = (state, hdId, value) => {
   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,
@@ -90653,6 +90728,15 @@ const handleInput = (state, hdId, value) => {
     parsedNodesChildNodeCount
   };
 };
+const handleInput = (state, hdId, value) => {
+  if (!hdId) {
+    return state;
+  }
+  if (state.useSandboxWorker) {
+    return handleInputSandbox(state, hdId, value);
+  }
+  return handleInputLocal(state, hdId, value);
+};
 
 const dispatchKeydownEvent = (element, window, key, code) => {
   const keydownEvent = new window.KeyboardEvent('keydown', {
@@ -90663,7 +90747,26 @@ const dispatchKeydownEvent = (element, window, key, code) => {
   dispatchEvent(element, keydownEvent);
 };
 
-const handleKeydown = (state, hdId, key, code) => {
+const handleKeydownSandbox = async (state, hdId, key, code) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleKeyDown', uid, hdId, key, code);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleKeydownLocal = (state, hdId, key, code) => {
   const happyDomInstance = get(state.uid);
   if (!happyDomInstance) {
     return state;
@@ -90672,15 +90775,73 @@ const handleKeydown = (state, hdId, key, code) => {
   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);
+  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 handleKeydown = (state, hdId, key, code) => {
+  if (state.useSandboxWorker) {
+    return handleKeydownSandbox(state, hdId, key, code);
+  }
+  return handleKeydownLocal(state, hdId, key, code);
+};
+
+const dispatchKeyupEvent = (element, window, key, code) => {
+  const keyupEvent = new window.KeyboardEvent('keyup', {
+    bubbles: true,
+    code,
+    key
+  });
+  dispatchEvent(element, keyupEvent);
+};
 
-  // Update happy-dom state with new element map
+const handleKeyupSandbox = async (state, hdId, key, code) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleKeyUp', uid, hdId, key, code);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleKeyupLocal = (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;
+  }
+  dispatchKeyupEvent(element, happyDomInstance.window, key, code);
+  const elementMap = new Map();
+  const serialized = serialize(happyDomInstance.document, elementMap);
   set$1(state.uid, {
     document: happyDomInstance.document,
     elementMap,
@@ -90698,6 +90859,12 @@ const handleKeydown = (state, hdId, key, code) => {
     parsedNodesChildNodeCount
   };
 };
+const handleKeyup = (state, hdId, key, code) => {
+  if (state.useSandboxWorker) {
+    return handleKeyupSandbox(state, hdId, key, code);
+  }
+  return handleKeyupLocal(state, hdId, key, code);
+};
 
 const loadContent = async state => {
   // Try to register to receive editor change notifications from the editor worker.
@@ -90727,15 +90894,29 @@ const loadContent = async state => {
     parsedNodesChildNodeCount: state.parsedNodesChildNodeCount,
     scripts: state.scripts
   };
+  const {
+    sandboxRpc
+  } = state;
+  let finalParsedDom = parsedDom;
+  let finalCss = css;
+  let finalParsedNodesChildNodeCount = parsedNodesChildNodeCount;
+  if (state.useSandboxWorker && scripts.length > 0) {
+    await sandboxRpc.invoke('SandBox.initialize', state.uid, content, scripts);
+    const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', state.uid);
+    finalParsedDom = serialized.dom;
+    finalCss = serialized.css;
+    finalParsedNodesChildNodeCount = finalParsedDom.length > 0 ? finalParsedDom[0].childCount || 0 : 0;
+  }
   return {
     ...state,
     content,
-    css,
+    css: finalCss,
     errorCount: 0,
     errorMessage,
     initial: false,
-    parsedDom,
-    parsedNodesChildNodeCount,
+    parsedDom: finalParsedDom,
+    parsedNodesChildNodeCount: finalParsedNodesChildNodeCount,
+    sandboxRpc,
     scripts,
     warningCount: 1
   };
@@ -90789,6 +90970,7 @@ const renderCss = (oldState, newState) => {
 const HandleInput = 4;
 const HandleClick = 11;
 const HandleKeydown = 12;
+const HandleKeyup = 13;
 
 const getEmptyPreviewDom = () => {
   return [{
@@ -90822,6 +91004,7 @@ const getPreviewDom = state => {
       onClick: HandleClick,
       onInput: HandleInput,
       onKeyDown: HandleKeydown,
+      onKeyUp: HandleKeyup,
       tabIndex: 0,
       type: Div$1
     }, ...parsedDom];
@@ -90832,6 +91015,7 @@ const getPreviewDom = state => {
     onClick: HandleClick,
     onInput: HandleInput,
     onKeyDown: HandleKeydown,
+    onKeyUp: HandleKeyup,
     tabIndex: 0,
     type: Div$1
   }, {
@@ -90910,6 +91094,10 @@ const renderEventListeners = () => {
     capture: true,
     name: HandleKeydown,
     params: ['handleKeyDown', 'event.target.dataset.id', 'event.key', 'event.code']
+  }, {
+    capture: true,
+    name: HandleKeyup,
+    params: ['handleKeyUp', 'event.target.dataset.id', 'event.key', 'event.code']
   }];
 };
 
@@ -90969,6 +91157,7 @@ const commandMap = {
   'Preview.handleFileEdited': wrapCommand(handleFileEdited),
   'Preview.handleInput': wrapCommand(handleInput),
   'Preview.handleKeyDown': wrapCommand(handleKeydown),
+  'Preview.handleKeyUp': wrapCommand(handleKeyup),
   'Preview.loadContent': wrapCommand(loadContent),
   'Preview.render2': render2,
   'Preview.renderEventListeners': renderEventListeners,

package/package.json

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