@lvce-editor/static-server 0.45.0 → 0.45.2

package/static/{4e323a6 → 4ff4cba}/packages/extension-detail-view-worker/dist/extensionDetailViewWorkerMain.js

@@ -430,10 +430,10 @@ const create$4 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set$1 = (id, fn) => {
+const set$2 = (id, fn) => {
   callbacks[id] = fn;
 };
-const get$1 = id => {
+const get$2 = id => {
   return callbacks[id];
 };
 const remove = id => {
@@ -449,13 +449,13 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set$1(id, resolve);
+  set$2(id, resolve);
   return {
     id,
     promise
   };
 };
-const create$2 = (method, params) => {
+const create$2$1 = (method, params) => {
   const {
     id,
     promise
@@ -606,7 +606,7 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$1(id);
+  const fn = get$2(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -645,7 +645,7 @@ const getErrorProperty = (error, prettyError) => {
     }
   };
 };
-const create$1 = (message, error) => {
+const create$1$1 = (message, error) => {
   return {
     jsonrpc: Two,
     id: message.id,
@@ -656,7 +656,7 @@ const getErrorResponse = (message, error, preparePrettyError, logError) => {
   const prettyError = preparePrettyError(error);
   logError(error, prettyError);
   const errorProperty = getErrorProperty(error, prettyError);
-  return create$1(message, errorProperty);
+  return create$1$1(message, errorProperty);
 };
 const create$5 = (message, result) => {
   return {
@@ -747,7 +747,7 @@ const invokeHelper = async (ipc, method, params, useSendAndTransfer) => {
   const {
     message,
     promise
-  } = create$2(method, params);
+  } = create$2$1(method, params);
   if (useSendAndTransfer && ipc.sendAndTransfer) {
     ipc.sendAndTransfer(message);
   } else {
@@ -831,7 +831,7 @@ const listen$1 = async (module, options) => {
   const ipc = module.wrap(rawIpc);
   return ipc;
 };
-const create = async ({
+const create$2 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -843,23 +843,154 @@ const create = async ({
 };
 const WebWorkerRpcClient = {
   __proto__: null,
-  create
+  create: create$2
 };
 
+const create$1 = () => {
+  const states = Object.create(null);
+  return {
+    get(uid) {
+      return states[uid];
+    },
+    set(uid, oldState, newState) {
+      states[uid] = {
+        oldState,
+        newState
+      };
+    }
+  };
+};
+
+const {
+  get: get$1,
+  set: set$1
+} = create$1();
+
+const create = (uid, uri, width, height, platform) => {
+  const state = {
+    description: '',
+    iconSrc: '',
+    selectedFeature: '',
+    name: '',
+    sanitizedReadmeHtml: '',
+    selectedTab: '',
+    size: 0,
+    width,
+    uri,
+    entries: [],
+    secondEntries: [],
+    categories: [],
+    resources: [],
+    selectedFeatureMarkdownDom: '',
+    extension: {},
+    baseUrl: '',
+    features: [],
+    folderSize: 0
+  };
+  set$1(uid, state, state);
+};
+
+const AdditionalDetails = 'AdditionalDetails';
+const AdditionalDetailsEntry = 'AdditionalDetailsEntry';
+const AdditionalDetailsTitle = 'AdditionalDetailsTitle';
+const Aside$2 = 'Aside';
+const Categories = 'Categories';
+const Category = 'Category';
+const Changelog$1 = 'Changelog';
 const ExtensionDetail = 'ExtensionDetail';
 const ExtensionDetailDescription = 'ExtensionDetailDescription';
 const ExtensionDetailHeader = 'ExtensionDetailHeader';
 const ExtensionDetailHeaderDetails = 'ExtensionDetailHeaderDetails';
-const Changelog$1 = 'Changelog';
-const Features$1 = 'Features';
 const ExtensionDetailIcon = 'ExtensionDetailIcon';
 const ExtensionDetailName = 'ExtensionDetailName';
+const ExtensionDetailPanel = 'ExtensionDetailPanel';
 const ExtensionDetailTab = 'ExtensionDetailTab';
 const ExtensionDetailTabs = 'ExtensionDetailTabs';
 const ExtensionDetailTabSelected = 'ExtensionDetailTabSelected';
+const Feature = 'Feature';
+const Features$1 = 'Features';
+const FeaturesList = 'FeaturesList';
 const Markdown = 'Markdown';
+const MoreInfo = 'MoreInfo';
+const MoreInfoEntry = 'MoreInfoEntry';
+const MoreInfoEntryKey = 'MoreInfoEntryKey';
+const MoreInfoEntryValue = 'MoreInfoEntryValue';
+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;
@@ -914,10 +1045,167 @@ const getChangelogVirtualDom = () => {
 const Document = 'document';
 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,
+    className: AdditionalDetailsEntry,
+    childCount: 2
+  }, {
+    type: Div$1,
+    className: AdditionalDetailsTitle,
+    childCount: 1
+  }, text(heading), ...renderer(items)];
+};
+
+const getCategoryVirtualDom = category => {
+  const {
+    label
+  } = category;
+  return [{
+    type: Div$1,
+    className: Category,
+    childCount: 1
+  }, text(label)];
+};
+
+const getCategoriesDom = categories => {
+  return [{
+    type: Div$1,
+    className: Categories,
+    childCount: categories.length
+  }, ...categories.flatMap(getCategoryVirtualDom)];
+};
+
+const getMoreInfoEntryKeyVirtualDom = item => {
+  const {
+    key
+  } = item;
+  return [{
+    type: Div$1,
+    className: MoreInfoEntryKey,
+    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,
+    className: MoreInfo,
+    childCount: items.length
+  }, ...items.flatMap(getMoreInfoEntryVirtualDom)];
+};
+
+const getResourceVirtualDom = resource => {
+  const {
+    label
+  } = resource;
+  return [{
+    // TODO use link with url
+    type: Div$1,
+    className: Resource,
+    childCount: 1
+  }, text(label)];
+};
+
+const getResourcesVirtualDom = resources => {
+  return [{
+    type: Div$1,
+    className: Resources,
+    childCount: resources.length
+  }, ...resources.flatMap(getResourceVirtualDom)];
+};
+
+const getAdditionalDetailsVirtualDom = (firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources) => {
+  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';
@@ -1367,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 = [];
@@ -1380,38 +1679,122 @@ 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 = getInstallationEntries(displaySize, extensionId, extensionVersion);
+  const secondHeading = 'Marketplace';
+  const secondEntries = getMarketplaceEntries();
+  const thirdHeading = 'Categories';
+  const categories = [{
+    id: 'themes',
+    label: 'Themes'
+  }];
+  const fourthHeading = 'Resources';
+  const resources = [{
+    label: 'Marketplace',
+    url: '#'
+  }, {
+    label: 'Issues',
+    url: '#'
+  }, {
+    label: 'Repository',
+    url: '#'
+  }, {
+    label: 'License',
+    url: '#'
+  }];
   const dom = [{
+    type: Div$1,
+    className: ExtensionDetailPanel,
+    childCount: 2,
+    role: Panel
+  }, {
     type: Div$1,
     className: Markdown,
     role: Document,
     onContextMenu: HandleReadmeContextMenu,
     childCount
-  }, ...markdownDom];
+  }, ...markdownDom, {
+    type: Div$1,
+    className: Aside$2,
+    childCount: 1
+  }, ...getAdditionalDetailsVirtualDom(firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources)];
   return dom;
 };
 
-const getFeaturesVirtualDom = () => {
-  // TODO set tabpanel role
+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: Features$1,
+    className: FeaturesList,
+    childCount: features.length,
+    onClick: HandleFeaturesClick
+  }, ...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('Not Implemented')];
+  }, text(heading), {
+    type: Div$1,
+    className: 'DefaultMarkdown',
+    childCount
+  }, ...markdownDom];
 };
 
+const getFeaturesVirtualDom = (features, themesHtml) => {
+  return [{
+    type: Div$1,
+    className: Features$1,
+    childCount: 3
+  }, ...getFeatureListVirtualDom(features), {
+    type: Div$1,
+    className: 'Sash SashVertical',
+    childCount: 0
+  }, ...getFeatureThemesVirtualDom(themesHtml)];
+};
+
+const Changelog = 'Changelog';
+const Commands = 'Commands';
 const Details = 'Details';
 const Features = 'Features';
-const Changelog = 'Changelog';
+const JsonValidation = 'JsonValidation';
+const ProgrammingLanguages = 'ProgrammingLanguages';
+const Settings = 'Settings';
+const Theme = 'Theme';
 
-const getExtensionDetailContentVirtualDom = (sanitizedReadmeHtml, selectedTab) => {
+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();
+      return getFeaturesVirtualDom(features, themesHtml);
     case Changelog:
       return getChangelogVirtualDom();
     default:
@@ -1452,6 +1835,31 @@ const getExtensionDetailHeaderVirtualDom = extensionDetail => {
   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
+  }];
+  return features;
+};
+
 const getTabs = selectedTab => {
   const tabs = [{
     label: 'Details',
@@ -1477,20 +1885,24 @@ const mergeClassNames = (...classNames) => {
   return joinBySpace(...classNames.filter(Boolean));
 };
 
+const selectedClassName = mergeClassNames(ExtensionDetailTab, ExtensionDetailTabSelected);
+const defaultClassName = ExtensionDetailTab;
 const getTabVirtualDom = tab => {
   const {
     label,
     selected,
     name
   } = tab;
-  const className = selected ? mergeClassNames(ExtensionDetailTab, ExtensionDetailTabSelected) : ExtensionDetailTab;
+  const className = selected ? selectedClassName : defaultClassName;
+  const ariaSelected = selected ? 'true' : 'false';
   return [{
     type: Button,
     role: Tab,
     name,
     className,
     childCount: 1,
-    tabIndex: -1
+    tabIndex: -1,
+    ariaSelected
   }, text(label)];
 };
 
@@ -1505,16 +1917,19 @@ const getTabsVirtualDom = tabs => {
   }, ...tabs.flatMap(getTabVirtualDom)];
 };
 
-const getExtensionDetailVirtualDom = (extensionDetail, sanitizedReadmeHtml, selectedTab) => {
-  console.log({
-    selectedTab
-  });
+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, selectedTab)];
+  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion)];
   return dom;
 };
 
@@ -1591,84 +2006,31 @@ const getLinkMenuEntries = props => {
 
 const getMenuEntries = props => [...getLinkMenuEntries(props), ...getImageMenuEntries(props), getCopyMenuEntry()];
 
-const assetDir = '';
-
-const ExtensionDefaultIcon = `${assetDir}/icons/extensionDefaultIcon.png`;
-const ExtensionLanguageBasics = `${assetDir}/icons/language-icon.svg`;
-const ExtensionTheme = `${assetDir}/icons/theme-icon.png`;
-
-const handleIconError = state => {
+const selectFeature = async (state, name) => {
   const {
-    iconSrc
+    features
   } = state;
-  if (iconSrc === ExtensionDefaultIcon) {
-    return state;
-  }
-  return {
-    ...state,
-    iconSrc: ExtensionDefaultIcon
-  };
-};
-
-const handleTabsClick = (state, name) => {
-  // TODO load the tabs content if needed
-  console.log({
-    name
+  const newFeatures = features.map(feature => {
+    if (feature.id === name) {
+      return {
+        ...feature,
+        selected: true
+      };
+    }
+    return {
+      ...feature,
+      selected: false
+    };
   });
   return {
     ...state,
-    selectedTab: name
+    selectedFeature: name,
+    features: newFeatures
   };
 };
 
-const Web = 1;
-const Electron = 2;
-const Remote = 3;
-
-const isLanguageBasicsExtension = extension => {
-  return extension.name && extension.name.startsWith('Language Basics');
-};
-const isThemeExtension = extension => {
-  return extension.name && extension.name.endsWith(' Theme');
-};
-const getIcon = (extension, platform) => {
-  if (!extension) {
-    return ExtensionDefaultIcon;
-  }
-  if (!extension.path || !extension.icon) {
-    if (isLanguageBasicsExtension(extension)) {
-      return ExtensionLanguageBasics;
-    }
-    if (isThemeExtension(extension)) {
-      return ExtensionTheme;
-    }
-    return ExtensionDefaultIcon;
-  }
-  if (platform === Remote || platform === Electron) {
-    if (extension.builtin) {
-      return `${assetDir}/extensions/${extension.id}/${extension.icon}`;
-    }
-    return `/remote/${extension.path}/${extension.icon}`; // TODO support windows paths
-  }
-  return '';
-};
-
-// TODO handle case when extension is of type number|array|null|string
-
-const getName = extension => {
-  if (extension && extension.name) {
-    return extension.name;
-  }
-  if (extension && extension.id) {
-    return extension.id;
-  }
-  return 'n/a';
-};
-const getDescription = extension => {
-  if (!extension || !extension.description) {
-    return 'n/a';
-  }
-  return extension.description;
+const handleClickFeatures = async (state, name) => {
+  return selectFeature(state, name);
 };
 
 const RendererWorker = 1;
@@ -1686,77 +2048,83 @@ const invoke = (method, ...params) => {
   return rpc.invoke(method, ...params);
 };
 
-const getAllExtensions = async platform => {
-  if (platform === Web) {
-    return [];
-  }
-  return invoke('ExtensionManagement.getAllExtensions');
-};
-const getExtension = async (id, platform) => {
-  const allExtensions = await getAllExtensions(platform);
-  for (const extension of allExtensions) {
-    if (extension.id === id) {
-      return extension;
-    }
-  }
-  return undefined;
-};
-
-const getRemoteSrc = uri => {
-  const src = `/remote${uri}`;
-  return src;
+const handleClickSize = async state => {
+  const {
+    uri
+  } = state.extension;
+  await invoke('OpenNativeFolder.openNativeFolder', uri);
+  return state;
 };
 
-const getBaseUrl = (extensionPath, platform) => {
-  switch (platform) {
-    case Remote:
-    case Electron:
-      return getRemoteSrc(extensionPath + '/');
-    default:
-      return extensionPath;
-  }
-};
+const assetDir = '';
 
-const Small = 1;
-const Normal = 2;
-const Large = 3;
+const ExtensionDefaultIcon = `${assetDir}/icons/extensionDefaultIcon.png`;
+const ExtensionLanguageBasics = `${assetDir}/icons/language-icon.svg`;
+const ExtensionTheme = `${assetDir}/icons/theme-icon.png`;
 
-const getViewletSize = width => {
-  if (width < 180) {
-    return Small;
-  }
-  if (width < 768) {
-    return Normal;
+const handleIconError = state => {
+  const {
+    iconSrc
+  } = state;
+  if (iconSrc === ExtensionDefaultIcon) {
+    return state;
   }
-  return Large;
+  return {
+    ...state,
+    iconSrc: ExtensionDefaultIcon
+  };
 };
 
-const readFile = async uri => {
-  return invoke('FileSystem.readFile', uri);
+const selectTabChangelog = async state => {
+  return {
+    ...state,
+    selectedTab: Changelog
+  };
 };
 
-const ENOENT = 'ENOENT';
-
-const isEnoentError = error => {
-  return error && error.code === ENOENT;
+const selectTabDefault = async state => {
+  return state;
 };
 
-const join = (pathSeparator, ...parts) => {
-  return parts.join(pathSeparator);
+const selectTabDetails = async state => {
+  // TODO load readmo markdown here
+  return {
+    ...state,
+    selectedTab: Details
+  };
 };
 
-const loadReadmeContent = async path => {
-  try {
-    const readmeUrl = join('/', path, 'README.md');
-    const readmeContent = await readFile(readmeUrl);
-    return readmeContent;
-  } catch (error) {
-    if (isEnoentError(error)) {
-      return '';
+const getThemeItemMarkdown = (heading, items) => {
+  let markdown = '';
+  if (items.length > 0) {
+    markdown += `### ${heading}`;
+    markdown += '\n\n';
+    for (const item of items) {
+      markdown += `- ${item.label}`;
+      markdown += '\n';
     }
-    console.error(error);
-    return `${error}`;
   }
+  return markdown;
+};
+
+const getColorThemeMarkdown = themes => {
+  const heading = 'Color Themes';
+  return getThemeItemMarkdown(heading, themes);
+};
+const getIconThemeMarkdown = iconThemes => {
+  const heading = 'File Icon Themes';
+  return getThemeItemMarkdown(heading, iconThemes);
+};
+const getProductIconThemeMarkdown = iconThemes => {
+  const heading = 'Product Icon Themes';
+  return getThemeItemMarkdown(heading, iconThemes);
+};
+const getThemeMarkdown = (themes, iconThemes, productIconThemes) => {
+  let markdown = '';
+  markdown += getColorThemeMarkdown(themes);
+  markdown += getIconThemeMarkdown(iconThemes);
+  markdown += getProductIconThemeMarkdown(productIconThemes);
+  return markdown;
 };
 
 /**
@@ -4248,7 +4616,189 @@ const renderMarkdown = async (markdown, options = {}) => {
   return html;
 };
 
-const loadContent = async (state, platform) => {
+const selectTab$1 = async state => {
+  const {
+    extension,
+    baseUrl
+  } = state;
+  const {
+    colorThemes,
+    iconThemes,
+    productIconThemes
+  } = extension;
+  const markdown = getThemeMarkdown(colorThemes || [], iconThemes || [], productIconThemes || []);
+  const rendered = await renderMarkdown(markdown, {
+    baseUrl
+  });
+  return {
+    ...state,
+    selectedTab: Features,
+    selectedFeatureMarkdownDom: rendered
+  };
+};
+
+const getSelectTabHandler = selectedTab => {
+  switch (selectedTab) {
+    case Details:
+      return selectTabDetails;
+    case Features:
+      return selectTab$1;
+    case Changelog:
+      return selectTabChangelog;
+    default:
+      return selectTabDefault;
+  }
+};
+
+const selectTab = (state, name) => {
+  const fn = getSelectTabHandler(name);
+  return fn(state);
+};
+
+const handleTabsClick = (state, name) => {
+  return selectTab(state, name);
+};
+
+const isLanguageBasicsExtension = extension => {
+  return extension.name && extension.name.startsWith('Language Basics');
+};
+
+const isThemeExtension = extension => {
+  return extension.name && extension.name.endsWith(' Theme');
+};
+
+const Web = 1;
+const Electron = 2;
+const Remote = 3;
+
+const getIcon = (extension, platform) => {
+  if (!extension) {
+    return ExtensionDefaultIcon;
+  }
+  if (!extension.path || !extension.icon) {
+    if (isLanguageBasicsExtension(extension)) {
+      return ExtensionLanguageBasics;
+    }
+    if (isThemeExtension(extension)) {
+      return ExtensionTheme;
+    }
+    return ExtensionDefaultIcon;
+  }
+  if (platform === Remote || platform === Electron) {
+    if (extension.builtin) {
+      return `${assetDir}/extensions/${extension.id}/${extension.icon}`;
+    }
+    return `/remote/${extension.path}/${extension.icon}`; // TODO support windows paths
+  }
+  return '';
+};
+
+const getDescription = extension => {
+  if (!extension || !extension.description) {
+    return 'n/a';
+  }
+  return extension.description;
+};
+
+const getName = extension => {
+  if (extension && extension.name) {
+    return extension.name;
+  }
+  if (extension && extension.id) {
+    return extension.id;
+  }
+  return 'n/a';
+};
+
+const getAllExtensions = async platform => {
+  if (platform === Web) {
+    return [];
+  }
+  return invoke('ExtensionManagement.getAllExtensions');
+};
+const getExtension = async (id, platform) => {
+  const allExtensions = await getAllExtensions(platform);
+  for (const extension of allExtensions) {
+    if (extension.id === id) {
+      return extension;
+    }
+  }
+  return undefined;
+};
+
+const getRemoteSrc = uri => {
+  const src = `/remote${uri}`;
+  return src;
+};
+
+const getBaseUrl = (extensionPath, platform) => {
+  switch (platform) {
+    case Remote:
+    case Electron:
+      return getRemoteSrc(extensionPath + '/');
+    default:
+      return extensionPath;
+  }
+};
+
+const getFolderSize = async uri => {
+  try {
+    return await invoke('FileSystem.getFolderSize', uri);
+  } catch {
+    return 0;
+  }
+};
+
+const getSavedSelectedTab = savedState => {
+  if (savedState && typeof savedState === 'object' && 'selectedTab' in savedState && typeof savedState.selectedTab === 'string') {
+    return savedState.selectedTab;
+  }
+  return Details;
+};
+
+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 readFile = async uri => {
+  return invoke('FileSystem.readFile', uri);
+};
+
+const ENOENT = 'ENOENT';
+
+const isEnoentError = error => {
+  return error && error.code === ENOENT;
+};
+
+const join = (pathSeparator, ...parts) => {
+  return parts.join(pathSeparator);
+};
+
+const loadReadmeContent = async path => {
+  try {
+    const readmeUrl = join('/', path, 'README.md');
+    const readmeContent = await readFile(readmeUrl);
+    return readmeContent;
+  } catch (error) {
+    if (isEnoentError(error)) {
+      return '';
+    }
+    console.error(error);
+    return `${error}`;
+  }
+};
+
+const loadContent = async (state, platform, savedState) => {
   const {
     uri,
     width
@@ -4256,7 +4806,6 @@ const loadContent = async (state, platform) => {
   const id = uri.slice('extension-detail://'.length);
   const extension = await getExtension(id, platform);
   const readmeContent = await loadReadmeContent(extension.path);
-  // @ts-ignore
   const baseUrl = getBaseUrl(extension.path, platform);
   const readmeHtml = await renderMarkdown(readmeContent, {
     baseUrl
@@ -4267,7 +4816,43 @@ const loadContent = async (state, platform) => {
   const description = getDescription(extension);
   const name = getName(extension);
   const size = getViewletSize(width);
-  const selectedTab = Details;
+  const selectedTab = getSavedSelectedTab(savedState);
+  const features = getFeatures();
+  const folderSize = await getFolderSize(extension.uri);
+  const entries = [{
+    key: 'Identifier',
+    value: 'abc'
+  }, {
+    key: 'Version',
+    value: '1.9.5'
+  }, {
+    key: 'Last Updated',
+    value: 'n/a'
+  }];
+  const secondEntries = [{
+    key: 'Published',
+    value: 'n/a'
+  }, {
+    key: 'Last Released',
+    value: 'n/a'
+  }];
+  const categories = [{
+    id: 'themes',
+    label: 'Themes'
+  }];
+  const resources = [{
+    label: 'Marketplace',
+    url: '#'
+  }, {
+    label: 'Issues',
+    url: '#'
+  }, {
+    label: 'Repository',
+    url: '#'
+  }, {
+    label: 'License',
+    url: '#'
+  }];
   return {
     ...state,
     selectedTab,
@@ -4275,7 +4860,24 @@ const loadContent = async (state, platform) => {
     iconSrc,
     name,
     description,
-    size
+    size,
+    entries,
+    secondEntries,
+    categories,
+    resources,
+    extension,
+    baseUrl,
+    features,
+    folderSize
+  };
+};
+
+const saveState = state => {
+  const {
+    selectedTab
+  } = state;
+  return {
+    selectedTab
   };
 };
 
@@ -4284,12 +4886,17 @@ const terminate = () => {
 };
 
 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.saveState': saveState,
+  'ExtensionDetail.selectTab': selectTab,
   'ExtensionDetail.terminate': terminate,
-  'ExtensionDetail.handleTabsClick': handleTabsClick,
-  'ExtensionDetail.handleIconError': handleIconError,
   // deprecated
   'HandleIconError.handleIconError': handleIconError,
   'RenderMarkdown.renderMarkdown': renderMarkdown