@lvce-editor/extension-detail-view 3.28.0 → 3.30.0

package/dist/extensionDetailViewWorkerMain.js

@@ -964,7 +964,10 @@ const create$1 = (uid, uri, x, y, width, height, platform, assetDir) => {
     folderSize: 0,
     assetDir: assetDir || '',
     platform,
-    settingsButtonEnabled: false
+    readmeScrollTop: 0,
+    settingsButtonEnabled: false,
+    builtinExtensionsBadgeEnabled: true,
+    scrollToTopButtonEnabled: false
   };
   set$1(uid, state, state);
 };
@@ -1004,7 +1007,7 @@ const dispose = uid => {
   dispose$1(uid);
 };
 
-const commandIds = ['getMenuEntries', 'handleClickDisable', 'handleClickSettings', 'handleClickSetColorTheme', 'handleClickSize', 'handleClickUninstall', 'handleFeaturesClick', 'handleIconError', 'handleTabsClick', 'renderEventListeners', 'resize', 'saveState', 'selectTab', 'terminate'];
+const commandIds = ['getMenuEntries', 'handleClickDisable', 'handleClickScrollToTop', 'handleClickSettings', 'handleClickSetColorTheme', 'handleClickSize', 'handleClickUninstall', 'handleFeaturesClick', 'handleIconError', 'handleTabsClick', 'handleWheel', 'renderEventListeners', 'resize', 'saveState', 'selectTab', 'terminate'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -1217,6 +1220,13 @@ const handleClickFeatures = async (state, name) => {
   return selectFeature(state, name);
 };
 
+const handleClickScrollToTop = state => {
+  return {
+    ...state,
+    readmeScrollTop: 0
+  };
+};
+
 const rpcs = Object.create(null);
 const set$g = (id, rpc) => {
   rpcs[id] = rpc;
@@ -1481,6 +1491,14 @@ 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
+  };
+};
+
 const initialize = async () => {
   // TODO create connection to file system worker
   // TODO create direct connection to markdown worker
@@ -1855,10 +1873,10 @@ const AdditionalDetailsTitle = 'AdditionalDetailsTitle';
 const Aside = 'Aside';
 const Button = 'Button';
 const ButtonPrimary = 'ButtonPrimary';
-const DefaultMarkdown = 'DefaultMarkdown';
 const Categories = 'Categories';
 const Category = 'Category';
 const Changelog = 'Changelog';
+const DefaultMarkdown = 'DefaultMarkdown';
 const DefinitionListItem = 'DefinitionListItem';
 const DefinitionListItemHeading = 'DefinitionListItemHeading';
 const DefinitionListItemValue = 'DefinitionListItemValue';
@@ -1869,9 +1887,8 @@ const ExtensionDetailHeaderActions = 'ExtensionDetailHeaderActions';
 const ExtensionDetailHeaderDetails = 'ExtensionDetailHeaderDetails';
 const ExtensionDetailIcon = 'ExtensionDetailIcon';
 const ExtensionDetailName = 'ExtensionDetailName';
+const ExtensionDetailNameBadge = 'ExtensionDetailNameBadge';
 const ExtensionDetailPanel = 'ExtensionDetailPanel';
-const SettingsButton = 'SettingsButton';
-const SettingsIcon = 'SettingsIcon';
 const ExtensionDetailTab = 'ExtensionDetailTab';
 const ExtensionDetailTabs = 'ExtensionDetailTabs';
 const ExtensionDetailTabSelected = 'ExtensionDetailTabSelected';
@@ -1881,8 +1898,6 @@ const Features = 'Features';
 const FeaturesList = 'FeaturesList';
 const FeatureWebView = 'FeatureWebView';
 const Large = 'Large';
-const Sash = 'Sash';
-const SashVertical = 'SashVertical';
 const MoreInfo = 'MoreInfo';
 const MoreInfoEntry = 'MoreInfoEntry';
 const MoreInfoEntryKey = 'MoreInfoEntryKey';
@@ -1891,12 +1906,24 @@ const MoreInfoEntryValue = 'MoreInfoEntryValue';
 const Normal = 'Normal';
 const Resource = 'Resource';
 const Resources = 'Resources';
+const Sash = 'Sash';
+const SashVertical = 'SashVertical';
+const ScrollToTopButton = 'ScrollToTopButton';
+const SettingsButton = 'SettingsButton';
+const SettingsIcon = 'SettingsIcon';
 const Small = 'Small';
 const Table = 'Table';
 const TableCell = 'TableCell';
 const TableHeading = 'TableHeading';
 const Viewlet = 'Viewlet';
 
+const getBadge = (extension, state) => {
+  if (extension?.builtin && state.builtinExtensionsBadgeEnabled) {
+    return 'builtin';
+  }
+  return '';
+};
+
 const BYTE_UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 const BIBYTE_UNITS = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
 const BIT_UNITS = ['b', 'kbit', 'Mbit', 'Gbit', 'Tbit', 'Pbit', 'Ebit', 'Zbit', 'Ybit'];
@@ -1991,6 +2018,7 @@ const getDisplaySize = size => {
 };
 
 const HandleClickDisable = 'handleClickDisable';
+const HandleClickScrollToTop = 'handleClickScrollToTop';
 const HandleClickSetColorTheme = 'handleClickSetColorTheme';
 const HandleClickSettings = 'handleClickSettings';
 const HandleClickSize = 'handleClickSize';
@@ -1998,6 +2026,7 @@ const HandleClickUninstall = 'handleClickUninstall';
 const HandleFeaturesClick = 'handleFeaturesClick';
 const HandleIconError = 'handleIconError';
 const HandleReadmeContextMenu = 'handleReadmeContextMenu';
+const HandleReadmeWheel = 'handleReadmeWheel';
 const HandleTabsClick = 'handleTabsClick';
 
 const hasColorThemes = extension => {
@@ -2101,7 +2130,8 @@ const getMoreInfoEntryValueVirtualDom = item => {
   const {
     value,
     onClick,
-    code
+    code,
+    title
   } = item;
   const type = getTag(onClick, code);
   const className = getClassName(onClick, code);
@@ -2109,7 +2139,8 @@ const getMoreInfoEntryValueVirtualDom = item => {
     type: type,
     className,
     childCount: 1,
-    onClick
+    onClick,
+    title
   }, text(value)];
 };
 
@@ -2176,7 +2207,7 @@ 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) => {
+const getInstallationEntries = (displaySize, extensionId, extensionVersion, extensionUri) => {
   const entries = [{
     key: 'Identifier',
     value: extensionId,
@@ -2193,7 +2224,8 @@ const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
   }, {
     key: 'Size',
     value: displaySize,
-    onClick: HandleClickSize
+    onClick: HandleClickSize,
+    title: extensionUri
   }];
   return entries;
 };
@@ -2215,9 +2247,21 @@ const getMarketplaceEntries = () => {
   }];
 };
 
