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

package/dist/extensionDetailViewWorkerMain.js

@@ -850,150 +850,174 @@ const ExtensionDetail = 'ExtensionDetail';
 const ExtensionDetailDescription = 'ExtensionDetailDescription';
 const ExtensionDetailHeader = 'ExtensionDetailHeader';
 const ExtensionDetailHeaderDetails = 'ExtensionDetailHeaderDetails';
+const Changelog$1 = 'Changelog';
+const Features$1 = 'Features';
 const ExtensionDetailIcon = 'ExtensionDetailIcon';
 const ExtensionDetailName = 'ExtensionDetailName';
+const ExtensionDetailTab = 'ExtensionDetailTab';
+const ExtensionDetailTabs = 'ExtensionDetailTabs';
+const ExtensionDetailTabSelected = 'ExtensionDetailTabSelected';
 const Markdown = 'Markdown';
 const Viewlet = 'Viewlet';
 
+const Button = 1;
+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 getChangelogVirtualDom = () => {
+  // TODO set tabpanel role
+  return [{
+    type: Div$1,
+    className: Changelog$1,
+    childCount: 1
+  }, text('Not Implemented')];
+};
+
 const Document = 'document';
 const TabList = 'tablist';
 const Tab = 'tab';
 
 const HandleReadmeContextMenu = 'handleReadmeContextMenu';
+const HandleTabsClick = 'handleTabsClick';
 
 const allowedMarkdownAttributes = ['src', 'id', 'className', 'title', 'alt', 'href', 'target', 'rel'];
 
-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 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$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;
+    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;
+      return Div$1;
   }
 };
 
