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

package/dist/extensionDetailViewWorkerMain.js

@@ -846,19 +846,21 @@ const WebWorkerRpcClient = {
   create
 };
 
-const Document = 'document';
-
 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 HandleReadmeContextMenu = 'handleReadmeContextMenu';
-
+const Button = 1;
 const Div$1 = 4;
 const H1$1 = 5;
 const Span$1 = 8;
@@ -900,39 +902,22 @@ const text = data => {
   };
 };
 
-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), {
+const getChangelogVirtualDom = () => {
+  // TODO set tabpanel role
+  return [{
     type: Div$1,
-    className: ExtensionDetailDescription,
+    className: Changelog$1,
     childCount: 1
-  }, text(description)];
-  return dom;
+  }, 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 = 'div';
@@ -1395,6 +1380,95 @@ const getVirtualDomChildCount = markdownDom => {
   return stack.length;
 };
 
+const getDetailsVirtualDom = sanitizedReadmeHtml => {
+  const markdownDom = getMarkdownVirtualDom(sanitizedReadmeHtml);
+  const childCount = getVirtualDomChildCount(markdownDom);
+  const dom = [{
+    type: Div$1,
+    className: Markdown,
+    role: Document,
+    onContextMenu: HandleReadmeContextMenu,
+    childCount
+  }, ...markdownDom];
+  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,
+    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 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(' ');
 };
@@ -1403,20 +1477,41 @@ const mergeClassNames = (...classNames) => {
   return joinBySpace(...classNames.filter(Boolean));
 };
 
-const getExtensionDetailVirtualDom = (extensionDetail, sanitizedReadmeHtml) => {
-  const markdownDom = getMarkdownVirtualDom(sanitizedReadmeHtml);
-  const childCount = getVirtualDomChildCount(markdownDom);
+const getTabVirtualDom = tab => {
+  const {
+    label,
+    selected,
+    name
+  } = tab;
+  const className = selected ? mergeClassNames(ExtensionDetailTab, ExtensionDetailTabSelected) : ExtensionDetailTab;
+  return [{
+    type: Button,
+    role: Tab,
+    name,
+    className,
+    childCount: 1,
+    tabIndex: -1
+  }, text(label)];
+};
+
+const getTabsVirtualDom = tabs => {
+  return [{
+    type: Div$1,
+    className: ExtensionDetailTabs,
+    childCount: tabs.length,
+    role: TabList,
+    onClick: HandleTabsClick,
+    tabIndex: 0
+  }, ...tabs.flatMap(getTabVirtualDom)];
+};
+
+const getExtensionDetailVirtualDom = (extensionDetail, sanitizedReadmeHtml, selectedTab) => {
+  const tabs = getTabs(selectedTab);
   const dom = [{
     type: Div$1,
     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, selectedTab)];
   return dom;
 };
 
@@ -1432,23 +1527,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;
@@ -4159,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,
@@ -4169,12 +4265,28 @@ const loadContent = async (state, platform) => {
   };
 };
 
+const handleTabsClick = (state, name) => {
+  // TODO load the tabs content if needed
+  return {
+    ...state,
+    selectedTab: name
+  };
+};
+
+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,
+  'ExtensionDetail.handleTabsClick': handleTabsClick,
+  'ExtensionDetail.handleIconError': handleIconError,
+  // deprecated
+  '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.2.0",
   "description": "Extension Detail View Worker",
   "main": "dist/extensionDetailViewWorkerMain.js",
   "type": "module",