@lvce-editor/extension-detail-view 5.3.0 → 5.6.0

package/README.md

@@ -11,10 +11,6 @@ npm ci &&
 npm test
 ```
 
-## Gitpod
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/lvce-editor/extension-detail-view)
-
 ## Credits
 
 The extension detail view is based on VSCode's extension detail view.

package/dist/extensionDetailViewWorkerMain.js

@@ -331,6 +331,8 @@ const ExtensionDetailIconContextMenu$3 = 4091;
 
 const None$2 = 0;
 
+const Web$1 = 1;
+
 const DebugWorker = 55;
 const ExtensionHostWorker = 44;
 const FileSystemWorker$1 = 209;
@@ -358,6 +360,8 @@ const ButtonPrimary = 'ButtonPrimary';
 const Categories = 'Categories';
 const Category = 'Category';
 const Changelog$1 = 'Changelog';
+const MaskIcon = 'MaskIcon';
+const ResourceIcon = 'ResourceIcon';
 const Code$1 = 'Code';
 const DefaultMarkdown = 'DefaultMarkdown';
 const DefinitionListItem = 'DefinitionListItem';
@@ -567,15 +571,21 @@ const getCellCodeVirtualDom = (value, props) => {
   }, text(value)];
 };
 
+const getTitleProps = title => {
+  if (title) {
+    return {
+      title
+    };
+  }
+  return {};
+};
 const getCellLinkVirtualDom = (value, props) => {
   const tdClassName = props?.className ? `${TableCell} ${props.className}` : TableCell;
   return [{
     type: Td,
     className: tdClassName,
     childCount: 1,
-    ...(props?.title ? {
-      title: props.title
-    } : {})
+    ...getTitleProps(props?.title)
   }, {
     type: A,
     className: Link$1,
@@ -3365,13 +3375,9 @@ const {
 
 const create = (uid, uri, x, y, width, height, platform, assetDir) => {
   const state = {
-    wasActivatedByEvent: '',
-    activationTime: 0,
-    importTime: 0,
-    disabled: false,
-    status: 0,
-    uid,
+    activationEntries: [],
     activationEvents: [],
+    activationTime: 0,
     assetDir: assetDir || '',
     badge: '',
     baseUrl: '',
@@ -3380,52 +3386,57 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     categories: [],
     changelogScrollTop: 0,
     changelogVirtualDom: [],
-    extensionUri: '',
     commands: [],
-    hasReadme: false,
     description: '',
     detailsVirtualDom: [],
+    disabled: false,
     displaySize: '',
     downloadCount: 'n/a',
-    installationEntries: [],
     extension: {},
     extensionId: '',
+    extensionUri: '',
     extensionVersion: '',
     features: [],
     featuresVirtualDom: [],
     focus: 0,
     folderSize: 0,
     hasColorTheme: false,
+    hasReadme: false,
     iconSrc: '',
+    importTime: 0,
+    installationEntries: [],
     jsonValidation: [],
+    locationProtocol: '',
+    marketplaceEntries: [],
     name: '',
+    paddingLeft: 0,
+    paddingRight: 0,
     platform,
     programmingLanguages: [],
     rating: 'n/a',
     readmeScrollTop: 0,
+    readmeUrl: '',
     resources: [],
     scrollSource: 0,
     scrollToTopButtonEnabled: false,
-    marketplaceEntries: [],
     selectedFeature: '',
     selectedTab: '',
     settings: [],
     settingsButtonEnabled: false,
     showAdditionalDetailsBreakpoint: 700,
+    showSideBar: true,
+    sideBarWidth: 0,
     sizeOnDisk: 0,
     sizeValue: 0,
+    status: 0,
     tabs: [],
     themesMarkdownDom: [],
+    uid,
     uri,
+    wasActivatedByEvent: '',
     webViews: [],
     width,
-    readmeUrl: '',
-    paddingLeft: 0,
-    paddingRight: 0,
-    showSideBar: true,
-    sideBarWidth: 0,
-    locationProtocol: '',
-    activationEntries: []
+    showSizeLink: false
   };
   set(uid, state, state);
 };
@@ -3439,7 +3450,7 @@ const isEqual$2 = (oldState, newState) => {
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.activationEvents === newState.activationEvents && oldState.badge === newState.badge && oldState.buttons === newState.buttons && oldState.categories === newState.categories && oldState.changelogVirtualDom === newState.changelogVirtualDom && oldState.commands === newState.commands && oldState.description === newState.description && oldState.detailsVirtualDom === newState.detailsVirtualDom && oldState.disabled === newState.disabled && oldState.displaySize === newState.displaySize && oldState.extensionId === newState.extensionId && oldState.extensionVersion === newState.extensionVersion && oldState.features === newState.features && oldState.jsonValidation === newState.jsonValidation && oldState.resources === newState.resources && oldState.selectedFeature === newState.selectedFeature && oldState.selectedTab === newState.selectedTab && oldState.settings === newState.settings && oldState.showSideBar === newState.showSideBar && oldState.sizeValue === newState.sizeValue && oldState.themesMarkdownDom === newState.themesMarkdownDom && oldState.webViews === newState.webViews;
+  return oldState.activationEvents === newState.activationEvents && oldState.badge === newState.badge && oldState.buttons === newState.buttons && oldState.categories === newState.categories && oldState.changelogVirtualDom === newState.changelogVirtualDom && oldState.commands === newState.commands && oldState.description === newState.description && oldState.detailsVirtualDom === newState.detailsVirtualDom && oldState.disabled === newState.disabled && oldState.displaySize === newState.displaySize && oldState.extensionId === newState.extensionId && oldState.extensionVersion === newState.extensionVersion && oldState.features === newState.features && oldState.installationEntries === newState.installationEntries && oldState.jsonValidation === newState.jsonValidation && oldState.resources === newState.resources && oldState.selectedFeature === newState.selectedFeature && oldState.selectedTab === newState.selectedTab && oldState.settings === newState.settings && oldState.showSideBar === newState.showSideBar && oldState.sizeValue === newState.sizeValue && oldState.themesMarkdownDom === newState.themesMarkdownDom && oldState.webViews === newState.webViews;
 };
 
 const User = 1;
@@ -4057,6 +4068,53 @@ const handleTabsClick = (state, name) => {
   return selectTab(state, name);
 };
 
+const getSizeEntries = (showSizeLink, displaySize, extensionUri) => {
+  if (!showSizeLink) {
+    return [];
+  }
+  return [{
+    key: size(),
+    value: displaySize,
+    onClick: HandleClickSize,
+    title: extensionUri
+  }];
+};
+
+const getInstallationEntries = (displaySize, extensionId, extensionVersion, extensionUri, showSizeLink) => {
+  const entries = [{
+    key: identifier(),
+    value: extensionId,
+    odd: true,
+    code: true
+  }, {
+    key: version(),
+    value: extensionVersion,
+    code: true
+  }, {
+    key: lastUpdated(),
+    value: 'n/a',
+    // TODO get this from somewhere
+    odd: true
+  }, ...getSizeEntries(showSizeLink, displaySize, extensionUri)];
+  return entries;
+};
+
+const hideSizeLink = state => {
+  const {
+    displaySize,
+    extensionId,
+    extensionVersion,
+    extensionUri
+  } = state;
+  const newShowSizeLink = false;
+  const installationEntries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri, newShowSizeLink);
+  return {
+    ...state,
+    installationEntries,
+    showSizeLink: newShowSizeLink
+  };
+};
+
 const sendMessagePortToExtensionHostWorker = async port => {
   await sendMessagePortToExtensionHostWorker$1(port, 0);
 };
@@ -4508,30 +4566,6 @@ const getFolderSize = async uri => {
   }
 };
 
-const getInstallationEntries = (displaySize, extensionId, extensionVersion, extensionUri) => {
-  const entries = [{
-    key: identifier(),
-    value: extensionId,
-    odd: true,
-    code: true
-  }, {
-    key: version(),
-    value: extensionVersion,
-    code: true
-  }, {
-    key: lastUpdated(),
-    value: 'n/a',
-    // TODO get this from somewhere
-    odd: true
-  }, {
-    key: size(),
-    value: displaySize,
-    onClick: HandleClickSize,
-    title: extensionUri
-  }];
-  return entries;
-};
-
 const getMarketplaceEntries = isBuiltin => {
   if (isBuiltin) {
     return [];
@@ -4546,47 +4580,73 @@ const getMarketplaceEntries = isBuiltin => {
   }];
 };
 
-const getRepositoryLink = extension => {
+const getLicenseLink = extension => {
+  // TODO
+  return '#';
+};
+
+const getRepositoryLinkRaw = extension => {
   if (extension && hasProperty(extension, 'repository') && typeof extension.repository === 'string') {
     return extension.repository; // TODO watch out for javascript: or other invalid links or path traversal
   }
   return '';
 };
+const ensureValidLink = link => {
+  if (!link) {
+    return '';
+  }
+  const parsed = new URL(link);
+  if (parsed.protocol !== 'https:') {
+    return '';
+  }
+  return link;
+};
+const getRepositoryLink = extension => {
+  const raw = getRepositoryLinkRaw(extension);
+  const validLink = ensureValidLink(raw);
+  return validLink;
+};
+
 const getResources = (isBuiltin, extension) => {
   if (isBuiltin) {
     return [];
   }
   const repositoryLink = getRepositoryLink(extension);
+  const licenseLink = getLicenseLink();
   // TODO
   return [{
     label: marketplace(),
-    url: '#'
+    url: '#',
+    icon: 'LinkExternal'
   }, {
     label: issues(),
-    url: repositoryLink
+    url: '#',
+    icon: 'LinkExternal'
   }, {
     label: repository(),
-    url: '#'
+    url: repositoryLink,
+    icon: 'Repo'
   }, {
     label: license(),
-    url: '#'
+    url: licenseLink,
+    icon: 'LinkExternal'
   }];
 };
 
-const loadSideBarContent = async (extensionId, extensionVersion, extensionUri, isBuiltin, extension) => {
+const loadSideBarContent = async (extensionId, extensionVersion, extensionUri, isBuiltin, extension, showSizeLink) => {
   const folderSize = await getFolderSize(extensionUri);
   const displaySize = getDisplaySize(folderSize);
-  const installationEntries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri);
+  const installationEntries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri, showSizeLink);
   const marketplaceEntries = getMarketplaceEntries(isBuiltin);
   const categories = getCategories(extension);
   const resources = getResources(isBuiltin, extension);
   return {
+    categories,
+    displaySize,
+    folderSize,
     installationEntries,
     marketplaceEntries,
-    displaySize,
-    categories,
-    resources,
-    folderSize
+    resources
   };
 };
 
@@ -4686,6 +4746,7 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
   const tabs = getTabs(selectedTab, hasReadme, hasFeatures, hasChangelog);
   const enabledTabs = tabs.filter(tab => tab.enabled);
   const sizeValue = getViewletSize(width || 0);
+  const showSizeLink = platform !== Web$1;
   const {
     installationEntries,
     marketplaceEntries,
@@ -4693,7 +4754,7 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     categories,
     resources,
     folderSize
-  } = await loadSideBarContent(extensionId, extensionVersion, extensionUri, isBuiltin, extension);
+  } = await loadSideBarContent(extensionId, extensionVersion, extensionUri, isBuiltin, extension, showSizeLink);
   const padding = getPadding(width);
   const sideBarWidth = getSideBarWidth(width);
   const showSideBar = sideBarWidth > 0;
@@ -4719,6 +4780,7 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     hasReadme,
     iconSrc,
     installationEntries,
+    locationProtocol,
     marketplaceEntries,
     name,
     paddingLeft: padding,
@@ -4731,11 +4793,11 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     scrollToTopButtonEnabled: true,
     selectedTab,
     showSideBar,
+    showSizeLink,
     sideBarWidth,
     sizeOnDisk: size,
     sizeValue,
-    tabs: enabledTabs,
-    locationProtocol
+    tabs: enabledTabs
   };
 };
 
@@ -4911,6 +4973,38 @@ const getMoreInfoVirtualDom = items => {
   }, ...items.flatMap(getMoreInfoEntryVirtualDom)];
 };
 
+const getIconDom = icon => {
+  if (!icon) {
+    return [];
+  }
+  return [{
+    type: Div,
+    className: ResourceIcon,
+    childCount: 1
+  }, {
+    type: Div,
+    className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
+    childCount: 0
+  }];
+};
+const getResourceLinkVirtualDom = resource => {
+  const {
+    label,
+    url,
+    icon
+  } = resource;
+  const iconDom = getIconDom(icon);
+  const iconDomCount = iconDom.length > 0 ? 1 : 0;
+  return [{
+    type: A,
+    className: Resource,
+    childCount: 1 + iconDomCount,
+    target: '_blank',
+    rel: 'noopener noreferrer',
+    href: url
+  }, ...iconDom, text(label)];
+};
+
 const resourceNode = {
   // TODO use link with url
   type: Div,
@@ -4923,14 +5017,7 @@ const getResourceVirtualDom = resource => {
     url
   } = resource;
   if (url && url !== '#') {
-    return [{
-      type: A,
-      className: Resource,
-      childCount: 1,
-      target: '_blank',
-      rel: 'noopener noreferrer',
-      href: url
-    }, text(label)];
+    return getResourceLinkVirtualDom(resource);
   }
   return [resourceNode, text(label)];
 };
@@ -5423,6 +5510,7 @@ const commandMap = {
   'ExtensionDetail.handleTabsClick': wrapCommand(handleTabsClick),
   'ExtensionDetail.handleWheel': wrapCommand(handleScroll),
   // deprecated
+  'ExtensionDetail.hideSizeLink': wrapCommand(hideSizeLink),
   'ExtensionDetail.initialize': initialize,
   'ExtensionDetail.loadContent2': wrapCommand(loadContent2),
   'ExtensionDetail.openImageInNewTab': wrapCommand(openImageInNewTab),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-detail-view",
-  "version": "5.3.0",
+  "version": "5.6.0",
   "description": "Extension Detail View Worker",
   "repository": {
     "type": "git",