@@ -1022,7 +1046,7 @@ const CommentStart = 21;
 
 const isSelfClosingTag = tag => {
   switch (tag) {
-    case Img$1:
+    case Img:
       return true;
     default:
       return false;
@@ -1287,14 +1311,6 @@ const tokenizeHtml = text => {
   return tokens;
 };
 
-const text = data => {
-  return {
-    type: Text$1,
-    text: data,
-    childCount: 0
-  };
-};
-
 const parseHtml = (html, allowedAttributes) => {
   string(html);
   array(allowedAttributes);
@@ -1364,11 +1380,11 @@ const getVirtualDomChildCount = markdownDom => {
   return stack.length;
 };
 
-const getExtensionDetailContentVirtualDom = sanitizedReadmeHtml => {
+const getDetailsVirtualDom = sanitizedReadmeHtml => {
   const markdownDom = getMarkdownVirtualDom(sanitizedReadmeHtml);
   const childCount = getVirtualDomChildCount(markdownDom);
   const dom = [{
-    type: Div,
+    type: Div$1,
     className: Markdown,
     role: Document,
     onContextMenu: HandleReadmeContextMenu,
@@ -1377,6 +1393,32 @@ const getExtensionDetailContentVirtualDom = sanitizedReadmeHtml => {
   return dom;
 };
 
+const getFeaturesVirtualDom = () => {
+  // TODO set tabpanel role
+  return [{
+    type: Div$1,
+    className: Features$1,
+    childCount: 1
+  }, text('Not Implemented')];
+};
+
+const Details = 'Details';
+const Features = 'Features';
+const Changelog = 'Changelog';
+
+const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, selectedTab) => {
+  switch (selectedTab) {
+    case Details:
+      return getDetailsVirtualDom(sanitizedReadmeHtml);
+    case Features:
+      return getFeaturesVirtualDom();
+    case Changelog:
+      return getChangelogVirtualDom();
+    default:
+      return [];
+  }
+};
+
 const getExtensionDetailHeaderVirtualDom = extensionDetail => {
   const {
     name,
@@ -1384,79 +1426,92 @@ const getExtensionDetailHeaderVirtualDom = extensionDetail => {
     description
   } = extensionDetail;
   const dom = [{
-    type: Div,
+    type: Div$1,
     className: ExtensionDetailHeader,
     childCount: 2
   }, {
-    type: Img,
+    type: Img$1,
     className: ExtensionDetailIcon,
     alt: '',
     draggable: false,
     childCount: 0,
     src: iconSrc
   }, {
-    type: Div,
+    type: Div$1,
     className: ExtensionDetailHeaderDetails,
     childCount: 2
   }, {
-    type: Div,
+    type: Div$1,
     className: ExtensionDetailName,
     childCount: 1
   }, text(name), {
-    type: Div,
+    type: Div$1,
     className: ExtensionDetailDescription,
     childCount: 1
   }, text(description)];
   return dom;
 };
 
+const getTabs = selectedTab => {
+  const tabs = [{
+    label: 'Details',
+    name: Details,
+    selected: selectedTab === Details
+  }, {
+    label: 'Features',
+    name: Features,
+    selected: selectedTab === Features
+  }, {
+    label: 'Changelog',
+    name: Changelog,
+    selected: selectedTab === Changelog
+  }];
+  return tabs;
+};
+
+const joinBySpace = (...items) => {
+  return items.join(' ');
+};
+
+const mergeClassNames = (...classNames) => {
+  return joinBySpace(...classNames.filter(Boolean));
+};
+
 const getTabVirtualDom = tab => {
   const {
     label,
-    selected
+    selected,
+    name
   } = tab;
-  const className = selected ? 'ExtensionDetailTab ExtensionDetailTabSelected' : 'ExtensionDetailTab';
+  const className = selected ? mergeClassNames(ExtensionDetailTab, ExtensionDetailTabSelected) : ExtensionDetailTab;
   return [{
-    type: Div,
+    type: Button,
     role: Tab,
+    name,
     className,
-    childCount: 1
+    childCount: 1,
+    tabIndex: -1
   }, text(label)];
 };
 
 const getTabsVirtualDom = tabs => {
   return [{
-    type: Div,
-    className: 'ExtensionDetailTabs',
+    type: Div$1,
+    className: ExtensionDetailTabs,
     childCount: tabs.length,
-    role: TabList
+    role: TabList,
+    onClick: HandleTabsClick,
+    tabIndex: 0
   }, ...tabs.flatMap(getTabVirtualDom)];
 };
 
-const joinBySpace = (...items) => {
-  return items.join(' ');
-};
-
-const mergeClassNames = (...classNames) => {
-  return joinBySpace(...classNames.filter(Boolean));
-};
-
-const getExtensionDetailVirtualDom = (extensionDetail, sanitizedReadmeHtml) => {
-  const tabs = [{
-    label: 'Details',
-    selected: true
-  }, {
-    label: 'Features',
-    selected: false
-  }, {
-    label: 'Changelog',
-    selected: false
-  }];
+const getExtensionDetailVirtualDom = (extensionDetail, sanitizedReadmeHtml, selectedTab) => {
+  const tabs = getTabs(selectedTab);
   const dom = [{
-    type: Div,
+    type: Div$1,
     className: mergeClassNames(Viewlet, ExtensionDetail),
     childCount: 3
-  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml)];
+  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, selectedTab)];
   return dom;
 };
 
@@ -4198,8 +4253,10 @@ const loadContent = async (state, platform) => {
   const description = getDescription(extension);
   const name = getName(extension);
   const size = getViewletSize(width);
+  const selectedTab = Details;
   return {
     ...state,
+    selectedTab,
     sanitizedReadmeHtml: normalizedReadmeHtml,
     iconSrc,
     name,
@@ -4208,6 +4265,14 @@ const loadContent = async (state, platform) => {
   };
 };
 
+const handleTabsClick = (state, name) => {
+  // TODO load the tabs content if needed
+  return {
+    ...state,
+    selectedTab: name
+  };
+};
+
 const terminate = () => {
   globalThis.close();
 };
@@ -4217,6 +4282,9 @@ const commandMap = {
   'ExtensionDetail.getVirtualDom': getExtensionDetailVirtualDom,
   'ExtensionDetail.loadContent': loadContent,
   'ExtensionDetail.terminate': terminate,
+  'ExtensionDetail.handleTabsClick': handleTabsClick,
+  'ExtensionDetail.handleIconError': handleIconError,
+  // deprecated
   'HandleIconError.handleIconError': handleIconError,
   'RenderMarkdown.renderMarkdown': renderMarkdown
 };

package/package.json

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