@lvce-editor/preview-worker 1.2.0 → 1.3.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;
 };
@@ -854,9 +903,38 @@ const createMockRpc = ({
   return mockRpc;
 };
 
-const Div = 4;
-const H1 = 5;
-const Text = 12;
+const Div$1 = 4;
+const H1$1 = 5;
+const Span$1 = 8;
+const Text$1 = 12;
+const Img$1 = 17;
+const H2$1 = 22;
+const H3$1 = 23;
+const H4$1 = 24;
+const H5$1 = 25;
+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 Reference = 100;
 
 const TargetName = 'event.target.name';
@@ -915,8 +993,12 @@ const create$2 = rpcId => {
 };
 
 const {
+  invoke,
   set: set$1
 } = create$2(RendererWorker);
+const readFile = async uri => {
+  return invoke('FileSystem.readFile', uri);
+};
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
@@ -1021,6 +1103,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     assetDir,
     content: '',
     errorCount: 0,
+    errorMessage: '',
     initial: true,
     parsedDom: [],
     platform,
@@ -1032,7 +1115,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;
 };
 
 const RenderItems = 4;
@@ -1061,12 +1144,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 +1240,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 +1440,536 @@ 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 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 Cite:
+      return Cite$1;
+    case Data:
+      return Data$1;
+    case Dd:
+      return Dd$1;
+    case Div:
+      return Div$1;
+    case Dl:
+      return Dl$1;
+    case Figcaption:
+      return Figcaption$1;
+    case Figure:
+      return Figure$1;
+    case Footer:
+      return Footer$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 Header:
+      return Header$1;
+    case Hr:
+      return Hr$1;
+    case Img:
+      return Img$1;
+    case Li:
+      return Li$1;
+    case Nav:
+      return Nav$1;
+    case Ol:
+      return Ol$1;
+    case P:
+      return P$1;
+    case Pre:
+      return Pre$1;
+    case Search:
+      return Search$1;
+    case Section:
+      return Section$1;
+    case Span:
+      return Span$1;
+    case Tfoot:
+      return Tfoot$1;
+    case Time:
+      return Time$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 Img:
+      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 = '';
+  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;
+        }
+        attributeName = '';
+        break;
+      case Content:
+        current.childCount++;
+        dom.push(text(parseText(token.text)));
+        break;
+      case TagNameEnd:
+        stack.pop();
+        current = stack.at(-1) || root;
+        break;
+      case TagNameStart:
+        current.childCount++;
+        current = {
+          childCount: 0,
+          type: getVirtualDomTag(token.text)
+        };
+        dom.push(current);
+        if (!isSelfClosingTag(token.text)) {
+          stack.push(current);
+        }
+        break;
+    }
+  }
+  return dom;
+};
+
+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, []);
+    return {
+      content,
+      errorMessage: '',
+      parsedDom
+    };
+  } 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: []
+    };
+  }
+};
+
+const handleFileEdited = async state => {
+  const {
+    content,
+    errorMessage,
+    parsedDom
+  } = await updateContent(state, state.uri);
+  return {
+    ...state,
+    content,
+    errorMessage,
+    parsedDom
+  };
+};
+
+const loadContent = async state => {
+  return {
+    ...state,
+    errorCount: 0,
+    initial: false,
+    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) {
     return getEmptyPreviewDom();
   }
+
+  // If parsedDom is available, render it as children of the wrapper
+  if (state.parsedDom && state.parsedDom.length > 0) {
+    return [{
+      childCount: 1,
+      // TODO
+      className: 'Viewlet Preview',
+      type: Div$1
+    }, ...state.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
   }];
 };
 
@@ -1462,9 +2047,17 @@ const saveState = state => {
   };
 };
 
-const setUri = (state, uri) => {
+const setUri = async (state, uri) => {
+  const {
+    content,
+    errorMessage,
+    parsedDom
+  } = await updateContent(state, uri);
   return {
     ...state,
+    content,
+    errorMessage,
+    parsedDom,
     uri
   };
 };
@@ -1473,6 +2066,7 @@ const commandMap = {
   'Preview.create': create,
   'Preview.diff2': diff2,
   'Preview.getCommandIds': getCommandIds,
+  'Preview.handleFileEdited': wrapCommand(handleFileEdited),
   'Preview.loadContent': wrapCommand(loadContent),
   'Preview.render2': render2,
   'Preview.renderEventListeners': renderEventListeners,

package/package.json

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