@lvce-editor/extension-detail-view 3.0.0 → 3.1.0

package/dist/extensionDetailViewWorkerMain.js

@@ -846,8 +846,6 @@ const WebWorkerRpcClient = {
   create
 };
 
-const Document = 'document';
-
 const ExtensionDetail = 'ExtensionDetail';
 const ExtensionDetailDescription = 'ExtensionDetailDescription';
 const ExtensionDetailHeader = 'ExtensionDetailHeader';
@@ -857,182 +855,145 @@ const ExtensionDetailName = 'ExtensionDetailName';
 const Markdown = 'Markdown';
 const Viewlet = 'Viewlet';
 
-const HandleReadmeContextMenu = 'handleReadmeContextMenu';
-
-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 Document = 'document';
+const TabList = 'tablist';
+const Tab = 'tab';
 
-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 HandleReadmeContextMenu = 'handleReadmeContextMenu';
 
 const allowedMarkdownAttributes = ['src', 'id', 'className', 'title', 'alt', 'href', 'target', 'rel'];
 
-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 Div$1 = 'div';
+const H1$1 = 'h1';
+const H2$1 = 'h2';
+const H3$1 = 'h3';
+const H4$1 = 'h4';
+const H5$1 = 'h5';
+const Img$1 = 'img';
+const Span$1 = 'span';
+const Article$1 = 'article';
+const Aside$1 = 'aside';
+const Footer$1 = 'footer';
+const Header$1 = 'header';
+const Nav$1 = 'nav';
+const Section$1 = 'section';
+const Search$1 = 'search';
+const Dd$1 = 'dd';
+const Dl$1 = 'dl';
+const Figcaption$1 = 'figcaption';
+const Figure$1 = 'figure';
+const Hr$1 = 'hr';
+const Li$1 = 'li';
+const Ol$1 = 'ol';
+const P$1 = 'p';
+const Pre$1 = 'pre';
+const A$1 = 'a';
+const Abbr$1 = 'abbr';
+const Br$1 = 'br';
+const Cite$1 = 'cite';
+const Data$1 = 'data';
+const Time$1 = 'time';
+const Tfoot$1 = 'tfoot';
+
+const Div = 4;
+const H1 = 5;
+const Span = 8;
+const Text$1 = 12;
+const Img = 17;
+const H2 = 22;
+const H3 = 23;
+const H4 = 24;
+const H5 = 25;
+const Article = 27;
+const Aside = 28;
+const Footer = 29;
+const Header = 30;
+const Nav = 40;
+const Section = 41;
+const Search = 42;
+const Dd = 43;
+const Dl = 44;
+const Figcaption = 45;
+const Figure = 46;
+const Hr = 47;
+const Li = 48;
+const Ol = 49;
+const P = 50;
+const Pre = 51;
+const A = 53;
+const Abbr = 54;
+const Br = 55;
+const Cite = 56;
+const Data = 57;
+const Time = 58;
+const Tfoot = 59;
 
 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;
+    case H1$1:
+      return H1;
+    case H2$1:
+      return H2;
+    case H3$1:
+      return H3;
+    case H4$1:
+      return H4;
+    case H5$1:
+      return H5;
+    case Div$1:
+      return Div;
+    case Article$1:
+      return Article;
+    case Aside$1:
+      return Aside;
+    case Footer$1:
+      return Footer;
+    case Header$1:
+      return Header;
+    case Nav$1:
+      return Nav;
+    case Section$1:
+      return Section;
+    case Search$1:
+      return Search;
+    case Dd$1:
+      return Dd;
+    case Dl$1:
+      return Dl;
+    case Figcaption$1:
+      return Figcaption;
+    case Figure$1:
+      return Figure;
+    case Hr$1:
+      return Hr;
+    case Li$1:
+      return Li;
+    case Ol$1:
+      return Ol;
+    case P$1:
+      return P;
+    case Pre$1:
+      return Pre;
+    case A$1:
+      return A;
+    case Abbr$1:
+      return Abbr;
+    case Br$1:
+      return Br;
+    case Cite$1:
+      return Cite;
+    case Data$1:
+      return Data;
+    case Time$1:
+      return Time;
+    case Tfoot$1:
+      return Tfoot;
+    case Img$1:
+      return Img;
+    case Span$1:
+      return Span;
     default:
-      return Div$1;
+      return Div;
   }
 };
 