-const getDetailsVirtualDom = async (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width) => {
+const getScrollToTopVirtualDom = scrollToTopButtonEnabled => {
+  if (!scrollToTopButtonEnabled) {
+    return [];
+  }
+  return [{
+    type: VirtualDomElements.Button,
+    className: ScrollToTopButton,
+    childCount: 0,
+    onClick: HandleClickScrollToTop
+  }];
+};
+
+const getDetailsVirtualDom = async (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width, extensionUri, scrollToTopButtonEnabled) => {
   const firstHeading = installation();
-  const entries = getInstallationEntries(displaySize, extensionId, extensionVersion);
+  const entries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri);
   const secondHeading = marketplace();
   const secondEntries = getMarketplaceEntries();
   const thirdHeading = categories();
@@ -2232,7 +2276,7 @@ const getDetailsVirtualDom = async (sanitizedReadmeHtml, displaySize, extensionI
     className: ExtensionDetailPanel,
     childCount: childCount,
     role: Panel
-  }, ...(await getMarkdownVirtualDom(sanitizedReadmeHtml)), ...getAdditionalDetailsVirtualDom(showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories$1, fourthHeading, resources$1)];
+  }, ...getScrollToTopVirtualDom(scrollToTopButtonEnabled), ...(await getMarkdownVirtualDom(sanitizedReadmeHtml)), ...getAdditionalDetailsVirtualDom(showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories$1, fourthHeading, resources$1)];
   return dom;
 };
 
@@ -2609,10 +2653,10 @@ const getFeaturesVirtualDom = async (features, themesHtml, selectedFeature, exte
   }, ...(await getFeatureContentVirtualDom(features, themesHtml, selectedFeature, extension))];
 };
 
