@lvce-editor/extension-detail-view 3.24.0 → 3.26.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);
@@ -962,7 +962,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 +1003,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;
@@ -1023,6 +1024,7 @@ const i18nString = (key, placeholders = emptyObject) => {
 const Commands$1 = 'Commands';
 const ContentSecurityPolicy = 'ContentSecurityPolicy';
 const Copy = 'Copy';
+const Disable = 'Disable';
 const Elements = 'Elements';
 const FileMatch = 'File Match';
 const None$1 = 'None';
@@ -1036,13 +1038,18 @@ 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 copy = () => {
   return i18nString(Copy);
 };
+const disable = () => {
+  return i18nString(Disable);
+};
 const none = () => {
   return i18nString(None$1);
 };
@@ -1064,6 +1071,9 @@ const fileMatch = () => {
 const schema = () => {
   return i18nString(Schema);
 };
+const setColorTheme$3 = () => {
+  return i18nString(SetColorTheme);
+};
 const theme = () => {
   return i18nString(Theme$1);
 };
@@ -1097,6 +1107,9 @@ const elements = () => {
 const notImplemented = () => {
   return i18nString(NotImplemented);
 };
+const uninstall = () => {
+  return i18nString(Uninstall);
+};
 
 const None = 0;
 
@@ -1212,31 +1225,91 @@ 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);
 };
-const getAllExtensions$2 = async key => {
+const getAllExtensions$2 = async () => {
   return invoke$3('ExtensionManagement.getAllExtensions');
 };
+const getFolderSize$2 = async uri => {
+  // @ts-ignore
+  return await invoke$3('FileSystem.getFolderSize', uri);
+};
+const getExtension$3 = async id => {
+  // @ts-ignore
+  return invoke$3('ExtensionManagement.getExtension', id);
+};
+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);
+};
 const RendererWorker = {
   __proto__: null,
   getAllExtensions: getAllExtensions$2,
-  invoke: invoke$3,
+  getExtension: getExtension$3,
+  getFolderSize: getFolderSize$2,
+  getMarkdownDom: getMarkdownDom$1,
+  openNativeFolder: openNativeFolder$1,
   readFile: readFile$2,
-  set: set$3};
+  renderMarkdown: renderMarkdown$2,
+  set: set$3,
+  setColorTheme: setColorTheme$2};
 
 const {
-  invoke,
-  set,
+  getAllExtensions: getAllExtensions$1,
+  getExtension: getExtension$2,
+  getFolderSize: getFolderSize$1,
+  getMarkdownDom,
+  openNativeFolder,
   readFile: readFile$1,
-  getAllExtensions: getAllExtensions$1
-} = RendererWorker;
+  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 {
     uri
   } = state.extension;
-  await invoke('OpenNativeFolder.openNativeFolder', uri);
+  await openNativeFolder(uri);
   return state;
 };
 
@@ -1331,8 +1404,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;
 };
 
@@ -1450,8 +1522,7 @@ const getExtension$1 = async (id, platform) => {
 };
 
 const getExtensionNew = async id => {
-  // @ts-ignore todo
-  return invoke('ExtensionManagement.getExtension', id);
+  return getExtension$2(id);
 };
 const getExtension = async (id, platform) => {
   try {
@@ -1528,8 +1599,7 @@ const getFolderSize = async uri => {
     throw new VError(`uri is required`);
   }
   try {
-    // @ts-ignore todo
-    return await invoke('FileSystem.getFolderSize', uri);
+    return await getFolderSize$1(uri);
   } catch {
     return 0;
   }
@@ -1697,6 +1767,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;
@@ -1717,6 +1788,7 @@ const VirtualDomElements = {
   H2,
   Img,
   Pre,
+  Span,
   TBody,
   THead,
   Table: Table$1,
@@ -1752,6 +1824,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';
@@ -1870,6 +1944,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
@@ -2025,14 +2130,6 @@ 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 getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
   const entries = [{
     key: 'Identifier',
@@ -2057,8 +2154,7 @@ const getInstallationEntries = (displaySize, extensionId, extensionVersion) => {
 
 const getMarkdownVirtualDom = async html => {
   string(html);
-  // @ts-ignore todo
-  const dom = await invoke('Markdown.getVirtualDom', html);
+  const dom = await getMarkdownDom(html);
   return dom;
 };
 
@@ -2496,6 +2592,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,
@@ -2505,21 +2609,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,
@@ -2535,15 +2669,7 @@ 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;
 };
 
@@ -2573,7 +2699,7 @@ const getTabVirtualDom = tab => {
     name
   } = tab;
   const className = selected ? selectedClassName : defaultClassName;
-  const ariaSelected = selected ? 'true' : 'false';
+  const ariaSelected = selected;
   return [{
     type: VirtualDomElements.Button,
     role: Tab,
@@ -2627,11 +2753,21 @@ 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
+  } = extensionDetail;
+  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;
 };
 
@@ -2693,9 +2829,15 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickDisable,
     params: ['handleClickDisable']
+  }, {
+    name: HandleClickSettings,
+    params: ['handleClickSettings']
   }, {
     name: HandleClickUninstall,
     params: ['handleClickUninstall']
+  }, {
+    name: HandleClickSetColorTheme,
+    params: ['handleClickSetColorTheme']
   }];
 };
 
@@ -2731,6 +2873,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),

package/package.json

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