@lvce-editor/extension-detail-view 7.9.0 → 7.11.0

package/dist/extensionDetailViewWorkerMain.js

@@ -20,6 +20,7 @@ const Copy = 'Copy';
 const CopyImage = 'Copy Image';
 const CopyImageUrl = 'Copy Image Url';
 const CopyLink = 'Copy Link';
+const Created = 'Created';
 const Details$1 = 'Details';
 const Disable$1 = 'Disable';
 const Elements = 'Elements';
@@ -214,6 +215,9 @@ const identifier = () => {
 const version = () => {
   return i18nString(Version);
 };
+const created = () => {
+  return i18nString(Created);
+};
 const lastUpdated = () => {
   return i18nString(LastUpdated);
 };
@@ -2492,6 +2496,9 @@ const enable2 = (id, platform) => {
 const disable2 = (id, platform) => {
   return invoke$4(`Extensions.disable2`, id, platform);
 };
+const getLanguages = (platform, assetDir) => {
+  return invoke$4('Extensions.getLanguages', platform, assetDir);
+};
 
 const {
   invoke: invoke$3,
@@ -3417,6 +3424,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     changelogVirtualDom: [],
     commands: [],
     commit: '',
+    created: null,
     currentColorThemeId: '',
     description: '',
     detailsVirtualDom: [],
@@ -3439,6 +3447,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     initial: true,
     installationEntries: [],
     jsonValidation: [],
+    languages: [],
     lastUpdated: null,
     linkProtectionEnabled: false,
     locationHost: '',
@@ -4029,6 +4038,13 @@ const getExtensionIdFromUri = uri => {
   return id;
 };
 
+const getExtensionUri = (uri, platform, origin) => {
+  if (platform !== Web || !uri) {
+    return uri;
+  }
+  return new URL(uri, origin).href;
+};
+
 const getLinkProtectionEnabled = async () => {
   try {
     const setting = await getPreference('application.linkProtectionEnabled');
@@ -4070,6 +4086,42 @@ const getSideBarWidth = width => {
   return Math.max(175 + Math.round(20 * (width / 100)), Math.round(width / 4));
 };
 
+const getStringArray = value => {
+  if (!Array.isArray(value)) {
+    return undefined;
+  }
+  return value.filter(item => typeof item === 'string');
+};
+const toSyntaxLanguage = value => {
+  if (!value || typeof value !== 'object') {
+    return undefined;
+  }
+  const language = value;
+  if (typeof language.id !== 'string' || typeof language.tokenize !== 'string') {
+    return undefined;
+  }
+  return {
+    aliases: getStringArray(language.aliases),
+    extensions: getStringArray(language.extensions),
+    id: language.id,
+    tokenize: language.tokenize
+  };
+};
+const getSyntaxLanguages = async (platform, assetDir) => {
+  try {
+    const languages = await getLanguages(platform, assetDir);
+    if (!Array.isArray(languages)) {
+      return [];
+    }
+    return languages.flatMap(language => {
+      const syntaxLanguage = toSyntaxLanguage(language);
+      return syntaxLanguage ? [syntaxLanguage] : [];
+    });
+  } catch {
+    return [];
+  }
+};
+
 const getTabs = (selectedTab, hasReadme, hasFeatures, hasChangelog) => {
   const tabs = [{
     enabled: hasReadme,
@@ -4141,6 +4193,9 @@ const getIcon = (extension, platform, assetDir) => {
     }
     return `/remote/${extension.path}/${extension.icon}`; // TODO support windows paths
   }
+  if (platform === Web) {
+    return `${extension.path}/${extension.icon}`;
+  }
   return '';
 };
 
@@ -4419,6 +4474,39 @@ const getFolderSize = async uri => {
   }
 };
 
+const minute = 60 * 1000;
+const hour = 60 * minute;
+const day = 24 * hour;
+const month = 30 * day;
+const year = 365 * day;
+const relativeTimeFormat = new Intl.RelativeTimeFormat(undefined, {
+  numeric: 'always'
+});
+const getRelativeValue = diff => {
+  const absoluteDiff = Math.abs(diff);
+  if (absoluteDiff >= year) {
+    return [Math.trunc(diff / year), 'year'];
+  }
+  if (absoluteDiff >= month) {
+    return [Math.trunc(diff / month), 'month'];
+  }
+  if (absoluteDiff >= day) {
+    return [Math.trunc(diff / day), 'day'];
+  }
+  if (absoluteDiff >= hour) {
+    return [Math.trunc(diff / hour), 'hour'];
+  }
+  return [Math.trunc(diff / minute), 'minute'];
+};
+const formatCreated = (created, now = Date.now()) => {
+  if (created === null || !Number.isFinite(created)) {
+    return 'n/a';
+  }
+  const diff = created - now;
+  const [value, unit] = getRelativeValue(diff);
+  return relativeTimeFormat.format(value, unit);
+};
+
 const formatLastUpdated = lastUpdated => {
   if (lastUpdated === null) {
     return 'n/a';
@@ -4450,22 +4538,38 @@ const getSizeEntries = (showSizeLink, displaySize, extensionUri) => {
   }];
 };
 
-const getInstallationEntries = (displaySize, extensionId, extensionVersion, extensionUri, showSizeLink, lastUpdated$1) => {
+const addOddEntries = entries => {
+  return entries.map((entry, index) => {
+    if (index % 2 === 0) {
+      return {
+        ...entry,
+        odd: true
+      };
+    }
+    return entry;
+  });
+};
+const getInstallationEntries = (displaySize, extensionId, extensionVersion, extensionUri, showSizeLink, created$1, lastUpdated$1) => {
   const entries = [{
     code: true,
     key: identifier(),
-    odd: true,
     value: extensionId
   }, {
     code: true,
     key: version(),
     value: extensionVersion
-  }, {
+  }];
+  if (created$1 !== null) {
+    entries.push({
+      key: created(),
+      value: formatCreated(created$1)
+    });
+  }
+  entries.push({
     key: lastUpdated(),
-    odd: true,
     value: formatLastUpdated(lastUpdated$1)
-  }, ...getSizeEntries(showSizeLink, displaySize, extensionUri)];
-  return entries;
+  }, ...getSizeEntries(showSizeLink, displaySize, extensionUri));
+  return addOddEntries(entries);
 };
 
 const getMarketplaceEntries = isBuiltin => {
@@ -4566,10 +4670,10 @@ const getResources = (isBuiltin, extension) => {
   return rawResources.filter(resource => resource.enabled);
 };
 
-const loadSideBarContent = async (extensionId, extensionVersion, extensionUri, isBuiltin, extension, showSizeLink, lastUpdated) => {
+const loadSideBarContent = async (extensionId, extensionVersion, extensionUri, isBuiltin, extension, showSizeLink, created, lastUpdated) => {
   const folderSize = await getFolderSize(extensionUri);
   const displaySize = getDisplaySize(folderSize);
-  const installationEntries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri, showSizeLink, lastUpdated);
+  const installationEntries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri, showSizeLink, created, lastUpdated);
   const marketplaceEntries = getMarketplaceEntries(isBuiltin);
   const categories = getCategories(extension);
   const resources = getResources(isBuiltin, extension);
@@ -4583,6 +4687,23 @@ const loadSideBarContent = async (extensionId, extensionVersion, extensionUri, i
   };
 };
 
+const parseCreated = extension => {
+  if (!extension || typeof extension !== 'object') {
+    return null;
+  }
+  const {
+    created
+  } = extension;
+  if (typeof created !== 'string' || created === '') {
+    return null;
+  }
+  const timestamp = Date.parse(created);
+  if (!Number.isFinite(timestamp)) {
+    return null;
+  }
+  return timestamp;
+};
+
 const parseLastUpdated = extension => {
   if (!extension || typeof extension !== 'object') {
     return null;
@@ -4671,19 +4792,21 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
   }
   const currentColorThemeId = await getCurrentColorTheme();
   const commit = await getCommit();
+  const languages = await getSyntaxLanguages(platform, state.assetDir);
   const headerData = loadHeaderContent(state, platform, extension);
   const {
     badge,
     description,
     downloadCount,
     extensionId,
-    extensionUri,
+    extensionUri: unresolvedExtensionUri,
     extensionVersion,
     hasColorTheme,
     iconSrc,
     name,
     rating
   } = headerData;
+  const extensionUri = getExtensionUri(unresolvedExtensionUri, platform, location.origin);
   const readmeUrl = join(extensionUri, 'README.md');
   const changelogUrl = join(extensionUri, 'CHANGELOG.md');
   const [hasReadme, hasChangelog] = await Promise.all([existsFile(readmeUrl), existsFile(changelogUrl)]);
@@ -4695,13 +4818,14 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
   const readmeHtml = await renderMarkdown(readmeContent, {
     baseUrl,
     commit,
+    languages,
     linksExternal: true,
     locationProtocol
   });
   const detailsVirtualDom = await getMarkdownVirtualDom(readmeHtml, {
     scrollToTopEnabled: true
   });
-  const isBuiltin = extension?.isBuiltin;
+  const isBuiltin = extension?.isBuiltin || extension?.builtin || false;
   const disabled = extension?.disabled;
   const extensionColorThemeId = getColorThemeId(extension) || '';
   const extensionColorThemeLabel = getColorThemeLabel(extension) || '';
@@ -4719,6 +4843,7 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
   const enabledTabs = tabs.filter(isEnabled);
   const sizeValue = getViewletSize(width || 0);
   const showSizeLink = platform !== Web$1;
+  const created = parseCreated(extension);
   const lastUpdated = parseLastUpdated(extension);
   const {
     categories,
@@ -4727,7 +4852,7 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     installationEntries,
     marketplaceEntries,
     resources
-  } = await loadSideBarContent(extensionId, extensionVersion, extensionUri, isBuiltin, extension, showSizeLink, lastUpdated);
+  } = await loadSideBarContent(extensionId, extensionVersion, extensionUri, isBuiltin, extension, showSizeLink, created, lastUpdated);
   const padding = getPadding(width);
   const sideBarWidth = getSideBarWidth(width);
   const showSideBar = sideBarWidth > 0;
@@ -4740,6 +4865,7 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     categories,
     changelogScrollTop,
     commit,
+    created,
     currentColorThemeId,
     description,
     detailsVirtualDom,
@@ -4757,6 +4883,7 @@ const loadContent = async (state, platform, savedState, isTest = false) => {
     iconSrc,
     initial: false,
     installationEntries,
+    languages,
     lastUpdated,
     linkProtectionEnabled,
     locationHost,
@@ -4979,13 +5106,15 @@ const loadChangelogContent = async path => {
 const selectTabChangelog = async state => {
   const {
     baseUrl,
-    extension,
+    extensionUri,
+    languages,
     locationProtocol,
     tabs
   } = state;
-  const changelogContent = await loadChangelogContent(extension.path); // TODO use uri
+  const changelogContent = await loadChangelogContent(extensionUri);
   const changelogMarkdownHtml = await renderMarkdown(changelogContent, {
     baseUrl,
+    languages,
     locationProtocol
   });
   const changelogDom = await getMarkdownVirtualDom(changelogMarkdownHtml);
@@ -5010,6 +5139,7 @@ const selectTabDefault = async state => {
 const selectTabDetails = async state => {
   const {
     baseUrl,
+    languages,
     locationProtocol,
     readmeUrl,
     tabs
@@ -5017,6 +5147,7 @@ const selectTabDetails = async state => {
   const readmeContent = await loadReadmeContent(readmeUrl);
   const readmeHtml = await renderMarkdown(readmeContent, {
     baseUrl,
+    languages,
     linksExternal: true,
     locationProtocol
   });
@@ -5102,6 +5233,7 @@ const handleTabsClick = (state, name) => {
 
 const hideSizeLink = state => {
   const {
+    created,
     displaySize,
     extensionId,
     extensionUri,
@@ -5109,7 +5241,7 @@ const hideSizeLink = state => {
     lastUpdated
   } = state;
   const newShowSizeLink = false;
-  const installationEntries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri, newShowSizeLink, lastUpdated);
+  const installationEntries = getInstallationEntries(displaySize, extensionId, extensionVersion, extensionUri, newShowSizeLink, created, lastUpdated);
   return {
     ...state,
     installationEntries,
@@ -5338,7 +5470,7 @@ const getExtraProps = (title, onClick) => {
     props.title = title;
   }
   if (onClick) {
-    props.style = 'cursor: pointer';
+    props.style = 'color: var(--vscode-textLink-foreground, #3794ff); cursor: pointer; text-decoration: none';
     props.tabIndex = 0;
   }
   return props;

package/package.json

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