@lvce-editor/extension-detail-view 2.0.0 → 2.1.0

package/dist/extensionDetailViewWorkerMain.js

@@ -6,17 +6,17 @@ const create$4 = (method, params) => {
     params
   };
 };
-const state = {
+const state$1 = {
   callbacks: Object.create(null)
 };
 const set = (id, fn) => {
-  state.callbacks[id] = fn;
+  state$1.callbacks[id] = fn;
 };
 const get = id => {
-  return state.callbacks[id];
+  return state$1.callbacks[id];
 };
 const remove = id => {
-  delete state.callbacks[id];
+  delete state$1.callbacks[id];
 };
 let id = 0;
 const create$3 = () => {
@@ -339,7 +339,7 @@ const send = (transport, method, ...params) => {
   const message = create$4(method, params);
   transport.send(message);
 };
-const invoke = (ipc, method, ...params) => {
+const invoke$1 = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, false);
 };
 const invokeAndTransfer = (ipc, method, ...params) => {
@@ -753,7 +753,7 @@ const createRpc = ipc => {
       send(ipc, method, ...params);
     },
     invoke(method, ...params) {
-      return invoke(ipc, method, ...params);
+      return invoke$1(ipc, method, ...params);
     },
     invokeAndTransfer(method, ...params) {
       return invokeAndTransfer(ipc, method, ...params);
@@ -799,6 +799,836 @@ const WebWorkerRpcClient = {
   create
 };
 
+const Document = 'document';
+
+const HandleReadmeContextMenu = 'handleReadmeContextMenu';
+
+const ExtensionDetailDescription = 'ExtensionDetailDescription';
+const ExtensionDetailHeader = 'ExtensionDetailHeader';
+const ExtensionDetailHeaderDetails = 'ExtensionDetailHeaderDetails';
+const ExtensionDetailIcon = 'ExtensionDetailIcon';
+const ExtensionDetailName = 'ExtensionDetailName';
+const Markdown = 'Markdown';
+
+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 text = data => {
+  return {
+    type: Text$1,
+    text: data,
+    childCount: 0
+  };
+};
+
+const getExtensionDetailHeaderVirtualDom = extensionDetail => {
+  const {
+    name,
+    iconSrc,
+    description
+  } = extensionDetail;
+  const dom = [{
+    type: Div$1,
+    className: ExtensionDetailHeader,
+    childCount: 2
+  }, {
+    type: Img$1,
+    className: ExtensionDetailIcon,
+    alt: '',
+    draggable: false,
+    childCount: 0,
+    src: iconSrc
+  }, {
+    type: Div$1,
+    className: ExtensionDetailHeaderDetails,
+    childCount: 2
+  }, {
+    type: Div$1,
+    className: ExtensionDetailName,
+    childCount: 1
+  }, text(name), {
+    type: Div$1,
+    className: ExtensionDetailDescription,
+    childCount: 1
+  }, text(description)];
+  return dom;
+};
+
+const allowedMarkdownAttributes = ['src', 'id', 'className', 'title', 'alt', 'href', 'target', 'rel'];
+
+class AssertionError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'AssertionError';
+  }
+}
+const getType = value => {
+  switch (typeof value) {
+    case 'number':
+      return 'number';
+    case 'function':
+      return 'function';
+    case 'string':
+      return 'string';
+    case 'object':
+      if (value === null) {
+        return 'null';
+      }
+      if (Array.isArray(value)) {
+        return 'array';
+      }
+      return 'object';
+    case 'boolean':
+      return 'boolean';
+    default:
+      return 'unknown';
+  }
+};
+const array = value => {
+  const type = getType(value);
+  if (type !== 'array') {
+    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 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 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 Div:
+      return Div$1;
+    case Article:
+      return Article$1;
+    case Aside:
+      return Aside$1;
+    case Footer:
+      return Footer$1;
+    case Header:
+      return Header$1;
+    case Nav:
+      return Nav$1;
+    case Section:
+      return Section$1;
+    case Search:
+      return Search$1;
+    case Dd:
+      return Dd$1;
+    case Dl:
+      return Dl$1;
+    case Figcaption:
+      return Figcaption$1;
+    case Figure:
+      return Figure$1;
+    case Hr:
+      return Hr$1;
+    case Li:
+      return Li$1;
+    case Ol:
+      return Ol$1;
+    case P:
+      return P$1;
+    case Pre:
+      return Pre$1;
+    case A:
+      return A$1;
+    case Abbr:
+      return Abbr$1;
+    case Br:
+      return Br$1;
+    case Cite:
+      return Cite$1;
+    case Data:
+      return Data$1;
+    case Time:
+      return Time$1;
+    case Tfoot:
+      return Tfoot$1;
+    case Img:
+      return Img$1;
+    case Span:
+      return Span$1;
+    default:
+      return Div$1;
+  }
+};
+
+const None$1 = 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 = {
+  TopLevelContent: 1,
+  AfterOpeningAngleBracket: 2,
+  InsideOpeningTag: 3,
+  AfterClosingTagSlash: 4,
+  AfterClosingTagName: 5,
+  InsideOpeningTagAfterWhitespace: 6,
+  AfterAttributeName: 7,
+  AfterAttributeEqualSign: 8,
+  InsideAttributeAfterDoubleQuote: 9,
+  AfterAttributeValueInsideDoubleQuote: 10,
+  AfterAttributeValueClosingQuote: 11,
+  AfterExclamationMark: 16,
+  InsideComment: 17
+};
+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_BLOCK_COMMENT_START = /^<!--/;
+const RE_SELF_CLOSING = /^\/>/;
+
+/**
+ * @param {string} text
+ */
+const tokenizeHtml = text => {
+  string(text);
+  let state = State.TopLevelContent;
+  let index = 0;
+  let next;
+  const tokens = [];
+  let token = None$1;
+  while (index < text.length) {
+    const part = text.slice(index);
+    switch (state) {
+      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;
+      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.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.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.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.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 {
+          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.AfterAttributeValueInsideDoubleQuote:
+        if (next = part.match(RE_DOUBLE_QUOTE)) {
+          token = AttributeQuoteEnd;
+          state = State.AfterAttributeValueClosingQuote;
+        } else {
+          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.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.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;
+      default:
+        throw new UnexpectedTokenError();
+    }
+    const tokenText = next[0];
+    tokens.push({
+      type: token,
+      text: tokenText
+    });
+    index += tokenText.length;
+  }
+  return tokens;
+};
+
+const parseHtml = (html, allowedAttributes) => {
+  string(html);
+  array(allowedAttributes);
+  const tokens = tokenizeHtml(html);
+  const dom = [];
+  const root = {
+    type: 0,
+    childCount: 0
+  };
+  let current = root;
+  const stack = [root];
+  let attributeName = '';
+  for (const token of tokens) {
+    switch (token.type) {
+      case TagNameStart:
+        current.childCount++;
+        current = {
+          type: getVirtualDomTag(token.text),
+          childCount: 0
+        };
+        dom.push(current);
+        if (!isSelfClosingTag(token.text)) {
+          stack.push(current);
+        }
+        break;
+      case TagNameEnd:
+        stack.pop();
+        current = stack.at(-1) || root;
+        break;
+      case Content:
+        current.childCount++;
+        dom.push(text(parseText(token.text)));
+        break;
+      case AttributeName:
+        attributeName = token.text;
+        if (attributeName === 'class') {
+          attributeName = 'className';
+        }
+        break;
+      case AttributeValue:
+        if (allowedAttributes.includes(attributeName)) {
+          current[attributeName] = token.text;
+        }
+        attributeName = '';
+        break;
+    }
+  }
+  return dom;
+};
+
+const getMarkdownVirtualDom = html => {
+  string(html);
+  const dom = parseHtml(html, allowedMarkdownAttributes);
+  return dom;
+};
+
+const getVirtualDomChildCount = markdownDom => {
+  const max = markdownDom.length - 1;
+  let stack = [];
+  for (let i = max; i >= 0; i--) {
+    const element = markdownDom[i];
+    if (element.childCount > 0) {
+      stack = stack.slice(element.childCount);
+    }
+    stack.unshift(element);
+  }
+  return stack.length;
+};
+
+const getExtensionDetailVirtualDom = (extensionDetail, sanitizedReadmeHtml) => {
+  const markdownDom = getMarkdownVirtualDom(sanitizedReadmeHtml);
+  const childCount = getVirtualDomChildCount(markdownDom);
+  const dom = [{
+    type: Div$1,
+    className: 'Viewlet ExtensionDetail',
+    childCount: childCount + 1
+  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), {
+    type: Div$1,
+    className: Markdown,
+    role: Document,
+    onContextMenu: HandleReadmeContextMenu,
+    childCount
+  }, ...markdownDom];
+  return dom;
+};
+
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  const replacer = (match, rest) => {
+    return placeholders[rest];
+  };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
+};
+
+/**
+ * @enum {string}
+ */
+const UiStrings = {
+  Copy: 'Copy',
+  OpenInNewTab: 'Open in New Tab',
+  OpenImageInNewTab: 'Open Image in New Tab',
+  SaveImageAs: 'Save Image as'
+};
+const copy = () => {
+  return i18nString(UiStrings.Copy);
+};
+const openImageInNewTab = () => {
+  return i18nString(UiStrings.OpenImageInNewTab);
+};
+const saveImageAs = () => {
+  return i18nString(UiStrings.SaveImageAs);
+};
+
+const None = 0;
+
+const getMenuEntries = props => {
+  const menuEntries = [];
+  if (props.isLink) {
+    menuEntries.push({
+      id: 'openInNewTab',
+      label: openImageInNewTab(),
+      flags: None,
+      command: 'Open.openUrl',
+      args: [props.url]
+    });
+  } else if (props.isImage) {
+    menuEntries.push({
+      id: 'openImageInNewTab',
+      label: openImageInNewTab(),
+      flags: None,
+      command: 'Open.openUrl',
+      args: [props.url]
+    }, {
+      id: 'saveImageAs',
+      label: saveImageAs(),
+      flags: None,
+      command: 'SaveFileAs.saveFileAs',
+      args: ['image.png', props.url]
+    });
+  }
+  menuEntries.push({
+    id: 'copy',
+    label: copy(),
+    flags: None,
+    command: 'ClipBoard.execCopy'
+  });
+  return menuEntries;
+};
+
+const assetDir = '';
+
+const ExtensionDefaultIcon = `${assetDir}/icons/extensionDefaultIcon.png`;
+const ExtensionLanguageBasics = `${assetDir}/icons/language-icon.svg`;
+const ExtensionTheme = `${assetDir}/icons/theme-icon.png`;
+
+const handleIconError = state => {
+  const {
+    iconSrc
+  } = state;
+  if (iconSrc === ExtensionDefaultIcon) {
+    return state;
+  }
+  return {
+    ...state,
+    iconSrc: ExtensionDefaultIcon
+  };
+};
+
+const Web = 1;
+const Electron = 2;
+const Remote = 3;
+
+const isLanguageBasicsExtension = extension => {
+  return extension.name && extension.name.startsWith('Language Basics');
+};
+const isThemeExtension = extension => {
+  return extension.name && extension.name.endsWith(' Theme');
+};
+const getIcon = (extension, platform) => {
+  if (!extension) {
+    return ExtensionDefaultIcon;
+  }
+  if (!extension.path || !extension.icon) {
+    if (isLanguageBasicsExtension(extension)) {
+      return ExtensionLanguageBasics;
+    }
+    if (isThemeExtension(extension)) {
+      return ExtensionTheme;
+    }
+    return ExtensionDefaultIcon;
+  }
+  if (platform === Remote || platform === Electron) {
+    if (extension.builtin) {
+      return `${assetDir}/extensions/${extension.id}/${extension.icon}`;
+    }
+    return `/remote/${extension.path}/${extension.icon}`; // TODO support windows paths
+  }
+  return '';
+};
+
+// TODO handle case when extension is of type number|array|null|string
+
+const getName = extension => {
+  if (extension && extension.name) {
+    return extension.name;
+  }
+  if (extension && extension.id) {
+    return extension.id;
+  }
+  return 'n/a';
+};
+const getDescription = extension => {
+  if (!extension || !extension.description) {
+    return 'n/a';
+  }
+  return extension.description;
+};
+
+const state = {
+  rpc: undefined
+};
+const invoke = (method, ...params) => {
+  const rpc = state.rpc;
+  // @ts-ignore
+  return rpc.invoke(method, ...params);
+};
+const setRpc = rpc => {
+  state.rpc = rpc;
+};
+
+const getAllExtensions = async platform => {
+  if (platform === Web) {
+    return [];
+  }
+  return invoke('ExtensionManagement.getAllExtensions');
+};
+const getExtension = async (id, platform) => {
+  const allExtensions = await getAllExtensions(platform);
+  for (const extension of allExtensions) {
+    if (extension.id === id) {
+      return extension;
+    }
+  }
+  return undefined;
+};
+
+const getRemoteSrc = uri => {
+  const src = `/remote${uri}`;
+  return src;
+};
+
+const getBaseUrl = (extensionPath, platform) => {
+  switch (platform) {
+    case Remote:
+    case Electron:
+      return getRemoteSrc(extensionPath + '/');
+    default:
+      return extensionPath;
+  }
+};
+
+const Small = 1;
+const Normal = 2;
+const Large = 3;
+
+const getViewletSize = width => {
+  if (width < 180) {
+    return Small;
+  }
+  if (width < 768) {
+    return Normal;
+  }
+  return Large;
+};
+
+const readFile = async uri => {
+  return invoke('FileSystem.readFile', uri);
+};
+
+const ENOENT = 'ENOENT';
+
+const isEnoentError = error => {
+  return error && error.code === ENOENT;
+};
+
+const join = (pathSeparator, ...parts) => {
+  return parts.join(pathSeparator);
+};
+
+const loadReadmeContent = async path => {
+  try {
+    const readmeUrl = join('/', path, 'README.md');
+    const readmeContent = await readFile(readmeUrl);
+    return readmeContent;
+  } catch (error) {
+    if (isEnoentError(error)) {
+      return '';
+    }
+    console.error(error);
+    return `${error}`;
+  }
+};
+
 /**
  * marked v15.0.3 - a markdown parser
  * Copyright (c) 2011-2024, Christopher Jeffrey. (MIT Licensed)
@@ -3274,19 +4104,53 @@ marked.Tokenizer = _Tokenizer;
 marked.Hooks = _Hooks;
 marked.parse = marked;
 
-const renderMarkdown = async markdown => {
+const renderMarkdown = async (markdown, options = {}) => {
   const html = await marked(markdown, {});
   return html;
 };
 
+const loadContent = async (state, platform) => {
+  const {
+    uri,
+    width
+  } = state;
+  const id = uri.slice('extension-detail://'.length);
+  const extension = await getExtension(id, platform);
+  const readmeContent = await loadReadmeContent(extension.path);
+  // @ts-ignore
+  const baseUrl = getBaseUrl(extension.path, platform);
+  const readmeHtml = await renderMarkdown(readmeContent, {
+    baseUrl
+  });
+  const sanitizedReadmeHtml = readmeHtml;
+  const normalizedReadmeHtml = sanitizedReadmeHtml;
+  const iconSrc = getIcon(extension, platform);
+  const description = getDescription(extension);
+  const name = getName(extension);
+  const size = getViewletSize(width);
+  return {
+    ...state,
+    sanitizedReadmeHtml: normalizedReadmeHtml,
+    iconSrc,
+    name,
+    description,
+    size
+  };
+};
+
 const commandMap = {
-  'RenderMarkdown.renderMarkdown': renderMarkdown
+  'RenderMarkdown.renderMarkdown': renderMarkdown,
+  'HandleIconError.handleIconError': handleIconError,
+  'ExtensionDetail.loadContent': loadContent,
+  'ExtensionDetail.getMenuEntries': getMenuEntries,
+  'ExtensionDetail.getVirtualDom': getExtensionDetailVirtualDom
 };
 
 const listen = async () => {
-  await WebWorkerRpcClient.create({
+  const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
+  setRpc(rpc);
 };
 
 const main = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-detail-view",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Extension Detail View Worker",
   "main": "dist/extensionDetailViewWorkerMain.js",
   "type": "module",