@lvce-editor/preview-worker 1.3.0 → 1.5.0

package/dist/previewWorkerMain.js

@@ -417,6 +417,100 @@ const IpcChildWithModuleWorkerAndMessagePort$1 = {
   listen: listen$6,
   wrap: wrap$e
 };
+const addListener = (emitter, type, callback) => {
+  if ('addEventListener' in emitter) {
+    emitter.addEventListener(type, callback);
+  } else {
+    emitter.on(type, callback);
+  }
+};
+const removeListener = (emitter, type, callback) => {
+  if ('removeEventListener' in emitter) {
+    emitter.removeEventListener(type, callback);
+  } else {
+    emitter.off(type, callback);
+  }
+};
+const getFirstEvent = (eventEmitter, eventMap) => {
+  const {
+    promise,
+    resolve
+  } = Promise.withResolvers();
+  const listenerMap = Object.create(null);
+  const cleanup = value => {
+    for (const event of Object.keys(eventMap)) {
+      removeListener(eventEmitter, event, listenerMap[event]);
+    }
+    resolve(value);
+  };
+  for (const [event, type] of Object.entries(eventMap)) {
+    const listener = event => {
+      cleanup({
+        event,
+        type
+      });
+    };
+    addListener(eventEmitter, event, listener);
+    listenerMap[event] = listener;
+  }
+  return promise;
+};
+const Message$1 = 3;
+const create$5$1 = async ({
+  isMessagePortOpen,
+  messagePort
+}) => {
+  if (!isMessagePort(messagePort)) {
+    throw new IpcError('port must be of type MessagePort');
+  }
+  if (isMessagePortOpen) {
+    return messagePort;
+  }
+  const eventPromise = getFirstEvent(messagePort, {
+    message: Message$1
+  });
+  messagePort.start();
+  const {
+    event,
+    type
+  } = await eventPromise;
+  if (type !== Message$1) {
+    throw new IpcError('Failed to wait for ipc message');
+  }
+  if (event.data !== readyMessage) {
+    throw new IpcError('unexpected first message');
+  }
+  return messagePort;
+};
+const signal$1 = messagePort => {
+  messagePort.start();
+};
+class IpcParentWithMessagePort extends Ipc {
+  getData = getData$2;
+  send(message) {
+    this._rawIpc.postMessage(message);
+  }
+  sendAndTransfer(message) {
+    const transfer = getTransferrables(message);
+    this._rawIpc.postMessage(message, transfer);
+  }
+  dispose() {
+    this._rawIpc.close();
+  }
+  onMessage(callback) {
+    this._rawIpc.addEventListener('message', callback);
+  }
+  onClose(callback) {}
+}
+const wrap$5 = messagePort => {
+  return new IpcParentWithMessagePort(messagePort);
+};
+const IpcParentWithMessagePort$1 = {
+  __proto__: null,
+  create: create$5$1,
+  signal: signal$1,
+  wrap: wrap$5
+};
 
 const Two$1 = '2.0';
 const callbacks = Object.create(null);
@@ -632,7 +726,7 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const errorProperty = getErrorProperty(error, prettyError);
   return create$1$1(id, errorProperty);
 };
