@lvce-editor/extension-detail-view 3.6.0 → 3.8.0

package/dist/extensionDetailViewWorkerMain.js

@@ -991,43 +991,49 @@ const getDisplaySize = size => {
   });
 };
 
+const A$1 = 53;
+const Abbr$1 = 54;
+const Article$1 = 27;
+const Aside$1 = 28;
+const Br$1 = 55;
 const Button = 1;
+const Cite$1 = 56;
+const Data$1 = 57;
+const Dd$1 = 43;
 const Div$1 = 4;
+const Dl$1 = 44;
+const Figcaption$1 = 45;
+const Figure$1 = 46;
+const Footer$1 = 29;
 const H1$1 = 5;
-const Span$1 = 8;
-const Text$1 = 12;
-const Img$1 = 17;
 const H2$1 = 22;
 const H3$1 = 23;
 const H4$1 = 24;
 const H5$1 = 25;
-const Article$1 = 27;
-const Aside$1 = 28;
-const Footer$1 = 29;
 const Header$1 = 30;
-const Nav$1 = 40;
-const Section$1 = 41;
-const Search$1 = 42;
-const Dd$1 = 43;
-const Dl$1 = 44;
-const Figcaption$1 = 45;
-const Figure$1 = 46;
 const Hr$1 = 47;
+const Img$1 = 17;
 const Li$1 = 48;
+const Nav$1 = 40;
 const Ol$1 = 49;
 const P$1 = 50;
 const Pre$1 = 51;
-const A$1 = 53;
-const Abbr$1 = 54;
-const Br$1 = 55;
-const Cite$1 = 56;
-const Data$1 = 57;
-const Time$1 = 58;
+const Search$1 = 42;
+const Section$1 = 41;
+const Span$1 = 8;
+const Table = 9;
+const TBody = 10;
+const Td = 11;
+const Text$2 = 12;
 const Tfoot$1 = 59;
+const Th = 13;
+const THead = 14;
+const Time$1 = 58;
+const Tr = 15;
 
 const text = data => {
   return {
-    type: Text$1,
+    type: Text$2,
     text: data,
     childCount: 0
   };
@@ -1094,30 +1100,57 @@ const getMoreInfoEntryKeyVirtualDom = item => {
   }, 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
+    onClick,
+    code
   } = item;