-const getExtensionDetailContentVirtualDom = async (sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width) => {
+const getExtensionDetailContentVirtualDom = async (sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width, scrollToTopButtonEnabled) => {
   switch (selectedTab) {
     case Details:
-      return await getDetailsVirtualDom(sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width);
+      return await getDetailsVirtualDom(sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width, extension.uri || extension.path || '', scrollToTopButtonEnabled);
     case Features$1:
       return await getFeaturesVirtualDom(features, themesHtml, selectedFeature, extension);
     case Changelog$1:
@@ -2670,9 +2714,14 @@ const getExtensionDetailHeaderActionsVirtualDom = (buttonDefs, settingsButtonEna
 };
 
 const getNameBadgeVirtualDom = badge => {
-  {
+  if (!badge) {
     return [];
   }
+  return [{
+    type: VirtualDomElements.Span,
+    className: ExtensionDetailNameBadge,
+    childCount: 1
+  }, text(badge)];
 };
 
 const getExtensionDetailNameVirtualDom = (name, badge) => {
@@ -2680,7 +2729,7 @@ const getExtensionDetailNameVirtualDom = (name, badge) => {
     type: VirtualDomElements.Div,
     className: ExtensionDetailName,
     childCount: badge ? 2 : 1
-  }, text(name), ...getNameBadgeVirtualDom()];
+  }, text(name), ...getNameBadgeVirtualDom(badge)];
 };
 
 const getExtensionDetailHeaderVirtualDom = (name, iconSrc, description, badge, buttonDefs, settingsButtonEnabled) => {
@@ -2789,7 +2838,7 @@ const getExtensionDetailVirtualDom = async (newState, sanitizedReadmeHtml, selec
     iconSrc,
     description
   } = newState;
-  const badge = '';
+  const badge = getBadge(extension, newState);
   const {
     settingsButtonEnabled
   } = newState;
@@ -2797,7 +2846,7 @@ const getExtensionDetailVirtualDom = async (newState, sanitizedReadmeHtml, selec
     type: VirtualDomElements.Div,
     className: mergeClassNames(Viewlet, ExtensionDetail, sizeClass),
     childCount: 3
-  }, ...getExtensionDetailHeaderVirtualDom(name, iconSrc, description, badge, buttonDefs, settingsButtonEnabled), ...getTabsVirtualDom(tabs), ...(await getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width))];
+  }, ...getExtensionDetailHeaderVirtualDom(name, iconSrc, description, badge, buttonDefs, settingsButtonEnabled), ...getTabsVirtualDom(tabs), ...(await getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width, newState.scrollToTopButtonEnabled))];
   return dom;
 };
 
@@ -2847,6 +2896,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleReadmeContextMenu,
     params: ['handleReadmeContextMenu', 'event.clientX', 'event.clientY', 'event.target.href', 'event.target.src']
+  }, {
+    name: HandleReadmeWheel,
+    params: ['handleWheel', 'event.deltaX', 'event.deltaY']
   }, {
     name: HandleTabsClick,
     params: ['handleTabsClick', 'event.target.name']
@@ -2859,6 +2911,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickDisable,
     params: ['handleClickDisable']
+  }, {
+    name: HandleClickScrollToTop,
+    params: ['handleClickScrollToTop']
   }, {
     name: HandleClickSettings,
     params: ['handleClickSettings']
@@ -2899,6 +2954,7 @@ const commandMap = {
   'ExtensionDetail.getCommandIds': getCommandIds,
   'ExtensionDetail.getMenuEntries': getMenuEntries,
   'ExtensionDetail.handleClickDisable': wrapCommand(handleClickDisable),
+  'ExtensionDetail.handleClickScrollToTop': wrapCommand(handleClickScrollToTop),
   'ExtensionDetail.handleClickSettings': wrapCommand(handleClickSettings),
   'ExtensionDetail.handleClickSetColorTheme': wrapCommand(handleClickSetColorTheme),
   'ExtensionDetail.handleClickSize': wrapCommand(handleClickSize),
@@ -2906,6 +2962,7 @@ const commandMap = {
   'ExtensionDetail.handleFeaturesClick': wrapCommand(handleClickFeatures),
   'ExtensionDetail.handleIconError': wrapCommand(handleIconError),
   'ExtensionDetail.handleTabsClick': wrapCommand(handleTabsClick),
+  'ExtensionDetail.handleWheel': wrapCommand(handleWheel),
   '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.28.0",
+  "version": "3.30.0",
   "description": "Extension Detail View Worker",
   "license": "MIT",
   "author": "Lvce Editor",