@lvce-editor/extension-search-view 2.1.0 → 2.2.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) => {
@@ -1181,6 +1192,160 @@ 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
+  };
+  set$1(id, state, state);
+};
+
+const RenderItems = 4;
+const RenderScrollBar = 5;
+
+const diffType$1 = RenderItems;
+const isEqual$1 = (oldState, newState) => {
+  return true;
+};
+
+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$1, isEqual];
+const numbers = [diffType$1, diffType];
+
+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 Button = 1;
+
+const ClearAll = 'ClearAll';
+const Filter = 'Filter';
+const Refresh = 'Refresh';
+const Ellipsis = 'Ellipsis';
+
+const getActions = () => {
+  return [{
+    type: Button,
+    id: refresh(),
+    icon: Refresh,
+    command: ''
+  }, {
+    type: Button,
+    id: viewsAndMoreActions(),
+    icon: Ellipsis,
+    command: ''
+  }];
+};
+
 const Enter = 3;
 const Space = 9;
 const PageUp = 10;
@@ -1238,7 +1403,133 @@ 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 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 handleFocus = () => {
+  // TODO
+};
+
+// TODO show error / warning  when installment fails / times out
+const handleInstall = async (state, id) => {
+  // TODO
+};
+
+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 ExtensionActions = 'ExtensionActions';
 const ExtensionActive = 'ExtensionActive';
@@ -1460,9 +1751,6 @@ const getVisible = state => {
   return visible;
 };
 
-const ClearAll = 'ClearAll';
-const Filter = 'Filter';
-
 const px = value => {
   return `${value}px`;
 };
@@ -1574,19 +1862,65 @@ const saveState = state => {
   };
 };
 
+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 toggleSuggest = () => {
+  // TODO
+};
+
 const commandMap = {
   'SearchExtensions.clearSearchResults': clearSearchResults,
+  'SearchExtensions.closeSuggest': closeSuggest,
+  'SearchExtensions.create': create,
+  'SearchExtensions.diff': diff,
+  'SearchExtensions.focusIndex': focusIndex,
+  'SearchExtensions.getActions': getActions,
   'SearchExtensions.getKeyBindings': getKeyBindings,
+  'SearchExtensions.handleBlur': handleBlur,
+  'SearchExtensions.handleClick': handleClick,
+  'SearchExtensions.handleContextMenu': handleContextMenu,
+  'SearchExtensions.handleDisable': handleDisable,
+  'SearchExtensions.handleEnable': handleEnable,
+  'SearchExtensions.handleFocus': handleFocus,
+  'SearchExtensions.handleInstall': handleInstall,
+  'SearchExtensions.loadContent': loadContent,
+  'SearchExtensions.openSuggest': openSuggest,
   'SearchExtensions.render': doRender,
+  'SearchExtensions.saveState': saveState,
   'SearchExtensions.searchExtensions': searchExtensions,
-  'SearchExtensions.saveState': saveState
-};
-
-const RendererWorker = 1;
-
-const rpcs = Object.create(null);
-const set = (id, rpc) => {
-  rpcs[id] = rpc;
+  '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.2.0",
   "description": "Extension Search View Worker",
   "license": "MIT",
   "author": "Lvce Editor",