@lvce-editor/extension-detail-view 3.39.0 → 3.41.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,12 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     showAdditionalDetailsBreakpoint: 600,
     sizeOnDisk: 0,
     sizeValue: 0,
+    tabs: [],
     themesMarkdownDom: [],
     uri,
     webViews: [],
     width,
-    focus: 0
+    readmeUrl: ''
   };
   set$1(uid, state, state);
 };
@@ -2276,8 +2298,7 @@ const {
   set,
   setColorTheme: setColorTheme$1,
   uninstallExtension,
-  sendMessagePortToMarkdownWorker: sendMessagePortToMarkdownWorker$1
-} = RendererWorker;
+  sendMessagePortToMarkdownWorker: sendMessagePortToMarkdownWorker$1} = RendererWorker;
 
 const setColorTheme = id => {
   return setColorTheme$1(id);
@@ -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);
 };
@@ -2379,17 +2409,25 @@ const loadChangelogContent = async path => {
 const selectTabChangelog = async state => {
   const {
     extension,
-    baseUrl
+    baseUrl,
+    tabs
   } = state;
   const changelogContent = await loadChangelogContent(extension.path); // TODO use uri
   const changelogMarkdownHtml = await renderMarkdown(changelogContent, {
     baseUrl
   });
   const changelogDom = await getMarkdownVirtualDom(changelogMarkdownHtml);
+  const newTabs = tabs.map(tab => {
+    return {
+      ...tab,
+      selected: tab.name === Changelog
+    };
+  });
   return {
     ...state,
     selectedTab: Changelog,
-    changelogVirtualDom: changelogDom
+    changelogVirtualDom: changelogDom,
+    tabs: newTabs
   };
 };
 
@@ -2397,9 +2435,8 @@ const selectTabDefault = async state => {
   return state;
 };
 
-const loadReadmeContent = async path => {
+const loadReadmeContent = async readmeUrl => {
   try {
-    const readmeUrl = join(path, 'README.md');
     const readmeContent = await readFile(readmeUrl);
     return readmeContent;
   } catch (error) {
@@ -2415,18 +2452,26 @@ const loadReadmeContent = async path => {
 
 const selectTabDetails = async state => {
   const {
-    extension,
-    baseUrl
+    baseUrl,
+    readmeUrl,
+    tabs
   } = state;
-  const readmeContent = await loadReadmeContent(extension.path);
+  const readmeContent = await loadReadmeContent(readmeUrl);
   const readmeHtml = await renderMarkdown(readmeContent, {
     baseUrl
   });
   const detailsDom = await getMarkdownVirtualDom(readmeHtml);
+  const newTabs = tabs.map(tab => {
+    return {
+      ...tab,
+      selected: tab.name === Details
+    };
+  });
   return {
     ...state,
     selectedTab: Details,
-    detailsVirtualDom: detailsDom
+    detailsVirtualDom: detailsDom,
+    tabs: newTabs
   };
 };
 
@@ -2435,15 +2480,26 @@ const selectTabFeatures = async state => {
     extension,
     baseUrl,
     selectedFeature,
-    features
+    features,
+    tabs
   } = state;
+  if (features.length === 0) {
+    return state;
+  }
   const actualSelectedFeature = selectedFeature || Theme;
   const fn = getFeatureDetailsHandler(actualSelectedFeature);
   const partialNewState = await fn(extension, baseUrl);
+  const newTabs = tabs.map(tab => {
+    return {
+      ...tab,
+      selected: tab.name === Features
+    };
+  });
   return {
     ...state,
     selectedTab: Features,
     selectedFeature: features[0].id || '',
+    tabs: newTabs,
     ...partialNewState
   };
 };
@@ -2470,15 +2526,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);
 };
@@ -2505,6 +2552,11 @@ const initialize = async () => {
   // TODO create connection to file system worker
 };
 
+const existsFile = async uri => {
+  // TODO ask file system worker
+  return true;
+};
+
 const Web = 1;
 const Electron = 2;
 const Remote = 3;
@@ -2560,7 +2612,152 @@ const getBaseUrl = (extensionPath, platform) => {
   }
 };
 
+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 getExtensionIdFromUri = uri => {
+  const id = uri.slice('extension-detail://'.length);
+  return id;
+};
+
+const getTabs = (selectedTab, hasReadme, hasFeatures, hasChangelog) => {
+  const tabs = [{
+    label: details(),
+    name: Details,
+    selected: selectedTab === Details,
+    enabled: hasReadme
+  }, {
+    label: features$1(),
+    name: Features,
+    selected: selectedTab === Features,
+    enabled: hasFeatures
+  }, {
+    label: changelog(),
+    name: Changelog,
+    selected: selectedTab === Changelog,
+    enabled: hasChangelog
+  }];
+  return tabs;
+};
+
+const Small = 1;
+const Normal = 2;
+const Large = 3;
+
+const getViewletSize = width => {
+  if (width < 180) {
+    return Small;
+  }
+  if (width < 768) {
+    return Normal;
+  }
+  return Large;
+};
+
+const isLanguageBasicsExtension = extension => {
+  return extension.name && extension.name.startsWith('Language Basics');
+};
+
+const isThemeExtension = extension => {
+  return extension.name && extension.name.endsWith(' Theme');
+};
+
+const getIcon = (extension, platform, assetDir) => {
+  if (!extension) {
+    return extensionDefaultIcon(assetDir);
+  }
+  if (!extension.path || !extension.icon) {
+    if (isLanguageBasicsExtension(extension)) {
+      return extensionLanguageBasics(assetDir);
+    }
+    if (isThemeExtension(extension)) {
+      return extensionTheme(assetDir);
+    }
+    return extensionDefaultIcon(assetDir);
+  }
+  if (platform === Remote || platform === Electron) {
+    if (extension.builtin) {
+      return `${assetDir}/extensions/${extension.id}/${extension.icon}`;
+    }
+    return `/remote/${extension.path}/${extension.icon}`; // TODO support windows paths
+  }
+  return '';
+};
+
+const getDescription = extension => {
+  if (!extension || !extension.description) {
+    return 'n/a';
+  }
+  return extension.description;
+};
+
+const getName = extension => {
+  if (extension && extension.name) {
+    return extension.name;
+  }
+  if (extension && extension.id) {
+    return extension.id;
+  }
+  return 'n/a';
+};
+
+const getBadge = (builtin, badgeEnabled) => {
+  if (builtin && badgeEnabled) {
+    return 'builtin';
+  }
+  return '';
+};
+
+const hasColorThemes = extension => {
+  return Boolean(extension && extension.colorThemes && extension.colorThemes.length > 0);
+};
+
+const loadHeaderContent = (state, platform, extension) => {
+  const {
+    assetDir,
+    builtinExtensionsBadgeEnabled
+  } = state;
+  const iconSrc = getIcon(extension, platform, assetDir);
+  const description = getDescription(extension);
+  const name = getName(extension);
+  const extensionUri = extension.uri || extension.path;
+  const extensionId = extension?.id || 'n/a';
+  const extensionVersion = extension?.version || 'n/a';
+  const hasColorTheme = hasColorThemes(extension);
+  const isBuiltin = extension?.builtin;
+  const badge = getBadge(isBuiltin, builtinExtensionsBadgeEnabled);
+  return {
+    badge,
+    description,
+    extension,
+    extensionId,
+    extensionUri,
+    extensionVersion,
+    hasColorTheme,
+    iconSrc,
+    name
+  };
+};
+
 const getCategories = () => {
+  // TODO
   return [{
     id: 'themes',
     label: 'Themes'
@@ -2660,24 +2857,6 @@ const getDisplaySize = size => {
   });
 };
 
-const getEntries = () => {
-  return [{
-    key: 'Identifier',
-    value: 'abc'
-  }, {
-    key: 'Version',
-    value: '1.9.5'
-  }, {
-    key: 'Last Updated',
-    value: 'n/a'
-  }];
-};
-
-const getExtensionIdFromUri = uri => {
-  const id = uri.slice('extension-detail://'.length);
-  return id;
-};
-
 const getFolderSize = async uri => {
   if (!uri) {
     throw new VError(`uri is required`);
@@ -2689,128 +2868,77 @@ const getFolderSize = async uri => {
   }
 };
 
-const getResources = () => {
-  return [{
-    label: 'Marketplace',
-    url: '#'
+const getInstallationEntries = (displaySize, extensionId, extensionVersion, extensionUri) => {
+  const entries = [{
+    key: 'Identifier',
+    value: extensionId,
+    odd: true,
+    code: true
   }, {
-    label: 'Issues',
-    url: '#'
+    key: 'Version',
+    value: extensionVersion,
+    code: true
   }, {
-    label: 'Repository',
-    url: '#'
+    key: 'Last Updated',
+    value: 'n/a',
+    odd: true
   }, {
-    label: 'License',
-    url: '#'
+    key: 'Size',
+    value: displaySize,
+    onClick: HandleClickSize,
+    title: extensionUri
   }];
+  return entries;
 };
 
-const getSecondEntries = () => {
+const getMarketplaceEntries = isBuiltin => {
+  if (isBuiltin) {
+    return [];
+  }
   return [{
     key: 'Published',
-    value: 'n/a'
+    value: 'n/a',
+    odd: true
   }, {
     key: 'Last Released',
     value: 'n/a'
   }];
 };
 
-const Small = 1;
-const Normal = 2;
-const Large = 3;
-
-const getViewletSize = width => {
-  if (width < 180) {
-    return Small;
-  }
-  if (width < 768) {
-    return Normal;
-  }
-  return Large;
-};
-
-const isLanguageBasicsExtension = extension => {
-  return extension.name && extension.name.startsWith('Language Basics');
-};
-
-const isThemeExtension = extension => {
-  return extension.name && extension.name.endsWith(' Theme');
-};
-
-const getIcon = (extension, platform, assetDir) => {
-  if (!extension) {
-    return extensionDefaultIcon(assetDir);
-  }
-  if (!extension.path || !extension.icon) {
-    if (isLanguageBasicsExtension(extension)) {
-      return extensionLanguageBasics(assetDir);
-    }
-    if (isThemeExtension(extension)) {
-      return extensionTheme(assetDir);
-    }
-    return extensionDefaultIcon(assetDir);
-  }
-  if (platform === Remote || platform === Electron) {
-    if (extension.builtin) {
-      return `${assetDir}/extensions/${extension.id}/${extension.icon}`;
-    }
-    return `/remote/${extension.path}/${extension.icon}`; // TODO support windows paths
-  }
-  return '';
-};
-
-const getDescription = extension => {
-  if (!extension || !extension.description) {
-    return 'n/a';
-  }
-  return extension.description;
-};
-
-const getName = extension => {
-  if (extension && extension.name) {
-    return extension.name;
-  }
-  if (extension && extension.id) {
-    return extension.id;
-  }
-  return 'n/a';
-};
-
-const getBadge = (builtin, badgeEnabled) => {
-  if (builtin && badgeEnabled) {
-    return 'builtin';
+const getResources = isBuiltin => {
+  if (isBuiltin) {
+    return [];
   }
-  return '';
-};
-
-const hasColorThemes = extension => {
-  return Boolean(extension && extension.colorThemes && extension.colorThemes.length > 0);
+  // TODO
+  return [{
+    label: 'Marketplace',
+    url: '#'
+  }, {
+    label: 'Issues',
+    url: '#'
+  }, {
+    label: 'Repository',
+    url: '#'
+  }, {
+    label: 'License',
+    url: '#'
+  }];
 };
 
-const loadHeaderContent = (state, platform, extension) => {
-  const {
-    assetDir,
-    builtinExtensionsBadgeEnabled
-  } = state;
-  const iconSrc = getIcon(extension, platform, assetDir);
-  const description = getDescription(extension);
-  const name = getName(extension);
-  const extensionUri = extension.uri || extension.path;
-  const extensionId = extension?.id || 'n/a';
-  const extensionVersion = extension?.version || 'n/a';
-  const hasColorTheme = hasColorThemes(extension);
-  const isBuiltin = extension?.builtin;
-  const badge = getBadge(isBuiltin, builtinExtensionsBadgeEnabled);
+const loadSideBarContent = async (extensionId, extensionVersion, extensionUri, isBuiltin) => {
+  const folderSize = await getFolderSize(extensionUri);
+  const displaySize = getDisplaySize(folderSize);
+  const installationEntries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri);
+  const marketplaceEntries = getMarketplaceEntries(isBuiltin);
+  const categories = getCategories();
+  const resources = getResources(isBuiltin);
   return {
-    badge,
-    description,
-    extension,
-    extensionId,
-    extensionUri,
-    extensionVersion,
-    hasColorTheme,
-    iconSrc,
-    name
+    installationEntries,
+    marketplaceEntries,
+    displaySize,
+    categories,
+    resources,
+    folderSize
   };
 };
 
@@ -2876,7 +3004,11 @@ const loadContent = async (state, platform, savedState) => {
     iconSrc,
     name
   } = headerData;
-  const readmeContent = await loadReadmeContent(extension.path);
+  const readmeUrl = join(extension.path, 'README.md');
+  join(extension.path, 'CHANGELOG.md');
+  const hasReadme = await existsFile();
+  const hasChangelog = await existsFile();
+  const readmeContent = await loadReadmeContent(readmeUrl);
   const baseUrl = getBaseUrl(extension.path, platform);
   const readmeHtml = await renderMarkdown(readmeContent, {
     baseUrl
@@ -2884,30 +3016,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 folderSize = await getFolderSize(extensionUri);
-  const displaySize = getDisplaySize(size);
-  const entries = getEntries();
-  const secondEntries = getSecondEntries();
-  const categories = getCategories();
-  const resources = getResources();
+  const hasFeatures = features.length > 0;
+  const tabs = getTabs(selectedTab, hasReadme, hasFeatures, hasChangelog);
+  const enabledTabs = tabs.filter(tab => tab.enabled);
   const sizeValue = getViewletSize(width || 0);
-  const isBuiltin = extension?.builtin;
+  const {
+    installationEntries,
+    marketplaceEntries,
+    displaySize,
+    categories,
+    resources,
+    folderSize
+  } = await loadSideBarContent(extensionId, extensionVersion, extensionUri, isBuiltin);
   return {
     ...state,
     badge,
     baseUrl,
+    buttons: enabledButtons,
     categories,
+    changelogScrollTop,
     description,
     detailsVirtualDom,
     displaySize,
-    entries,
+    entries: installationEntries,
     extension,
     extensionId,
     extensionVersion,
@@ -2915,15 +3057,17 @@ const loadContent = async (state, platform, savedState) => {
     folderSize,
     hasColorTheme,
     iconSrc,
-    isBuiltin,
     name,
     readmeScrollTop,
+    readmeUrl,
     resources,
+    scrollSource: Script,
     scrollToTopButtonEnabled: true,
-    secondEntries,
+    secondEntries: marketplaceEntries,
     selectedTab,
     sizeOnDisk: size,
-    sizeValue
+    sizeValue,
+    tabs: enabledTabs
   };
 };
 
@@ -2931,26 +3075,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 +3232,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 +3239,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 +3251,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 +3303,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 +3408,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 +3464,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 +3548,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 +3613,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.41.0",
   "description": "Extension Detail View Worker",
   "license": "MIT",
   "author": "Lvce Editor",