@lvce-editor/extension-detail-view 6.0.0 → 6.2.0

package/dist/extensionDetailViewWorkerMain.js

@@ -100,7 +100,7 @@ const changelog = () => {
 const details = () => {
   return i18nString(Details$1);
 };
-const disable$1 = () => {
+const disable = () => {
   return i18nString(Disable$1);
 };
 const features$1 = () => {
@@ -133,7 +133,7 @@ const status = () => {
 const setColorTheme$2 = () => {
   return i18nString(SetColorTheme$1);
 };
-const enable$1 = () => {
+const enable = () => {
   return i18nString(Enable$1);
 };
 const theme = () => {
@@ -325,25 +325,8 @@ const Ul = 60;
 const Code$2 = 65;
 const Dt = 67;
 
-const ClientX = 'event.clientX';
-const ClientY = 'event.clientY';
-const TargetHref = 'event.target.href';
-const TargetName = 'event.target.name';
-
-const Script$1 = 2;
-
-const ExtensionDetailReadme = 20;
-const ExtensionDetailIconContextMenu$3 = 4091;
-
-const None$2 = 0;
-
-const Web$1 = 1;
-
-const ExtensionHostWorker = 44;
-const FileSystemWorker$1 = 209;
-const MarkdownWorker$1 = 300;
-const RendererWorker = 1;
-const ExtensionManagementWorker = 9006;
+const LeftArrow = 13;
+const RightArrow = 15;
 
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
@@ -1031,6 +1014,29 @@ const getFeatureVirtualDomHandler = featureName => {
   return feature.getVirtualDom;
 };
 
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
+const TargetHref = 'event.target.href';
+const TargetName = 'event.target.name';
+
+const Script$1 = 2;
+
+const ExtensionDetailReadme = 20;
+const ExtensionDetailIconContextMenu$3 = 4091;
+
+const None$2 = 0;
+
+const Web$1 = 1;
+
+const ExtensionHostWorker = 44;
+const ExtensionManagementWorker = 9006;
+const FileSystemWorker$1 = 209;
+const MarkdownWorker$1 = 300;
+const RendererWorker = 1;
+
+const FocusElementByName = 'Viewlet.focusElementByName';
+const SetFocusContext = 'Viewlet.setFocusContext';
+
 const rpcs = Object.create(null);
 const set$b = (id, rpc) => {
   rpcs[id] = rpc;
@@ -1296,8 +1302,8 @@ const getModuleNotFoundError = stderr => {
   const messageIndex = lines.findIndex(isModuleNotFoundMessage);
   const message = lines[messageIndex];
   return {
-    message,
-    code: ERR_MODULE_NOT_FOUND
+    code: ERR_MODULE_NOT_FOUND,
+    message
   };
 };
 const isModuleNotFoundError = stderr => {
@@ -1320,14 +1326,14 @@ const isUnhelpfulNativeModuleError = stderr => {
 const getNativeModuleErrorMessage = stderr => {
   const message = getMessageCodeBlock(stderr);
   return {
-    message: `Incompatible native node module: ${message}`,
-    code: E_INCOMPATIBLE_NATIVE_MODULE
+    code: E_INCOMPATIBLE_NATIVE_MODULE,
+    message: `Incompatible native node module: ${message}`
   };
 };
 const getModuleSyntaxError = () => {
   return {
-    message: `ES Modules are not supported in electron`,
-    code: E_MODULES_NOT_SUPPORTED_IN_ELECTRON
+    code: E_MODULES_NOT_SUPPORTED_IN_ELECTRON,
+    message: `ES Modules are not supported in electron`
   };
 };
 const getHelpfulChildProcessError = (stdout, stderr) => {
@@ -1346,8 +1352,8 @@ const getHelpfulChildProcessError = (stdout, stderr) => {
     rest
   } = getDetails(lines);
   return {
-    message: actualMessage,
     code: '',
+    message: actualMessage,
     stack: rest
   };
 };
@@ -1357,8 +1363,8 @@ class IpcError extends VError {
     if (stdout || stderr) {
       // @ts-ignore
       const {
-        message,
         code,
+        message,
         stack
       } = getHelpfulChildProcessError(stdout, stderr);
       const cause = new Error(message);
@@ -1419,8 +1425,8 @@ const wrap$f = global => {
 };
 const waitForFirstMessage = async port => {
   const {
-    resolve,
-    promise
+    promise,
+    resolve
   } = Promise.withResolvers();
   port.addEventListener('message', resolve, {
     once: true
@@ -1440,8 +1446,8 @@ const listen$6 = async () => {
   const type = firstMessage.params[0];
   if (type === 'message-port') {
     parentIpc.send({
-      jsonrpc: '2.0',
       id: firstMessage.id,
+      jsonrpc: '2.0',
       result: null
     });
     parentIpc.dispose();
@@ -1498,8 +1504,8 @@ const removeListener = (emitter, type, callback) => {
 };
 const getFirstEvent = (eventEmitter, eventMap) => {
   const {
-    resolve,
-    promise
+    promise,
+    resolve
   } = Promise.withResolvers();
   const listenerMap = Object.create(null);
   const cleanup = value => {
@@ -1511,8 +1517,8 @@ const getFirstEvent = (eventEmitter, eventMap) => {
   for (const [event, type] of Object.entries(eventMap)) {
     const listener = event => {
       cleanup({
-        type,
-        event
+        event,
+        type
       });
     };
     addListener(eventEmitter, event, listener);
@@ -1522,8 +1528,8 @@ const getFirstEvent = (eventEmitter, eventMap) => {
 };
 const Message$1 = 3;
 const create$5$1 = async ({
-  messagePort,
-  isMessagePortOpen
+  isMessagePortOpen,
+  messagePort
 }) => {
   if (!isMessagePort(messagePort)) {
     throw new IpcError('port must be of type MessagePort');
@@ -1536,8 +1542,8 @@ const create$5$1 = async ({
   });
   messagePort.start();
   const {
-    type,
-    event
+    event,
+    type
   } = await eventPromise;
   if (type !== Message$1) {
     throw new IpcError('Failed to wait for ipc message');
@@ -2140,12 +2146,6 @@ const {
   invoke: invoke$4,
   set: set$8
 } = create$7(ExtensionManagementWorker);
-const enable = id => {
-  return invoke$4(`Extensions.enable`, id);
-};
-const disable = id => {
-  return invoke$4(`Extensions.disable`, id);
-};
 
 const {
   dispose: dispose$3,
@@ -2542,6 +2542,7 @@ const HandleTabsClick = 14;
 const HandleAdditionalDetailContextMenu = 15;
 const HandleReadmeClick = 16;
 const HandleSelectionChange = 17;
+const HandleTabFocus = 18;
 
 const ActivationEvents = 'ActivationEvents';
 const Changelog = 'Changelog';
@@ -3128,6 +3129,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     features: [],
     featuresVirtualDom: [],
     focus: 0,
+    focusedTabIndex: 0,
     folderSize: 0,
     hasColorTheme: false,
     hasReadme: false,
@@ -3176,7 +3178,7 @@ const isEqual$3 = (oldState, newState) => {
 };
 
 const isEqual$2 = (oldState, newState) => {
-  return oldState.focus === newState.focus;
+  return oldState.focus === newState.focus && oldState.focusedTabIndex === newState.focusedTabIndex;
 };
 
 const isEqual$1 = (oldState, newState) => {
@@ -3194,9 +3196,10 @@ const RenderFocus = 2;
 const RenderItems = 3;
 const RenderScrollTop = 4;
 const RenderCss = 5;
+const RenderFocusContext = 6;
 
-const modules = [isEqual$1, isEqual$2, isEqual, isEqual$3];
-const numbers = [RenderItems, RenderFocus, RenderScrollTop, RenderCss];
+const modules = [isEqual$1, isEqual$2, isEqual, isEqual$3, isEqual$2];
+const numbers = [RenderItems, RenderFocus, RenderScrollTop, RenderCss, RenderFocusContext];
 
 const diff2 = uid => {
   const {
@@ -3224,6 +3227,41 @@ const executeCopy = async state => {
   return state;
 };
 
+const focusNextTab = state => {
+  const {
+    focusedTabIndex
+  } = state;
+  const newFocusedTabIndex = focusedTabIndex >= 1 ? 1 : focusedTabIndex + 1;
+  return {
+    ...state,
+    focusedTabIndex: newFocusedTabIndex
+  };
+};
+
+const focusPreviousTab = state => {
+  const {
+    focusedTabIndex
+  } = state;
+  const newFocusedTabIndex = focusedTabIndex <= 0 ? 0 : focusedTabIndex - 1;
+  return {
+    ...state,
+    focusedTabIndex: newFocusedTabIndex
+  };
+};
+
+const focusId$1 = 451;
+const getKeyBindings = () => {
+  return [{
+    command: 'ExtensionDetail.focusNextTab',
+    key: RightArrow,
+    when: focusId$1
+  }, {
+    command: 'ExtensionDetail.focusPreviousTab',
+    key: LeftArrow,
+    when: focusId$1
+  }];
+};
+
 const getMenuEntriesImage = (state, props) => {
   return [{
     args: [],
@@ -3387,8 +3425,8 @@ const handleClickCategory = async (state, categoryId) => {
   return state;
 };
 
-const disableExtension = id => {
-  return disable(id);
+const disableExtension = (id, platform) => {
+  return invoke$4('Extensions.disable2', id, platform);
 };
 
 const Web = 1;
@@ -3430,20 +3468,23 @@ const getExtension = async (id, platform) => {
   }
 };
 
+const isEnabled$1 = button => {
+  return button.enabled;
+};
 const getExtensionDetailButtons = (hasColorTheme, isBuiltin, isDisabled) => {
   const allActions = [{
-    enabled: hasColorTheme,
+    enabled: hasColorTheme && !isDisabled,
     label: setColorTheme$2(),
     name: SetColorTheme,
     onClick: HandleClickSetColorTheme
   }, {
     enabled: isDisabled,
-    label: enable$1(),
+    label: enable(),
     name: Enable,
     onClick: HandleClickEnable
   }, {
     enabled: !isDisabled,
-    label: disable$1(),
+    label: disable(),
     name: Disable,
     onClick: HandleClickDisable
   }, {
@@ -3452,7 +3493,7 @@ const getExtensionDetailButtons = (hasColorTheme, isBuiltin, isDisabled) => {
     name: Uninstall,
     onClick: HandleClickUninstall
   }];
-  const filteredButtons = allActions.filter(button => button.enabled);
+  const filteredButtons = allActions.filter(isEnabled$1);
   return filteredButtons;
 };
 
@@ -3462,7 +3503,7 @@ const updateExtensionStatus = async (state, updateFunction) => {
     hasColorTheme,
     platform
   } = state;
-  const error = await updateFunction(extensionId);
+  const error = await updateFunction(extensionId, platform);
   if (error) {
     await confirm(`${error}`);
   }
@@ -3480,8 +3521,8 @@ const handleClickDisable = async state => {
   return updateExtensionStatus(state, disableExtension);
 };
 
-const enableExtension = id => {
-  return enable(id);
+const enableExtension = (id, platform) => {
+  return invoke$4('Extensions.enable2', id, platform);
 };
 
 const handleClickEnable = async state => {
@@ -4098,13 +4139,10 @@ const getIssuesLink = extension => {
 };
 
 const getResources = (isBuiltin, extension) => {
-  if (isBuiltin) {
-    return [];
-  }
   const repositoryLink = getRepositoryLink(extension);
   const issueLink = getIssuesLink(extension);
   const licenseLink = getLicenseLink();
-  // TODO
+  // TODO hide marketplace link for builtin extensions
   return [{
     icon: 'LinkExternal',
     label: marketplace(),
@@ -4390,6 +4428,17 @@ const handleSelectionChange = async (state, selection) => {
   return state;
 };
 
+const focusId = 451;
+const handleTabFocus = (state, name) => {
+  const tabIndex = state.tabs.findIndex(tab => tab.name === name);
+  const newFocusedTabIndex = tabIndex === -1 ? state.focusedTabIndex : tabIndex;
+  return {
+    ...state,
+    focus: focusId,
+    focusedTabIndex: newFocusedTabIndex
+  };
+};
+
 const error = async error => {
   // TODO send message to error worker or log worker
   // @ts-ignore
@@ -4874,17 +4923,19 @@ const getAdditionalDetailsVirtualDom = (showAdditionalDetails, firstHeading, ent
   if (!showAdditionalDetails) {
     return [];
   }
+  const sections = [...getAdditionalDetailsEntryVirtualDom(firstHeading, entries, getMoreInfoVirtualDom), ...(secondEntries.length > 0 ? getAdditionalDetailsEntryVirtualDom(secondHeading, secondEntries, getMoreInfoVirtualDom) : []), ...getAdditionalDetailsEntryVirtualDom(thirdHeading, categories, getCategoriesDom), ...getAdditionalDetailsEntryVirtualDom(fourthHeading, resources, getResourcesVirtualDom)];
+  const childCount = secondEntries.length > 0 ? 4 : 3;
   return [{
     childCount: 1,
     className: Aside,
     type: Aside$1
   }, {
-    childCount: 4,
+    childCount: childCount,
     className: AdditionalDetails,
     onContextMenu: HandleAdditionalDetailContextMenu,
     tabIndex: 0,
     type: Div
-  }, ...getAdditionalDetailsEntryVirtualDom(firstHeading, entries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(secondHeading, secondEntries, getMoreInfoVirtualDom), ...getAdditionalDetailsEntryVirtualDom(thirdHeading, categories, getCategoriesDom), ...getAdditionalDetailsEntryVirtualDom(fourthHeading, resources, getResourcesVirtualDom)];
+  }, ...sections];
 };
 
 const getNoReadmeVirtualDom = () => {
@@ -5085,7 +5136,7 @@ const getTabClassName = isSelected => {
   return isSelected ? selectedClassName : defaultClassName;
 };
 
-const getTabVirtualDom = tab => {
+const getTabVirtualDom = (tab, tabIndex, focusedTabIndex) => {
   const {
     label,
     name,
@@ -5093,26 +5144,27 @@ const getTabVirtualDom = tab => {
   } = tab;
   const className = getTabClassName(selected);
   const ariaSelected = selected;
+  const tabIndexValue = tabIndex === focusedTabIndex ? 0 : -1;
   return [{
     ariaSelected,
     childCount: 1,
     className,
     name,
+    onFocus: HandleTabFocus,
     role: Tab,
-    tabIndex: -1,
+    tabIndex: tabIndexValue,
     type: Button$1
   }, text(label)];
 };
 
-const getTabsVirtualDom = tabs => {
+const getTabsVirtualDom = (tabs, focusedTabIndex) => {
   return [{
     childCount: tabs.length,
     className: ExtensionDetailTabs,
     onClick: HandleTabsClick,
     role: TabList,
-    tabIndex: 0,
     type: Div
-  }, ...tabs.flatMap(getTabVirtualDom)];
+  }, ...tabs.flatMap((tab, index) => getTabVirtualDom(tab, index, focusedTabIndex))];
 };
 
 const getClassNames = size => {
@@ -5141,6 +5193,7 @@ const getExtensionDetailVirtualDom = (newState, selectedTab) => {
     changelogVirtualDom,
     description,
     detailsVirtualDom,
+    focusedTabIndex,
     iconSrc,
     name,
     resources,
@@ -5156,7 +5209,7 @@ const getExtensionDetailVirtualDom = (newState, selectedTab) => {
     childCount: 3,
     className: mergeClassNames(Viewlet, ExtensionDetail, sizeClass),
     type: Div
-  }, ...getExtensionDetailHeaderVirtualDom(name, iconSrc, description, badge, buttons, settingsButtonEnabled), ...getTabsVirtualDom(tabs), ...getExtensionDetailContentVirtualDom(detailsVirtualDom, selectedTab, width, scrollToTopButtonEnabled, categories, resources, showAdditionalDetailsBreakpoint, changelogVirtualDom, newState)];
+  }, ...getExtensionDetailHeaderVirtualDom(name, iconSrc, description, badge, buttons, settingsButtonEnabled), ...getTabsVirtualDom(tabs, focusedTabIndex), ...getExtensionDetailContentVirtualDom(detailsVirtualDom, selectedTab, width, scrollToTopButtonEnabled, categories, resources, showAdditionalDetailsBreakpoint, changelogVirtualDom, newState)];
   return dom;
 };
 
@@ -5166,7 +5219,31 @@ const renderDom = (oldState, newState) => {
 };
 
 const renderFocus = (oldState, newState) => {
-  return ['Viewlet.focusElementByName', ''];
+  const {
+    focus,
+    focusedTabIndex,
+    tabs,
+    uid
+  } = newState;
+  if (focus === 451) {
+    const {
+      name
+    } = tabs[focusedTabIndex];
+    return [FocusElementByName, uid, name];
+  }
+  return [FocusElementByName, ''];
+};
+
+const renderFocusContext = (oldState, newState) => {
+  const {
+    focus,
+    uid
+  } = newState;
+  if (focus === 451) {
+    return [SetFocusContext, uid, focus];
+  }
+  // TODO set focus context
+  return [FocusElementByName, ''];
 };
 
 const getScrollTop = (selectedTab, readmeScrollTop, changelogScrollTop) => {
@@ -5200,6 +5277,8 @@ const getRenderer = diffType => {
       return renderCss;
     case RenderFocus:
       return renderFocus;
+    case RenderFocusContext:
+      return renderFocusContext;
     case RenderItems:
       return renderDom;
     case RenderScrollTop:
@@ -5288,6 +5367,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleSelectionChange,
     params: ['handleSelectionChange']
+  }, {
+    name: HandleTabFocus,
+    params: ['handleTabFocus', TargetName]
   }];
 };
 
@@ -5328,7 +5410,10 @@ const commandMap = {
   'ExtensionDetail.diff2': diff2,
   'ExtensionDetail.dispose': dispose,
   'ExtensionDetail.executeCopy': wrapCommand(executeCopy),
+  'ExtensionDetail.focusNextTab': wrapCommand(focusNextTab),
+  'ExtensionDetail.focusPreviousTab': wrapCommand(focusPreviousTab),
   'ExtensionDetail.getCommandIds': getCommandIds,
+  'ExtensionDetail.getKeyBindings': getKeyBindings,
   'ExtensionDetail.getMenuEntries': getMenuEntries,
   'ExtensionDetail.getMenuEntries2': wrapGetter(getMenuEntries2),
   'ExtensionDetail.getMenuIds': getMenuIds,
@@ -5351,6 +5436,7 @@ const commandMap = {
   'ExtensionDetail.handleReadmeContextMenu': wrapCommand(handleReadmeContextMenu),
   'ExtensionDetail.handleScroll': wrapCommand(handleScroll),
   'ExtensionDetail.handleSelectionChange': wrapCommand(handleSelectionChange),
+  'ExtensionDetail.handleTabFocus': wrapCommand(handleTabFocus),
   'ExtensionDetail.handleTabsClick': wrapCommand(handleTabsClick),
   'ExtensionDetail.handleWheel': wrapCommand(handleScroll),
   // deprecated

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-detail-view",
-  "version": "6.0.0",
+  "version": "6.2.0",
   "description": "Extension Detail View Worker",
   "repository": {
     "type": "git",
@@ -11,6 +11,6 @@
   "type": "module",
   "main": "dist/extensionDetailViewWorkerMain.js",
   "dependencies": {
-    "@lvce-editor/constants": "^1.43.0"
+    "@lvce-editor/constants": "^2.1.0"
   }
 }