@lvce-editor/static-server 0.45.3 → 0.45.5

package/static/{8eaffb6 → 94c041a}/packages/extension-detail-view-worker/dist/extensionDetailViewWorkerMain.js

@@ -439,9 +439,9 @@ const get$2 = id => {
 const remove = id => {
   delete callbacks[id];
 };
-let id = 0;
+let id$1 = 0;
 const create$3 = () => {
-  return ++id;
+  return ++id$1;
 };
 const registerPromise = () => {
   const id = create$3();
@@ -767,12 +767,12 @@ const invokeAndTransfer = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, true);
 };
 
-const commands = Object.create(null);
+const commands$1 = Object.create(null);
 const register = commandMap => {
-  Object.assign(commands, commandMap);
+  Object.assign(commands$1, commandMap);
 };
 const getCommand = key => {
-  return commands[key];
+  return commands$1[key];
 };
 const execute = (command, ...args) => {
   const fn = getCommand(command);
@@ -874,7 +874,7 @@ const create = (uid, uri, width, height, platform) => {
     name: '',
     sanitizedReadmeHtml: '',
     selectedTab: '',
-    size: 0,
+    sizeOnDisk: 0,
     width,
     uri,
     entries: [],
@@ -894,12 +894,18 @@ const AdditionalDetails = 'AdditionalDetails';
 const AdditionalDetailsEntry = 'AdditionalDetailsEntry';
 const AdditionalDetailsTitle = 'AdditionalDetailsTitle';
 const Aside$2 = 'Aside';
+const Button$1 = 'Button';
+const ButtonPrimary = 'ButtonPrimary';
 const Categories = 'Categories';
 const Category = 'Category';
 const Changelog$1 = 'Changelog';
+const DefinitionListItem = 'DefinitionListItem';
+const DefinitionListItemHeading = 'DefinitionListItemHeading';
+const DefinitionListItemValue = 'DefinitionListItemValue';
 const ExtensionDetail = 'ExtensionDetail';
 const ExtensionDetailDescription = 'ExtensionDetailDescription';
 const ExtensionDetailHeader = 'ExtensionDetailHeader';
+const ExtensionDetailHeaderActions = 'ExtensionDetailHeaderActions';
 const ExtensionDetailHeaderDetails = 'ExtensionDetailHeaderDetails';
 const ExtensionDetailIcon = 'ExtensionDetailIcon';
 const ExtensionDetailName = 'ExtensionDetailName';
@@ -908,15 +914,24 @@ const ExtensionDetailTab = 'ExtensionDetailTab';
 const ExtensionDetailTabs = 'ExtensionDetailTabs';
 const ExtensionDetailTabSelected = 'ExtensionDetailTabSelected';
 const Feature = 'Feature';
+const FeatureContent = 'FeatureContent';
 const Features$1 = 'Features';
 const FeaturesList = 'FeaturesList';
+const FeatureWebView = 'FeatureWebView';
+const Large$1 = 'Large';
 const Markdown = 'Markdown';
 const MoreInfo = 'MoreInfo';
 const MoreInfoEntry = 'MoreInfoEntry';
 const MoreInfoEntryKey = 'MoreInfoEntryKey';
+const MoreInfoEntryOdd = 'MoreInfoEntryOdd';
 const MoreInfoEntryValue = 'MoreInfoEntryValue';
+const Normal$1 = 'Normal';
 const Resource = 'Resource';
 const Resources = 'Resources';
+const Small$1 = 'Small';
+const Table$1 = 'Table';
+const TableCell = 'TableCell';
+const TableHeading = 'TableHeading';
 const Viewlet = 'Viewlet';
 
 const BYTE_UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
@@ -991,43 +1006,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
   };
@@ -1047,11 +1068,6 @@ const TabList = 'tablist';
 const Tab = 'tab';
 const Panel = 'panel';
 
-const HandleClickSize = 'handleClickSize';
-const HandleFeaturesClick = 'handleFeaturesClick';
-const HandleReadmeContextMenu = 'handleReadmeContextMenu';
-const HandleTabsClick = 'handleTabsClick';
-
 const getAdditionalDetailsEntryVirtualDom = (heading, items, renderer) => {
   return [{
     type: Div$1,
@@ -1136,7 +1152,7 @@ const parentNodeEven = {
 };
 const parentNodeOdd = {
   type: Div$1,
-  className: MoreInfoEntry + ' ' + 'MoreInfoEntryOdd',
+  className: MoreInfoEntry + ' ' + MoreInfoEntryOdd,
   childCount: 2
 };
 const getMoreInfoEntryVirtualDom = item => {
@@ -1155,16 +1171,17 @@ const getMoreInfoVirtualDom = items => {
   }, ...items.flatMap(getMoreInfoEntryVirtualDom)];
 };
 
+const resourceNode = {
+  // TODO use link with url
+  type: Div$1,
+  className: Resource,
+  childCount: 1
+};
 const getResourceVirtualDom = resource => {
   const {
     label
   } = resource;
-  return [{
-    // TODO use link with url
-    type: Div$1,
-    className: Resource,
-    childCount: 1
-  }, text(label)];
+  return [resourceNode, text(label)];
 };
 
 const getResourcesVirtualDom = resources => {
@@ -1175,8 +1192,15 @@ const getResourcesVirtualDom = resources => {
   }, ...resources.flatMap(getResourceVirtualDom)];
 };
 
-const getAdditionalDetailsVirtualDom = (firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources) => {
+const getAdditionalDetailsVirtualDom = (showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources) => {
+  if (!showAdditionalDetails) {
+    return [];
+  }
   return [{
+    type: Div$1,
+    className: Aside$2,
+    childCount: 1
+  }, {
     type: Div$1,
     className: AdditionalDetails,
     tabIndex: 0,
@@ -1184,6 +1208,13 @@ const getAdditionalDetailsVirtualDom = (firstHeading, entries, secondHeading, se
   }, ...getAdditionalDetailsEntryVirtualDom(firstHeading, entries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(secondHeading, secondEntries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(thirdHeading, categories, getCategoriesDom), ...getAdditionalDetailsEntryVirtualDom(fourthHeading, resources, getResourcesVirtualDom)];
 };
 
+const HandleClickDisable = 'handleClickDisable';
+const HandleClickSize = 'handleClickSize';
+const HandleClickUninstall = 'handleClickUninstall';
+const HandleFeaturesClick = 'handleFeaturesClick';
+const HandleReadmeContextMenu = 'handleReadmeContextMenu';
+const HandleTabsClick = 'handleTabsClick';
+
 const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
   const entries = [{
     key: 'Identifier',
@@ -1208,6 +1239,19 @@ const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
 
 const allowedMarkdownAttributes = ['src', 'id', 'className', 'title', 'alt', 'href', 'target', 'rel'];
 
+const getVirtualDomChildCount = markdownDom => {
+  const max = markdownDom.length - 1;
+  let stack = [];
+  for (let i = max; i >= 0; i--) {
+    const element = markdownDom[i];
+    if (element.childCount > 0) {
+      stack = stack.slice(element.childCount);
+    }
+    stack.unshift(element);
+  }
+  return stack.length;
+};
+
 const Div = 'div';
 const H1 = 'h1';
 const H2 = 'h2';
@@ -1329,7 +1373,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 => {
@@ -1412,7 +1456,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();
@@ -1435,7 +1479,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); // ?
@@ -1474,7 +1518,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();
@@ -1651,8 +1695,15 @@ const parseHtml = (html, allowedAttributes) => {
 
 const getMarkdownVirtualDom = html => {
   string(html);
-  const dom = parseHtml(html, allowedMarkdownAttributes);
-  return dom;
+  const childDom = parseHtml(html, allowedMarkdownAttributes);
+  const markdownChildCount = getVirtualDomChildCount(childDom);
+  return [{
+    type: Div$1,
+    className: Markdown,
+    role: Document,
+    onContextMenu: HandleReadmeContextMenu,
+    childCount: markdownChildCount
+  }, ...childDom];
 };
 
 const getMarketplaceEntries = () => {
@@ -1666,22 +1717,7 @@ const getMarketplaceEntries = () => {
   }];
 };
 
-const getVirtualDomChildCount = markdownDom => {
-  const max = markdownDom.length - 1;
-  let stack = [];
-  for (let i = max; i >= 0; i--) {
-    const element = markdownDom[i];
-    if (element.childCount > 0) {
-      stack = stack.slice(element.childCount);
-    }
-    stack.unshift(element);
-  }
-  return stack.length;
-};
-
-const getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion) => {
-  const markdownDom = getMarkdownVirtualDom(sanitizedReadmeHtml);
-  const childCount = getVirtualDomChildCount(markdownDom);
+const getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width) => {
   const firstHeading = 'Installation';
   const entries = getInstallationEntries(displaySize, extensionId, extensionVersion);
   const secondHeading = 'Marketplace';
@@ -1705,23 +1741,402 @@ const getDetailsVirtualDom = (sanitizedReadmeHtml, displaySize, extensionId, ext
     label: 'License',
     url: '#'
   }];
+  const showAdditionalDetailsBreakpoint = 600;
+  const showAdditionalDetails = width > showAdditionalDetailsBreakpoint;
+  const childCount = showAdditionalDetails ? 2 : 1;
   const dom = [{
     type: Div$1,
     className: ExtensionDetailPanel,
-    childCount: 2,
+    childCount: childCount,
     role: Panel
+  }, ...getMarkdownVirtualDom(sanitizedReadmeHtml), ...getAdditionalDetailsVirtualDom(showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources)];
+  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 Commands$1 = 'Commands';
+const ContentSecurityPolicy = 'ContentSecurityPolicy';
+const Copy = 'Copy';
+const Elements = 'Elements';
+const FileMatch = 'File Match';
+const Id = 'ID';
+const JsonValidation$1 = 'Json Validation';
+const Label = 'Label';
+const OpenImageInNewTab = 'Open Image in New Tab';
+const OpenInNewTab = 'Open in New Tab';
+const ProgrammingLanguages$1 = 'Programming Languages';
+const SaveImageAs = 'Save Image as';
+const Schema = 'Schema';
+const Selector = 'Selector';
+const Settings$1 = 'Settings';
+const Theme$1 = 'Theme';
+const WebViews$1 = 'WebViews';
+
+const copy = () => {
+  return i18nString(Copy);
+};
+const openInNewTab = () => {
+  return i18nString(OpenInNewTab);
+};
+const label = () => {
+  return i18nString(Label);
+};
+const openImageInNewTab = () => {
+  return i18nString(OpenImageInNewTab);
+};
+const saveImageAs = () => {
+  return i18nString(SaveImageAs);
+};
+const fileMatch = () => {
+  return i18nString(FileMatch);
+};
+const schema = () => {
+  return i18nString(Schema);
+};
+const theme = () => {
+  return i18nString(Theme$1);
+};
+const commands = () => {
+  return i18nString(Commands$1);
+};
+const webViews = () => {
+  return i18nString(WebViews$1);
+};
+const jsonValidation = () => {
+  return i18nString(JsonValidation$1);
+};
+const programmingLanguages = () => {
+  return i18nString(ProgrammingLanguages$1);
+};
+const settings = () => {
+  return i18nString(Settings$1);
+};
+const id = () => {
+  return i18nString(Id);
+};
+const selector = () => {
+  return i18nString(Selector);
+};
+const contentSecurityPolicy = () => {
+  return i18nString(ContentSecurityPolicy);
+};
+const elements = () => {
+  return i18nString(Elements);
+};
+
+const Text = 1;
+const Code = 2;
+
+const getCommandTableEntry = command => {
+  // TODO watch out for command being null/undefined/number/string/array
+  const {
+    id,
+    label
+  } = command;
+  return [{
+    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 getFeatureContentHeadingVirtualDom = heading => {
+  return [{
+    type: H1$1,
+    childCount: 1
+  }, text(heading)];
+};
+
+const getTableHeadingVirtualDom = heading => {
+  return [{
+    type: Th,
+    className: TableHeading,
+    childCount: 1
+  }, text(heading)];
+};
+
+const getCellCodeVirtualDom = value => {
+  return [{
+    type: Td,
+    className: TableCell,
+    childCount: 1
   }, {
     type: Div$1,
-    className: Markdown,
-    role: Document,
-    onContextMenu: HandleReadmeContextMenu,
-    childCount
-  }, ...markdownDom, {
+    // TODO use code tag
+    childCount: 1
+  }, text(value)];
+};
+
+const getCellTextVirtualDom = value => {
+  return [{
+    type: Td,
+    className: TableCell,
+    childCount: 1
+  }, text(value)];
+};
+
+const getCellRenderer = type => {
+  switch (type) {
+    case Code:
+      return getCellCodeVirtualDom;
+    case Text:
+      return getCellTextVirtualDom;
+    default:
+      throw new Error(`unexpected cell type ${type}`);
+  }
+};
+
+const getCellVirtualDom = entry => {
+  const {
+    value,
+    type
+  } = entry;
+  const fn = getCellRenderer(type);
+  return fn(value);
+};
+
+const getTableRowVirtualDom = entries => {
+  return [{
+    type: Tr,
+    childCount: entries.length
+  }, ...entries.flatMap(getCellVirtualDom)];
+};
+
+const getTableVirtualDom = tableInfo => {
+  const {
+    headings,
+    rows
+  } = tableInfo;
+  return [{
+    type: Table,
+    className: Table$1,
+    childCount: 2
+  }, {
+    type: THead,
+    childCount: 1
+  }, {
+    type: Tr,
+    childCount: headings.length
+  }, ...headings.flatMap(getTableHeadingVirtualDom), {
+    type: TBody,
+    childCount: rows.length
+  }, ...rows.flatMap(getTableRowVirtualDom)];
+};
+
+// TODO have typed view-model
+const getFeatureCommandsVirtualDom = extension => {
+  const heading = commands();
+  const tableInfo = getCommandTableEntries(extension);
+  return [{
     type: Div$1,
-    className: Aside$2,
+    className: FeatureContent,
+    childCount: 2
+  }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
+};
+
+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 => {
+  const heading = jsonValidation();
+  const tableInfo = getJsonValidationTableEntries(extension);
+  return [{
+    type: Div$1,
+    className: FeatureContent,
+    childCount: 2
+  }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
+};
+
+const getFeatureNotImplementedVirtualDom = () => {
+  const heading = 'Not implemented';
+  return [{
+    type: Div$1,
+    className: FeatureContent,
     childCount: 1
-  }, ...getAdditionalDetailsVirtualDom(firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources)];
-  return dom;
+  }, {
+    type: H1$1,
+    childCount: 1
+  }, text(heading)];
+};
+
+const getFeatureProgrammingLanguagesVirtualDom = () => {
+  const heading = programmingLanguages();
+  // TODO
+  return [{
+    type: Div$1,
+    className: FeatureContent,
+    childCount: 1
+  }, ...getFeatureContentHeadingVirtualDom(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);
+  const textId = id();
+  const textLabel = label();
+  return {
+    headings: [textId, textLabel],
+    rows
+  };
+};
+
+const getFeatureSettingsVirtualDom = extension => {
+  const heading = settings();
+  const tableInfo = getSettingsTableEntries(extension);
+  return [{
+    type: Div$1,
+    className: FeatureContent,
+    childCount: 2
+  }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
+};
+
+const getFeatureThemesVirtualDom = themesHtml => {
+  const markdownDom = getMarkdownVirtualDom(themesHtml);
+  const childCount = getVirtualDomChildCount(markdownDom);
+  const heading = theme();
+  return [{
+    type: Div$1,
+    className: FeatureContent,
+    childCount: 2
+  }, ...getFeatureContentHeadingVirtualDom(heading), {
+    type: Div$1,
+    className: 'DefaultMarkdown',
+    childCount
+  }, ...markdownDom];
+};
+
+const heading$1 = {
+  type: H2$1,
+  className: DefinitionListItemHeading,
+  childCount: 1
+};
+const pre = {
+  type: Pre$1,
+  className: DefinitionListItemValue,
+  childCount: 1
+};
+const item = {
+  type: Div$1,
+  className: DefinitionListItem,
+  childCount: 2
+};
+
+// TODO move json stringify to view model
+const getWebViewVirtualDom = webView => {
+  const {
+    id: id$1,
+    selector: selector$1,
+    contentSecurityPolicy: contentSecurityPolicy$1,
+    elements: elements$1
+  } = webView;
+  const textId = id();
+  const textSelector = selector();
+  const textContentSecurityPolicy = contentSecurityPolicy();
+  const textElements = elements();
+  return [{
+    type: Div$1,
+    className: FeatureWebView,
+    childCount: 5
+  }, item, heading$1, text(textId), pre, text(id$1), item, heading$1, text(textSelector), pre, text(JSON.stringify(selector$1)), item, heading$1, text(textContentSecurityPolicy), pre, text(JSON.stringify(contentSecurityPolicy$1)), item, heading$1, text(textElements), pre, text(JSON.stringify(elements$1, null, 2))];
+};
+
+const getFeatureWebViewsVirtualDom = extension => {
+  const webViews$1 = extension.webViews || [];
+  const heading = webViews();
+  return [{
+    type: Div$1,
+    className: FeatureContent,
+    childCount: 2
+  }, ...getFeatureContentHeadingVirtualDom(heading), {
+    type: Div$1,
+    childCount: webViews$1.length
+  }, ...webViews$1.flatMap(getWebViewVirtualDom)];
+};
+
+const Changelog = 'Changelog';
+const Commands = 'Commands';
+const Details = 'Details';
+const Features = 'Features';
+const JsonValidation = 'JsonValidation';
+const ProgrammingLanguages = 'ProgrammingLanguages';
+const Settings = 'Settings';
+const WebViews = 'WebViews';
+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);
+    case WebViews:
+      return getFeatureWebViewsVirtualDom(extension);
+    default:
+      return getFeatureNotImplementedVirtualDom();
+  }
 };
 
 const getFeatureListItemVirtualDom = feature => {
@@ -1750,25 +2165,14 @@ const getFeatureListVirtualDom = features => {
   }, ...features.flatMap(getFeatureListItemVirtualDom)];
 };
 
-const getFeatureThemesVirtualDom = themesHtml => {
-  const markdownDom = getMarkdownVirtualDom(themesHtml);
-  const childCount = getVirtualDomChildCount(markdownDom);
-  const heading = 'Themes';
-  return [{
-    type: Div$1,
-    className: 'FeatureTheme',
-    childCount: 2
-  }, {
-    type: H1$1,
-    childCount: 1
-  }, text(heading), {
-    type: Div$1,
-    className: 'DefaultMarkdown',
-    childCount
-  }, ...markdownDom];
-};
-
-const getFeaturesVirtualDom = (features, themesHtml) => {
+const getFeaturesVirtualDom = (features, themesHtml, selectedFeature, extension) => {
+  if (features.length === 0) {
+    return [{
+      type: Div$1,
+      className: Features$1,
+      childCount: 3
+    }, text('None')];
+  }
   return [{
     type: Div$1,
     className: Features$1,
@@ -1777,24 +2181,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, extensionId, extensionVersion) => {
+const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width) => {
   switch (selectedTab) {
     case Details:
-      return getDetailsVirtualDom(sanitizedReadmeHtml, displaySize, extensionId, extensionVersion);
+      return getDetailsVirtualDom(sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width);
     case Features:
-      return getFeaturesVirtualDom(features, themesHtml);
+      return getFeaturesVirtualDom(features, themesHtml, selectedFeature, extension);
     case Changelog:
       return getChangelogVirtualDom();
     default:
@@ -1802,6 +2197,24 @@ const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, themesHtml, se
   }
 };
 
+const getButtonVirtualDom = (message, onClick) => {
+  return [{
+    type: Button,
+    className: Button$1 + ' ' + ButtonPrimary,
+    onClick,
+    childCount: 1
+  }, text(message)];
+};
+
+const getExtensionDetailHeaderActionsVirtualDom = () => {
+  const dom = [{
+    type: Div$1,
+    className: ExtensionDetailHeaderActions,
+    childCount: 2
+  }, ...getButtonVirtualDom('Disable', HandleClickDisable), ...getButtonVirtualDom('Uninstall', HandleClickUninstall)];
+  return dom;
+};
+
 const getExtensionDetailHeaderVirtualDom = extensionDetail => {
   const {
     name,
@@ -1822,7 +2235,7 @@ const getExtensionDetailHeaderVirtualDom = extensionDetail => {
   }, {
     type: Div$1,
     className: ExtensionDetailHeaderDetails,
-    childCount: 2
+    childCount: 3
   }, {
     type: Div$1,
     className: ExtensionDetailName,
@@ -1831,32 +2244,49 @@ const getExtensionDetailHeaderVirtualDom = extensionDetail => {
     type: Div$1,
     className: ExtensionDetailDescription,
     childCount: 1
-  }, text(description)];
+  }, text(description), ...getExtensionDetailHeaderActionsVirtualDom()];
   return dom;
 };
 
-const getFeatures = () => {
-  const features = [{
-    id: Theme,
-    label: 'Theme',
-    selected: true
-  }, {
-    id: Commands,
-    label: 'Commands',
-    selected: false
-  }, {
-    id: JsonValidation,
-    label: 'Json Validation',
-    selected: false
-  }, {
-    id: ProgrammingLanguages,
-    label: 'Programming Languages',
-    selected: false
-  }, {
-    id: Settings,
-    label: 'Settings',
-    selected: false
+const hasThemes = extension => {
+  return extension && (extension.colorThemes || extension.iconThemes || extension.productIconThemes);
+};
+const hasCommands = extension => {
+  return extension && extension.commands;
+};
+const hasJsonValidation = extension => {
+  return extension && extension.jsonValidation;
+};
+const hasProgrammingLanguages = extension => {
+  return extension && extension.programmingLanguages;
+};
+const hasSettings = extension => {
+  return extension && extension.settings;
+};
+const hasWebViews = extension => {
+  return extension && extension.webViews;
+};
+const ifElseFeature = (id, label, isEnabled, selectedFeature, extension) => {
+  if (!isEnabled(extension)) {
+    return [];
+  }
+  return [{
+    id,
+    label,
+    selected: selectedFeature === id
   }];
+};
+const getFeatures = (selectedFeature, extension) => {
+  if (!selectedFeature) {
+    selectedFeature = Theme;
+  }
+  const textTheme = theme();
+  const textCommands = commands();
+  const textJsonValidation = jsonValidation();
+  const programmingLanguages$1 = programmingLanguages();
+  const settings$1 = settings();
+  const webViews$1 = webViews();
+  const features = [...ifElseFeature(Theme, textTheme, hasThemes, selectedFeature, extension), ...ifElseFeature(Commands, textCommands, hasCommands, selectedFeature, extension), ...ifElseFeature(JsonValidation, textJsonValidation, hasJsonValidation, selectedFeature, extension), ...ifElseFeature(ProgrammingLanguages, programmingLanguages$1, hasProgrammingLanguages, selectedFeature, extension), ...ifElseFeature(Settings, settings$1, hasSettings, selectedFeature, extension), ...ifElseFeature(WebViews, webViews$1, hasWebViews, selectedFeature, extension)];
   return features;
 };
 
@@ -1917,50 +2347,64 @@ const getTabsVirtualDom = tabs => {
   }, ...tabs.flatMap(getTabVirtualDom)];
 };
 
+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 getClassNames = size => {
+  switch (size) {
+    case Small:
+      return Small$1;
+    case Normal:
+      return Normal$1;
+    case Large:
+      return Large$1;
+    default:
+      return '';
+  }
+};
+
 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 extension = newState?.extension || {};
+  const features = getFeatures(selectedFeature, extension);
   const size = newState.folderSize || 0;
   const extensionId = newState?.extension?.id || 'n/a';
   const extensionVersion = newState?.extension?.version || 'n/a';
   const displaySize = getDisplaySize(size);
+  const width = newState?.width || 500;
   const tabs = getTabs(selectedTab);
+  const sizeValue = getViewletSize(newState?.width || 0);
+  const sizeClass = getClassNames(sizeValue);
   const dom = [{
     type: Div$1,
-    className: mergeClassNames(Viewlet, ExtensionDetail),
+    className: mergeClassNames(Viewlet, ExtensionDetail, sizeClass),
     childCount: 3
-  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion)];
+  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width)];
   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 getExtensionDetailVirtualDom2 = uid => {
+  const {
+    newState
+  } = get$1(uid);
+  return getExtensionDetailVirtualDom(newState, newState.sanitizedReadmeHtml, newState.selectedTab, newState);
 };
 
 const None = 0;
@@ -2006,7 +2450,14 @@ const getLinkMenuEntries = props => {
 
 const getMenuEntries = props => [...getLinkMenuEntries(props), ...getImageMenuEntries(props), getCopyMenuEntry()];
 
+const handleClickDisable = async state => {
+  return state;
+};
+
 const selectFeature = async (state, name) => {
+  if (!name) {
+    return state;
+  }
   const {
     features
   } = state;
@@ -2056,6 +2507,10 @@ const handleClickSize = async state => {
   return state;
 };
 
+const handleClickUninstall = async state => {
+  return state;
+};
+
 const assetDir = '';
 
 const ExtensionDefaultIcon = `${assetDir}/icons/extensionDefaultIcon.png`;
@@ -4626,6 +5081,7 @@ const selectTab$1 = async state => {
     iconThemes,
     productIconThemes
   } = extension;
+  // TODO do this depending on featured tab content
   const markdown = getThemeMarkdown(colorThemes || [], iconThemes || [], productIconThemes || []);
   const rendered = await renderMarkdown(markdown, {
     baseUrl
@@ -4716,7 +5172,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) {
@@ -4726,6 +5183,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;
@@ -4749,25 +5217,18 @@ const getFolderSize = async uri => {
   }
 };
 
-const getSavedSelectedTab = savedState => {
-  if (savedState && typeof savedState === 'object' && 'selectedTab' in savedState && typeof savedState.selectedTab === 'string') {
-    return savedState.selectedTab;
+const getSavedSelectedFeature = savedState => {
+  if (savedState && typeof savedState === 'object' && 'selectedFeature' in savedState && typeof savedState.selectedFeature === 'string') {
+    return savedState.selectedFeature;
   }
   return Details;
 };
 
-const Small = 1;
-const Normal = 2;
-const Large = 3;
-
-const getViewletSize = width => {
-  if (width < 180) {
-    return Small;
-  }
-  if (width < 768) {
-    return Normal;
+const getSavedSelectedTab = savedState => {
+  if (savedState && typeof savedState === 'object' && 'selectedTab' in savedState && typeof savedState.selectedTab === 'string') {
+    return savedState.selectedTab;
   }
-  return Large;
+  return Details;
 };
 
 const readFile = async uri => {
@@ -4817,7 +5278,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, extension);
   const folderSize = await getFolderSize(extension.uri);
   const entries = [{
     key: 'Identifier',
@@ -4860,7 +5322,7 @@ const loadContent = async (state, platform, savedState) => {
     iconSrc,
     name,
     description,
-    size,
+    sizeOnDisk: size,
     entries,
     secondEntries,
     categories,
@@ -4872,12 +5334,24 @@ const loadContent = async (state, platform, savedState) => {
   };
 };
 
-const saveState = state => {
+const resize = (state, dimensions) => {
+  return {
+    ...state,
+    ...dimensions
+  };
+};
+
+const saveState = uid => {
   const {
-    selectedTab
-  } = state;
+    newState
+  } = get$1(uid);
+  const {
+    selectedTab,
+    selectedFeature
+  } = newState;
   return {
-    selectedTab
+    selectedTab,
+    selectedFeature
   };
 };
 
@@ -4885,19 +5359,40 @@ const terminate = () => {
   globalThis.close();
 };
 
+const wrapCommand = fn => {
+  const wrapped = async (uid, ...args) => {
+    if (typeof uid === 'number') {
+      const {
+        newState
+      } = get$1(uid);
+      const newerState = await fn(newState, ...args);
+      set$1(uid, newState, newerState);
+    } else {
+      // deprecated
+      const newerState = await fn(uid, ...args);
+      return newerState;
+    }
+  };
+  return wrapped;
+};
+
 const commandMap = {
   'ExtensionDetail.create': create,
   'ExtensionDetail.getMenuEntries': getMenuEntries,
-  'ExtensionDetail.getVirtualDom': getExtensionDetailVirtualDom,
-  'ExtensionDetail.handleClickSize': handleClickSize,
-  'ExtensionDetail.handleFeaturesClick': handleClickFeatures,
-  'ExtensionDetail.handleIconError': handleIconError,
-  'ExtensionDetail.handleTabsClick': handleTabsClick,
-  'ExtensionDetail.loadContent': loadContent,
+  'ExtensionDetail.getVirtualDom2': getExtensionDetailVirtualDom2,
+  'ExtensionDetail.handleClickDisable': wrapCommand(handleClickDisable),
+  'ExtensionDetail.handleClickSize': wrapCommand(handleClickSize),
+  'ExtensionDetail.handleClickUninstall': wrapCommand(handleClickUninstall),
+  'ExtensionDetail.handleFeaturesClick': wrapCommand(handleClickFeatures),
+  'ExtensionDetail.handleIconError': wrapCommand(handleIconError),
+  'ExtensionDetail.handleTabsClick': wrapCommand(handleTabsClick),
+  'ExtensionDetail.loadContent': wrapCommand(loadContent),
+  'ExtensionDetail.resize': resize,
   'ExtensionDetail.saveState': saveState,
-  'ExtensionDetail.selectTab': selectTab,
+  'ExtensionDetail.selectTab': wrapCommand(selectTab),
   'ExtensionDetail.terminate': terminate,
   // deprecated
+  'ExtensionDetail.getVirtualDom': wrapCommand(getExtensionDetailVirtualDom),
   'HandleIconError.handleIconError': handleIconError,
   'RenderMarkdown.renderMarkdown': renderMarkdown
 };