@lvce-editor/extension-detail-view 3.25.0 → 3.27.0

package/dist/extensionDetailViewWorkerMain.js

@@ -784,7 +784,7 @@ const send = (transport, method, ...params) => {
   const message = create$4(method, params);
   transport.send(message);
 };
-const invoke$1 = (ipc, method, ...params) => {
+const invoke = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, false);
 };
 const invokeAndTransfer = (ipc, method, ...params) => {
@@ -817,7 +817,7 @@ const createRpc = ipc => {
       send(ipc, method, ...params);
     },
     invoke(method, ...params) {
-      return invoke$1(ipc, method, ...params);
+      return invoke(ipc, method, ...params);
     },
     invokeAndTransfer(method, ...params) {
       return invokeAndTransfer(ipc, method, ...params);
@@ -873,8 +873,6 @@ const WebWorkerRpcClient = {
   create: create$3
 };
 
-const assetDir = '';
-
 const create$2 = () => {
   const states = Object.create(null);
   return {
@@ -933,6 +931,11 @@ const create$2 = () => {
     }
   };
 };
+const terminate = () => {
+  globalThis.close();
+};
+
+const assetDir = '';
 
 const {
   get: get$1,
@@ -962,7 +965,8 @@ const create$1 = (uid, uri, x, y, width, height, platform, assetDir$1) => {
     features: [],
     folderSize: 0,
     assetDir: assetDir$1 || assetDir,
-    platform
+    platform,
+    settingsButtonEnabled: false
   };
   set$1(uid, state, state);
 };
@@ -1002,7 +1006,7 @@ const dispose = uid => {
   dispose$1(uid);
 };
 
-const commandIds = ['getMenuEntries', 'handleClickDisable', 'handleClickSize', 'handleClickUninstall', 'handleFeaturesClick', 'handleIconError', 'handleTabsClick', 'renderEventListeners', 'resize', 'saveState', 'selectTab', 'terminate'];
+const commandIds = ['getMenuEntries', 'handleClickDisable', 'handleClickSettings', 'handleClickSetColorTheme', 'handleClickSize', 'handleClickUninstall', 'handleFeaturesClick', 'handleIconError', 'handleTabsClick', 'renderEventListeners', 'resize', 'saveState', 'selectTab', 'terminate'];
 
 const getCommandIds = () => {
   return commandIds;
@@ -1020,10 +1024,18 @@ const i18nString = (key, placeholders = emptyObject) => {
   return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
+const Installation = 'Installation';
+const Marketplace = 'Marketplace';
+const Categories$1 = 'Categories';
+const Resources$1 = 'Resources';
+const Changelog$2 = 'Changelog';
 const Commands$1 = 'Commands';
 const ContentSecurityPolicy = 'ContentSecurityPolicy';
 const Copy = 'Copy';
+const Details$1 = 'Details';
+const Disable = 'Disable';
 const Elements = 'Elements';
+const Features$2 = 'Features';
 const FileMatch = 'File Match';
 const None$1 = 'None';
 const Id = 'ID';
@@ -1036,13 +1048,39 @@ const SaveImageAs = 'Save Image as';
 const Schema = 'Schema';
 const Selector = 'Selector';
 const Settings$1 = 'Settings';
+const SetColorTheme = 'Set Color Theme';
 const Theme$1 = 'Theme';
+const Uninstall = 'Uninstall';
 const WebViews$1 = 'WebViews';
 const NotImplemented = 'Not Implemented';
 
+const installation = () => {
+  return i18nString(Installation);
+};
+const marketplace = () => {
+  return i18nString(Marketplace);
+};
+const categories = () => {
+  return i18nString(Categories$1);
+};
+const resources = () => {
+  return i18nString(Resources$1);
+};
 const copy = () => {
   return i18nString(Copy);
 };
+const changelog = () => {
+  return i18nString(Changelog$2);
+};
+const details = () => {
+  return i18nString(Details$1);
+};
+const disable = () => {
+  return i18nString(Disable);
+};
+const features = () => {
+  return i18nString(Features$2);
+};
 const none = () => {
   return i18nString(None$1);
 };
@@ -1064,6 +1102,9 @@ const fileMatch = () => {
 const schema = () => {
   return i18nString(Schema);
 };
+const setColorTheme$3 = () => {
+  return i18nString(SetColorTheme);
+};
 const theme = () => {
   return i18nString(Theme$1);
 };
@@ -1097,6 +1138,9 @@ const elements = () => {
 const notImplemented = () => {
   return i18nString(NotImplemented);
 };
+const uninstall = () => {
+  return i18nString(Uninstall);
+};
 
 const None = 0;
 
@@ -1212,6 +1256,10 @@ const RendererWorker$1 = 1;
 const {
   invoke: invoke$3,
   set: set$3} = create(RendererWorker$1);
+const setColorTheme$2 = async id => {
+  // @ts-ignore
+  return invoke$3(/* ColorTheme.setColorTheme */'ColorTheme.setColorTheme', /* colorThemeId */id);
+};
 const readFile$2 = async uri => {
   return invoke$3('FileSystem.readFile', uri);
 };
@@ -1230,6 +1278,10 @@ const getMarkdownDom$1 = async html => {
   // @ts-ignore
   return invoke$3('Markdown.getVirtualDom', html);
 };
+const renderMarkdown$2 = async (markdown, options) => {
+  // @ts-ignore
+  return invoke$3('Markdown.renderMarkdown', markdown, options);
+};
 const openNativeFolder$1 = async uri => {
   // @ts-ignore
   await invoke$3('OpenNativeFolder.openNativeFolder', uri);
@@ -1240,21 +1292,49 @@ const RendererWorker = {
   getExtension: getExtension$3,
   getFolderSize: getFolderSize$2,
   getMarkdownDom: getMarkdownDom$1,
-  invoke: invoke$3,
   openNativeFolder: openNativeFolder$1,
   readFile: readFile$2,
-  set: set$3};
+  renderMarkdown: renderMarkdown$2,
+  set: set$3,
+  setColorTheme: setColorTheme$2};
 
 const {
-  invoke,
-  set,
-  readFile: readFile$1,
   getAllExtensions: getAllExtensions$1,
+  getExtension: getExtension$2,
   getFolderSize: getFolderSize$1,
-  openNativeFolder,
   getMarkdownDom,
-  getExtension: getExtension$2
-} = RendererWorker;
+  openNativeFolder,
+  readFile: readFile$1,
+  renderMarkdown: renderMarkdown$1,
+  set,
+  setColorTheme: setColorTheme$1} = RendererWorker;
+
+const setColorTheme = id => {
+  return setColorTheme$1(id);
+};
+
+const getColorThemeId = extension => {
+  if (extension && Array.isArray(extension.colorThemes) && extension.colorThemes.length > 0) {
+    const colorTheme = extension.colorThemes[0];
+    return colorTheme.id || colorTheme.label;
+  }
+  return undefined;
+};
+const handleClickSetColorTheme = async state => {
+  const {
+    extension
+  } = state;
+  const colorThemeId = getColorThemeId(extension);
+  if (colorThemeId) {
+    await setColorTheme(colorThemeId);
+  }
+  return state;
+};
+
+const handleClickSettings = state => {
+  // TODO: Implement settings functionality
+  return state;
+};
 
 const handleClickSize = async state => {
   const {
@@ -1355,8 +1435,7 @@ const getThemeMarkdown = (themes, iconThemes, productIconThemes) => {
 };
 
 const renderMarkdown = async (markdown, options = {}) => {
-  // @ts-ignore todo
-  const html = await invoke('Markdown.renderMarkdown', markdown, options);
+  const html = await renderMarkdown$1(markdown, options);
   return html;
 };
 
@@ -1404,6 +1483,10 @@ const handleTabsClick = (state, name) => {
   return selectTab(state, name);
 };
 
+const initialize = async () => {
+  // TODO create connection to file system worker
+};
+
 const isLanguageBasicsExtension = extension => {
   return extension.name && extension.name.startsWith('Language Basics');
 };
@@ -1572,14 +1655,6 @@ const getViewletSize = width => {
 };
 
 const readFile = async uri => {
-  if (uri.startsWith('http://') || uri.startsWith('https://')) {
-    const response = await fetch(uri);
-    if (!response.ok) {
-      throw new Error(response.statusText);
-    }
-    const result = await response.text();
-    return result;
-  }
   return readFile$1(uri);
 };
 
@@ -1602,6 +1677,8 @@ const loadReadmeContent = async path => {
     if (isEnoentError(error)) {
       return '';
     }
+    // TODO send message to error worker
+    // @ts-ignore
     console.error(new VError(error, 'Failed to load Readme content'));
     return `${error}`;
   }
@@ -1719,6 +1796,7 @@ const mergeClassNames = (...classNames) => {
 const Button$1 = 1;
 const Div = 4;
 const H1 = 5;
+const Span = 8;
 const Table$1 = 9;
 const TBody = 10;
 const Td = 11;
@@ -1730,15 +1808,18 @@ const Img = 17;
 const H2 = 22;
 const Pre = 51;
 const A = 53;
+const Code$1 = 65;
 const VirtualDomElements = {
   __proto__: null,
   A,
   Button: Button$1,
+  Code: Code$1,
   Div,
   H1,
   H2,
   Img,
   Pre,
+  Span,
   TBody,
   THead,
   Table: Table$1,
@@ -1774,6 +1855,8 @@ const ExtensionDetailHeaderDetails = 'ExtensionDetailHeaderDetails';
 const ExtensionDetailIcon = 'ExtensionDetailIcon';
 const ExtensionDetailName = 'ExtensionDetailName';
 const ExtensionDetailPanel = 'ExtensionDetailPanel';
+const SettingsButton = 'SettingsButton';
+const SettingsIcon = 'SettingsIcon';
 const ExtensionDetailTab = 'ExtensionDetailTab';
 const ExtensionDetailTabs = 'ExtensionDetailTabs';
 const ExtensionDetailTabSelected = 'ExtensionDetailTabSelected';
@@ -1892,6 +1975,37 @@ const getDisplaySize = size => {
   });
 };
 
+const HandleClickDisable = 'handleClickDisable';
+const HandleClickSetColorTheme = 'handleClickSetColorTheme';
+const HandleClickSettings = 'handleClickSettings';
+const HandleClickSize = 'handleClickSize';
+const HandleClickUninstall = 'handleClickUninstall';
+const HandleFeaturesClick = 'handleFeaturesClick';
+const HandleIconError = 'handleIconError';
+const HandleReadmeContextMenu = 'handleReadmeContextMenu';
+const HandleTabsClick = 'handleTabsClick';
+
+const hasColorThemes = extension => {
+  return Boolean(extension && extension.colorThemes && extension.colorThemes.length > 0);
+};
+
+const getExtensionDetailButtons = extension => {
+  const allActions = [{
+    label: setColorTheme$3(),
+    onClick: HandleClickSetColorTheme,
+    enabled: hasColorThemes(extension)
+  }, {
+    label: disable(),
+    onClick: HandleClickDisable,
+    enabled: true
+  }, {
+    label: uninstall(),
+    onClick: HandleClickUninstall,
+    enabled: !extension?.builtin
+  }];
+  return allActions;
+};
+
 const getChangelogVirtualDom = () => {
   const notImplemented$1 = notImplemented();
   // TODO set tabpanel role
@@ -2047,13 +2161,12 @@ const getAdditionalDetailsVirtualDom = (showAdditionalDetails, firstHeading, ent
   }, ...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 HandleIconError = 'handleIconError';
-const HandleReadmeContextMenu = 'handleReadmeContextMenu';
-const HandleTabsClick = 'handleTabsClick';
+const getCategories = () => {
+  return [{
+    id: 'themes',
+    label: 'Themes'
+  }];
+};
 
 const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
   const entries = [{
@@ -2094,18 +2207,8 @@ const getMarketplaceEntries = () => {
   }];
 };
 
-const getDetailsVirtualDom = async (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width) => {
-  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 = [{
+const getResources = () => {
+  return [{
     label: 'Marketplace',
     url: '#'
   }, {
@@ -2118,6 +2221,17 @@ const getDetailsVirtualDom = async (sanitizedReadmeHtml, displaySize, extensionI
     label: 'License',
     url: '#'
   }];
+};
+
+const getDetailsVirtualDom = async (sanitizedReadmeHtml, displaySize, extensionId, extensionVersion, width) => {
+  const firstHeading = installation();
+  const entries = getInstallationEntries(displaySize, extensionId, extensionVersion);
+  const secondHeading = marketplace();
+  const secondEntries = getMarketplaceEntries();
+  const thirdHeading = categories();
+  const categories$1 = getCategories();
+  const fourthHeading = resources();
+  const resources$1 = getResources();
   const showAdditionalDetailsBreakpoint = 600;
   const showAdditionalDetails = width > showAdditionalDetailsBreakpoint;
   const childCount = showAdditionalDetails ? 2 : 1;
@@ -2126,7 +2240,7 @@ const getDetailsVirtualDom = async (sanitizedReadmeHtml, displaySize, extensionI
     className: ExtensionDetailPanel,
     childCount: childCount,
     role: Panel
-  }, ...(await getMarkdownVirtualDom(sanitizedReadmeHtml)), ...getAdditionalDetailsVirtualDom(showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories, fourthHeading, resources)];
+  }, ...(await getMarkdownVirtualDom(sanitizedReadmeHtml)), ...getAdditionalDetailsVirtualDom(showAdditionalDetails, firstHeading, entries, secondHeading, secondEntries, thirdHeading, categories$1, fourthHeading, resources$1)];
   return dom;
 };
 
@@ -2180,8 +2294,7 @@ const getCellCodeVirtualDom = value => {
     className: TableCell,
     childCount: 1
   }, {
-    type: VirtualDomElements.Div,
-    // TODO use code tag
+    type: VirtualDomElements.Code,
     childCount: 1
   }, text(value)];
 };
@@ -2345,11 +2458,11 @@ const getFeatureSettingsVirtualDom = extension => {
   }, ...getFeatureContentHeadingVirtualDom(heading), ...getTableVirtualDom(tableInfo)];
 };
 
-const getVirtualDomChildCount = markdownDom => {
-  const max = markdownDom.length - 1;
+const getVirtualDomChildCount = dom => {
+  const max = dom.length - 1;
   let stack = [];
   for (let i = max; i >= 0; i--) {
-    const element = markdownDom[i];
+    const element = dom[i];
     if (element.childCount > 0) {
       stack = stack.slice(element.childCount);
     }
@@ -2517,6 +2630,14 @@ const getExtensionDetailContentVirtualDom = async (sanitizedReadmeHtml, themesHt
   }
 };
 
+const getExtensionDetailDescriptionVirtualDom = description => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: ExtensionDetailDescription,
+    childCount: 1
+  }, text(description)];
+};
+
 const getButtonVirtualDom = (message, onClick) => {
   return [{
     type: VirtualDomElements.Button,
@@ -2526,21 +2647,51 @@ const getButtonVirtualDom = (message, onClick) => {
   }, text(message)];
 };
 
-const getExtensionDetailHeaderActionsVirtualDom = () => {
+const getSettingsButtonVirtualDom = enabled => {
+  if (!enabled) {
+    return [];
+  }
+  return [{
+    type: VirtualDomElements.Button,
+    className: SettingsButton,
+    onClick: HandleClickSettings,
+    childCount: 1,
+    title: 'Settings'
+  }, {
+    type: VirtualDomElements.Span,
+    className: SettingsIcon,
+    childCount: 0,
+    text: '⚙️'
+  }];
+};
+
+const getExtensionDetailHeaderActionsVirtualDom = (buttonDefs, settingsButtonEnabled) => {
+  const enabledButtons = buttonDefs.filter(btn => btn.enabled);
+  const buttons = enabledButtons.flatMap(btn => getButtonVirtualDom(btn.label, btn.onClick));
+  const settingsButton = getSettingsButtonVirtualDom(settingsButtonEnabled);
   const dom = [{
     type: VirtualDomElements.Div,
     className: ExtensionDetailHeaderActions,
-    childCount: 2
-  }, ...getButtonVirtualDom('Disable', HandleClickDisable), ...getButtonVirtualDom('Uninstall', HandleClickUninstall)];
+    childCount: enabledButtons.length + settingsButton.length
+  }, ...buttons, ...settingsButton];
   return dom;
 };
 
-const getExtensionDetailHeaderVirtualDom = extensionDetail => {
-  const {
-    name,
-    iconSrc,
-    description
-  } = extensionDetail;
+const getNameBadgeVirtualDom = badge => {
+  {
+    return [];
+  }
+};
+
+const getExtensionDetailNameVirtualDom = (name, badge) => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: ExtensionDetailName,
+    childCount: badge ? 2 : 1
+  }, text(name), ...getNameBadgeVirtualDom()];
+};
+
+const getExtensionDetailHeaderVirtualDom = (name, iconSrc, description, badge, buttonDefs, settingsButtonEnabled) => {
   const dom = [{
     type: VirtualDomElements.Div,
     className: ExtensionDetailHeader,
@@ -2556,29 +2707,21 @@ const getExtensionDetailHeaderVirtualDom = extensionDetail => {
     type: VirtualDomElements.Div,
     className: ExtensionDetailHeaderDetails,
     childCount: 3
-  }, {
-    type: VirtualDomElements.Div,
-    className: ExtensionDetailName,
-    childCount: 1
-  }, text(name), {
-    type: VirtualDomElements.Div,
-    className: ExtensionDetailDescription,
-    childCount: 1
-  }, text(description), ...getExtensionDetailHeaderActionsVirtualDom()];
+  }, ...getExtensionDetailNameVirtualDom(name, badge), ...getExtensionDetailDescriptionVirtualDom(description), ...getExtensionDetailHeaderActionsVirtualDom(buttonDefs, settingsButtonEnabled)];
   return dom;
 };
 
 const getTabs = selectedTab => {
   const tabs = [{
-    label: 'Details',
+    label: details(),
     name: Details,
     selected: selectedTab === Details
   }, {
-    label: 'Features',
+    label: features(),
     name: Features$1,
     selected: selectedTab === Features$1
   }, {
-    label: 'Changelog',
+    label: changelog(),
     name: Changelog$1,
     selected: selectedTab === Changelog$1
   }];
@@ -2630,7 +2773,7 @@ const getClassNames = size => {
   }
 };
 
-const getExtensionDetailVirtualDom = async (extensionDetail, sanitizedReadmeHtml, selectedTab, newState) => {
+const getExtensionDetailVirtualDom = async (newState, sanitizedReadmeHtml, selectedTab) => {
   // TODO move this to view model so that rendering occurs like
   // 1. state
   // 2. view model
@@ -2648,16 +2791,26 @@ const getExtensionDetailVirtualDom = async (extensionDetail, sanitizedReadmeHtml
   const tabs = getTabs(selectedTab);
   const sizeValue = getViewletSize(newState?.width || 0);
   const sizeClass = getClassNames(sizeValue);
+  const buttonDefs = getExtensionDetailButtons(extension);
+  const {
+    name,
+    iconSrc,
+    description
+  } = newState;
+  const badge = '';
+  const {
+    settingsButtonEnabled
+  } = newState;
   const dom = [{
     type: VirtualDomElements.Div,
     className: mergeClassNames(Viewlet, ExtensionDetail, sizeClass),
     childCount: 3
-  }, ...getExtensionDetailHeaderVirtualDom(extensionDetail), ...getTabsVirtualDom(tabs), ...(await getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width))];
+  }, ...getExtensionDetailHeaderVirtualDom(name, iconSrc, description, badge, buttonDefs, settingsButtonEnabled), ...getTabsVirtualDom(tabs), ...(await getExtensionDetailContentVirtualDom(sanitizedReadmeHtml, themesHtml, selectedTab, features, displaySize, extensionId, extensionVersion, selectedFeature, extension, width))];
   return dom;
 };
 
 const renderDom = async (oldState, newState) => {
-  const dom = await getExtensionDetailVirtualDom(newState, newState.sanitizedReadmeHtml, newState.selectedTab, newState);
+  const dom = await getExtensionDetailVirtualDom(newState, newState.sanitizedReadmeHtml, newState.selectedTab);
   return ['Viewlet.setDom2', dom];
 };
 
