@lvce-editor/extension-detail-view 3.39.0 → 3.40.0

package/dist/extensionDetailViewWorkerMain.js

@@ -173,6 +173,7 @@ const H2 = 22;
 const Dd = 43;
 const Dl = 44;
 const Li = 48;
+const P = 50;
 const Pre = 51;
 const A = 53;
 const Ul = 60;
@@ -191,6 +192,7 @@ const VirtualDomElements = {
   H2,
   Img,
   Li,
+  P,
   Pre,
   Span,
   TBody,
@@ -260,11 +262,16 @@ const TableCell = 'TableCell';
 const TableHeading = 'TableHeading';
 const Viewlet = 'Viewlet';
 
+const li = {
+  type: VirtualDomElements.Li,
+  childCount: 1
+};
+const code = {
+  type: VirtualDomElements.Code,
+  childCount: 1
+};
 const getActivationEventVirtualDom = event => {
-  return [{
-    type: VirtualDomElements.Li,
-    childCount: 1
-  }, text(event)];
+  return [li, code, text(event)];
 };
 
 const getFeatureContentHeadingVirtualDom = heading => {
@@ -509,6 +516,19 @@ class FeatureNotFoundError extends Error {
   }
 }
 
+const getFeatureUnsupportedVirtualDom = state => {
+  return [{
+    type: VirtualDomElements.Div,
+    childCount: 2
+  }, {
+    type: VirtualDomElements.H1,
+    childCount: 1
+  }, text('Unsupported Feature'), {
+    type: VirtualDomElements.P,
+    childCount: 1
+  }, text('Selected feature is unknown or unsupported')];
+};
+
 const features = Object.create(null);
 const register$1 = feature => {
   features[feature.id] = feature;
@@ -535,7 +555,7 @@ const getFeatureDetailsHandler = featureName => {
 const getFeatureVirtualDomHandler = featureName => {
   const feature = features[featureName];
   if (!feature) {
-    throw new FeatureNotFoundError(featureName);
+    return getFeatureUnsupportedVirtualDom;
   }
   return feature.getVirtualDom;
 };
@@ -2078,9 +2098,10 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     badge: '',
     baseUrl: '',
     builtinExtensionsBadgeEnabled: true,
+    buttons: [],
     categories: [],
-    changelogVirtualDom: [],
     changelogScrollTop: 0,
+    changelogVirtualDom: [],
     commands: [],
     description: '',
     detailsVirtualDom: [],
@@ -2091,10 +2112,10 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     extensionVersion: '',
     features: [],
     featuresVirtualDom: [],
+    focus: 0,
     folderSize: 0,
     hasColorTheme: false,
     iconSrc: '',
-    isBuiltin: false,
     jsonValidation: [],
     name: '',
     platform,
@@ -2111,11 +2132,11 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     showAdditionalDetailsBreakpoint: 600,
     sizeOnDisk: 0,
     sizeValue: 0,
+    tabs: [],
     themesMarkdownDom: [],
     uri,
     webViews: [],
-    width,
-    focus: 0
+    width
   };
   set$1(uid, state, state);
 };
@@ -2346,6 +2367,15 @@ const handleIconError = state => {
   };
 };
 
+const handleScroll = (state, scrollTop) => {
+  const newScrollTop = Math.max(0, scrollTop);
+  return {
+    ...state,
+    readmeScrollTop: newScrollTop,
+    scrollSource: User
+  };
+};
+
 const readFile = async uri => {
   return readFile$1(uri);
 };
@@ -2437,6 +2467,9 @@ const selectTabFeatures = async state => {
     selectedFeature,
     features
   } = state;
+  if (features.length === 0) {
+    return state;
+  }
   const actualSelectedFeature = selectedFeature || Theme;
   const fn = getFeatureDetailsHandler(actualSelectedFeature);
   const partialNewState = await fn(extension, baseUrl);
@@ -2470,15 +2503,6 @@ const handleTabsClick = (state, name) => {
   return selectTab(state, name);
 };
 
