@lvce-editor/preview-worker 1.2.0 → 1.4.0

package/dist/previewWorkerMain.js

@@ -54,6 +54,55 @@ class VError extends Error {
   }
 }
 
+class AssertionError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'AssertionError';
+  }
+}
+const Object$1 = 1;
+const Number$1 = 2;
+const Array$1 = 3;
+const String = 4;
+const Boolean = 5;
+const Function = 6;
+const Null = 7;
+const Unknown = 8;
+const getType = value => {
+  switch (typeof value) {
+    case 'number':
+      return Number$1;
+    case 'function':
+      return Function;
+    case 'string':
+      return String;
+    case 'object':
+      if (value === null) {
+        return Null;
+      }
+      if (Array.isArray(value)) {
+        return Array$1;
+      }
+      return Object$1;
+    case 'boolean':
+      return Boolean;
+    default:
+      return Unknown;
+  }
+};
+const array = value => {
+  const type = getType(value);
+  if (type !== Array$1) {
+    throw new AssertionError('expected value to be of type array');
+  }
+};
+const string = value => {
+  const type = getType(value);
+  if (type !== String) {
+    throw new AssertionError('expected value to be of type string');
+  }
+};
+
 const isMessagePort = value => {
   return value && value instanceof MessagePort;
 };
@@ -368,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);
@@ -583,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,
@@ -592,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 {
@@ -820,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
 }) => {
@@ -854,20 +1077,68 @@ const createMockRpc = ({
   return mockRpc;
 };
 
-const Div = 4;
-const H1 = 5;
-const Text = 12;
+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;
+const Header$1 = 30;
+const Nav$1 = 40;
+const Section$1 = 41;
+const Search$1 = 42;
+const Dd$1 = 43;
+const Dl$1 = 44;
+const Figcaption$1 = 45;
+const Figure$1 = 46;
+const Hr$1 = 47;
+const Li$1 = 48;
+const Ol$1 = 49;
+const P$1 = 50;
+const Pre$1 = 51;
+const A$1 = 53;
+const Abbr$1 = 54;
+const Br$1 = 55;
+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 => {
@@ -900,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);
@@ -909,14 +1180,28 @@ 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);
+};
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
@@ -1010,6 +1295,7 @@ const terminate = () => {
 const {
   get,
   getCommandIds,
+  getKeys: getKeys$1,
   registerCommands,
   set,
   wrapCommand,
@@ -1021,8 +1307,10 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     assetDir,
     content: '',
     errorCount: 0,
+    errorMessage: '',
     initial: true,
     parsedDom: [],
+    parsedNodesChildNodeCount: 0,
     platform,
     uid,
     uri,
@@ -1032,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;
+  return oldState.warningCount === newState.warningCount && oldState.initial === newState.initial && oldState.content === newState.content && oldState.parsedDom === newState.parsedDom && oldState.parsedNodesChildNodeCount === newState.parsedNodesChildNodeCount;
 };
 
 const RenderItems = 4;
@@ -1061,12 +1349,11 @@ const diff2 = uid => {
   return result;
 };
 
-const loadContent = async state => {
+const text = data => {
   return {
-    ...state,
-    errorCount: 0,
-    initial: false,
-    warningCount: 1
+    childCount: 0,
+    text: data,
+    type: Text$1
   };
 };
 
@@ -1158,7 +1445,7 @@ const compareNodes = (oldNode, newNode) => {
     return patches;
   }
   // Handle text nodes
-  if (oldNode.type === Text && newNode.type === Text) {
+  if (oldNode.type === Text$1 && newNode.type === Text$1) {
     if (oldNode.text !== newNode.text) {
       patches.push({
         type: SetText,
@@ -1358,33 +1645,747 @@ const diffTree = (oldNodes, newNodes) => {
   return removeTrailingNavigationPatches(patches);
 };
 
+const Div = 'div';
+const H1 = 'h1';
+const H2 = 'h2';
+const H3 = 'h3';
+const H4 = 'h4';
+const H5 = 'h5';
+const Img = 'img';
+const Span = 'span';
+const Article = 'article';
+const Aside = 'aside';
+const Footer = 'footer';
+const Header = 'header';
+const Nav = 'nav';
+const Section = 'section';
+const Search = 'search';
+const Dd = 'dd';
+const Dl = 'dl';
+const Figcaption = 'figcaption';
+const Figure = 'figure';
+const Hr = 'hr';
+const Li = 'li';
+const Ol = 'ol';
+const P = 'p';
+const Pre = 'pre';
+const A = 'a';
+const Abbr = 'abbr';
+const Br = 'br';
+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) {
+    case A:
+      return A$1;
+    case Abbr:
+      return Abbr$1;
+    case Article:
+      return Article$1;
+    case Aside:
+      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:
+      return H2$1;
+    case H3:
+      return H3$1;
+    case H4:
+      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:
+      return Pre$1;
+    case Search:
+      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;
+  }
+};
+
+const None = 0;
+const OpeningAngleBracket = 1;
+const ClosingAngleBracket = 2;
+const TagNameStart = 3;
+const TagNameEnd = 4;
+const Content = 5;
+const ClosingTagSlash = 6;
+const WhitespaceInsideOpeningTag = 7;
+const AttributeName = 8;
+const AttributeEqualSign = 9;
+const AttributeQuoteStart = 10;
+const AttributeValue = 11;
+const AttributeQuoteEnd = 12;
+const WhitespaceAfterClosingTagSlash = 13;
+const WhitespaceAfterOpeningTagOpenAngleBracket = 14;
+const ExclamationMark = 15;
+const Doctype = 16;
+const StartCommentDashes = 17;
+const Comment = 18;
+const EndCommentTag = 19;
+const Text = 20;
+const CommentStart = 21;
+
+const isSelfClosingTag = tag => {
+  switch (tag) {
+    case Br:
+    case Hr:
+    case Img:
+    case Input:
+      return true;
+    default:
+      return false;
+  }
+};
+
+const parseText = text => {
+  return text.replaceAll('&gt;', '>').replaceAll('&lt;', '<').replaceAll('&amp;', '&');
+};
+
+class UnexpectedTokenError extends Error {
+  constructor() {
+    super('Unexpected token');
+    this.name = 'UnexpectedTokenError';
+  }
+}
+
+const State = {
+  AfterAttributeEqualSign: 8,
+  AfterAttributeName: 7,
+  AfterAttributeValueClosingQuote: 11,
+  AfterAttributeValueInsideDoubleQuote: 10,
+  AfterClosingTagName: 5,
+  AfterClosingTagSlash: 4,
+  AfterExclamationMark: 16,
+  AfterOpeningAngleBracket: 2,
+  InsideAttributeAfterDoubleQuote: 9,
+  InsideComment: 17,
+  InsideOpeningTag: 3,
+  InsideOpeningTagAfterWhitespace: 6,
+  TopLevelContent: 1
+};
+const RE_ANGLE_BRACKET_OPEN = /^</;
+const RE_ANGLE_BRACKET_OPEN_TAG = /^<(?![\s!%])/;
+const RE_ANGLE_BRACKET_CLOSE = /^>/;
+const RE_SLASH = /^\//;
+const RE_TAGNAME = /^[a-zA-Z\d$]+/;
+const RE_CONTENT = /^[^<>]+/;
+const RE_WHITESPACE = /^\s+/;
+const RE_ATTRIBUTE_NAME = /^[a-zA-Z\d-]+/;
+const RE_EQUAL_SIGN = /^=/;
+const RE_DOUBLE_QUOTE = /^"/;
+const RE_ATTRIBUTE_VALUE_INSIDE_DOUBLE_QUOTE = /^[^"\n]+/;
+const RE_TEXT = /^[^<>]+/;
+const RE_EXCLAMATION_MARK = /^!/;
+const RE_DASH_DASH = /^--/;
+const RE_DOCTYPE = /^doctype/i;
+const RE_BLOCK_COMMENT_CONTENT = /^[a-zA-Z\s]+/;
+const RE_COMMENT_END = /^-->/;
+const RE_TAG_TEXT = /^[^\s>]+/;
+const RE_ANY_TEXT = /^[^\n]+/;
+const RE_ATTRIBUTE_TEXT = /^[^\n<>/\s]+/;
+const RE_BLOCK_COMMENT_START = /^<!--/;
+const RE_SELF_CLOSING = /^\/>/;
+const tokenizeHtml = text => {
+  string(text);
+  let state = State.TopLevelContent;
+  let index = 0;
+  let next;
+  const tokens = [];
+  let token = None;
+  while (index < text.length) {
+    const part = text.slice(index);
+    switch (state) {
+      case State.AfterAttributeEqualSign:
+        if (next = part.match(RE_DOUBLE_QUOTE)) {
+          token = AttributeQuoteStart;
+          state = State.InsideAttributeAfterDoubleQuote;
+        } else if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
+          token = ClosingAngleBracket;
+          state = State.TopLevelContent;
+        } else if (next = part.match(RE_ATTRIBUTE_TEXT)) {
+          token = AttributeValue;
+          state = State.InsideOpeningTag;
+        } else {
+          throw new UnexpectedTokenError();
+        }
+        break;
+      case State.AfterAttributeName:
+        if (next = part.match(RE_EQUAL_SIGN)) {
+          token = AttributeEqualSign;
+          state = State.AfterAttributeEqualSign;
+        } else if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
+          token = ClosingAngleBracket;
+          state = State.TopLevelContent;
+        } else if (next = part.match(RE_WHITESPACE)) {
+          token = WhitespaceInsideOpeningTag;
+          state = State.InsideOpeningTagAfterWhitespace;
+        } else if (next = part.match(RE_ANGLE_BRACKET_OPEN)) {
+          token = OpeningAngleBracket;
+          state = State.AfterOpeningAngleBracket;
+        } else {
+          text.slice(index); // ?
+          throw new UnexpectedTokenError();
+        }
+        break;
+      case State.AfterAttributeValueClosingQuote:
+        if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
+          token = ClosingAngleBracket;
+          state = State.TopLevelContent;
+        } else if (next = part.match(RE_WHITESPACE)) {
+          token = WhitespaceInsideOpeningTag;
+          state = State.InsideOpeningTagAfterWhitespace;
+        } else if (next = part.match(RE_SELF_CLOSING)) {
+          token = ClosingAngleBracket;
+          state = State.TopLevelContent;
+        } else {
+          throw new UnexpectedTokenError();
+        }
+        break;
+      case State.AfterAttributeValueInsideDoubleQuote:
+        if (next = part.match(RE_DOUBLE_QUOTE)) {
+          token = AttributeQuoteEnd;
+          state = State.AfterAttributeValueClosingQuote;
+        } else {
+          throw new UnexpectedTokenError();
+        }
+        break;
+      case State.AfterClosingTagName:
+        if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
+          token = ClosingAngleBracket;
+          state = State.TopLevelContent;
+        } else if (next = part.match(RE_WHITESPACE)) {
+          token = Content;
+          state = State.TopLevelContent;
+        } else {
+          throw new UnexpectedTokenError();
+        }
+        break;
+      case State.AfterClosingTagSlash:
+        if (next = part.match(RE_TAGNAME)) {
+          token = TagNameEnd;
+          state = State.AfterClosingTagName;
+        } else if (next = part.match(RE_WHITESPACE)) {
+          token = WhitespaceAfterClosingTagSlash;
+          state = State.TopLevelContent;
+        } else if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
+          token = ClosingAngleBracket;
+          state = State.TopLevelContent;
+        } else {
+          throw new UnexpectedTokenError();
+        }
+        break;
+      case State.AfterExclamationMark:
+        if (next = part.match(RE_DASH_DASH)) {
+          token = StartCommentDashes;
+          state = State.InsideComment;
+        } else if (next = part.match(RE_DOCTYPE)) {
+          token = Doctype;
+          state = State.InsideOpeningTag;
+        } else {
+          text.slice(index); // ?
+          throw new UnexpectedTokenError();
+        }
+        break;
+      case State.AfterOpeningAngleBracket:
+        if (next = part.match(RE_TAGNAME)) {
+          token = TagNameStart;
+          state = State.InsideOpeningTag;
+        } else if (next = part.match(RE_SLASH)) {
+          token = ClosingTagSlash;
+          state = State.AfterClosingTagSlash;
+        } else if (next = part.match(RE_WHITESPACE)) {
+          token = WhitespaceAfterOpeningTagOpenAngleBracket;
+          state = State.TopLevelContent;
+        } else if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
+          token = ClosingAngleBracket;
+          state = State.TopLevelContent;
+        } else if (next = part.match(RE_EXCLAMATION_MARK)) {
+          token = ExclamationMark;
+          state = State.AfterExclamationMark;
+        } else if (next = part.match(RE_ANY_TEXT)) {
+          token = Text;
+          state = State.TopLevelContent;
+        } else {
+          text.slice(index); // ?
+          throw new UnexpectedTokenError();
+        }
+        break;
+      case State.InsideAttributeAfterDoubleQuote:
+        if (next = text.slice(index).match(RE_ATTRIBUTE_VALUE_INSIDE_DOUBLE_QUOTE)) {
+          token = AttributeValue;
+          state = State.AfterAttributeValueInsideDoubleQuote;
+        } else if (next = part.match(RE_DOUBLE_QUOTE)) {
+          token = AttributeQuoteEnd;
+          state = State.AfterAttributeValueClosingQuote;
+        } else {
+          throw new UnexpectedTokenError();
+        }
+        break;
+      case State.InsideComment:
+        if (next = part.match(RE_BLOCK_COMMENT_CONTENT)) {
+          token = Comment;
+          state = State.InsideComment;
+        } else if (next = part.match(RE_COMMENT_END)) {
+          token = EndCommentTag;
+          state = State.TopLevelContent;
+        } else {
+          text.slice(index); // ?
+          throw new UnexpectedTokenError();
+        }
+        break;
+      case State.InsideOpeningTag:
+        if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
+          token = ClosingAngleBracket;
+          state = State.TopLevelContent;
+        } else if (next = part.match(RE_WHITESPACE)) {
+          token = WhitespaceInsideOpeningTag;
+          state = State.InsideOpeningTagAfterWhitespace;
+        } else if (next = part.match(RE_TAG_TEXT)) {
+          token = Text;
+          state = State.TopLevelContent;
+        } else {
+          throw new UnexpectedTokenError();
+        }
+        break;
+      case State.InsideOpeningTagAfterWhitespace:
+        if (next = part.match(RE_ATTRIBUTE_NAME)) {
+          token = AttributeName;
+          state = State.AfterAttributeName;
+        } else if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
+          token = ClosingAngleBracket;
+          state = State.TopLevelContent;
+        } else if (next = part.match(RE_SELF_CLOSING)) {
+          token = ClosingAngleBracket;
+          state = State.TopLevelContent;
+        } else if (next = part.match(RE_TEXT)) {
+          token = AttributeName;
+          state = State.AfterAttributeName;
+        } else {
+          text.slice(index).match(RE_TEXT); // ?
+          text.slice(index); // ?
+          throw new UnexpectedTokenError();
+        }
+        break;
+      case State.TopLevelContent:
+        if (next = part.match(RE_ANGLE_BRACKET_OPEN_TAG)) {
+          token = OpeningAngleBracket;
+          state = State.AfterOpeningAngleBracket;
+        } else if (next = part.match(RE_CONTENT)) {
+          token = Content;
+          state = State.TopLevelContent;
+        } else if (next = part.match(RE_BLOCK_COMMENT_START)) {
+          token = CommentStart;
+          state = State.InsideComment;
+        } else if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
+          token = Content;
+          state = State.TopLevelContent;
+        } else if (next = part.match(RE_ANGLE_BRACKET_OPEN)) {
+          token = Text;
+          state = State.TopLevelContent;
+        } else {
+          throw new UnexpectedTokenError();
+        }
+        break;
+      default:
+        throw new UnexpectedTokenError();
+    }
+    const tokenText = next[0];
+    tokens.push({
+      text: tokenText,
+      type: token
+    });
+    index += tokenText.length;
+  }
+  return tokens;
+};
+
+const parseHtml = (html, allowedAttributes) => {
+  string(html);
+  array(allowedAttributes);
+  const tokens = tokenizeHtml(html);
+  const dom = [];
+  const root = {
+    childCount: 0,
+    type: 0
+  };
+  let current = root;
+  const stack = [root];
+  let attributeName = '';
+  let lastTagWasSelfClosing = false;
+  for (const token of tokens) {
+    switch (token.type) {
+      case AttributeName:
+        attributeName = token.text;
+        break;
+      case AttributeValue:
+        if (allowedAttributes.includes(attributeName)) {
+          const finalAttributeName = attributeName === 'class' ? 'className' : attributeName;
+          current[finalAttributeName] = token.text;
+        }
+        attributeName = '';
+        break;
+      case ClosingAngleBracket:
+        // Handle boolean attributes (attributes without values)
+        if (attributeName && allowedAttributes.includes(attributeName)) {
+          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:
+        if (stack.length > 1) {
+          stack.pop();
+        }
+        current = stack.at(-1) || root;
+        break;
+      case TagNameStart:
+        current.childCount++;
+        const newNode = {
+          childCount: 0,
+          type: getVirtualDomTag(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 && allowedAttributes.includes(attributeName)) {
+          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
+    // @ts-ignore
+    const content = await readFile(uri);
+
+    // Parse the content into virtual DOM
+    const parsedDom = parseHtml(content, []);
+    const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+    return {
+      content,
+      errorMessage: '',
+      parsedDom,
+      parsedNodesChildNodeCount
+    };
+  } catch (error) {
+    // If file reading or parsing fails, return empty content and parsedDom with error message
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    return {
+      content: '',
+      errorMessage,
+      parsedDom: [],
+      parsedNodesChildNodeCount: 0
+    };
+  }
+};
+
+const handleFileEdited = async state => {
+  const {
+    content,
+    errorMessage,
+    parsedDom,
+    parsedNodesChildNodeCount
+  } = await updateContent(state, state.uri);
+  return {
+    ...state,
+    content,
+    errorMessage,
+    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
+  };
+};
+
 const getEmptyPreviewDom = () => {
   return [{
     childCount: 1,
     className: 'Viewlet Preview',
-    type: Div
+    type: Div$1
   }, {
     childCount: 1,
-    type: H1
+    type: H1$1
   }, {
     text: 'No URI has been specified',
-    type: Text
+    type: Text$1
   }];
 };
+
 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 (parsedDom && parsedDom.length > 0) {
+    return [{
+      childCount: parsedNodesChildNodeCount,
+      className: 'Viewlet Preview',
+      type: Div$1
+    }, ...parsedDom];
+  }
   return [{
     childCount: 1,
     className: 'Viewlet Preview',
-    type: Div
+    type: Div$1
   }, {
     childCount: 1,
-    type: H1
+    type: H1$1
   }, {
     text: 'hello from preview',
-    type: Text
+    type: Text$1
   }];
 };
 
@@ -1449,6 +2450,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,
@@ -1462,20 +2475,33 @@ const saveState = state => {
   };
 };
 
-const setUri = (state, uri) => {
+const setUri = async (state, uri) => {
+  const {
+    content,
+    errorMessage,
+    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,
+  'Preview.handleFileEdited': wrapCommand(handleFileEdited),
   '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),
@@ -1488,6 +2514,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.2.0",
+  "version": "1.4.0",
   "description": "Preview Worker",
   "repository": {
     "type": "git",