@@ -2714,9 +2867,15 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickDisable,
     params: ['handleClickDisable']
+  }, {
+    name: HandleClickSettings,
+    params: ['handleClickSettings']
   }, {
     name: HandleClickUninstall,
     params: ['handleClickUninstall']
+  }, {
+    name: HandleClickSetColorTheme,
+    params: ['handleClickSetColorTheme']
   }];
 };
 
@@ -2741,10 +2900,6 @@ const saveState = uid => {
   };
 };
 
-const terminate = () => {
-  globalThis.close();
-};
-
 const commandMap = {
   'ExtensionDetail.create': create$1,
   'ExtensionDetail.diff2': diff2,
@@ -2752,6 +2907,8 @@ const commandMap = {
   'ExtensionDetail.getCommandIds': getCommandIds,
   'ExtensionDetail.getMenuEntries': getMenuEntries,
   'ExtensionDetail.handleClickDisable': wrapCommand(handleClickDisable),
+  'ExtensionDetail.handleClickSettings': wrapCommand(handleClickSettings),
+  'ExtensionDetail.handleClickSetColorTheme': wrapCommand(handleClickSetColorTheme),
   'ExtensionDetail.handleClickSize': wrapCommand(handleClickSize),
   'ExtensionDetail.handleClickUninstall': wrapCommand(handleClickUninstall),
   'ExtensionDetail.handleFeaturesClick': wrapCommand(handleClickFeatures),
@@ -2763,7 +2920,8 @@ const commandMap = {
   'ExtensionDetail.resize': resize,
   'ExtensionDetail.saveState': saveState,
   'ExtensionDetail.selectTab': wrapCommand(selectTab),
-  'ExtensionDetail.terminate': terminate
+  'ExtensionDetail.terminate': terminate,
+  'ExtensionDetail.initialize': initialize
 };
 
 const listen = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-detail-view",
-  "version": "3.25.0",
+  "version": "3.27.0",
   "description": "Extension Detail View Worker",
   "license": "MIT",
   "author": "Lvce Editor",