-const handleWheel = (state, deltaX, deltaY) => {
-  const newScrollTop = Math.max(0, state.readmeScrollTop + deltaY);
-  return {
-    ...state,
-    readmeScrollTop: newScrollTop,
-    scrollSource: User
-  };
-};
-
 const sendMessagePortToMarkdownWorker = async port => {
   await sendMessagePortToMarkdownWorker$1(port, 0);
 };
@@ -2561,6 +2585,7 @@ const getBaseUrl = (extensionPath, platform) => {
 };
 
 const getCategories = () => {
+  // TODO
   return [{
     id: 'themes',
     label: 'Themes'
@@ -2660,17 +2685,24 @@ const getDisplaySize = size => {
   });
 };
 
-const getEntries = () => {
-  return [{
-    key: 'Identifier',
-    value: 'abc'
+const getExtensionDetailButtons = (hasColorTheme, isBuiltin) => {
+  const allActions = [{
+    label: setColorTheme$3(),
+    onClick: HandleClickSetColorTheme,
+    enabled: hasColorTheme,
+    name: SetColorTheme
   }, {
-    key: 'Version',
-    value: '1.9.5'
+    label: disable(),
+    onClick: HandleClickDisable,
+    enabled: true,
+    name: Disable
   }, {
-    key: 'Last Updated',
-    value: 'n/a'
+    label: uninstall(),
+    onClick: HandleClickUninstall,
+    enabled: !isBuiltin,
+    name: Uninstall
   }];
+  return allActions;
 };
 
 const getExtensionIdFromUri = uri => {
@@ -2689,7 +2721,48 @@ const getFolderSize = async uri => {
   }
 };
 
-const getResources = () => {
+const getInstallationEntries = (displaySize, extensionId, extensionVersion, extensionUri) => {
+  const entries = [{
+    key: 'Identifier',
+    value: extensionId,
+    odd: true,
+    code: true
+  }, {
+    key: 'Version',
+    value: extensionVersion,
+    code: true
+  }, {
+    key: 'Last Updated',
+    value: 'n/a',
+    odd: true
+  }, {
+    key: 'Size',
+    value: displaySize,
+    onClick: HandleClickSize,
+    title: extensionUri
+  }];
+  return entries;
+};
+
+const getMarketplaceEntries = isBuiltin => {
+  if (isBuiltin) {
+    return [];
+  }
+  return [{
+    key: 'Published',
+    value: 'n/a',
+    odd: true
+  }, {
+    key: 'Last Released',
+    value: 'n/a'
+  }];
+};
+
+const getResources = isBuiltin => {
+  if (isBuiltin) {
+    return [];
+  }
+  // TODO
   return [{
     label: 'Marketplace',
     url: '#'
@@ -2705,14 +2778,24 @@ const getResources = () => {
   }];
 };
 
-const getSecondEntries = () => {
-  return [{
-    key: 'Published',
-    value: 'n/a'
+const getTabs = (selectedTab, hasReadme, hasFeatures, hasChangelog) => {
+  const tabs = [{
+    label: details(),
+    name: Details,
+    selected: selectedTab === Details,
+    enabled: hasReadme
   }, {
-    key: 'Last Released',
-    value: 'n/a'
+    label: features$1(),
+    name: Features,
+    selected: selectedTab === Features,
+    enabled: hasFeatures
+  }, {
+    label: changelog(),
+    name: Changelog,
+    selected: selectedTab === Changelog,
+    enabled: hasChangelog
   }];
+  return tabs;
 };
 
 const Small = 1;
@@ -2884,30 +2967,40 @@ const loadContent = async (state, platform, savedState) => {
   const detailsVirtualDom = await getMarkdownVirtualDom(readmeHtml, {
     scrollToTopEnabled: true
   });
+  const isBuiltin = extension?.isBuiltin;
+  const buttons = getExtensionDetailButtons(hasColorTheme, isBuiltin);
+  const enabledButtons = buttons.filter(button => button.enabled);
   const size = getViewletSize(width);
   const {
     selectedFeature,
     selectedTab,
-    readmeScrollTop
+    readmeScrollTop,
+    changelogScrollTop
   } = restoreState(savedState);
   const features = getFeatures(selectedFeature || Theme, extension);
+  const hasFeatures = features.length > 0;
+  const hasReadme = true; // TODO
+  const hasChangelog = true; // TODO
+  const tabs = getTabs(selectedTab, hasReadme, hasFeatures, hasChangelog);
+  const enabledTabs = tabs.filter(tab => tab.enabled);
   const folderSize = await getFolderSize(extensionUri);
-  const displaySize = getDisplaySize(size);
-  const entries = getEntries();
-  const secondEntries = getSecondEntries();
+  const displaySize = getDisplaySize(folderSize);
+  const installationEntries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri);
+  const marketplaceEntries = getMarketplaceEntries(isBuiltin);
   const categories = getCategories();
-  const resources = getResources();
+  const resources = getResources(isBuiltin);
   const sizeValue = getViewletSize(width || 0);
-  const isBuiltin = extension?.builtin;
   return {
     ...state,
     badge,
     baseUrl,
+    buttons: enabledButtons,
     categories,
+    changelogScrollTop,
     description,
     detailsVirtualDom,
     displaySize,
-    entries,
+    entries: installationEntries,
     extension,
     extensionId,
     extensionVersion,
@@ -2915,15 +3008,16 @@ const loadContent = async (state, platform, savedState) => {
     folderSize,
     hasColorTheme,
     iconSrc,
-    isBuiltin,
     name,
     readmeScrollTop,
     resources,
     scrollToTopButtonEnabled: true,
-    secondEntries,
+    secondEntries: marketplaceEntries,
+    scrollSource: Script,
     selectedTab,
     sizeOnDisk: size,
-    sizeValue
+    sizeValue,
+    tabs: enabledTabs
   };
 };
 
@@ -2931,26 +3025,6 @@ const loadContent2 = async (state, savedState) => {
   return loadContent(state, state.platform, savedState);
 };
 
-const getExtensionDetailButtons = (hasColorTheme, isBuiltin) => {
-  const allActions = [{
-    label: setColorTheme$3(),
-    onClick: HandleClickSetColorTheme,
-    enabled: hasColorTheme,
-    name: SetColorTheme
-  }, {
-    label: disable(),
-    onClick: HandleClickDisable,
-    enabled: true,
-    name: Disable
-  }, {
-    label: uninstall(),
-    onClick: HandleClickUninstall,
-    enabled: !isBuiltin,
-    name: Uninstall
-  }];
-  return allActions;
-};
-
 const getChangelogVirtualDom = changelogDom => {
   // const notImplemented = ExtensionDetailStrings.notImplemented()
   // TODO set tabpanel role
@@ -3108,40 +3182,6 @@ const getAdditionalDetailsVirtualDom = (showAdditionalDetails, firstHeading, ent
   }, ...getAdditionalDetailsEntryVirtualDom(firstHeading, entries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(secondHeading, secondEntries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(thirdHeading, categories, getCategoriesDom), ...getAdditionalDetailsEntryVirtualDom(fourthHeading, resources, getResourcesVirtualDom)];
 };
 
-const getInstallationEntries = (displaySize, extensionId, extensionVersion, extensionUri) => {
-  const entries = [{
-    key: 'Identifier',
-    value: extensionId,
-    odd: true,
-    code: true
-  }, {
-    key: 'Version',
-    value: extensionVersion,
-    code: true
-  }, {
-    key: 'Last Updated',
-    value: 'n/a',
-    odd: true
-  }, {
-    key: 'Size',
-    value: displaySize,
-    onClick: HandleClickSize,
-    title: extensionUri
-  }];
-  return entries;
-};
-
-const getMarketplaceEntries = () => {
-  return [{
-    key: 'Published',
-    value: 'n/a',
-    odd: true
-  }, {
-    key: 'Last Released',
-    value: 'n/a'
-  }];
-};
-
 const getChildCount = (additionalDetails, scrollToTopEnabled) => {
   let count = 1;
   if (additionalDetails) {
@@ -3149,12 +3189,9 @@ const getChildCount = (additionalDetails, scrollToTopEnabled) => {
   }
   return count;
 };
-const getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width, extensionUri, scrollToTopButtonEnabled, categories$1, resources$1, showAdditionalDetailsBreakpoint // new parameter, no default
-) => {
+const getDetailsVirtualDom = (sanitizedReadmeHtml, width, scrollToTopButtonEnabled, categories$1, resources$1, showAdditionalDetailsBreakpoint, marketplaceEntries, installationEntries) => {
   const firstHeading = installation();
-  const entries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri);
   const secondHeading = marketplace();
-  const secondEntries = getMarketplaceEntries();
   const thirdHeading = categories();
   const fourthHeading = resources();
   const showAdditionalDetails = width > showAdditionalDetailsBreakpoint;
@@ -3164,7 +3201,7 @@ const getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize, extensionId, ext
     className: ExtensionDetailPanel,
     childCount: childCount,
     role: AriaRoles.Panel
-  }, ...sanitizedReadmeHtml, ...getAdditionalDetailsVirtualDom(showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories$1, fourthHeading, resources$1)];
+  }, ...sanitizedReadmeHtml, ...getAdditionalDetailsVirtualDom(showAdditionalDetails, firstHeading, installationEntries, secondHeading, marketplaceEntries, thirdHeading, categories$1, fourthHeading, resources$1)];
   return dom;
 };
 
@@ -3216,10 +3253,10 @@ const getFeaturesVirtualDom = (features, selectedFeature, state) => {
   }, ...featureVirtualDom];
 };
 
-const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesDom, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, width, scrollToTopButtonEnabled, categories, resources, breakpoint, commands, jsonValidation, settings, webViews, extensionUri, changelogDom, activationEvents, state) => {
+const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, selectedTab, width, scrollToTopButtonEnabled, categories, resources, breakpoint, changelogDom, state) => {
   switch (selectedTab) {
     case Details:
-      return getDetailsVirtualDom(sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width, extensionUri, scrollToTopButtonEnabled, categories, resources, breakpoint);
+      return getDetailsVirtualDom(sanitizedReadmeHtml, width, scrollToTopButtonEnabled, categories, resources, breakpoint, state.entries, state.secondEntries);
     case Features:
       return getFeaturesVirtualDom(state.features, state.selectedFeature, state);
     case Changelog:
@@ -3321,32 +3358,19 @@ const getExtensionDetailHeaderVirtualDom = (name, iconSrc, description, badge, b
   return dom;
 };
 
-const getTabs = selectedTab => {
-  const tabs = [{
-    label: details(),
-    name: Details,
-    selected: selectedTab === Details
-  }, {
-    label: features$1(),
-    name: Features,
-    selected: selectedTab === Features
-  }, {
-    label: changelog(),
-    name: Changelog,
-    selected: selectedTab === Changelog
-  }];
-  return tabs;
-};
-
 const selectedClassName = mergeClassNames(ExtensionDetailTab, ExtensionDetailTabSelected);
 const defaultClassName = ExtensionDetailTab;
+const getTabClassName = isSelected => {
+  return isSelected ? selectedClassName : defaultClassName;
+};
+
 const getTabVirtualDom = tab => {
   const {
     label,
     selected,
     name
   } = tab;
-  const className = selected ? selectedClassName : defaultClassName;
+  const className = getTabClassName(selected);
   const ariaSelected = selected;
   return [{
     type: VirtualDomElements.Button,
@@ -3390,43 +3414,28 @@ const getExtensionDetailVirtualDom = (newState, selectedTab) => {
   // 3. virtual dom
   // 4. dom
   const {
-    activationEvents,
+    badge,
+    buttons,
     categories,
     changelogVirtualDom,
-    commands,
     description,
     detailsVirtualDom,
-    displaySize,
-    extension,
-    extensionId,
-    extensionVersion,
-    features,
-    hasColorTheme,
     iconSrc,
-    isBuiltin,
-    jsonValidation,
     name,
     resources,
     scrollToTopButtonEnabled,
-    selectedFeature,
-    settings,
     settingsButtonEnabled,
     showAdditionalDetailsBreakpoint,
     sizeValue,
-    themesMarkdownDom,
-    webViews,
-    badge
+    tabs
   } = newState;
-  const extensionUri = extension.uri || extension.path || '';
   const width = newState?.width || 500;
-  const tabs = getTabs(selectedTab);
   const sizeClass = getClassNames(sizeValue);
-  const buttonDefs = getExtensionDetailButtons(hasColorTheme, isBuiltin); // TODO compute in loadContent
   const dom = [{
     type: VirtualDomElements.Div,
     className: mergeClassNames(Viewlet, ExtensionDetail, sizeClass),
     childCount: 3
-  }, ...getExtensionDetailHeaderVirtualDom(name, iconSrc, description, badge, buttonDefs, settingsButtonEnabled), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(detailsVirtualDom, themesMarkdownDom, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, width, scrollToTopButtonEnabled, categories, resources, showAdditionalDetailsBreakpoint, commands, jsonValidation, settings, webViews, extensionUri, changelogVirtualDom, activationEvents, newState)];
+  }, ...getExtensionDetailHeaderVirtualDom(name, iconSrc, description, badge, buttons, settingsButtonEnabled), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(detailsVirtualDom, selectedTab, width, scrollToTopButtonEnabled, categories, resources, showAdditionalDetailsBreakpoint, changelogVirtualDom, newState)];
   return dom;
 };
 
@@ -3489,7 +3498,7 @@ const renderEventListeners = () => {
     params: ['handleReadmeContextMenu', 'event.clientX', 'event.clientY', 'event.target.href', 'event.target.src']
   }, {
     name: HandleReadmeScroll,
-    params: ['handleWheel', 'event.deltaX', 'event.deltaY'],
+    params: ['handleScroll', 'event.target.scrollTop'],
     passive: true
   }, {
     name: HandleTabsClick,
@@ -3554,14 +3563,16 @@ const commandMap = {
   'ExtensionDetail.handleClickCategory': wrapCommand(handleClickCategory),
   'ExtensionDetail.handleClickDisable': wrapCommand(handleClickDisable),
   'ExtensionDetail.handleClickScrollToTop': wrapCommand(handleClickScrollToTop),
-  'ExtensionDetail.handleClickSettings': wrapCommand(handleClickSettings),
   'ExtensionDetail.handleClickSetColorTheme': wrapCommand(handleClickSetColorTheme),
+  'ExtensionDetail.handleClickSettings': wrapCommand(handleClickSettings),
   'ExtensionDetail.handleClickSize': wrapCommand(handleClickSize),
   'ExtensionDetail.handleClickUninstall': wrapCommand(handleClickUninstall),
   'ExtensionDetail.handleFeaturesClick': wrapCommand(handleClickFeatures),
   'ExtensionDetail.handleIconError': wrapCommand(handleIconError),
+  'ExtensionDetail.handleScroll': wrapCommand(handleScroll),
   'ExtensionDetail.handleTabsClick': wrapCommand(handleTabsClick),
-  'ExtensionDetail.handleWheel': wrapCommand(handleWheel),
+  'ExtensionDetail.handleWheel': wrapCommand(handleScroll),
+  // deprecated
   'ExtensionDetail.loadContent2': wrapCommand(loadContent2),
   'ExtensionDetail.render2': render2,
   'ExtensionDetail.renderEventListeners': renderEventListeners,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-detail-view",
-  "version": "3.39.0",
+  "version": "3.40.0",
   "description": "Extension Detail View Worker",
   "license": "MIT",
   "author": "Lvce Editor",