@lvce-editor/extension-detail-view 3.5.0 → 3.7.0

package/dist/extensionDetailViewWorkerMain.js

@@ -919,6 +919,78 @@ const Resource = 'Resource';
 const Resources = 'Resources';
 const Viewlet = 'Viewlet';
 
+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'];
+const BIBIT_UNITS = ['b', 'kibit', 'Mibit', 'Gibit', 'Tibit', 'Pibit', 'Eibit', 'Zibit', 'Yibit'];
+
+/*
+Formats the given number using `Number#toLocaleString`.
+- If locale is a string, the value is expected to be a locale-key (for example: `de`).
+- If locale is true, the system default locale is used for translation.
+- If no value for locale is specified, the number is returned unmodified.
+*/
+const toLocaleString = (number, locale, options) => {
+  let result = number;
+  if (typeof locale === 'string' || Array.isArray(locale)) {
+    result = number.toLocaleString(locale, options);
+  } else if (locale === true || options !== undefined) {
+    result = number.toLocaleString(undefined, options);
+  }
+  return result;
+};
+function prettyBytes(number, options) {
+  if (!Number.isFinite(number)) {
+    throw new TypeError(`Expected a finite number, got ${typeof number}: ${number}`);
+  }
+  options = {
+    bits: false,
+    binary: false,
+    space: true,
+    ...options
+  };
+  const UNITS = options.bits ? options.binary ? BIBIT_UNITS : BIT_UNITS : options.binary ? BIBYTE_UNITS : BYTE_UNITS;
+  const separator = options.space ? ' ' : '';
+  if (options.signed && number === 0) {
+    return ` 0${separator}${UNITS[0]}`;
+  }
+  const isNegative = number < 0;
+  const prefix = isNegative ? '-' : options.signed ? '+' : '';
+  if (isNegative) {
+    number = -number;
+  }
+  let localeOptions;
+  if (options.minimumFractionDigits !== undefined) {
+    localeOptions = {
+      minimumFractionDigits: options.minimumFractionDigits
+    };
+  }
+  if (options.maximumFractionDigits !== undefined) {
+    localeOptions = {
+      maximumFractionDigits: options.maximumFractionDigits,
+      ...localeOptions
+    };
+  }
+  if (number < 1) {
+    const numberString = toLocaleString(number, options.locale, localeOptions);
+    return prefix + numberString + separator + UNITS[0];
+  }
+  const exponent = Math.min(Math.floor(options.binary ? Math.log(number) / Math.log(1024) : Math.log10(number) / 3), UNITS.length - 1);
+  number /= (options.binary ? 1024 : 1000) ** exponent;
+  if (!localeOptions) {
+    number = number.toPrecision(3);
+  }
+  const numberString = toLocaleString(Number(number), options.locale, localeOptions);
+  const unit = UNITS[exponent];
+  return prefix + numberString + separator + unit;
+}
+
+const getDisplaySize = size => {
+  return prettyBytes(size, {
+    maximumFractionDigits: 1
+  });
+};
+
 const Button = 1;
 const Div$1 = 4;
 const H1$1 = 5;
@@ -975,9 +1047,10 @@ const TabList = 'tablist';
 const Tab = 'tab';
 const Panel = 'panel';
 
+const HandleClickSize = 'handleClickSize';
+const HandleFeaturesClick = 'handleFeaturesClick';
 const HandleReadmeContextMenu = 'handleReadmeContextMenu';
 const HandleTabsClick = 'handleTabsClick';