-const create$3 = (message, result) => {
+const create$4 = (message, result) => {
   return {
     jsonrpc: Two$1,
     id: message.id,
@@ -641,7 +735,7 @@ const create$3 = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$3(message, resultProperty);
+  return create$4(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
@@ -869,6 +963,86 @@ const listen$1 = async (module, options) => {
   const ipc = module.wrap(rawIpc);
   return ipc;
 };
+
+/* eslint-disable @typescript-eslint/no-misused-promises */
+
+const createSharedLazyRpc = factory => {
+  let rpcPromise;
+  const getOrCreate = () => {
+    if (!rpcPromise) {
+      rpcPromise = factory();
+    }
+    return rpcPromise;
+  };
+  return {
+    async dispose() {
+      const rpc = await getOrCreate();
+      await rpc.dispose();
+    },
+    async invoke(method, ...params) {
+      const rpc = await getOrCreate();
+      return rpc.invoke(method, ...params);
+    },
+    async invokeAndTransfer(method, ...params) {
+      const rpc = await getOrCreate();
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    async send(method, ...params) {
+      const rpc = await getOrCreate();
+      rpc.send(method, ...params);
+    }
+  };
+};
+const create$j = async ({
+  commandMap,
+  isMessagePortOpen,
+  send
+}) => {
+  return createSharedLazyRpc(() => {
+    return create$3({
+      commandMap,
+      isMessagePortOpen,
+      send
+    });
+  });
+};
+const LazyTransferMessagePortRpcParent = {
+  __proto__: null,
+  create: create$j
+};
+const create$5 = async ({
+  commandMap,
+  isMessagePortOpen = true,
+  messagePort
+}) => {
+  // TODO create a commandMap per rpc instance
+  register(commandMap);
+  const rawIpc = await IpcParentWithMessagePort$1.create({
+    isMessagePortOpen,
+    messagePort
+  });
+  const ipc = IpcParentWithMessagePort$1.wrap(rawIpc);
+  handleIpc(ipc);
+  const rpc = createRpc(ipc);
+  messagePort.start();
+  return rpc;
+};
+const create$3 = async ({
+  commandMap,
+  isMessagePortOpen,
+  send
+}) => {
+  const {
+    port1,
+    port2
+  } = new MessageChannel();
+  await send(port1);
+  return create$5({
+    commandMap,
+    isMessagePortOpen,
+    messagePort: port2
+  });
+};
 const create$2$1 = async ({
   commandMap
 }) => {
@@ -903,15 +1077,25 @@ const createMockRpc = ({
   return mockRpc;
 };
 
+const Button$1 = 1;
 const Div$1 = 4;
 const H1$1 = 5;
+const Input$1 = 6;
 const Span$1 = 8;
+const Table$1 = 9;
+const TBody$1 = 10;
+const Td$1 = 11;
 const Text$1 = 12;
+const Th$1 = 13;
+const THead$1 = 14;
+const Tr$1 = 15;
 const Img$1 = 17;
+const Del$1 = 21;
 const H2$1 = 22;
 const H3$1 = 23;
 const H4$1 = 24;
 const H5$1 = 25;
+const H6$1 = 26;
 const Article$1 = 27;
 const Aside$1 = 28;
 const Footer$1 = 29;
@@ -935,17 +1119,26 @@ const Cite$1 = 56;
 const Data$1 = 57;
 const Time$1 = 58;
 const Tfoot$1 = 59;
+const Ul$1 = 60;
+const TextArea$1 = 62;
+const Select$1 = 63;
+const Option$1 = 64;
+const Code$1 = 65;
+const Label$1 = 66;
+const Dt$1 = 67;
+const Iframe$1 = 68;
 const Reference = 100;
 
 const TargetName = 'event.target.name';
 
+const EditorWorker = 99;
 const RendererWorker = 1;
 
 const SetDom2 = 'Viewlet.setDom2';
 const SetPatches = 'Viewlet.setPatches';
 
 const rpcs = Object.create(null);
-const set$2 = (id, rpc) => {
+const set$3 = (id, rpc) => {
   rpcs[id] = rpc;
 };
 const get$1 = id => {
@@ -978,7 +1171,7 @@ const create$2 = rpcId => {
       const mockRpc = createMockRpc({
         commandMap
       });
-      set$2(rpcId, mockRpc);
+      set$3(rpcId, mockRpc);
       // @ts-ignore
       mockRpc[Symbol.dispose] = () => {
         remove(rpcId);
@@ -987,15 +1180,25 @@ const create$2 = rpcId => {
       return mockRpc;
     },
     set(rpc) {
-      set$2(rpcId, rpc);
+      set$3(rpcId, rpc);
     }
   };
 };
 
+const {
+  invoke: invoke$1,
+  set: set$2
+} = create$2(EditorWorker);
+
 const {
   invoke,
+  invokeAndTransfer,
   set: set$1
 } = create$2(RendererWorker);
+const sendMessagePortToEditorWorker = async (port, rpcId) => {
+  const command = 'HandleMessagePort.handleMessagePort';
+  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, rpcId);
+};
 const readFile = async uri => {
   return invoke('FileSystem.readFile', uri);
 };
@@ -1092,6 +1295,7 @@ const terminate = () => {
 const {
   get,
   getCommandIds,
+  getKeys: getKeys$1,
   registerCommands,
   set,
   wrapCommand,
@@ -1106,6 +1310,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     errorMessage: '',
     initial: true,
     parsedDom: [],
+    parsedNodesChildNodeCount: 0,
     platform,
     uid,
     uri,
@@ -1115,7 +1320,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
 };
 
 const isEqual = (oldState, newState) => {
-  return oldState.warningCount === newState.warningCount && oldState.initial === newState.initial && oldState.content === newState.content && oldState.parsedDom === newState.parsedDom;
+  return oldState.warningCount === newState.warningCount && oldState.initial === newState.initial && oldState.content === newState.content && oldState.parsedDom === newState.parsedDom && oldState.parsedNodesChildNodeCount === newState.parsedNodesChildNodeCount;
 };
 
 const RenderItems = 4;
@@ -1471,6 +1676,25 @@ const Cite = 'cite';
 const Data = 'data';
 const Time = 'time';
 const Tfoot = 'tfoot';
+const Button = 'button';
+const Input = 'input';
+const Code = 'code';
+const Form = 'form';
+const Table = 'table';
+const TBody = 'tbody';
+const THead = 'thead';
+const Tr = 'tr';
+const Td = 'td';
+const Th = 'th';
+const Ul = 'ul';
+const TextArea = 'textarea';
+const Select = 'select';
+const Option = 'option';
+const Label = 'label';
+const Dt = 'dt';
+const Iframe = 'iframe';
+const Del = 'del';
+const H6 = 'h6';
 
 const getVirtualDomTag = text => {
   switch (text) {
@@ -1484,22 +1708,32 @@ const getVirtualDomTag = text => {
       return Aside$1;
     case Br:
       return Br$1;
+    case Button:
+      return Button$1;
     case Cite:
       return Cite$1;
+    case Code:
+      return Code$1;
     case Data:
       return Data$1;
     case Dd:
       return Dd$1;
+    case Del:
+      return Del$1;
     case Div:
       return Div$1;
     case Dl:
       return Dl$1;
+    case Dt:
+      return Dt$1;
     case Figcaption:
       return Figcaption$1;
     case Figure:
       return Figure$1;
     case Footer:
       return Footer$1;
+    case Form:
+      return Div$1;
     case H1:
       return H1$1;
     case H2:
@@ -1510,18 +1744,28 @@ const getVirtualDomTag = text => {
       return H4$1;
     case H5:
       return H5$1;
+    case H6:
+      return H6$1;
     case Header:
       return Header$1;
     case Hr:
       return Hr$1;
+    case Iframe:
+      return Iframe$1;
     case Img:
       return Img$1;
+    case Input:
+      return Input$1;
+    case Label:
+      return Label$1;
     case Li:
       return Li$1;
     case Nav:
       return Nav$1;
     case Ol:
       return Ol$1;
+    case Option:
+      return Option$1;
     case P:
       return P$1;
     case Pre:
@@ -1530,12 +1774,30 @@ const getVirtualDomTag = text => {
       return Search$1;
     case Section:
       return Section$1;
+    case Select:
+      return Select$1;
     case Span:
       return Span$1;
+    case Table:
+      return Table$1;
+    case TBody:
+      return TBody$1;
+    case Td:
+      return Td$1;
+    case TextArea:
+      return TextArea$1;
     case Tfoot:
       return Tfoot$1;
+    case Th:
+      return Th$1;
+    case THead:
+      return THead$1;
     case Time:
       return Time$1;
+    case Tr:
+      return Tr$1;
+    case Ul:
+      return Ul$1;
     default:
       return Div$1;
   }
@@ -1564,9 +1826,29 @@ const EndCommentTag = 19;
 const Text = 20;
 const CommentStart = 21;
 
+const isDefaultAllowedAttribute = (attributeName, defaultAllowedAttributes) => {
+  // Allow data-* attributes
+  if (attributeName.startsWith('data-')) {
+    return true;
+  }
+  // Allow aria-* attributes
+  if (attributeName.startsWith('aria-')) {
+    return true;
+  }
+  // Allow role attribute
+  if (attributeName === 'role') {
+    return true;
+  }
+  // Check if in default list
+  return defaultAllowedAttributes.includes(attributeName);
+};
+
 const isSelfClosingTag = tag => {
   switch (tag) {
+    case Br:
+    case Hr:
     case Img:
+    case Input:
       return true;
     default:
       return false;
@@ -1835,9 +2117,14 @@ const tokenizeHtml = text => {
   return tokens;
 };
 
-const parseHtml = (html, allowedAttributes) => {
+const parseHtml = (html, allowedAttributes = [], defaultAllowedAttributes = []) => {
   string(html);
   array(allowedAttributes);
+  array(defaultAllowedAttributes);
+
+  // Combine default allowed attributes with any additional ones provided
+  const allAllowedAttributes = new Set([...defaultAllowedAttributes, ...allowedAttributes]);
+  const useBuiltInDefaults = allowedAttributes.length === 0;
   const tokens = tokenizeHtml(html);
   const dom = [];
   const root = {
@@ -1847,44 +2134,159 @@ const parseHtml = (html, allowedAttributes) => {
   let current = root;
   const stack = [root];
   let attributeName = '';
+  let lastTagWasSelfClosing = false;
   for (const token of tokens) {
     switch (token.type) {
       case AttributeName:
         attributeName = token.text;
-        if (attributeName === 'class') {
-          attributeName = 'className';
-        }
         break;
       case AttributeValue:
-        if (allowedAttributes.includes(attributeName)) {
-          current[attributeName] = token.text;
+        if (allAllowedAttributes.has(attributeName) || useBuiltInDefaults && isDefaultAllowedAttribute(attributeName, defaultAllowedAttributes)) {
+          const finalAttributeName = attributeName === 'class' ? 'className' : attributeName;
+          current[finalAttributeName] = token.text;
         }
         attributeName = '';
         break;
+      case ClosingAngleBracket:
+        // Handle boolean attributes (attributes without values)
+        if (attributeName && (allAllowedAttributes.has(attributeName) || useBuiltInDefaults && isDefaultAllowedAttribute(attributeName, defaultAllowedAttributes))) {
+          const finalAttributeName = attributeName === 'class' ? 'className' : attributeName;
+          current[finalAttributeName] = attributeName;
+        }
+        attributeName = '';
+        // Return to parent if the current tag is self-closing
+        if (lastTagWasSelfClosing) {
+          current = stack.at(-1) || root;
+          lastTagWasSelfClosing = false;
+        }
+        break;
       case Content:
         current.childCount++;
         dom.push(text(parseText(token.text)));
         break;
       case TagNameEnd:
-        stack.pop();
+        if (stack.length > 1) {
+          stack.pop();
+        }
         current = stack.at(-1) || root;
         break;
       case TagNameStart:
         current.childCount++;
-        current = {
+        const newNode = {
           childCount: 0,
           type: getVirtualDomTag(token.text)
         };
-        dom.push(current);
-        if (!isSelfClosingTag(token.text)) {
+        dom.push(newNode);
+        current = newNode;
+        lastTagWasSelfClosing = isSelfClosingTag(token.text);
+        if (!lastTagWasSelfClosing) {
           stack.push(current);
         }
         break;
+      case WhitespaceInsideOpeningTag:
+        // Handle boolean attributes (attributes without values)
+        if (attributeName && (allAllowedAttributes.has(attributeName) || useBuiltInDefaults && isDefaultAllowedAttribute(attributeName, defaultAllowedAttributes))) {
+          const finalAttributeName = attributeName === 'class' ? 'className' : attributeName;
+          current[finalAttributeName] = attributeName;
+        }
+        attributeName = '';
+        break;
     }
   }
+  try {
+    Object.defineProperty(dom, 'rootChildCount', {
+      configurable: true,
+      enumerable: false,
+      value: root.childCount
+    });
+  } catch {
+    dom.rootChildCount = root.childCount;
+  }
   return dom;
 };
 
+const handleEditorChanged = async () => {
+  // Get all preview instance keys
+  const previewKeys = getKeys$1();
+
+  // Get all editor keys from the editor worker
+  const editorKeys = await invoke$1('Editor.getKeys');
+
+  // For each preview instance
+  for (const previewUid of previewKeys) {
+    const {
+      newState: state
+    } = get(previewUid);
+
+    // Skip if no URI is set
+    if (!state.uri) {
+      continue;
+    }
+
+    // Find the editor that matches our preview's URI
+    let matchingEditorUid = null;
+    for (const editorKey of editorKeys) {
+      const editorUid = Number.parseFloat(editorKey);
+      const editorUri = await invoke$1('Editor.getUri', editorUid);
+      if (editorUri === state.uri) {
+        matchingEditorUid = editorUid;
+        break;
+      }
+    }
+
+    // If we found a matching editor, get its text and update the preview
+    if (matchingEditorUid !== null) {
+      try {
+        const content = await invoke$1('Editor.getText', matchingEditorUid);
+        const parsedDom = parseHtml(content, []);
+        const updatedState = {
+          ...state,
+          content,
+          errorMessage: '',
+          parsedDom
+        };
+        set(previewUid, state, updatedState);
+      } catch (error) {
+        // If getting text fails, update with error message
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+        const updatedState = {
+          ...state,
+          content: '',
+          errorMessage,
+          parsedDom: []
+        };
+        set(previewUid, state, updatedState);
+      }
+    }
+  }
+
+  // Rerender all previews after updates are complete
+  await invoke('Preview.rerender');
+};
+
+const getParsedNodesChildNodeCount = parsedDom => {
+  array(parsedDom);
+  const rootCountFromParse = parsedDom.rootChildCount;
+  if (typeof rootCountFromParse === 'number') {
+    return rootCountFromParse;
+  }
+  let rootChildCount = 0;
+  let i = 0;
+  while (i < parsedDom.length) {
+    rootChildCount++;
+
+    // skip the entire subtree of the current node
+    let toSkip = parsedDom[i].childCount;
+    i++;
+    while (toSkip > 0 && i < parsedDom.length) {
+      toSkip -= 1;
+      toSkip += parsedDom[i].childCount;
+      i++;
+    }
+  }
+  return rootChildCount;
+};
+
 const updateContent = async (state, uri) => {
   try {
     // Read the file content using RendererWorker RPC
@@ -1892,11 +2294,13 @@ const updateContent = async (state, uri) => {
     const content = await readFile(uri);
 
     // Parse the content into virtual DOM
-    const parsedDom = parseHtml(content, []);
+    const parsedDom = parseHtml(content);
+    const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
     return {
       content,
       errorMessage: '',
-      parsedDom
+      parsedDom,
+      parsedNodesChildNodeCount
     };
   } catch (error) {
     // If file reading or parsing fails, return empty content and parsedDom with error message
@@ -1904,7 +2308,8 @@ const updateContent = async (state, uri) => {
     return {
       content: '',
       errorMessage,
-      parsedDom: []
+      parsedDom: [],
+      parsedNodesChildNodeCount: 0
     };
   }
 };
@@ -1913,21 +2318,50 @@ const handleFileEdited = async state => {
   const {
     content,
     errorMessage,
-    parsedDom
+    parsedDom,
+    parsedNodesChildNodeCount
   } = await updateContent(state, state.uri);
   return {
     ...state,
     content,
     errorMessage,
-    parsedDom
+    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
+  // the EditorWorker / ListenerType are not available (e.g. unit tests).
+  const EditorChange = 1;
+  const rpcId = 9112;
+  try {
+    await invoke$1('Listener.register', EditorChange, rpcId);
+  } catch (error) {
+    console.error(error);
+  }
+
+  // Read and parse file contents if we have a URI
+  const {
+    content,
+    errorMessage,
+    parsedDom,
+    parsedNodesChildNodeCount
+  } = state.uri ? await updateContent(state, state.uri) : {
+    content: state.content,
+    errorMessage: state.errorMessage,
+    parsedDom: state.parsedDom,
+    parsedNodesChildNodeCount: state.parsedNodesChildNodeCount
+  };
   return {
     ...state,
+    content,
     errorCount: 0,
+    errorMessage,
     initial: false,
+    parsedDom,
+    parsedNodesChildNodeCount,
     warningCount: 1
   };
 };
@@ -1947,18 +2381,22 @@ const getEmptyPreviewDom = () => {
 };
 
 const getPreviewDom = state => {
-  if (!state.uri) {
+  const {
+    parsedDom,
+    parsedNodesChildNodeCount,
+    uri
+  } = state;
+  if (!uri) {
     return getEmptyPreviewDom();
   }
 
   // If parsedDom is available, render it as children of the wrapper
-  if (state.parsedDom && state.parsedDom.length > 0) {
+  if (parsedDom && parsedDom.length > 0) {
     return [{
-      childCount: 1,
-      // TODO
+      childCount: parsedNodesChildNodeCount,
       className: 'Viewlet Preview',
       type: Div$1
-    }, ...state.parsedDom];
+    }, ...parsedDom];
   }
   return [{
     childCount: 1,
@@ -2034,6 +2472,18 @@ const renderEventListeners = () => {
   }];
 };
 
+const rerender = state => {
+  // Create a new copy of parsedDom array to trigger diff
+  const parsedDom = [...state.parsedDom];
+
+  // Return a new state object with the copied parsedDom
+  // This will cause DiffItems.isEqual to return false since parsedDom reference changed
+  return {
+    ...state,
+    parsedDom
+  };
+};
+
 const resize = (state, dimensions) => {
   return {
     ...state,
@@ -2051,18 +2501,21 @@ const setUri = async (state, uri) => {
   const {
     content,
     errorMessage,
-    parsedDom
+    parsedDom,
+    parsedNodesChildNodeCount
   } = await updateContent(state, uri);
   return {
     ...state,
     content,
     errorMessage,
     parsedDom,
+    parsedNodesChildNodeCount,
     uri
   };
 };
 
 const commandMap = {
+  handleEditorChanged: handleEditorChanged,
   'Preview.create': create,
   'Preview.diff2': diff2,
   'Preview.getCommandIds': getCommandIds,
@@ -2070,6 +2523,7 @@ const commandMap = {
   'Preview.loadContent': wrapCommand(loadContent),
   'Preview.render2': render2,
   'Preview.renderEventListeners': renderEventListeners,
+  'Preview.rerender': wrapCommand(rerender),
   'Preview.resize': wrapCommand(resize),
   'Preview.saveState': wrapGetter(saveState),
   'Preview.setUri': wrapCommand(setUri),
@@ -2082,6 +2536,11 @@ const listen = async () => {
     commandMap: commandMap
   });
   set$1(rpc);
+  const editorRpc = await LazyTransferMessagePortRpcParent.create({
+    commandMap: {},
+    send: port => sendMessagePortToEditorWorker(port, 9112)
+  });
+  set$2(editorRpc);
 };
 
 const main = async () => {

package/package.json

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