@lvce-editor/extension-search-view 3.8.0 → 4.0.0

package/dist/extensionSearchViewWorkerMain.js

@@ -967,7 +967,7 @@ const Disable = 'Disable';
 const InstallAnotherVersion = 'Install Another Version';
 const SearchExtensionsInMarketplace = 'Search Extensions in Marketplace';
 const ViewsAndMoreActions = 'Views and more Actions...';
-const Extensions = 'Extensions';
+const Extensions$2 = 'Extensions';
 const Copy = 'Copy';
 const CopyExtensionId = 'CopyExtensionId';
 
@@ -981,7 +981,7 @@ const refresh = () => {
   return i18nString(Refresh$1);
 };
 const extensions = () => {
-  return i18nString(Extensions);
+  return i18nString(Extensions$2);
 };
 const clearExtensionSearchResults = () => {
   return i18nString(ClearExtensionSearchResults);
@@ -1008,6 +1008,10 @@ const viewsAndMoreActions = () => {
   return i18nString(ViewsAndMoreActions);
 };
 
+const None$3 = 0;
+const Input = 1;
+const List$2 = 2;
+
 const getFinalDeltaY = (height, itemHeight, itemsLength) => {
   const contentHeight = itemsLength * itemHeight;
   const finalDeltaY = Math.max(contentHeight - height, 0);
@@ -1039,6 +1043,12 @@ const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
   return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
 };
 
+const getScrollBarOffset$1 = (delta, finalDelta, size, scrollBarSize) => {
+  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
+  return scrollBarOffset;
+};
+const getScrollBarY$1 = getScrollBarOffset$1;
+
 const Installed = '@installed';
 const Enabled = '@enabled';
 const Disabled = '@disabled';
@@ -1159,7 +1169,8 @@ const handleInput = async (state, value) => {
       minimumSliderSize,
       height,
       platform,
-      assetDir
+      assetDir,
+      headerHeight
     } = state;
     // TODO cancel ongoing requests
     // TODO handle errors
@@ -1167,16 +1178,17 @@ const handleInput = async (state, value) => {
     if (items.length === 0) {
       return {
         ...state,
-        items,
-        minLineY: 0,
-        deltaY: 0,
         allExtensions,
-        maxLineY: 0,
-        scrollBarHeight: 0,
+        deltaY: 0,
         finalDeltaY: 0,
+        focus: Input,
+        items,
+        maxLineY: 0,
         message: noExtensionsFound(),
-        searchValue: value,
-        placeholder: searchExtensionsInMarketPlace()
+        minLineY: 0,
+        placeholder: searchExtensionsInMarketPlace(),
+        scrollBarHeight: 0,
+        searchValue: value
       };
     }
     const total = items.length;
@@ -1186,18 +1198,20 @@ const handleInput = async (state, value) => {
     const numberOfVisible = getNumberOfVisibleItems$1(listHeight, itemHeight);
     const maxLineY = Math.min(numberOfVisible, total);
     const finalDeltaY = getFinalDeltaY(listHeight, itemHeight, total);
+    const scrollBarY = getScrollBarY$1(0, finalDeltaY, height - headerHeight, scrollBarHeight);
     return {
       ...state,
-      items,
-      minLineY: 0,
-      deltaY: 0,
       allExtensions,
-      maxLineY,
-      scrollBarHeight,
+      deltaY: 0,
       finalDeltaY,
+      items,
+      maxLineY,
       message: '',
-      searchValue: value,
-      placeholder: searchExtensionsInMarketPlace()
+      minLineY: 0,
+      placeholder: searchExtensionsInMarketPlace(),
+      scrollBarHeight,
+      scrollBarY,
+      searchValue: value
     };
 
     // TODO handle out of order responses (a bit complicated)
@@ -1234,10 +1248,14 @@ const create$1 = (id, uri, x, y, width, height, platform, assetDir) => {
     assetDir,
     deltaY: 0,
     finalDeltaY: 0,
+    focus: 0,
+    focused: false,
     focusedIndex: 0,
     handleOffset: 0,
     headerHeight: 41,
     height,
+    inputActions: [],
+    inputSource: 0,
     itemHeight: 72,
     items: [],
     maxLineY: 0,
@@ -1249,58 +1267,45 @@ const create$1 = (id, uri, x, y, width, height, platform, assetDir) => {
     platform,
     scrollBarActive: false,
     scrollBarHeight: 0,
+    scrollBarY: 0,
     searchValue: '',
     size: 0,
+    uid: id,
     width,
     x,
-    y,
-    focused: false,
-    inputSource: 0
+    y
   };
   set$1(id, state, state);
 };
 
-const RenderHeader = 1;
-const RenderItems = 4;
-const RenderScrollBar = 5;
-const RenderMessage = 6;
-const RenderSearchValue = 7;
-
-const diffType$5 = RenderItems;
-const isEqual$5 = (oldState, newState) => {
-  return true;
-};
-
-const diffType$4 = RenderHeader;
-const isEqual$4 = (oldState, newState) => {
-  return oldState.placeholder === newState.placeholder;
-};
-
-const diffType$3 = RenderItems;
-const isEqual$3 = (oldState, newState) => {
-  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.deltaY === newState.deltaY && oldState.focusedIndex === newState.focusedIndex;
-};
-
-const diffType$2 = RenderMessage;
 const isEqual$2 = (oldState, newState) => {
-  return oldState.message === newState.message;
+  if (!newState.focus) {
+    return true;
+  }
+  return oldState.focus === newState.focus;
 };
 
-const diffType$1 = RenderScrollBar;
 const isEqual$1 = (oldState, newState) => {
-  return oldState.negativeMargin === newState.negativeMargin && oldState.deltaY === newState.deltaY && oldState.height === newState.height && oldState.finalDeltaY === newState.finalDeltaY && oldState.items.length === newState.items.length && oldState.scrollBarActive === newState.scrollBarActive;
+  return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.deltaY === newState.deltaY && oldState.focusedIndex === newState.focusedIndex && oldState.message === newState.message && oldState.inputActions === newState.inputActions && oldState.placeholder === newState.placeholder;
 };
 
 const User = 1;
 const Script = 2;
 
-const diffType = RenderSearchValue;
 const isEqual = (oldState, newState) => {
   return newState.inputSource === User || oldState.searchValue === newState.searchValue;
 };
 
-const modules = [isEqual$1, isEqual$2, isEqual$4, isEqual$3, isEqual$5, isEqual];
-const numbers = [diffType$1, diffType$2, diffType$4, diffType$3, diffType$5, diffType];
+const RenderHeader = 1;
+const RenderFocus = 2;
+const RenderItems = 4;
+const RenderScrollBar = 5;
+const RenderMessage = 6;
+const RenderSearchValue = 7;
+const RenderFocusContext = 8;
+
+const modules = [isEqual$1, isEqual$2, isEqual, isEqual$2];
+const numbers = [RenderItems, RenderFocus, RenderSearchValue, RenderFocusContext];
 
 const diff2 = uid => {
   const {
@@ -1327,32 +1332,53 @@ const dispose = uid => {
 const getNumberOfVisibleItems = (listHeight, itemHeight) => {
   return Math.ceil(listHeight / itemHeight) + 1;
 };
+const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
+  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
+  return scrollBarOffset;
+};
+const getScrollBarY = getScrollBarOffset;
 const focusIndexScrollDown = (state, index, listHeight, itemHeight, itemsLength) => {
+  const {
+    finalDeltaY,
+    height,
+    headerHeight,
+    scrollBarHeight
+  } = state;
   const newMaxLineY = Math.min(index + 1, itemsLength);
   const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
   const newMinLineY = Math.max(newMaxLineY - fittingItems, 0);
   const newDeltaY = itemsLength < fittingItems ? 0 : newMinLineY * itemHeight - listHeight % itemHeight + itemHeight;
+  const scrollBarY = getScrollBarY(newDeltaY, finalDeltaY, height - headerHeight, scrollBarHeight);
   return {
     ...state,
     focusedIndex: index,
     minLineY: newMinLineY,
     maxLineY: newMaxLineY,
     focused: true,
-    deltaY: newDeltaY
+    deltaY: newDeltaY,
+    scrollBarY
   };
 };
 const focusIndexScrollUp = (state, index, listHeight, itemHeight, itemsLength) => {
+  const {
+    finalDeltaY,
+    height,
+    headerHeight,
+    scrollBarHeight
+  } = state;
   const newMinLineY = index;
   const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
   const newMaxLineY = Math.min(newMinLineY + fittingItems, itemsLength);
   const newDeltaY = newMinLineY * itemHeight;
+  const scrollBarY = getScrollBarY(newDeltaY, finalDeltaY, height - headerHeight, scrollBarHeight);
   return {
     ...state,
     focusedIndex: index,
     minLineY: newMinLineY,
     maxLineY: newMaxLineY,
     focused: true,
-    deltaY: newDeltaY
+    deltaY: newDeltaY,
+    scrollBarY
   };
 };
 const focusIndex = (state, index) => {
@@ -1487,10 +1513,16 @@ const getActions = () => {
   }];
 };
 
-const commandIds = ['clearSearchResults', 'closeSuggest', 'focusFirst', 'focusLast', 'focusNext', 'focusNextPage', 'focusPrevious', 'focusPreviousPage', 'handleBlur', 'handleClick', 'handleClickFilter', 'handleContextMenu', 'handleDisable', 'handleFocus', 'handleInput', 'handleInstall', 'handleScrollBarCaptureLost', 'handleScrollBarClick', 'handleScrollBarMove', 'handleScrollBarThumbPointerMove', 'handleUninstall', 'handleWheel', 'openSuggest', 'render', 'saveState', 'scrollDown', 'selectIndex', 'setDeltaY', 'toggleSuggest'];
+const commandMapRef = {};
 
+const toCommandId = key => {
+  const dotIndex = key.indexOf('.');
+  return key.slice(dotIndex + 1);
+};
 const getCommandIds = () => {
-  return commandIds;
+  const keys = Object.keys(commandMapRef);
+  const ids = keys.map(toCommandId);
+  return ids;
 };
 
 const Enter = 3;
@@ -1505,6 +1537,7 @@ const DownArrow = 16;
 const CtrlCmd = 1 << 11 >>> 0;
 
 const FocusExtensions = 15;
+const FocusExtensionsInput = 7000;
 
 const getKeyBindings = () => {
   return [{
@@ -1550,39 +1583,46 @@ const getKeyBindings = () => {
   }];
 };
 
-const None$1 = 0;
+const None$2 = 0;
 
 const getMenuEntries = () => {
   return [{
     id: 'enable',
     label: enable(),
-    flags: None$1,
+    flags: None$2,
     command: 'SearchExtensions.enable'
   }, {
     id: 'disable',
     label: disable(),
-    flags: None$1,
+    flags: None$2,
     command: 'SearchExtensions.disable'
   }, {
     id: 'installAnotherVersion',
     label: installAnotherVersion(),
-    flags: None$1,
+    flags: None$2,
     command: 'SearchExtensions.installAnotherVersion'
   }, {
     id: 'copy',
     label: copy(),
-    flags: None$1,
+    flags: None$2,
     command: 'SearchExtensions.copy'
   }, {
     id: 'copyExtensionId',
     label: copyExtensionId(),
-    flags: None$1,
+    flags: None$2,
     command: 'SearchExtensions.copyExtensionId'
   }];
 };
 
 const handleBlur = state => {
-  return state;
+  return {
+    ...state,
+    focus: None$3
+  };
+};
+
+const getExtensionDetailUri = extensionId => {
+  return `extension-detail://${extensionId}`;
 };
 
 const rpcs = Object.create(null);
@@ -1625,36 +1665,22 @@ const {
 const showContextMenu$1 = async (x, y, id, ...args) => {
   return invoke$3('ContextMenu.show', x, y, id, ...args);
 };
-const setFocus$2 = key => {
-  return invoke$3('Focus.setFocus', key);
-};
 const openUri$2 = async (uri, focus, options) => {
   await invoke$3('Main.openUri', uri, focus, options);
 };
-const RendererWorker$2 = {
+const RendererWorker = {
   __proto__: null,
   invoke: invoke$3,
   openUri: openUri$2,
   set: set$3,
-  setFocus: setFocus$2,
   showContextMenu: showContextMenu$1};
 
 const {
   invoke,
   set,
   showContextMenu,
-  setFocus: setFocus$1,
   openUri: openUri$1
-} = RendererWorker$2;
-
-const RendererWorker = {
-  __proto__: null,
-  invoke,
-  openUri: openUri$1,
-  set,
-  setFocus: setFocus$1,
-  showContextMenu
-};
+} = RendererWorker;
 
 const openUri = async uri => {
   return openUri$1(uri);
@@ -1667,33 +1693,33 @@ const handleClick = async (state, index) => {
   } = state;
   const actualIndex = index + minLineY;
   const extension = items[actualIndex];
-  const uri = `extension-detail://${extension.id}`;
+  const uri = getExtensionDetailUri(extension.id);
   await openUri(uri);
-  return focusIndex(state, actualIndex);
+  const partialNewState = focusIndex(state, actualIndex);
+  const newState = {
+    ...partialNewState,
+    focus: List$2
+  };
+  return newState;
 };
 
-const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight) => {
-  const relativeY = eventY - y + deltaY;
+const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight, headerHeight) => {
+  const relativeDeltaY = deltaY % itemHeight;
+  const relativeY = eventY - y - headerHeight + relativeDeltaY;
   const index = Math.floor(relativeY / itemHeight);
   return index;
 };
 
-const selectIndex = (state, index) => {
-  return {
-    ...state,
-    focusedIndex: index
-  };
-};
-
 const handleClickAt = async (state, eventX, eventY) => {
   const {
     x,
     y,
     itemHeight,
-    deltaY
+    deltaY,
+    headerHeight
   } = state;
-  const index = getListIndex(eventX, eventY, x, y, deltaY, itemHeight);
-  return selectIndex(state, index);
+  const index = getListIndex(eventX, eventY, x, y, deltaY, itemHeight, headerHeight);
+  return handleClick(state, index);
 };
 
 const handleClickCurrent = state => {
@@ -1734,13 +1760,11 @@ const handleEnable = (state, id) => {
   return state;
 };
 
-const {
-  setFocus
-} = RendererWorker;
-
 const handleFocus = async state => {
-  await setFocus(FocusExtensions);
-  return state;
+  return {
+    ...state,
+    focus: List$2
+  };
 };
 
 // TODO show error / warning  when installment fails / times out
@@ -1779,12 +1803,6 @@ const getNewDeltaPercent = (height, scrollBarHeight, relativeY) => {
   };
 };
 
-const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
-  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
-  return scrollBarOffset;
-};
-const getScrollBarY = getScrollBarOffset;
-
 const clamp = (num, min, max) => {
   number(num);
   number(min);
@@ -1800,7 +1818,9 @@ const setDeltaY = (state, value) => {
     finalDeltaY,
     deltaY,
     height,
-    headerHeight
+    headerHeight,
+    items,
+    minimumSliderSize
   } = state;
   const listHeight = height - headerHeight;
   const newDeltaY = clamp(value, 0, finalDeltaY);
@@ -1810,15 +1830,21 @@ const setDeltaY = (state, value) => {
   // TODO when it only moves by one px, extensions don't need to be rerendered, only negative margin
   const minLineY = Math.floor(newDeltaY / itemHeight);
   const maxLineY = minLineY + getNumberOfVisibleItems$1(listHeight, itemHeight);
+  const total = items.length;
+  const contentHeight = total * itemHeight;
+  const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, minimumSliderSize);
+  const scrollBarY = getScrollBarY$1(newDeltaY, finalDeltaY, height - headerHeight, scrollBarHeight);
   return {
     ...state,
     deltaY: newDeltaY,
     minLineY,
-    maxLineY
+    maxLineY,
+    scrollBarY
   };
 };
 
 const handleScrollBarClick = (state, eventY) => {
+  // TODO move this to list
   const {
     y,
     deltaY,
@@ -1829,7 +1855,7 @@ const handleScrollBarClick = (state, eventY) => {
   } = state;
   const contentHeight = height - headerHeight;
   const relativeY = eventY - y - headerHeight;
-  const currentScrollBarY = getScrollBarY(deltaY, finalDeltaY, contentHeight, scrollBarHeight);
+  const currentScrollBarY = getScrollBarY$1(deltaY, finalDeltaY, contentHeight, scrollBarHeight);
   const diff = relativeY - currentScrollBarY;
   if (diff >= 0 && diff < scrollBarHeight) {
     return {
@@ -1901,6 +1927,38 @@ const getAllExtensions = platform => {
   return getAllExtensions$1(platform);
 };
 
+const HandleClearSearchResults = 'handleClearSearchResults';
+const HandleClickFilter = 'handleClickFilter';
+const HandleContextMenu = 'handleContextMenu';
+const HandleExtensionsInput = 'handleExtensionsInput';
+const HandleFocus = 'handleFocus';
+const HandlePointerDown = 'handlePointerDown';
+const HandleScrollBarMove = 'handleScrollBarMove';
+const HandleScrollBarPointerCaptureLost = 'handleScrollBarPointerCaptureLost';
+const HandleScrollBarPointerDown = 'handleScrollBarPointerDown';
+const HandleTouchEnd = 'handleTouchEnd';
+const HandleTouchMove = 'handleTouchMove';
+const HandleTouchStart = 'handleTouchStart';
+const HandleWheel = 'handleWheel';
+
+const getInputActions = newState => {
+  const clearEnabled = newState.searchValue.length > 0;
+  const actions = [{
+    onClick: HandleClearSearchResults,
+    icon: `MaskIcon${ClearAll}`,
+    title: clearExtensionSearchResults(),
+    type: Button$1,
+    enabled: clearEnabled
+  }, {
+    icon: `MaskIcon${Filter}`,
+    title: filter(),
+    type: Button$1,
+    onClick: HandleClickFilter,
+    enabled: true
+  }];
+  return actions;
+};
+
 const Small = 1;
 const Normal = 2;
 const Large = 3;
@@ -2018,43 +2076,86 @@ const getSavedValue = savedState => {
   }
   return '';
 };
+const getSavedDeltaY = savedState => {
+  if (savedState && typeof savedState === 'object' && 'deltaY' in savedState && typeof savedState.deltaY === 'number' && !Number.isNaN(savedState.deltaY)) {
+    return savedState.deltaY;
+  }
+  return 0;
+};
 
 const restoreState = savedState => {
   const searchValue = getSavedValue(savedState);
+  const savedDeltaY = getSavedDeltaY(savedState);
   return {
-    searchValue
+    searchValue,
+    deltaY: savedDeltaY
   };
 };
 
-const loadContent = async (uid, savedState) => {
-  const {
-    newState
-  } = get$1(uid);
+const loadContent = async (state, savedState) => {
   const {
     width,
     platform,
     assetDir
-  } = newState;
+  } = state;
   const {
-    searchValue
+    searchValue,
+    deltaY
   } = restoreState(savedState);
   // TODO just get local extensions on demand (not when query string is already different)
   const allExtensions = await getAllExtensions(platform);
   const size = getViewletSize(width);
   const normalized = normalizeExtension(allExtensions, platform, assetDir);
+  const inputActions = getInputActions(state);
   const updatedState = await handleInput({
-    ...newState,
+    ...state,
     allExtensions: normalized,
     size,
-    inputSource: Script
+    inputSource: Script,
+    inputActions,
+    deltaY
   }, searchValue);
-  set$1(uid, newState, updatedState);
+  return updatedState;
 };
 
 const openSuggest = state => {
   return state;
 };
 
+const Extensions$1 = 'extensions';
+
+const getSelector = focus => {
+  switch (focus) {
+    case Input:
+      return `[name="${Extensions$1}"]`;
+    case List$2:
+      return '.ListItems';
+    default:
+      return '';
+  }
+};
+const renderFocus = newState => {
+  const {
+    uid,
+    focus
+  } = newState;
+  if (!focus) {
+    return [];
+  }
+  const selector = getSelector(focus);
+  return ['Viewlet.focusSelector', uid, selector];
+};
+
+const renderFocusContext = newState => {
+  if (newState.focus === Input) {
+    return ['Viewlet.setFocusContext', FocusExtensionsInput];
+  }
+  if (newState.focus === List$2) {
+    return ['Viewlet.setFocusContext', FocusExtensions];
+  }
+  return [];
+};
+
 const Actions = 'Actions';
 const ExtensionActions = 'ExtensionActions';
 const ExtensionActive = 'ExtensionActive';
@@ -2066,10 +2167,14 @@ const ExtensionListItemDetail = 'ExtensionListItemDetail';
 const ExtensionListItemFooter = 'ExtensionListItemFooter';
 const ExtensionListItemIcon = 'ExtensionListItemIcon';
 const ExtensionListItemName = 'ExtensionListItemName';
+const Extensions = 'Extensions';
 const IconButton = 'IconButton';
+const List$1 = 'List';
 const ListItems = 'ListItems';
 const MaskIcon = 'MaskIcon';
 const MultilineInputBox = 'MultilineInputBox';
+const ScrollBar = 'ScrollBar';
+const ScrollBarSmall = 'ScrollBarSmall';
 const ScrollBarThumb = 'ScrollBarThumb';
 const ScrollBarThumbActive = 'ScrollBarThumbActive';
 const SearchField = 'SearchField';
@@ -2077,24 +2182,25 @@ const SearchFieldButton = 'SearchFieldButton';
 const SearchFieldButtons = 'SearchFieldButtons';
 const SearchFieldContainer = 'SearchFieldContainer';
 const SearchFieldDisabled = 'SearchFieldDisabled';
-
-const HandleContextMenu = 'handleContextMenu';
-const HandlePointerDown = 'handlePointerDown';
-const HandleTouchStart = 'handleTouchStart';
-const HandleWheel = 'handleWheel';
-const HandleExtensionsInput = 'handleExtensionsInput';
-const HandleClearSearchResults = 'handleClearSearchResults';
-const HandleClickFilter = 'handleClickFilter';
+const Viewlet = 'Viewlet';
 
 const List = 'list';
 const ListItem = 'listitem';
-const None = 'none';
+const None$1 = 'none';
 const ToolBar = 'toolbar';
 
+const None = 'none';
+const AriaRoles = {
+  __proto__: null,
+  None};
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
+const Div$1 = 4;
 const Text = 12;
+const VirtualDomElements = {
+  __proto__: null,
+  Div: Div$1};
 const text = data => {
   return {
     type: Text,
@@ -2140,7 +2246,7 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
   const dom = [{
     type: Div,
     className: SearchField,
-    role: None,
+    role: None$1,
     childCount: 2
   }, {
     type: TextArea,
@@ -2162,7 +2268,7 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
     dom.unshift({
       type: Div,
       className: SearchFieldContainer,
-      role: None,
+      role: None$1,
       childCount: 1 + outsideButtons.length
     });
     dom.push(...outsideButtons.flatMap(getSearchFieldButtonVirtualDom));
@@ -2179,24 +2285,6 @@ const getExtensionHeaderVirtualDom = (placeholder, actions) => {
   return [parentNode, ...getSearchFieldVirtualDom('extensions', placeholder, HandleExtensionsInput, actions, [])];
 };
 
-const getInputActions = newState => {
-  const clearEnabled = newState.searchValue.length > 0;
-  const actions = [{
-    onClick: HandleClearSearchResults,
-    icon: `MaskIcon${ClearAll}`,
-    title: clearExtensionSearchResults(),
-    type: Button$1,
-    enabled: clearEnabled
-  }, {
-    icon: `MaskIcon${Filter}`,
-    title: filter(),
-    type: Button$1,
-    onClick: HandleClickFilter,
-    enabled: true
-  }];
-  return actions;
-};
-
 const renderHeader = newState => {
   const actions = getInputActions(newState);
   const dom = getExtensionHeaderVirtualDom(newState.placeholder, actions);
@@ -2267,7 +2355,7 @@ const getExtensionListItemVirtualDom = extension => {
     type: Img,
     src: icon,
     className: ExtensionListItemIcon,
-    role: None,
+    role: None$1,
     childCount: 0
   }, listItemDetail, listItemName, text(name), listItemDescription, text(description), listItemFooter, listItemAuthorName, text(publisher), {
     type: Div,
@@ -2284,10 +2372,14 @@ const getExtensionsListVirtualDom = visibleExtensions => {
     tabIndex: 0,
     ariaLabel: extensions(),
     role: List,
-    oncontextmenu: HandleContextMenu,
-    onpointerdown: HandlePointerDown,
-    ontouchstart: HandleTouchStart,
-    onwheelpassive: HandleWheel,
+    onContextmenu: HandleContextMenu,
+    onContextMenu: HandleContextMenu,
+    onFocus: HandleFocus,
+    onPointerDown: HandlePointerDown,
+    onTouchEnd: HandleTouchEnd,
+    onTouchMove: HandleTouchMove,
+    onTouchStart: HandleTouchStart,
+    onWheel: HandleWheel,
     childCount: visibleExtensions.length
   }, ...visibleExtensions.flatMap(getExtensionListItemVirtualDom)];
   return dom;
@@ -2299,6 +2391,36 @@ const getExtensionsVirtualDom = visibleExtensions => {
   return dom;
 };
 
+const px = value => {
+  return `${value}px`;
+};
+const position = (x, y) => {
+  return `${x}px ${y}px`;
+};
+
+const getScrollBarVirtualDom = (scrollBarHeight, scrollBarTop) => {
+  const shouldShowScrollbar = scrollBarHeight > 0;
+  if (!shouldShowScrollbar) {
+    return [];
+  }
+  // TODO move the dynamic css into a css adopted stylesheet
+  const heightString = px(scrollBarHeight);
+  const translateString = position(0, scrollBarTop);
+  return [{
+    type: Div,
+    className: mergeClassNames(ScrollBar, ScrollBarSmall),
+    onPointerDown: HandleScrollBarPointerDown,
+    // TODO support pointercapture event
+    childCount: 1
+  }, {
+    type: Div,
+    className: ScrollBarThumb,
+    childCount: 0,
+    height: heightString,
+    translate: translateString
+  }];
+};
+
 const getVisibleItem = (item, setSize, itemHeight, minLineY, relative, i, focusedIndex) => {
   // TODO use normal parameters
   const {
@@ -2340,34 +2462,56 @@ const getVisible = state => {
   return visible;
 };
 
-const renderItems = newState => {
-  // TODO render extensions incrementally when scrolling
-  const visibleExtensions = getVisible(newState);
-  const dom = getExtensionsVirtualDom(visibleExtensions);
-  return ['setExtensionsDom', dom];
+const getContentVirtualDom = (visibleExtensions, message, scrollBarHeight, scrollBarY) => {
+  if (message) {
+    return [{
+      type: VirtualDomElements.Div,
+      childCount: 1
+    }, text(message)];
+  }
+  return [{
+    type: VirtualDomElements.Div,
+    className: mergeClassNames(Viewlet, List$1),
+    childCount: 2
+  }, ...getExtensionsVirtualDom(visibleExtensions), ...getScrollBarVirtualDom(scrollBarHeight, scrollBarY)];
+};
+const getExtensionsViewVirtualDom = state => {
+  const visibleExtensions = getVisible(state);
+  const {
+    placeholder,
+    inputActions,
+    message,
+    scrollBarHeight,
+    scrollBarY
+  } = state;
+  return [{
+    type: VirtualDomElements.Div,
+    className: mergeClassNames(Viewlet, Extensions),
+    childCount: 2,
+    ariaLive: 'polite',
+    ariaBusy: false,
+    role: AriaRoles.None
+  }, ...getExtensionHeaderVirtualDom(placeholder, inputActions), ...getContentVirtualDom(visibleExtensions, message, scrollBarHeight, scrollBarY)];
+};
+
+const renderItems2 = newState => {
+  const dom = getExtensionsViewVirtualDom(newState);
+  return ['Viewlet.setDom2', newState.uid, dom];
 };
 
 const SetMessage = 'setMessage';
 const SetScrollBar = 'setScrollBar';
-const SetSearchValue = 'setSearchValue';
 
 const renderMessage = newState => {
   return [/* method */SetMessage, /* message */newState.message];
 };
 
-const px = value => {
-  return `${value}px`;
-};
-const position = (x, y) => {
-  return `${x}px ${y}px`;
-};
-
 const renderScrollBar = newState => {
   const listHeight = getListHeight(newState.items.length, newState.itemHeight, newState.height);
   const total = newState.items.length;
   const contentHeight = total * newState.itemHeight;
   const scrollBarHeight = getScrollBarSize(listHeight, contentHeight, newState.minimumSliderSize);
-  const scrollBarY = getScrollBarY(newState.deltaY, newState.finalDeltaY, newState.height - newState.headerHeight, scrollBarHeight);
+  const scrollBarY = getScrollBarY$1(newState.deltaY, newState.finalDeltaY, newState.height - newState.headerHeight, scrollBarHeight);
   const roundedScrollBarY = Math.round(scrollBarY);
   const heightString = px(scrollBarHeight);
   const translateString = position(0, roundedScrollBarY);
@@ -2379,13 +2523,13 @@ const renderScrollBar = newState => {
 };
 
 const renderSearchValue = newState => {
-  return [/* method */SetSearchValue, '', newState.searchValue];
+  return [/* method */'Viewlet.setValueByName', newState.uid, Extensions$1, newState.searchValue];
 };
 
 const getRenderer = diffType => {
   switch (diffType) {
     case RenderItems:
-      return renderItems;
+      return renderItems2;
     case RenderMessage:
       return renderMessage;
     case RenderScrollBar:
@@ -2394,6 +2538,10 @@ const getRenderer = diffType => {
       return renderSearchValue;
     case RenderHeader:
       return renderHeader;
+    case RenderFocus:
+      return renderFocus;
+    case RenderFocusContext:
+      return renderFocusContext;
     default:
       throw new Error('unknown renderer');
   }
@@ -2403,7 +2551,7 @@ const applyRender = (oldState, newState, diffResult) => {
   const commands = [];
   for (const item of diffResult) {
     const fn = getRenderer(item);
-    commands.push(fn(newState));
+    commands.push(fn(newState, oldState));
   }
   return commands;
 };
@@ -2422,7 +2570,7 @@ const getIconVirtualDom = (icon, type = Div) => {
   return {
     type,
     className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
-    role: None,
+    role: None$1,
     childCount: 0
   };
 };
@@ -2478,19 +2626,37 @@ const renderEventListeners = () => {
     name: HandleContextMenu,
     params: ['handleContextMenu', 'event.button', 'event.clientX', 'event.clientY'],
     preventDefault: true
+  }, {
+    name: HandlePointerDown,
+    params: ['handleClickAt', 'event.clientX', 'event.clientY'],
+    preventDefault: true
+  }, {
+    name: HandleScrollBarPointerDown,
+    params: ['handleScrollBarClick', 'event.clientY'],
+    preventDefault: true,
+    trackPointerEvents: [HandleScrollBarMove, HandleScrollBarPointerCaptureLost]
+  }, {
+    name: HandleScrollBarMove,
+    params: ['handleScrollBarMove', 'event.clientY']
+  }, {
+    name: HandleScrollBarPointerCaptureLost,
+    params: ['handleScrollBarCaptureLost']
   }, {
     name: HandleWheel,
     params: ['handleWheel', 'event.deltaMode', 'event.deltaY'],
     passive: true
   }, {
     name: HandleExtensionsInput,
-    params: ['handleExtensionsInput', 'event.target.value', User]
+    params: ['handleInput', 'event.target.value', User]
   }, {
     name: HandleClearSearchResults,
     params: ['clearSearchResults']
   }, {
     name: HandleClickFilter,
     params: ['handleClickFilter']
+  }, {
+    name: HandleFocus,
+    params: ['handleFocus']
   }];
 };
 
@@ -2499,10 +2665,12 @@ const saveState = uid => {
     newState
   } = get$1(uid);
   const {
-    searchValue
+    searchValue,
+    deltaY
   } = newState;
   return {
-    searchValue
+    searchValue,
+    deltaY
   };
 };
 
@@ -2515,6 +2683,13 @@ const scrollDown = state => {
   return setDeltaY(state, newDeltaY);
 };
 
+const selectIndex = (state, index) => {
+  return {
+    ...state,
+    focusedIndex: index
+  };
+};
+
 const toggleSuggest = state => {
   return state;
 };
@@ -2553,7 +2728,7 @@ const commandMap = {
   'SearchExtensions.handleScrollBarThumbPointerMove': wrapCommand(handleScrollBarMove),
   'SearchExtensions.handleUninstall': wrapCommand(handleUninstall),
   'SearchExtensions.handleWheel': wrapCommand(handleWheel),
-  'SearchExtensions.loadContent': loadContent,
+  'SearchExtensions.loadContent': wrapCommand(loadContent),
   'SearchExtensions.openSuggest': wrapCommand(openSuggest),
   'SearchExtensions.render3': render3,
   'SearchExtensions.renderActions': renderActions,
@@ -2569,8 +2744,9 @@ const commandMap = {
 };
 
 const listen = async () => {
+  Object.assign(commandMapRef, commandMap);
   const rpc = await WebWorkerRpcClient.create({
-    commandMap: commandMap
+    commandMap: commandMapRef
   });
   set(rpc);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/extension-search-view",
-  "version": "3.8.0",
+  "version": "4.0.0",
   "description": "Extension Search View Worker",
   "license": "MIT",
   "author": "Lvce Editor",