@lvce-editor/extension-detail-view 3.4.0 → 3.5.0

package/dist/extensionDetailViewWorkerMain.js

@@ -883,7 +883,9 @@ const create = (uid, uri, width, height, platform) => {
     resources: [],
     selectedFeatureMarkdownDom: '',
     extension: {},
-    baseUrl: ''
+    baseUrl: '',
+    features: [],
+    folderSize: 0
   };
   set$1(uid, state, state);
 };
@@ -975,6 +977,19 @@ const Panel = 'panel';
 
 const HandleReadmeContextMenu = 'handleReadmeContextMenu';
 const HandleTabsClick = 'handleTabsClick';
+const HandleFeaturesClick = 'handleFeaturesClick';
+
+const getAdditionalDetailsEntryVirtualDom = (heading, items, renderer) => {
+  return [{
+    type: Div$1,
+    className: AdditionalDetailsEntry,
+    childCount: 2
+  }, {
+    type: Div$1,
+    className: AdditionalDetailsTitle,
+    childCount: 1
+  }, text(heading), ...renderer(items)];
+};
 
 const getCategoryVirtualDom = category => {
   const {
@@ -1048,39 +1063,7 @@ const getAdditionalDetailsVirtualDom = (firstHeading, entries, secondHeading, se
     type: Div$1,
     className: AdditionalDetails,
     childCount: 4
-  }, {
-    type: Div$1,
-    className: AdditionalDetailsEntry,
-    childCount: 2
-  }, {
-    type: Div$1,
-    className: AdditionalDetailsTitle,
-    childCount: 1
-  }, text(firstHeading), ...getMoreInfoVirtualDom(entries), {
-    type: Div$1,
-    className: AdditionalDetailsEntry,
-    childCount: 2
-  }, {
-    type: Div$1,
-    className: AdditionalDetailsTitle,
-    childCount: 1
-  }, text(secondHeading), ...getMoreInfoVirtualDom(secondEntries), {
-    type: Div$1,
-    className: AdditionalDetailsEntry,
-    childCount: 2
-  }, {
-    type: Div$1,
-    className: AdditionalDetailsTitle,
-    childCount: 1
-  }, text(thirdHeading), ...getCategoriesDom(categories), {
-    type: Div$1,
-    className: AdditionalDetailsEntry,
-    childCount: 2
-  }, {
-    type: Div$1,
-    className: AdditionalDetailsTitle,
-    childCount: 1
-  }, text(fourthHeading), ...getResourcesVirtualDom(resources)];
+  }, ...getAdditionalDetailsEntryVirtualDom(firstHeading, entries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(secondHeading, secondEntries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(thirdHeading, categories, getCategoriesDom), ...getAdditionalDetailsEntryVirtualDom(fourthHeading, resources, getResourcesVirtualDom)];
 };
 
 const allowedMarkdownAttributes = ['src', 'id', 'className', 'title', 'alt', 'href', 'target', 'rel'];
@@ -1558,6 +1541,9 @@ const getDetailsVirtualDom = sanitizedReadmeHtml => {
   }, {
     key: 'Last Updated',
     value: 'n/a'
+  }, {
+    key: 'Size',
+    value: '100kB'
   }];
   const secondHeading = 'Marketplace';
   const secondEntries = [{
@@ -1607,12 +1593,16 @@ const getDetailsVirtualDom = sanitizedReadmeHtml => {
 
 const getFeatureListItemVirtualDom = feature => {
   const {
-    label
+    label,
+    selected,
+    id
   } = feature;
+  const className = selected ? 'Feature FeatureSelected' : Feature;
   return [{
     // TODO use role list item or tab
-    type: Div$1,
-    className: Feature,
+    type: Button,
+    name: id,
+    className,
     childCount: 1
   }, text(label)];
 };
@@ -1622,7 +1612,8 @@ const getFeatureListVirtualDom = features => {
     // TODO use either list or tabs role
     type: Div$1,
     className: FeaturesList,
-    childCount: features.length
+    childCount: features.length,
+    onClick: HandleFeaturesClick
   }, ...features.flatMap(getFeatureListItemVirtualDom)];
 };
 
@@ -1644,11 +1635,7 @@ const getFeatureThemesVirtualDom = themesHtml => {
   }, ...markdownDom];
 };
 
