@lvce-editor/extension-search-view 2.1.0 → 2.3.0

package/dist/extensionSearchViewWorkerMain.js

@@ -82,6 +82,12 @@ const getType = value => {
       return 'unknown';
   }
 };
+const object = value => {
+  const type = getType(value);
+  if (type !== 'object') {
+    throw new AssertionError('expected value to be of type object');
+  }
+};
 const number = value => {
   const type = getType(value);
   if (type !== 'number') {
@@ -424,10 +430,10 @@ const create$4 = (method, params) => {
   };
 };
 const callbacks = Object.create(null);
-const set$1 = (id, fn) => {
+const set$2 = (id, fn) => {
   callbacks[id] = fn;
 };
-const get = id => {
+const get$2 = id => {
   return callbacks[id];
 };
 const remove = id => {
@@ -443,7 +449,7 @@ const registerPromise = () => {
     resolve,
     promise
   } = Promise.withResolvers();
-  set$1(id, resolve);
+  set$2(id, resolve);
   return {
     id,
     promise
@@ -600,7 +606,7 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get(id);
+  const fn = get$2(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -639,7 +645,7 @@ const getErrorProperty = (error, prettyError) => {
     }
   };
 };
-const create$1 = (message, error) => {
+const create$1$1 = (message, error) => {
   return {
     jsonrpc: Two,
     id: message.id,
@@ -650,7 +656,7 @@ const getErrorResponse = (message, error, preparePrettyError, logError) => {
   const prettyError = preparePrettyError(error);
   logError(error, prettyError);
   const errorProperty = getErrorProperty(error, prettyError);
-  return create$1(message, errorProperty);
+  return create$1$1(message, errorProperty);
 };
 const create$5 = (message, result) => {
   return {
@@ -754,7 +760,7 @@ const send = (transport, method, ...params) => {
   const message = create$4(method, params);
   transport.send(message);
 };
-const invoke = (ipc, method, ...params) => {
+const invoke$1 = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, false);
 };
 const invokeAndTransfer = (ipc, method, ...params) => {
@@ -787,7 +793,7 @@ const createRpc = ipc => {
       send(ipc, method, ...params);
     },
     invoke(method, ...params) {
-      return invoke(ipc, method, ...params);
+      return invoke$1(ipc, method, ...params);
     },
     invokeAndTransfer(method, ...params) {
       return invokeAndTransfer(ipc, method, ...params);
@@ -825,7 +831,7 @@ const listen$1 = async (module, options) => {
   const ipc = module.wrap(rawIpc);
   return ipc;
 };
-const create = async ({
+const create$1 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -837,7 +843,7 @@ const create = async ({
 };
 const WebWorkerRpcClient = {
   __proto__: null,
-  create
+  create: create$1
 };
 
 const handleError = (error, notify = true, prefix = '') => {
@@ -856,29 +862,34 @@ const i18nString = (key, placeholders = emptyObject) => {
   return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
-/**
- * @enum {string}
- */
-const UiStrings = {
-  NoExtensionsFound: 'No extensions found.',
-  Filter: 'Filter',
-  ClearExtensionSearchResults: 'Clear extension search results',
-  SearchExtensionsInMarketplace: 'Search Extensions in Marketplace',
-  Extensions: 'Extensions'};
+const NoExtensionsFound = 'No extensions found.';
+const Filter$1 = 'Filter';
+const Refresh$1 = 'Refresh';
+const ClearExtensionSearchResults = 'Clear extension search results';
+const SearchExtensionsInMarketplace = 'Search Extensions in Marketplace';
+const ViewsAndMoreActions = 'Views and more Actions...';
+const Extensions = 'Extensions';
+
 const noExtensionsFound = () => {
-  return i18nString(UiStrings.NoExtensionsFound);
+  return i18nString(NoExtensionsFound);
 };
 const filter = () => {
-  return i18nString(UiStrings.Filter);
+  return i18nString(Filter$1);
+};
+const refresh = () => {
+  return i18nString(Refresh$1);
 };
 const extensions = () => {
-  return i18nString(UiStrings.Extensions);
+  return i18nString(Extensions);
 };
 const clearExtensionSearchResults = () => {
-  return i18nString(UiStrings.ClearExtensionSearchResults);
+  return i18nString(ClearExtensionSearchResults);
 };
 const searchExtensionsInMarketPlace = () => {
-  return i18nString(UiStrings.SearchExtensionsInMarketplace);
+  return i18nString(SearchExtensionsInMarketplace);
+};
+const viewsAndMoreActions = () => {
+  return i18nString(ViewsAndMoreActions);
 };
 
 const getFinalDeltaY = (height, itemHeight, itemsLength) => {
@@ -912,36 +923,6 @@ const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
   return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
 };
 
-const Web = 1;
-const Electron = 2;
-const Remote = 3;
-const Test = 4;
-
-// TODO treeshake this function out
-
-/**
- * @returns {number}
- */
-const getPlatform = () => {
-  // @ts-ignore
-  if (typeof PLATFORM !== 'undefined') {
-    // @ts-ignore
-    return PLATFORM;
-  }
-  if (typeof process !== 'undefined' && process.env.NODE_ENV === 'test') {
-    return Test;
-  }
-  // TODO find a better way to pass runtime environment
-  if (typeof name !== 'undefined' && name.endsWith('(Electron)')) {
-    return Electron;
-  }
-  if (typeof name !== 'undefined' && name.endsWith('(Web)')) {
-    return Web;
-  }
-  return Remote;
-};
-const platform = getPlatform();
-
 const Installed = '@installed';
 const Enabled = '@enabled';
 const Disabled = '@disabled';
@@ -990,9 +971,11 @@ const parseValue = value => {
   };
 };
 
-const assetDir = '';
+const Web = 1;
+const Electron = 2;
+const Remote = 3;
 
-const getRemoteUrl = (extension, platform) => {
+const getRemoteUrl = (extension, platform, assetDir) => {
   if (platform === Remote || platform === Electron) {
     if (extension.builtin) {
       return `${assetDir}/extensions/${extension.id}/${extension.icon}`;
@@ -1002,9 +985,15 @@ const getRemoteUrl = (extension, platform) => {
   return '';
 };
 
-const ExtensionDefaultIcon = `${assetDir}/icons/extensionDefaultIcon.png`;
-const ExtensionLanguageBasics = `${assetDir}/icons/language-icon.svg`;
-const ExtensionTheme = `${assetDir}/icons/theme-icon.png`;
+const getExtensionDefaultIcon = assetDir => {
+  return `${assetDir}/icons/extensionDefaultIcon.png`;
+};
+const getExtensionLanguageBasicsIcon = assetDir => {
+  return `${assetDir}/icons/language-icon.svg`;
+};
+const getExtensionThemeIcon = assetDir => {
+  return `${assetDir}/icons/theme-icon.png`;
+};
 
 const isLanguageBasicsExtension = extension => {
   return extension.name && extension.name.startsWith('Language Basics');
@@ -1012,20 +1001,20 @@ const isLanguageBasicsExtension = extension => {
 const isThemeExtension = extension => {
   return extension.name && extension.name.endsWith(' Theme');
 };
-const getIcon = (extension, platform) => {
+const getIcon = (extension, platform, assetDir) => {
   if (!extension) {
-    return ExtensionDefaultIcon;
+    return getExtensionDefaultIcon(assetDir);
   }
   if (!extension.path || !extension.icon) {
     if (isLanguageBasicsExtension(extension)) {
-      return ExtensionLanguageBasics;
+      return getExtensionLanguageBasicsIcon(assetDir);
     }
     if (isThemeExtension(extension)) {
-      return ExtensionTheme;
+      return getExtensionThemeIcon(assetDir);
     }
-    return ExtensionDefaultIcon;
+    return getExtensionDefaultIcon(assetDir);
   }
-  return getRemoteUrl(extension, platform);
+  return getRemoteUrl(extension, platform, assetDir);
 };
 const getName = extension => {
   if (extension && extension.name) {
@@ -1079,6 +1068,12 @@ const matchesParsedValue = (extension, parsedValue) => {
 const toSorted = (array, compare) => {
   return [...array].sort(compare);
 };
+const isLastIndex = (array, index) => {
+  return index === array.length - 1;
+};
+const lastIndex = array => {
+  return array.length - 1;
+};
 
 const compareExtension = (extensionA, extensionB) => {
   return extensionA.name.localeCompare(extensionB.name) || extensionA.id.localeCompare(extensionB.id);
@@ -1088,7 +1083,7 @@ const sortExtensions = extensions => {
   return toSorted(extensions, compareExtension);
 };
 
-const getExtensions = async (extensions, parsedValue, platform) => {
+const getExtensions = async (extensions, parsedValue, platform, assetDir = '') => {
   const filteredExtensions = [];
   for (const extension of extensions) {
     if (matchesParsedValue(extension, parsedValue)) {
@@ -1096,7 +1091,7 @@ const getExtensions = async (extensions, parsedValue, platform) => {
         name: getName(extension),
         id: getId(extension),
         publisher: getPublisher(extension),
-        icon: getIcon(extension, platform),
+        icon: getIcon(extension, platform, assetDir),
         description: getDescription(extension)
       });
     }
@@ -1105,10 +1100,10 @@ const getExtensions = async (extensions, parsedValue, platform) => {
   return sortedExtensions;
 };
 
-const searchExtensions = async (extensions, value, platform$1) => {
+const searchExtensions = async (extensions, value, platform, assetDir) => {
   try {
     const parsedValue = parseValue(value);
-    const filteredExtensions = await getExtensions(extensions, parsedValue, platform$1 || platform);
+    const filteredExtensions = await getExtensions(extensions, parsedValue, platform, assetDir);
     return filteredExtensions;
   } catch (error) {
     throw new VError(error, 'Failed to search for extensions');
@@ -1123,11 +1118,12 @@ const handleInput = async (state, value) => {
       itemHeight,
       minimumSliderSize,
       height,
-      platform: platform$1
+      platform,
+      assetDir
     } = state;
     // TODO cancel ongoing requests
     // TODO handle errors
-    const items = await searchExtensions(allExtensions, value, platform$1 || platform);
+    const items = await searchExtensions(allExtensions, value, platform, assetDir);
     if (items.length === 0) {
       return {
         ...state,
@@ -1181,6 +1177,240 @@ const clearSearchResults = state => {
   return handleInput(state, '');
 };
 
+const closeSuggest = () => {
+  // TODO
+};
+
+const states = Object.create(null);
+const get$1 = uid => {
+  return states[uid];
+};
+const set$1 = (uid, oldState, newState) => {
+  states[uid] = {
+    oldState,
+    newState
+  };
+};
+
+const create = (id, uri, x, y, width, height, platform) => {
+  const state = {
+    searchValue: '',
+    minLineY: 0,
+    maxLineY: 0,
+    itemHeight: 0,
+    items: [],
+    height,
+    message: '',
+    allExtensions: [],
+    placeholder: '',
+    platform,
+    finalDeltaY: 0,
+    focusedIndex: 0,
+    minimumSliderSize: 0,
+    deltaY: 0,
+    headerHeight: 0,
+    scrollBarHeight: 0,
+    width,
+    size: 0,
+    negativeMargin: 0,
+    scrollBarActive: false,
+    x,
+    y,
+    handleOffset: 0,
+    assetDir: ''
+  };
+  set$1(id, state, state);
+};
+
+const RenderHeader = 1;
+const RenderItems = 4;
+const RenderScrollBar = 5;
+const RenderMessage = 6;
+
+const diffType$4 = RenderItems;
+const isEqual$4 = (oldState, newState) => {
+  return true;
+};
+
+const diffType$3 = RenderHeader;
+const isEqual$3 = (oldState, newState) => {
+  return oldState.placeholder === newState.placeholder;
+};
+
+const diffType$2 = RenderItems;
+const isEqual$2 = (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$1 = RenderMessage;
+const isEqual$1 = (oldState, newState) => {
+  return oldState.message === newState.message;
+};
+
+const diffType = RenderScrollBar;
+const isEqual = (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;
+};
+
+const modules = [isEqual$4, isEqual, isEqual$1, isEqual$3, isEqual$2];
+const numbers = [diffType$4, diffType, diffType$1, diffType$3, diffType$2];
+
+const diff = (oldState, newState) => {
+  const diffResult = [];
+  for (let i = 0; i < modules.length; i++) {
+    const fn = modules[i];
+    if (!fn(oldState, newState)) {
+      diffResult.push(numbers[i]);
+    }
+  }
+  return diffResult;
+};
+
+const focusIndexScrollDown = (state, index, listHeight, itemHeight, itemsLength) => {
+  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;
+  return {
+    ...state,
+    focusedIndex: index,
+    minLineY: newMinLineY,
+    maxLineY: newMaxLineY,
+    focused: true,
+    deltaY: newDeltaY
+  };
+};
+
+const focusIndexScrollUp = (state, index, listHeight, itemHeight, itemsLength) => {
+  const newMinLineY = index;
+  const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
+  const newMaxLineY = Math.min(newMinLineY + fittingItems, itemsLength);
+  const newDeltaY = newMinLineY * itemHeight;
+  return {
+    ...state,
+    focusedIndex: index,
+    minLineY: newMinLineY,
+    maxLineY: newMaxLineY,
+    focused: true,
+    deltaY: newDeltaY
+  };
+};
+
+const focusIndex = (state, index) => {
+  const {
+    itemHeight,
+    minLineY,
+    maxLineY,
+    headerHeight,
+    height,
+    items
+  } = state;
+  const itemsLength = items.length;
+  if (itemsLength === 0) {
+    return state;
+  }
+  number(itemHeight);
+  if (index === -1) {
+    return {
+      ...state,
+      focusedIndex: -1,
+      focused: true
+    };
+  }
+  const listHeight = height - headerHeight;
+  if (index < minLineY + 1) {
+    return focusIndexScrollUp(state, index, listHeight, itemHeight, itemsLength);
+  }
+  if (index >= maxLineY - 1) {
+    return focusIndexScrollDown(state, index, listHeight, itemHeight, itemsLength);
+  }
+  return {
+    ...state,
+    focusedIndex: index,
+    focused: true
+  };
+};
+
+const first = () => {
+  return 0;
+};
+const last = items => {
+  return items.length - 1;
+};
+const next = (items, index) => {
+  return (index + 1) % items.length;
+};
+
+const focusFirst = state => {
+  const firstIndex = first();
+  return focusIndex(state, firstIndex);
+};
+
+const focusLast = state => {
+  const {
+    items
+  } = state;
+  const lastIndex = last(items);
+  return focusIndex(state, lastIndex);
+};
+
+const focusNext = state => {
+  const {
+    focusedIndex,
+    items
+  } = state;
+  const nextIndex = next(items, focusedIndex);
+  return focusIndex(state, nextIndex);
+};
+
+const focusNextPage = async state => {
+  const {
+    focusedIndex,
+    items,
+    maxLineY,
+    minLineY
+  } = state;
+  if (isLastIndex(items, focusedIndex)) {
+    return state;
+  }
+  const indexNextPage = Math.min(maxLineY + (maxLineY - minLineY) - 2, lastIndex(items));
+  return focusIndex(state, indexNextPage);
+};
+
+const focusPreviousPage = async state => {
+  const {
+    focusedIndex,
+    minLineY,
+    maxLineY
+  } = state;
+  if (focusedIndex === 0 || focusedIndex === -1) {
+    return state;
+  }
+  const indexPreviousPage = Math.max(minLineY - (maxLineY - minLineY) + 1, 0);
+  return focusIndex(state, indexPreviousPage);
+};
+
+const Button$2 = 1;
+
+const ClearAll = 'ClearAll';
+const Filter = 'Filter';
+const Refresh = 'Refresh';
+const Ellipsis = 'Ellipsis';
+
+const getActions = () => {
+  return [{
+    type: Button$2,
+    id: refresh(),
+    icon: Refresh,
+    command: ''
+  }, {
+    type: Button$2,
+    id: viewsAndMoreActions(),
+    icon: Ellipsis,
+    command: ''
+  }];
+};
+
 const Enter = 3;
 const Space = 9;
 const PageUp = 10;
@@ -1238,8 +1468,289 @@ const getKeyBindings = () => {
   }];
 };
 
-const Button = 1;
+const handleBlur = () => {
+  // TODO
+};
+
+const RendererWorker = 1;
+
+const rpcs = Object.create(null);
+const set = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get = id => {
+  return rpcs[id];
+};
+
+const invoke = (method, ...params) => {
+  const rpc = get(RendererWorker);
+  // @ts-ignore
+  return rpc.invoke(method, ...params);
+};
+
+const openUri = async uri => {
+  return invoke('Main.openUri', uri);
+};
+
+const handleClick = async (state, index) => {
+  const {
+    items,
+    minLineY
+  } = state;
+  const actualIndex = index + minLineY;
+  const extension = items[actualIndex];
+  const uri = `extension-detail://${extension.id}`;
+  await openUri(uri);
+  return focusIndex(state, actualIndex);
+};
+
+const handleClickCurrent = state => {
+  const {
+    focusedIndex
+  } = state;
+  return handleClick(state, focusedIndex);
+};
+
+const handleClickCurrentButKeepFocus = state => {
+  const {
+    focusedIndex
+  } = state;
+  return handleClick(state, focusedIndex);
+};
+
+const show = async (x, y, id) => {
+  number(x);
+  number(y);
+  number(id);
+  // TODO
+};
+
+const ManageExtension = 8;
+
+const handleContextMenu = async (state, button, x, y) => {
+  // TODO use focused index when when context menu button is -1 (keyboard)
+  await show(x, y, ManageExtension);
+  return state;
+};
+
+const handleDisable = (state, id) => {
+  // TODO
+};
+
+const handleEnable = (state, id) => {
+  // TODO
+};
+
+const setFocus = async focusId => {
+  await invoke('Focus.setFocus', focusId);
+};
+
+const handleFocus = async () => {
+  await setFocus(FocusExtensions);
+};
+
+// TODO show error / warning  when installment fails / times out
+const handleInstall = async (state, id) => {
+  // TODO
+};
 
+const handleScrollBarCaptureLost = state => {
+  return {
+    ...state,
+    scrollBarActive: false
+  };
+};
+
+const getNewDeltaPercent = (height, scrollBarHeight, relativeY) => {
+  const halfScrollBarHeight = scrollBarHeight / 2;
+  if (relativeY <= halfScrollBarHeight) {
+    // clicked at top
+    return {
+      percent: 0,
+      handleOffset: relativeY
+    };
+  }
+  if (relativeY <= height - halfScrollBarHeight) {
+    // clicked in middle
+    return {
+      percent: (relativeY - halfScrollBarHeight) / (height - scrollBarHeight),
+      handleOffset: halfScrollBarHeight
+    };
+  }
+  // clicked at bottom
+  return {
+    percent: 1,
+    handleOffset: scrollBarHeight - height + 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);
+  number(max);
+  return Math.min(Math.max(num, min), max);
+};
+
+const setDeltaY = (state, value) => {
+  object(state);
+  number(value);
+  const {
+    itemHeight,
+    finalDeltaY,
+    deltaY,
+    height,
+    headerHeight
+  } = state;
+  const listHeight = height - headerHeight;
+  const newDeltaY = clamp(value, 0, finalDeltaY);
+  if (deltaY === newDeltaY) {
+    return state;
+  }
+  // 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(listHeight, itemHeight);
+  return {
+    ...state,
+    deltaY: newDeltaY,
+    minLineY,
+    maxLineY
+  };
+};
+
+const handleScrollBarClick = (state, eventY) => {
+  const {
+    y,
+    deltaY,
+    headerHeight,
+    finalDeltaY,
+    scrollBarHeight,
+    height
+  } = state;
+  const contentHeight = height - headerHeight;
+  const relativeY = eventY - y - headerHeight;
+  const currentScrollBarY = getScrollBarY(deltaY, finalDeltaY, contentHeight, scrollBarHeight);
+  const diff = relativeY - currentScrollBarY;
+  if (diff >= 0 && diff < scrollBarHeight) {
+    return {
+      ...state,
+      handleOffset: diff,
+      scrollBarActive: true
+    };
+  }
+  const {
+    percent,
+    handleOffset
+  } = getNewDeltaPercent(contentHeight, scrollBarHeight, relativeY);
+  const newDeltaY = percent * finalDeltaY;
+  return {
+    ...setDeltaY(state, newDeltaY),
+    handleOffset,
+    scrollBarActive: true
+  };
+};
+
+const getNewPercent = (contentHeight, scrollBarHeight, relativeY) => {
+  if (relativeY <= contentHeight - scrollBarHeight / 2) {
+    // clicked in middle
+    return relativeY / (contentHeight - scrollBarHeight);
+  }
+  // clicked at bottom
+  return 1;
+};
+const handleScrollBarMove = (state, eventY) => {
+  const {
+    y,
+    headerHeight,
+    handleOffset,
+    finalDeltaY,
+    height,
+    scrollBarHeight
+  } = state;
+  const relativeY = eventY - y - headerHeight - handleOffset;
+  const contentHeight = height - headerHeight;
+  const newPercent = getNewPercent(contentHeight, scrollBarHeight, relativeY);
+  const newDeltaY = newPercent * finalDeltaY;
+  return setDeltaY(state, newDeltaY);
+};
+
+// TODO show error / warning  when installment fails / times out
+const handleUninstall = async (state, id) => {
+  // TODO
+};
+
+const handleWheel = (state, deltaMode, deltaY) => {
+  number(deltaMode);
+  number(deltaY);
+  return setDeltaY(state, state.deltaY + deltaY);
+};
+
+const getAllExtensions = async platform => {
+  if (platform === Web) {
+    return [];
+  }
+  return [];
+};
+
+const Small = 1;
+const Normal = 2;
+const Large = 3;
+
+const getViewletSize = width => {
+  if (width < 180) {
+    return Small;
+  }
+  if (width < 768) {
+    return Normal;
+  }
+  return Large;
+};
+
+const getSavedValue = savedState => {
+  if (savedState && typeof savedState === 'object' && 'searchValue' in savedState && typeof savedState.searchValue === 'string') {
+    return savedState.searchValue;
+  }
+  return '';
+};
+const restoreState = savedState => {
+  const searchValue = getSavedValue(savedState);
+  return {
+    searchValue
+  };
+};
+
+const loadContent = async (uid, savedState) => {
+  const {
+    newState
+  } = get$1(uid);
+  const {
+    width,
+    platform
+  } = newState;
+  const {
+    searchValue
+  } = 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 updatedState = await handleInput({
+    ...newState,
+    allExtensions,
+    size
+  }, searchValue);
+  set$1(uid, newState, updatedState);
+};
+
+const openSuggest = () => {
+  // TODO
+};
+
+const Actions = 'Actions';
 const ExtensionActions = 'ExtensionActions';
 const ExtensionActive = 'ExtensionActive';
 const ExtensionHeader = 'ExtensionHeader';
@@ -1248,8 +1759,10 @@ const ExtensionListItemAuthorName = 'ExtensionListItemAuthorName';
 const ExtensionListItemDescription = 'ExtensionListItemDescription';
 const ExtensionListItemDetail = 'ExtensionListItemDetail';
 const ExtensionListItemFooter = 'ExtensionListItemFooter';
+const MaskIcon = 'MaskIcon';
 const ExtensionListItemIcon = 'ExtensionListItemIcon';
 const ExtensionListItemName = 'ExtensionListItemName';
+const IconButton = 'IconButton';
 const ListItems = 'ListItems';
 const MultilineInputBox = 'MultilineInputBox';
 const ScrollBarThumb = 'ScrollBarThumb';
@@ -1262,11 +1775,12 @@ const CheckBox = 'checkbox';
 const List = 'list';
 const ListItem = 'listitem';
 const None = 'none';
+const ToolBar = 'toolbar';
 
-const Div = 4;
-const Text = 12;
-const Img = 17;
-const TextArea = 62;
+const Div$1 = 4;
+const Img$1 = 17;
+const TextArea$1 = 62;
+const Button$1 = 1;
 
 const getSearchFieldButtonVirtualDom = button => {
   const {
@@ -1275,7 +1789,7 @@ const getSearchFieldButtonVirtualDom = button => {
     title
   } = button;
   return [{
-    type: Div,
+    type: Div$1,
     className: `SearchFieldButton ${checked ? 'SearchFieldButtonChecked' : ''}`,
     title,
     role: CheckBox,
@@ -1283,7 +1797,7 @@ const getSearchFieldButtonVirtualDom = button => {
     tabIndex: 0,
     childCount: 1
   }, {
-    type: Div,
+    type: Div$1,
     className: `MaskIcon ${icon}`,
     childCount: 0
   }];
@@ -1291,12 +1805,12 @@ const getSearchFieldButtonVirtualDom = button => {
 
 const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, outsideButtons, onFocus = '') => {
   const dom = [{
-    type: Div,
+    type: Div$1,
     className: SearchField,
     role: None,
     childCount: 2
   }, {
-    type: TextArea,
+    type: TextArea$1,
     className: MultilineInputBox,
     spellcheck: false,
     autocapitalize: 'off',
@@ -1307,13 +1821,13 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
     onFocus,
     childCount: 0
   }, {
-    type: Div,
+    type: Div$1,
     className: SearchFieldButtons,
     childCount: insideButtons.length
   }, ...insideButtons.flatMap(getSearchFieldButtonVirtualDom)];
   if (outsideButtons.length > 0) {
     dom.unshift({
-      type: Div,
+      type: Div$1,
       className: SearchFieldContainer,
       role: None,
       childCount: 1 + outsideButtons.length
@@ -1325,12 +1839,27 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
 
 const getExtensionHeaderVirtualDom = (placeholder, actions) => {
   return [{
-    type: Div,
+    type: Div$1,
     className: ExtensionHeader,
     childCount: 1
   }, ...getSearchFieldVirtualDom('extensions', placeholder, 'handleExtensionsInput', actions, [])];
 };
 
+const renderHeader$1 = newState => {
+  const actions = [{
+    type: Button$2,
+    title: clearExtensionSearchResults(),
+    icon: `MaskIcon${ClearAll}`,
+    command: 'Extensions.clearSearchResults'
+  }, {
+    type: Button$2,
+    title: filter(),
+    icon: `MaskIcon${Filter}`
+  }];
+  const dom = getExtensionHeaderVirtualDom(newState.placeholder, actions);
+  return ['setHeaderDom', dom];
+};
+
 const HandleContextMenu = 'handleContextMenu';
 const HandlePointerDown = 'handlePointerDown';
 const HandleTouchStart = 'handleTouchStart';
@@ -1338,7 +1867,134 @@ const HandleWheel = 'handleWheel';
 
 const Extension = 'Extension';
 
-const text = data => {
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+
+// src/parts/MergeClassNames/MergeClassNames.ts
+var mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(" ");
+};
+
+// src/parts/VirtualDomElements/VirtualDomElements.ts
+var VirtualDomElements_exports = {};
+__export(VirtualDomElements_exports, {
+  A: () => A,
+  Abbr: () => Abbr,
+  Article: () => Article,
+  Aside: () => Aside,
+  Audio: () => Audio,
+  Br: () => Br,
+  Button: () => Button,
+  Cite: () => Cite,
+  Col: () => Col,
+  ColGroup: () => ColGroup,
+  Data: () => Data,
+  Dd: () => Dd,
+  Del: () => Del,
+  Div: () => Div,
+  Dl: () => Dl,
+  Figcaption: () => Figcaption,
+  Figure: () => Figure,
+  Footer: () => Footer,
+  H1: () => H1,
+  H2: () => H2,
+  H3: () => H3,
+  H4: () => H4,
+  H5: () => H5,
+  H6: () => H6,
+  Header: () => Header,
+  Hr: () => Hr,
+  I: () => I,
+  Img: () => Img,
+  Input: () => Input,
+  Ins: () => Ins,
+  Kbd: () => Kbd,
+  Li: () => Li,
+  Nav: () => Nav,
+  Ol: () => Ol,
+  Option: () => Option,
+  P: () => P,
+  Pre: () => Pre,
+  Root: () => Root,
+  Search: () => Search,
+  Section: () => Section,
+  Select: () => Select,
+  Span: () => Span,
+  TBody: () => TBody,
+  THead: () => THead,
+  Table: () => Table,
+  Td: () => Td,
+  Text: () => Text,
+  TextArea: () => TextArea,
+  Tfoot: () => Tfoot,
+  Th: () => Th,
+  Time: () => Time,
+  Tr: () => Tr,
+  Ul: () => Ul,
+  Video: () => Video
+});
+var Audio = 0;
+var Button = 1;
+var Col = 2;
+var ColGroup = 3;
+var Div = 4;
+var H1 = 5;
+var Input = 6;
+var Kbd = 7;
+var Span = 8;
+var Table = 9;
+var TBody = 10;
+var Td = 11;
+var Text = 12;
+var Th = 13;
+var THead = 14;
+var Tr = 15;
+var I = 16;
+var Img = 17;
+var Root = 0;
+var Ins = 20;
+var Del = 21;
+var H2 = 22;
+var H3 = 23;
+var H4 = 24;
+var H5 = 25;
+var H6 = 26;
+var Article = 27;
+var Aside = 28;
+var Footer = 29;
+var Header = 30;
+var Nav = 40;
+var Section = 41;
+var Search = 42;
+var Dd = 43;
+var Dl = 44;
+var Figcaption = 45;
+var Figure = 46;
+var Hr = 47;
+var Li = 48;
+var Ol = 49;
+var P = 50;
+var Pre = 51;
+var A = 53;
+var Abbr = 54;
+var Br = 55;
+var Cite = 56;
+var Data = 57;
+var Time = 58;
+var Tfoot = 59;
+var Ul = 60;
+var Video = 61;
+var TextArea = 62;
+var Select = 63;
+var Option = 64;
+
+// src/parts/Text/Text.ts
+var text = data => {
   return {
     type: Text,
     text: data,
@@ -1347,27 +2003,27 @@ const text = data => {
 };
 
 const listItemDetail = {
-  type: Div,
+  type: Div$1,
   className: ExtensionListItemDetail,
   childCount: 3
 };
 const listItemName = {
-  type: Div,
+  type: Div$1,
   className: ExtensionListItemName,
   childCount: 1
 };
 const listItemDescription = {
-  type: Div,
+  type: Div$1,
   className: ExtensionListItemDescription,
   childCount: 1
 };
 const listItemFooter = {
-  type: Div,
+  type: Div$1,
   className: ExtensionListItemFooter,
   childCount: 2
 };
 const listItemAuthorName = {
-  type: Div,
+  type: Div$1,
   className: ExtensionListItemAuthorName,
   childCount: 1
 };
@@ -1383,7 +2039,7 @@ const getExtensionListItemVirtualDom = extension => {
     focused
   } = extension;
   const dom = [{
-    type: Div,
+    type: Div$1,
     role: ListItem,
     ariaRoleDescription: Extension,
     className: ExtensionListItem,
@@ -1392,13 +2048,13 @@ const getExtensionListItemVirtualDom = extension => {
     top,
     childCount: 2
   }, {
-    type: Img,
+    type: Img$1,
     src: icon,
     className: ExtensionListItemIcon,
     role: None,
     childCount: 0
   }, listItemDetail, listItemName, text(name), listItemDescription, text(description), listItemFooter, listItemAuthorName, text(publisher), {
-    type: Div,
+    type: Div$1,
     className: ExtensionActions,
     childCount: 0
   }];
@@ -1411,7 +2067,7 @@ const getExtensionListItemVirtualDom = extension => {
 
 const getExtensionsListVirtualDom = visibleExtensions => {
   const dom = [{
-    type: Div,
+    type: Div$1,
     className: ListItems,
     tabIndex: 0,
     ariaLabel: extensions(),
@@ -1460,8 +2116,20 @@ const getVisible = state => {
   return visible;
 };
 
-const ClearAll = 'ClearAll';
-const Filter = 'Filter';
+const renderItems = newState => {
+  // TODO render extensions incrementally when scrolling
+  const visibleExtensions = getVisible(newState);
+  const dom = getExtensionsVirtualDom(visibleExtensions);
+  return ['setExtensionsDom', dom];
+};
+
+const SetMessage = 'setMessage';
+const SetScrollBar = 'setScrollBar';
+const SetSearchValue = 'setSearchValue';
+
+const renderMessage$1 = newState => {
+  return [/* method */SetMessage, /* message */newState.message];
+};
 
 const px = value => {
   return `${value}px`;
@@ -1470,61 +2138,39 @@ const position = (x, y) => {
   return `${x}px ${y}px`;
 };
 
-const SetMessage = 'setMessage';
-const SetScrollBar = 'setScrollBar';
-const SetSearchValue = 'setSearchValue';
-
-const getScrollBarOffset = (delta, finalDelta, size, scrollBarSize) => {
-  const scrollBarOffset = delta / finalDelta * (size - scrollBarSize);
-  return scrollBarOffset;
+const renderScrollBar$1 = newState => {
+  // @ts-ignore
+  const listHeight = getListHeight(newState);
+  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 roundedScrollBarY = Math.round(scrollBarY);
+  const heightString = px(scrollBarHeight);
+  const translateString = position(0, roundedScrollBarY);
+  let className = ScrollBarThumb;
+  if (newState.scrollBarActive) {
+    className += ' ' + ScrollBarThumbActive;
+  }
+  return [/* method */SetScrollBar, translateString, heightString, className];
 };
-const getScrollBarY = getScrollBarOffset;
 
-const getListHeight = state => {
-  const {
-    height,
-    headerHeight
-  } = state;
-  return height - headerHeight;
-};
 const renderExtensions = {
-  isEqual(oldState, newState) {
-    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.deltaY === newState.deltaY && oldState.focusedIndex === newState.focusedIndex;
-  },
+  isEqual: isEqual$2,
   apply(oldState, newState) {
-    // TODO render extensions incrementally when scrolling
-    const visibleExtensions = getVisible(newState);
-    const dom = getExtensionsVirtualDom(visibleExtensions);
-    return ['setExtensionsDom', dom];
+    return renderItems(newState);
   }
 };
 const renderScrollBar = {
-  isEqual(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;
-  },
+  isEqual: isEqual,
   apply(oldState, newState) {
-    // @ts-ignore
-    const listHeight = getListHeight(newState);
-    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 roundedScrollBarY = Math.round(scrollBarY);
-    const heightString = px(scrollBarHeight);
-    const translateString = position(0, roundedScrollBarY);
-    let className = ScrollBarThumb;
-    if (newState.scrollBarActive) {
-      className += ' ' + ScrollBarThumbActive;
-    }
-    return [/* method */SetScrollBar, translateString, heightString, className];
+    return renderScrollBar$1(newState);
   }
 };
 const renderMessage = {
-  isEqual(oldState, newState) {
-    return oldState.message === newState.message;
-  },
+  isEqual: isEqual$1,
   apply(oldState, newState) {
-    return [/* method */SetMessage, /* message */newState.message];
+    return renderMessage$1(newState);
   }
 };
 const renderSearchValue = {
@@ -1536,22 +2182,9 @@ const renderSearchValue = {
   }
 };
 const renderHeader = {
-  isEqual(oldState, newState) {
-    return oldState.placeholder === newState.placeholder;
-  },
+  isEqual: isEqual$3,
   apply(oldState, newState) {
-    const actions = [{
-      type: Button,
-      title: clearExtensionSearchResults(),
-      icon: `MaskIcon${ClearAll}`,
-      command: 'Extensions.clearSearchResults'
-    }, {
-      type: Button,
-      title: filter(),
-      icon: `MaskIcon${Filter}`
-    }];
-    const dom = getExtensionHeaderVirtualDom(newState.placeholder, actions);
-    return ['setHeaderDom', dom];
+    return renderHeader$1(newState);
   }
 };
 const render = [renderScrollBar, renderMessage, renderExtensions, renderSearchValue, renderHeader];
@@ -1565,6 +2198,73 @@ const doRender = (oldState, newState) => {
   return commands;
 };
 
+const getIconVirtualDom = (icon, type = Div$1) => {
+  return {
+    type,
+    className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
+    role: None,
+    childCount: 0
+  };
+};
+
+const getActionButtonVirtualDom = action => {
+  const {
+    id,
+    icon,
+    command
+  } = action;
+  return [{
+    type: Button$1,
+    className: IconButton,
+    title: id,
+    'data-command': command,
+    childCount: 1
+  }, getIconVirtualDom(icon)];
+};
+
+const getActionVirtualDom = action => {
+  switch (action.type) {
+    case Button$2:
+      return getActionButtonVirtualDom(action);
+    default:
+      return [];
+  }
+};
+
+const getActionsVirtualDom = actions => {
+  return [{
+    type: Div$1,
+    className: Actions,
+    role: ToolBar,
+    childCount: actions.length
+  }, ...actions.flatMap(getActionVirtualDom)];
+};
+
+const renderActions = uid => {
+  const {
+    oldState,
+    newState
+  } = get$1(uid);
+  if (oldState === newState) {
+    return [];
+  }
+  const actions = [];
+  const dom = getActionsVirtualDom(actions);
+  return dom;
+};
+
+const renderEventListeners = () => {
+  return [{
+    name: HandleContextMenu,
+    params: ['handleContextMenu', 'event.button', 'event.clientX', 'event.clientY'],
+    preventDefault: true
+  }, {
+    name: HandleWheel,
+    params: ['handleWheel', 'event.deltaMode', 'event.deltaY'],
+    passive: true
+  }];
+};
+
 const saveState = state => {
   const {
     searchValue
@@ -1574,19 +2274,64 @@ const saveState = state => {
   };
 };
 
+const scrollDown = state => {
+  const {
+    finalDeltaY,
+    deltaY
+  } = state;
+  const newDeltaY = Math.min(deltaY + 20, finalDeltaY);
+  return setDeltaY(state, newDeltaY);
+};
+
+const selectIndex = (state, index) => {
+  return {
+    ...state,
+    focusedIndex: index
+  };
+};
+
+const toggleSuggest = () => {
+  // TODO
+};
+
 const commandMap = {
   'SearchExtensions.clearSearchResults': clearSearchResults,
+  'SearchExtensions.closeSuggest': closeSuggest,
+  'SearchExtensions.create': create,
+  'SearchExtensions.diff': diff,
+  'SearchExtensions.focusFirst': focusFirst,
+  'SearchExtensions.focusIndex': focusIndex,
+  'SearchExtensions.focusLast': focusLast,
+  'SearchExtensions.focusNext': focusNext,
+  'SearchExtensions.focusNextPage': focusNextPage,
+  'SearchExtensions.focusPreviousPage': focusPreviousPage,
+  'SearchExtensions.getActions': getActions,
   'SearchExtensions.getKeyBindings': getKeyBindings,
+  'SearchExtensions.handleBlur': handleBlur,
+  'SearchExtensions.renderEventListeners': renderEventListeners,
+  'SearchExtensions.handleClick': handleClick,
+  'SearchExtensions.handleClickCurrent': handleClickCurrent,
+  'SearchExtensions.handleClickCurrentButKeepFocus': handleClickCurrentButKeepFocus,
+  'SearchExtensions.renderActions': renderActions,
+  'SearchExtensions.handleContextMenu': handleContextMenu,
+  'SearchExtensions.handleDisable': handleDisable,
+  'SearchExtensions.handleEnable': handleEnable,
+  'SearchExtensions.handleFocus': handleFocus,
+  'SearchExtensions.handleInstall': handleInstall,
+  'SearchExtensions.handleScrollBarCaptureLos': handleScrollBarCaptureLost,
+  'SearchExtensions.handleScrollBarClick': handleScrollBarClick,
+  'SearchExtensions.handleScrollBarMove': handleScrollBarMove,
+  'SearchExtensions.handleUninstall': handleUninstall,
+  'SearchExtensions.handleWheel': handleWheel,
+  'SearchExtensions.loadContent': loadContent,
+  'SearchExtensions.openSuggest': openSuggest,
   'SearchExtensions.render': doRender,
+  'SearchExtensions.saveState': saveState,
+  'SearchExtensions.scrollDown': scrollDown,
   'SearchExtensions.searchExtensions': searchExtensions,
-  'SearchExtensions.saveState': saveState
-};
-
-const RendererWorker = 1;
-
-const rpcs = Object.create(null);
-const set = (id, rpc) => {
-  rpcs[id] = rpc;
+  'SearchExtensions.selectIndex': selectIndex,
+  'SearchExtensions.setDeltaY': setDeltaY,
+  'SearchExtensions.toggleSuggest': toggleSuggest
 };
 
 const listen = async () => {

package/package.json

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