-  const valueTag = onClick ? A$1 : Div$1;
-  let valueClassName = MoreInfoEntryValue;
-  if (onClick) {
-    valueClassName += ' Link';
-  }
+  const type = getTag(onClick, code);
+  const className = getClassName(onClick, code);
   return [{
-    type: valueTag,
-    className: valueClassName,
+    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 => {
-  return [{
-    type: Div$1,
-    className: MoreInfoEntry,
-    childCount: 2
-  }, ...getMoreInfoEntryKeyVirtualDom(item), ...getMoreInfoEntryValueVirtualDom(item)];
+  const {
+    odd
+  } = item;
+  const node = odd ? parentNodeOdd : parentNodeEven;
+  return [node, ...getMoreInfoEntryKeyVirtualDom(item), ...getMoreInfoEntryValueVirtualDom(item)];
 };
 
 const getMoreInfoVirtualDom = items => {
@@ -1152,23 +1185,28 @@ 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 => {
+const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
   const entries = [{
     key: 'Identifier',
-    value: 'abc'
+    value: extensionId,
+    odd: true,
+    code: true
   }, {
     key: 'Version',
-    value: '1.9.5'
+    value: extensionVersion,
+    code: true
   }, {
     key: 'Last Updated',
-    value: 'n/a'
+    value: 'n/a',
+    odd: true
   }, {
     key: 'Size',
-    value: `${displaySize}`,
+    value: displaySize,
     onClick: HandleClickSize
   }];
   return entries;
@@ -1297,7 +1335,7 @@ const Doctype = 16;
 const StartCommentDashes = 17;
 const Comment = 18;
 const EndCommentTag = 19;
-const Text = 20;
+const Text$1 = 20;
 const CommentStart = 21;
 
 const isSelfClosingTag = tag => {
@@ -1380,7 +1418,7 @@ const tokenizeHtml = text => {
           token = Content;
           state = State.TopLevelContent;
         } else if (next = part.match(RE_ANGLE_BRACKET_OPEN)) {
-          token = Text;
+          token = Text$1;
           state = State.TopLevelContent;
         } else {
           throw new UnexpectedTokenError();
@@ -1403,7 +1441,7 @@ const tokenizeHtml = text => {
           token = ExclamationMark;
           state = State.AfterExclamationMark;
         } else if (next = part.match(RE_ANY_TEXT)) {
-          token = Text;
+          token = Text$1;
           state = State.TopLevelContent;
         } else {
           text.slice(index); // ?
@@ -1442,7 +1480,7 @@ const tokenizeHtml = text => {
           token = WhitespaceInsideOpeningTag;
           state = State.InsideOpeningTagAfterWhitespace;
         } else if (next = part.match(RE_TAG_TEXT)) {
-          token = Text;
+          token = Text$1;
           state = State.TopLevelContent;
         } else {
           throw new UnexpectedTokenError();
@@ -1623,6 +1661,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 = [];
@@ -1636,19 +1685,13 @@ const getVirtualDomChildCount = markdownDom => {
   return stack.length;
 };
 
-const getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize) => {
+const getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion) => {
   const markdownDom = getMarkdownVirtualDom(sanitizedReadmeHtml);
   const childCount = getVirtualDomChildCount(markdownDom);
   const firstHeading = 'Installation';
-  const entries = getInstallationEntries(displaySize);
+  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',
@@ -1687,30 +1730,233 @@ const getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize) => {
   return dom;
 };
 
-const getFeatureListItemVirtualDom = feature => {
+const Text = 1;
+const Code = 2;
+
+const getCommandTableEntry = command => {
+  // TODO watch out for command being null/undefined/number/string/array
   const {
-    label,
-    selected,
-    id
-  } = feature;
-  const className = selected ? 'Feature FeatureSelected' : Feature;
+    id,
+    label
+  } = command;
   return [{
-    // TODO use role list item or tab
-    type: Button,
-    name: id,
-    className,
+    type: Code,
+    value: id
+  }, {
+    type: Text,
+    value: label
+  }];
+};
+const getCommandTableEntries = extension => {
+  const commands = extension.commands || [];
+  const rows = commands.map(getCommandTableEntry);
+  return {
+    headings: ['ID', 'Label'],
+    rows
+  };
+};
+
+const getCellCodeVirtualDom = value => {
+  return [{
+    type: Td,
     childCount: 1
-  }, text(label)];
+  }, {
+    type: Div$1,
+    // TODO use code tag
+    childCount: 1
+  }, text(value)];
 };
 
-const getFeatureListVirtualDom = features => {
+const getCellTextVirtualDom = value => {
+  return [{
+    type: Td,
+    childCount: 1
+  }, text(value)];
+};
+
+const getCellVirtualDom = entry => {
+  const {
+    value,
+    type
+  } = entry;
+  switch (type) {
+    case Code:
+      return getCellCodeVirtualDom(value);
+    default:
+      return getCellTextVirtualDom(value);
+  }
+};
+
+const getTableHeadingVirtualDom = heading => {
+  return [{
+    type: Th,
+    childCount: 1
+  }, text(heading)];
+};
+
+const getTableRowVirtualDom = entries => {
+  return [{
+    type: Tr,
+    childCount: entries.length
+  }, ...entries.flatMap(getCellVirtualDom)];
+};
+const getTableVirtualDom = tableInfo => {
+  const {
+    headings,
+    rows
+  } = tableInfo;
+  return [{
+    type: Table,
+    className: 'Table',
+    childCount: 2
+  }, {
+    type: THead,
+    childCount: 1
+  }, {
+    type: Tr,
+    childCount: headings.length
+  }, ...headings.flatMap(getTableHeadingVirtualDom), {
+    type: TBody,
+    childCount: rows.length
+  }, ...rows.flatMap(getTableRowVirtualDom)];
+};
+
+const getFeatureCommandsVirtualDom = extension => {
+  // TODO use i18n strings
+  const heading = 'Commands';
+  const tableInfo = getCommandTableEntries(extension);
   return [{
-    // TODO use either list or tabs role
     type: Div$1,
-    className: FeaturesList,
-    childCount: features.length,
-    onClick: HandleFeaturesClick
-  }, ...features.flatMap(getFeatureListItemVirtualDom)];
+    className: 'FeatureCommands',
+    childCount: 2
+  }, {
+    type: H1$1,
+    childCount: 1
+  }, text(heading), ...getTableVirtualDom(tableInfo)];
+};
+
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  const replacer = (match, rest) => {
+    return placeholders[rest];
+  };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
+};
+
+const Copy = 'Copy';
+const OpenInNewTab = 'Open in New Tab';
+const OpenImageInNewTab = 'Open Image in New Tab';
+const SaveImageAs = 'Save Image as';
+const FileMatch = 'File Match';
+const Schema = 'Schema';
+
+const copy = () => {
+  return i18nString(Copy);
+};
+const openInNewTab = () => {
+  return i18nString(OpenInNewTab);
+};
+const openImageInNewTab = () => {
+  return i18nString(OpenImageInNewTab);
+};
+const saveImageAs = () => {
+  return i18nString(SaveImageAs);
+};
+const fileMatch = () => {
+  return i18nString(FileMatch);
+};
+const schema = () => {
+  return i18nString(Schema);
+};
+
+const getJsonValidationTableEntry = validation => {
+  const {
+    fileMatch,
+    schema
+  } = validation;
+  return [{
+    type: Code,
+    value: fileMatch
+  }, {
+    type: Code,
+    value: schema
+  }];
+};
+const getJsonValidationTableEntries = extension => {
+  const validations = extension.jsonValidation || [];
+  const rows = validations.map(getJsonValidationTableEntry);
+  return {
+    headings: [fileMatch(), schema()],
+    rows
+  };
+};
+
+const getFeatureJsonValidationVirtualDom = extension => {
+  // TODO use i18n
+  const heading = 'Json Validation';
+  const tableInfo = getJsonValidationTableEntries(extension);
+  return [{
+    type: Div$1,
+    className: 'FeatureJsonValidation',
+    childCount: 2
+  }, {
+    type: H1$1,
+    childCount: 1
+  }, text(heading), ...getTableVirtualDom(tableInfo)];
+};
+
+const getFeatureProgrammingLanguagesVirtualDom = () => {
+  // TODO use i18n string
+  const heading = 'Programming Languages';
+  // TODO
+  return [{
+    type: Div$1,
+    className: 'FeatureProgrammingLanguages',
+    childCount: 1
+  }, {
+    type: H1$1,
+    childCount: 1
+  }, text(heading)];
+};
+
+const getSettingsTableEntry = setting => {
+  const {
+    id,
+    label
+  } = setting;
+  // TODO watch out for  null/undefined/number/string/array
+  return [{
+    type: Text,
+    value: id
+  }, {
+    type: Text,
+    value: label
+  }];
+};
+const getSettingsTableEntries = extension => {
+  const settings = extension.settings || [];
+  const rows = settings.map(getSettingsTableEntry);
+  return {
+    headings: ['ID', 'Label'],
+    rows
+  };
+};
+
+const getFeatureSettingsVirtualDom = extension => {
+  const heading = 'Settings';
+  const tableInfo = getSettingsTableEntries(extension);
+  return [{
+    type: Div$1,
+    className: 'FeatureSettings',
+    childCount: 2
+  }, {
+    type: H1$1,
+    childCount: 1
+  }, text(heading), ...getTableVirtualDom(tableInfo)];
 };
 
 const getFeatureThemesVirtualDom = themesHtml => {
@@ -1731,7 +1977,63 @@ const getFeatureThemesVirtualDom = themesHtml => {
   }, ...markdownDom];
 };
 
-const getFeaturesVirtualDom = (features, themesHtml) => {
+const Changelog = 'Changelog';
+const Commands = 'Commands';
+const Details = 'Details';
+const Features = 'Features';
+const JsonValidation = 'JsonValidation';
+const ProgrammingLanguages = 'ProgrammingLanguages';
+const Settings = 'Settings';
+const Theme = 'Theme';
+
+const getFeatureContentVirtualDom = (features, themesHtml, selectedFeature, extension) => {
+  switch (selectedFeature) {
+    case Theme:
+      return getFeatureThemesVirtualDom(themesHtml);
+    case Commands:
+      return getFeatureCommandsVirtualDom(extension);
+    case JsonValidation:
+      return getFeatureJsonValidationVirtualDom(extension);
+    case ProgrammingLanguages:
+      return getFeatureProgrammingLanguagesVirtualDom();
+    case Settings:
+      return getFeatureSettingsVirtualDom(extension);
+    default:
+      return [{
+        type: Div$1,
+        className: 'FeatureContent',
+        childCount: 1
+      }, text('Not Implemented')];
+  }
+};
+
+const getFeatureListItemVirtualDom = feature => {
+  const {
+    label,
+    selected,
+    id
+  } = feature;
+  const className = selected ? 'Feature FeatureSelected' : Feature;
+  return [{
+    // TODO use role list item or tab
+    type: Button,
+    name: id,
+    className,
+    childCount: 1
+  }, text(label)];
+};
+
+const getFeatureListVirtualDom = features => {
+  return [{
+    // TODO use either list or tabs role
+    type: Div$1,
+    className: FeaturesList,
+    childCount: features.length,
+    onClick: HandleFeaturesClick
+  }, ...features.flatMap(getFeatureListItemVirtualDom)];
+};
+
+const getFeaturesVirtualDom = (features, themesHtml, selectedFeature, extension) => {
   return [{
     type: Div$1,
     className: Features$1,
@@ -1740,24 +2042,15 @@ const getFeaturesVirtualDom = (features, themesHtml) => {
     type: Div$1,
     className: 'Sash SashVertical',
     childCount: 0
-  }, ...getFeatureThemesVirtualDom(themesHtml)];
+  }, ...getFeatureContentVirtualDom(features, themesHtml, selectedFeature, extension)];
 };
 
-const Changelog = 'Changelog';
-const Commands = 'Commands';
-const Details = 'Details';
-const Features = 'Features';
-const JsonValidation = 'JsonValidation';
-const ProgrammingLanguages = 'ProgrammingLanguages';
-const Settings = 'Settings';
-const Theme = 'Theme';
-
-const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize) => {
+const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension) => {
   switch (selectedTab) {
     case Details:
-      return getDetailsVirtualDom(sanitizedReadmeHtml, displaySize);
+      return getDetailsVirtualDom(sanitizedReadmeHtml, displaySize, extensionId, extensionVersion);
     case Features:
-      return getFeaturesVirtualDom(features, themesHtml);
+      return getFeaturesVirtualDom(features, themesHtml, selectedFeature, extension);
     case Changelog:
       return getChangelogVirtualDom();
     default:
@@ -1798,27 +2091,30 @@ const getExtensionDetailHeaderVirtualDom = extensionDetail => {
   return dom;
 };
 
-const getFeatures = () => {
+const getFeatures = selectedFeature => {
+  if (!selectedFeature) {
+    selectedFeature = Theme;
+  }
   const features = [{
     id: Theme,
     label: 'Theme',
-    selected: true
+    selected: selectedFeature === Theme
   }, {
     id: Commands,
     label: 'Commands',
-    selected: false
+    selected: selectedFeature === Commands
   }, {
     id: JsonValidation,
     label: 'Json Validation',
-    selected: false
+    selected: selectedFeature === JsonValidation
   }, {
     id: ProgrammingLanguages,
     label: 'Programming Languages',
-    selected: false
+    selected: selectedFeature === ProgrammingLanguages
   }, {
     id: Settings,
     label: 'Settings',
-    selected: false
+    selected: selectedFeature === Settings
   }];
   return features;
 };
@@ -1881,49 +2177,28 @@ const getTabsVirtualDom = tabs => {
 };
 
 const getExtensionDetailVirtualDom = (extensionDetail, sanitizedReadmeHtml, selectedTab, newState) => {
+  // TODO move this to view model so that rendering occurs like
+  // 1. state
+  // 2. view model
+  // 3. virtual dom
+  // 4. dom
   const themesHtml = newState?.selectedFeatureMarkdownDom || '';
-  const features = newState?.features || getFeatures();
+  const selectedFeature = newState?.selectedFeature || '';
+  const features = newState?.features || getFeatures(selectedFeature);
   const size = newState.folderSize || 0;
+  const extensionId = newState?.extension?.id || 'n/a';
+  const extensionVersion = newState?.extension?.version || 'n/a';
+  const extension = newState?.extension || {};
   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, displaySize)];
+  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension)];
   return dom;
 };
 