@@ -1061,7 +1022,7 @@ const CommentStart = 21;
 
 const isSelfClosingTag = tag => {
   switch (tag) {
-    case Img:
+    case Img$1:
       return true;
     default:
       return false;
@@ -1326,6 +1287,14 @@ const tokenizeHtml = text => {
   return tokens;
 };
 
+const text = data => {
+  return {
+    type: Text$1,
+    text: data,
+    childCount: 0
+  };
+};
+
 const parseHtml = (html, allowedAttributes) => {
   string(html);
   array(allowedAttributes);
@@ -1395,6 +1364,75 @@ const getVirtualDomChildCount = markdownDom => {
   return stack.length;
 };
 
+const getExtensionDetailContentVirtualDom = sanitizedReadmeHtml => {
+  const markdownDom = getMarkdownVirtualDom(sanitizedReadmeHtml);
+  const childCount = getVirtualDomChildCount(markdownDom);
+  const dom = [{
+    type: Div,
+    className: Markdown,
+    role: Document,
+    onContextMenu: HandleReadmeContextMenu,
+    childCount
+  }, ...markdownDom];
+  return dom;
+};
+
+const getExtensionDetailHeaderVirtualDom = extensionDetail => {
+  const {
+    name,
+    iconSrc,
+    description
+  } = extensionDetail;
+  const dom = [{
+    type: Div,
+    className: ExtensionDetailHeader,
+    childCount: 2
+  }, {
+    type: Img,
+    className: ExtensionDetailIcon,
+    alt: '',
+    draggable: false,
+    childCount: 0,
+    src: iconSrc
+  }, {
+    type: Div,
+    className: ExtensionDetailHeaderDetails,
+    childCount: 2
+  }, {
+    type: Div,
+    className: ExtensionDetailName,
+    childCount: 1
+  }, text(name), {
+    type: Div,
+    className: ExtensionDetailDescription,
+    childCount: 1
+  }, text(description)];
+  return dom;
+};
+
+const getTabVirtualDom = tab => {
+  const {
+    label,
+    selected
+  } = tab;
+  const className = selected ? 'ExtensionDetailTab ExtensionDetailTabSelected' : 'ExtensionDetailTab';
+  return [{
+    type: Div,
+    role: Tab,
+    className,
+    childCount: 1
+  }, text(label)];
+};
+
+const getTabsVirtualDom = tabs => {
+  return [{
+    type: Div,
+    className: 'ExtensionDetailTabs',
+    childCount: tabs.length,
+    role: TabList
+  }, ...tabs.flatMap(getTabVirtualDom)];
+};
+
 const joinBySpace = (...items) => {
   return items.join(' ');
 };
@@ -1404,19 +1442,21 @@ const mergeClassNames = (...classNames) => {
 };
 
 const getExtensionDetailVirtualDom = (extensionDetail, sanitizedReadmeHtml) => {
-  const markdownDom = getMarkdownVirtualDom(sanitizedReadmeHtml);
-  const childCount = getVirtualDomChildCount(markdownDom);
+  const tabs = [{
+    label: 'Details',
+    selected: true
+  }, {
+    label: 'Features',
+    selected: false
+  }, {
+    label: 'Changelog',
+    selected: false
+  }];
   const dom = [{
-    type: Div$1,
+    type: Div,
     className: mergeClassNames(Viewlet, ExtensionDetail),
-    childCount: childCount + 1
-  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), {
-    type: Div$1,
-    className: Markdown,
-    role: Document,
-    onContextMenu: HandleReadmeContextMenu,
-    childCount
-  }, ...markdownDom];
+    childCount: 3
+  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml)];
   return dom;
 };
 
@@ -1432,23 +1472,22 @@ const i18nString = (key, placeholders = emptyObject) => {
   return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
-const UiStrings = {
-  Copy: 'Copy',
-  OpenInNewTab: 'Open in New Tab',
-  OpenImageInNewTab: 'Open Image in New Tab',
-  SaveImageAs: 'Save Image as'
-};
+const Copy = 'Copy';
+const OpenInNewTab = 'Open in New Tab';
+const OpenImageInNewTab = 'Open Image in New Tab';
+const SaveImageAs = 'Save Image as';
+
 const copy = () => {
-  return i18nString(UiStrings.Copy);
+  return i18nString(Copy);
 };
 const openInNewTab = () => {
-  return i18nString(UiStrings.OpenInNewTab);
+  return i18nString(OpenInNewTab);
 };
 const openImageInNewTab = () => {
-  return i18nString(UiStrings.OpenImageInNewTab);
+  return i18nString(OpenImageInNewTab);
 };
 const saveImageAs = () => {
-  return i18nString(UiStrings.SaveImageAs);
+  return i18nString(SaveImageAs);
 };
 
 const None = 0;
@@ -4169,12 +4208,17 @@ const loadContent = async (state, platform) => {
   };
 };
 
+const terminate = () => {
+  globalThis.close();
+};
+
 const commandMap = {
-  'RenderMarkdown.renderMarkdown': renderMarkdown,
-  'HandleIconError.handleIconError': handleIconError,
-  'ExtensionDetail.loadContent': loadContent,
   'ExtensionDetail.getMenuEntries': getMenuEntries,
-  'ExtensionDetail.getVirtualDom': getExtensionDetailVirtualDom
+  'ExtensionDetail.getVirtualDom': getExtensionDetailVirtualDom,
+  'ExtensionDetail.loadContent': loadContent,
+  'ExtensionDetail.terminate': terminate,
+  'HandleIconError.handleIconError': handleIconError,
+  'RenderMarkdown.renderMarkdown': renderMarkdown
 };
 
 const listen = async () => {

package/package.json

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