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

package/dist/extensionDetailViewWorkerMain.js

@@ -330,7 +330,8 @@ const ClientY = 'event.clientY';
 const TargetHref = 'event.target.href';
 const TargetName = 'event.target.name';
 
-const Script$1 = 2;
+const LeftArrow = 13;
+const RightArrow = 15;
 
 const ExtensionDetailReadme = 20;
 const ExtensionDetailIconContextMenu$3 = 4091;
@@ -339,11 +340,8 @@ 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 FocusElementByName = 'Viewlet.focusElementByName';
+const SetFocusContext = 'Viewlet.setFocusContext';
 
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
@@ -1031,6 +1029,14 @@ const getFeatureVirtualDomHandler = featureName => {
   return feature.getVirtualDom;
 };
 
+const Script$1 = 2;
+
+const ExtensionHostWorker = 44;
+const ExtensionManagementWorker = 9006;
+const FileSystemWorker$1 = 209;
+const MarkdownWorker$1 = 300;
+const RendererWorker = 1;
+
 const rpcs = Object.create(null);
 const set$b = (id, rpc) => {
   rpcs[id] = rpc;
@@ -2542,6 +2548,7 @@ const HandleTabsClick = 14;
 const HandleAdditionalDetailContextMenu = 15;
 const HandleReadmeClick = 16;
 const HandleSelectionChange = 17;
+const HandleTabFocus = 18;
 
 const ActivationEvents = 'ActivationEvents';
 const Changelog = 'Changelog';
@@ -3128,6 +3135,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 +3184,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 +3202,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 +3233,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: [],
@@ -4098,13 +4142,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 +4431,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 +4926,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 +5139,7 @@ const getTabClassName = isSelected => {
   return isSelected ? selectedClassName : defaultClassName;
 };
 
-const getTabVirtualDom = tab => {
+const getTabVirtualDom = (tab, tabIndex, focusedTabIndex) => {
   const {
     label,
     name,
@@ -5093,26 +5147,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 +5196,7 @@ const getExtensionDetailVirtualDom = (newState, selectedTab) => {
     changelogVirtualDom,
     description,
     detailsVirtualDom,
+    focusedTabIndex,
     iconSrc,
     name,
     resources,
@@ -5156,7 +5212,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 +5222,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 +5280,8 @@ const getRenderer = diffType => {
       return renderCss;
     case RenderFocus:
       return renderFocus;
+    case RenderFocusContext:
+      return renderFocusContext;
     case RenderItems:
       return renderDom;
     case RenderScrollTop:
@@ -5288,6 +5370,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleSelectionChange,
     params: ['handleSelectionChange']
+  }, {
+    name: HandleTabFocus,
+    params: ['handleTabFocus', TargetName]
   }];
 };
 
@@ -5328,7 +5413,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 +5439,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.1.0",
   "description": "Extension Detail View Worker",
   "repository": {
     "type": "git",