-const emptyObject = {};
-const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
-const i18nString = (key, placeholders = emptyObject) => {
-  if (placeholders === emptyObject) {
-    return key;
-  }
-  const replacer = (match, rest) => {
-    return placeholders[rest];
-  };
-  return key.replaceAll(RE_PLACEHOLDER, replacer);
-};
-
-const Copy = 'Copy';
-const OpenInNewTab = 'Open in New Tab';
-const OpenImageInNewTab = 'Open Image in New Tab';
-const SaveImageAs = 'Save Image as';
-
-const copy = () => {
-  return i18nString(Copy);
-};
-const openInNewTab = () => {
-  return i18nString(OpenInNewTab);
-};
-const openImageInNewTab = () => {
-  return i18nString(OpenImageInNewTab);
-};
-const saveImageAs = () => {
-  return i18nString(SaveImageAs);
-};
-
 const None = 0;
 
 const getCopyMenuEntry = () => ({
@@ -4677,7 +4952,8 @@ const getAllExtensions = async platform => {
   }
   return invoke('ExtensionManagement.getAllExtensions');
 };
-const getExtension = async (id, platform) => {
+const getExtension$1 = async (id, platform) => {
+  // TODO only ask one extension from renderer worker instead of all
   const allExtensions = await getAllExtensions(platform);
   for (const extension of allExtensions) {
     if (extension.id === id) {
@@ -4687,6 +4963,17 @@ const getExtension = async (id, platform) => {
   return undefined;
 };
 
+const getExtensionNew = async id => {
+  return invoke('ExtensionManagement.getExtension', id);
+};
+const getExtension = async (id, platform) => {
+  try {
+    return await getExtensionNew(id);
+  } catch {
+    return getExtension$1(id, platform);
+  }
+};
+
 const getRemoteSrc = uri => {
   const src = `/remote${uri}`;
   return src;
@@ -4710,6 +4997,13 @@ const getFolderSize = async uri => {
   }
 };
 
+const getSavedSelectedFeature = savedState => {
+  if (savedState && typeof savedState === 'object' && 'selectedFeature' in savedState && typeof savedState.selectedFeature === 'string') {
+    return savedState.selectedFeature;
+  }
+  return Details;
+};
+
 const getSavedSelectedTab = savedState => {
   if (savedState && typeof savedState === 'object' && 'selectedTab' in savedState && typeof savedState.selectedTab === 'string') {
     return savedState.selectedTab;
@@ -4778,7 +5072,8 @@ const loadContent = async (state, platform, savedState) => {
   const name = getName(extension);
   const size = getViewletSize(width);
   const selectedTab = getSavedSelectedTab(savedState);
-  const features = getFeatures();
+  const selectedFeature = getSavedSelectedFeature(savedState);
+  const features = getFeatures(selectedFeature);
   const folderSize = await getFolderSize(extension.uri);
   const entries = [{
     key: 'Identifier',
@@ -4835,10 +5130,12 @@ const loadContent = async (state, platform, savedState) => {
 
 const saveState = state => {
   const {
-    selectedTab
+    selectedTab,
+    selectedFeature
   } = state;
   return {
-    selectedTab
+    selectedTab,
+    selectedFeature
   };
 };
 

package/package.json

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