-const HandleFeaturesClick = 'handleFeaturesClick';
 
 const getAdditionalDetailsEntryVirtualDom = (heading, items, renderer) => {
   return [{
@@ -1010,26 +1083,70 @@ const getCategoriesDom = categories => {
   }, ...categories.flatMap(getCategoryVirtualDom)];
 };
 
-const getMoreInfoEntryVirtualDom = item => {
+const getMoreInfoEntryKeyVirtualDom = item => {
   const {
-    key,
-    value
+    key
   } = item;
   return [{
-    type: Div$1,
-    className: MoreInfoEntry,
-    childCount: 2
-  }, {
     type: Div$1,
     className: MoreInfoEntryKey,
     childCount: 1
-  }, text(key), {
-    type: Div$1,
-    className: MoreInfoEntryValue,
-    childCount: 1
+  }, text(key)];
+};
+
+const getTag = (onClick, code) => {
+  if (onClick) {
+    return A$1;
+  }
+  if (code) {
+    // TODO use code tag
+    return Div$1;
+  }
+  return Div$1;
+};
+const getClassName = (onClick, code) => {
+  if (onClick) {
+    return MoreInfoEntryValue + ' Link';
+  }
+  if (code) {
+    return MoreInfoEntryValue + ' Code';
+  }
+  return MoreInfoEntryValue;
+};
+const getMoreInfoEntryValueVirtualDom = item => {
+  const {
+    value,
+    onClick,
+    code
+  } = item;
+  const type = getTag(onClick, code);
+  const className = getClassName(onClick, code);
+  return [{
+    type: type,
+    className,
+    childCount: 1,
+    onClick
   }, text(value)];
 };
 
+const parentNodeEven = {
+  type: Div$1,
+  className: MoreInfoEntry,
+  childCount: 2
+};
+const parentNodeOdd = {
+  type: Div$1,
+  className: MoreInfoEntry + ' ' + 'MoreInfoEntryOdd',
+  childCount: 2
+};
+const getMoreInfoEntryVirtualDom = item => {
+  const {
+    odd
+  } = item;
+  const node = odd ? parentNodeOdd : parentNodeEven;
+  return [node, ...getMoreInfoEntryKeyVirtualDom(item), ...getMoreInfoEntryValueVirtualDom(item)];
+};
+
 const getMoreInfoVirtualDom = items => {
   return [{
     type: Div$1,
@@ -1062,10 +1179,33 @@ const getAdditionalDetailsVirtualDom = (firstHeading, entries, secondHeading, se
   return [{
     type: Div$1,
     className: AdditionalDetails,
+    tabIndex: 0,
     childCount: 4
   }, ...getAdditionalDetailsEntryVirtualDom(firstHeading, entries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(secondHeading, secondEntries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(thirdHeading, categories, getCategoriesDom), ...getAdditionalDetailsEntryVirtualDom(fourthHeading, resources, getResourcesVirtualDom)];
 };
 
+const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
+  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
+  }];
+  return entries;
+};
+
 const allowedMarkdownAttributes = ['src', 'id', 'className', 'title', 'alt', 'href', 'target', 'rel'];
 
 const Div = 'div';
@@ -1515,6 +1655,17 @@ const getMarkdownVirtualDom = html => {
   return dom;
 };
 
+const getMarketplaceEntries = () => {
+  return [{
+    key: 'Published',
+    value: 'n/a',
+    odd: true
+  }, {
+    key: 'Last Released',
+    value: 'n/a'
+  }];
+};
+
 const getVirtualDomChildCount = markdownDom => {
   const max = markdownDom.length - 1;
   let stack = [];
@@ -1528,31 +1679,13 @@ const getVirtualDomChildCount = markdownDom => {
   return stack.length;
 };
 
-const getDetailsVirtualDom = sanitizedReadmeHtml => {
+const getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion) => {
   const markdownDom = getMarkdownVirtualDom(sanitizedReadmeHtml);
   const childCount = getVirtualDomChildCount(markdownDom);
   const firstHeading = 'Installation';
-  const entries = [{
-    key: 'Identifier',
-    value: 'abc'
-  }, {
-    key: 'Version',
-    value: '1.9.5'
-  }, {
-    key: 'Last Updated',
-    value: 'n/a'
-  }, {
-    key: 'Size',
-    value: '100kB'
-  }];
+  const entries = getInstallationEntries(displaySize, extensionId, extensionVersion);
   const secondHeading = 'Marketplace';
-  const secondEntries = [{
-    key: 'Published',
-    value: 'n/a'
-  }, {
-    key: 'Last Released',
-    value: 'n/a'
-  }];
+  const secondEntries = getMarketplaceEntries();
   const thirdHeading = 'Categories';
   const categories = [{
     id: 'themes',
@@ -1656,10 +1789,10 @@ const ProgrammingLanguages = 'ProgrammingLanguages';
 const Settings = 'Settings';
 const Theme = 'Theme';
 
-const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesHtml, selectedTab, features) => {
+const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion) => {
   switch (selectedTab) {
     case Details:
-      return getDetailsVirtualDom(sanitizedReadmeHtml);
+      return getDetailsVirtualDom(sanitizedReadmeHtml, displaySize, extensionId, extensionVersion);
     case Features:
       return getFeaturesVirtualDom(features, themesHtml);
     case Changelog:
@@ -1787,12 +1920,16 @@ const getTabsVirtualDom = tabs => {
 const getExtensionDetailVirtualDom = (extensionDetail, sanitizedReadmeHtml, selectedTab, newState) => {
   const themesHtml = newState?.selectedFeatureMarkdownDom || '';
   const features = newState?.features || getFeatures();
+  const size = newState.folderSize || 0;
+  const extensionId = newState?.extension?.id || 'n/a';
+  const extensionVersion = newState?.extension?.version || 'n/a';
+  const displaySize = getDisplaySize(size);
   const tabs = getTabs(selectedTab);
   const dom = [{
     type: Div$1,
     className: mergeClassNames(Viewlet, ExtensionDetail),
     childCount: 3
-  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features)];
+  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion)];
   return dom;
 };
 
@@ -1896,6 +2033,29 @@ const handleClickFeatures = async (state, name) => {
   return selectFeature(state, name);
 };
 
+const RendererWorker = 1;
+
+const rpcs = Object.create(null);
+const set = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get = id => {
+  return rpcs[id];
+};
+
+const invoke = (method, ...params) => {
+  const rpc = get(RendererWorker);
+  return rpc.invoke(method, ...params);
+};
+
+const handleClickSize = async state => {
+  const {
+    uri
+  } = state.extension;
+  await invoke('OpenNativeFolder.openNativeFolder', uri);
+  return state;
+};
+
 const assetDir = '';
 
 const ExtensionDefaultIcon = `${assetDir}/icons/extensionDefaultIcon.png`;
@@ -4550,21 +4710,6 @@ const getName = extension => {
   return 'n/a';
 };
 
-const RendererWorker = 1;
-
-const rpcs = Object.create(null);
-const set = (id, rpc) => {
-  rpcs[id] = rpc;
-};
-const get = id => {
-  return rpcs[id];
-};
-
-const invoke = (method, ...params) => {
-  const rpc = get(RendererWorker);
-  return rpc.invoke(method, ...params);
-};
-
 const getAllExtensions = async platform => {
   if (platform === Web) {
     return [];
@@ -4744,6 +4889,7 @@ const commandMap = {
   'ExtensionDetail.create': create,
   'ExtensionDetail.getMenuEntries': getMenuEntries,
   'ExtensionDetail.getVirtualDom': getExtensionDetailVirtualDom,
+  'ExtensionDetail.handleClickSize': handleClickSize,
   'ExtensionDetail.handleFeaturesClick': handleClickFeatures,
   'ExtensionDetail.handleIconError': handleIconError,
   'ExtensionDetail.handleTabsClick': handleTabsClick,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-detail-view",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "description": "Extension Detail View Worker",
   "keywords": [],
   "license": "MIT",