-const getFeaturesVirtualDom = themesHtml => {
-  const features = [{
-    id: 'theme',
-    label: 'Theme'
-  }];
+const getFeaturesVirtualDom = (features, themesHtml) => {
   return [{
     type: Div$1,
     className: Features$1,
@@ -1660,16 +1647,21 @@ const getFeaturesVirtualDom = themesHtml => {
   }, ...getFeatureThemesVirtualDom(themesHtml)];
 };
 
+const Changelog = 'Changelog';
+const Commands = 'Commands';
 const Details = 'Details';
 const Features = 'Features';
-const Changelog = 'Changelog';
+const JsonValidation = 'JsonValidation';
+const ProgrammingLanguages = 'ProgrammingLanguages';
+const Settings = 'Settings';
+const Theme = 'Theme';
 
-const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesHtml, selectedTab) => {
+const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesHtml, selectedTab, features) => {
   switch (selectedTab) {
     case Details:
       return getDetailsVirtualDom(sanitizedReadmeHtml);
     case Features:
-      return getFeaturesVirtualDom(themesHtml);
+      return getFeaturesVirtualDom(features, themesHtml);
     case Changelog:
       return getChangelogVirtualDom();
     default:
@@ -1710,6 +1702,31 @@ const getExtensionDetailHeaderVirtualDom = extensionDetail => {
   return dom;
 };
 
+const getFeatures = () => {
+  const features = [{
+    id: Theme,
+    label: 'Theme',
+    selected: true
+  }, {
+    id: Commands,
+    label: 'Commands',
+    selected: false
+  }, {
+    id: JsonValidation,
+    label: 'Json Validation',
+    selected: false
+  }, {
+    id: ProgrammingLanguages,
+    label: 'Programming Languages',
+    selected: false
+  }, {
+    id: Settings,
+    label: 'Settings',
+    selected: false
+  }];
+  return features;
+};
+
 const getTabs = selectedTab => {
   const tabs = [{
     label: 'Details',
@@ -1769,12 +1786,13 @@ const getTabsVirtualDom = tabs => {
 
 const getExtensionDetailVirtualDom = (extensionDetail, sanitizedReadmeHtml, selectedTab, newState) => {
   const themesHtml = newState?.selectedFeatureMarkdownDom || '';
+  const features = newState?.features || getFeatures();
   const tabs = getTabs(selectedTab);
   const dom = [{
     type: Div$1,
     className: mergeClassNames(Viewlet, ExtensionDetail),
     childCount: 3
-  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab)];
+  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features)];
   return dom;
 };
 
@@ -1851,6 +1869,33 @@ const getLinkMenuEntries = props => {
 
 const getMenuEntries = props => [...getLinkMenuEntries(props), ...getImageMenuEntries(props), getCopyMenuEntry()];
 
+const selectFeature = async (state, name) => {
+  const {
+    features
+  } = state;
+  const newFeatures = features.map(feature => {
+    if (feature.id === name) {
+      return {
+        ...feature,
+        selected: true
+      };
+    }
+    return {
+      ...feature,
+      selected: false
+    };
+  });
+  return {
+    ...state,
+    selectedFeature: name,
+    features: newFeatures
+  };
+};
+
+const handleClickFeatures = async (state, name) => {
+  return selectFeature(state, name);
+};
+
 const assetDir = '';
 
 const ExtensionDefaultIcon = `${assetDir}/icons/extensionDefaultIcon.png`;
@@ -1877,6 +1922,10 @@ const selectTabChangelog = async state => {
   };
 };
 
+const selectTabDefault = async state => {
+  return state;
+};
+
 const selectTabDetails = async state => {
   // TODO load readmo markdown here
   return {
@@ -4437,7 +4486,7 @@ const getSelectTabHandler = selectedTab => {
     case Changelog:
       return selectTabChangelog;
     default:
-      throw new Error(`unexpected tab`);
+      return selectTabDefault;
   }
 };
 
@@ -4547,6 +4596,14 @@ const getBaseUrl = (extensionPath, platform) => {
   }
 };
 
+const getFolderSize = async uri => {
+  try {
+    return await invoke('FileSystem.getFolderSize', uri);
+  } catch {
+    return 0;
+  }
+};
+
 const getSavedSelectedTab = savedState => {
   if (savedState && typeof savedState === 'object' && 'selectedTab' in savedState && typeof savedState.selectedTab === 'string') {
     return savedState.selectedTab;
@@ -4615,6 +4672,8 @@ const loadContent = async (state, platform, savedState) => {
   const name = getName(extension);
   const size = getViewletSize(width);
   const selectedTab = getSavedSelectedTab(savedState);
+  const features = getFeatures();
+  const folderSize = await getFolderSize(extension.uri);
   const entries = [{
     key: 'Identifier',
     value: 'abc'
@@ -4662,7 +4721,9 @@ const loadContent = async (state, platform, savedState) => {
     categories,
     resources,
     extension,
-    baseUrl
+    baseUrl,
+    features,
+    folderSize
   };
 };
 
@@ -4681,14 +4742,15 @@ const terminate = () => {
 
 const commandMap = {
   'ExtensionDetail.create': create,
-  'ExtensionDetail.saveState': saveState,
   'ExtensionDetail.getMenuEntries': getMenuEntries,
   'ExtensionDetail.getVirtualDom': getExtensionDetailVirtualDom,
-  'ExtensionDetail.loadContent': loadContent,
-  'ExtensionDetail.terminate': terminate,
-  'ExtensionDetail.handleTabsClick': handleTabsClick,
+  'ExtensionDetail.handleFeaturesClick': handleClickFeatures,
   'ExtensionDetail.handleIconError': handleIconError,
+  'ExtensionDetail.handleTabsClick': handleTabsClick,
+  'ExtensionDetail.loadContent': loadContent,
+  'ExtensionDetail.saveState': saveState,
   'ExtensionDetail.selectTab': selectTab,
+  'ExtensionDetail.terminate': terminate,
   // deprecated
   'HandleIconError.handleIconError': handleIconError,
   'RenderMarkdown.renderMarkdown': renderMarkdown

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-detail-view",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Extension Detail View Worker",
   "keywords": [],
   "license": "MIT",