@lvce-editor/completion-worker 1.3.0 → 1.5.0

package/dist/completionWorkerMain.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') {
@@ -848,11 +854,11 @@ const commands = Object.create(null);
 const register = commandMap => {
   Object.assign(commands, commandMap);
 };
-const getCommand = key => {
+const getCommand$1 = key => {
   return commands[key];
 };
 const execute$1 = (command, ...args) => {
-  const fn = getCommand(command);
+  const fn = getCommand$1(command);
   if (!fn) {
     throw new Error(`command not found ${command}`);
   }
@@ -1046,16 +1052,20 @@ const create$1 = (uid, x, y, width, height, editorUid, editorLanguageId) => {
   set$2(uid, state, state);
 };
 
-const isEqual$3 = (oldState, newState) => {
+const isEqual$4 = (oldState, newState) => {
   return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
 };
 
+const isEqual$3 = (oldState, newState) => {
+  return oldState.version === newState.version;
+};
+
 const isEqual$2 = (oldState, newState) => {
   return oldState.version === newState.version;
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.items === newState.items;
+  return oldState.items === newState.items && oldState.focusedIndex === newState.focusedIndex;
 };
 
 const isEqual = (oldState, newState) => {
@@ -1067,9 +1077,10 @@ const RenderBounds = 8;
 const RenderEventListeners = 11;
 const RenderUid = 12;
 const RenderContent = 13;
+const RenderFocusContext = 14;
 
-const modules = [isEqual$2, isEqual$1, isEqual$3, isEqual];
-const numbers = [RenderEventListeners, RenderItems, RenderBounds, RenderUid];
+const modules = [isEqual$3, isEqual$1, isEqual$4, isEqual, isEqual$2];
+const numbers = [RenderEventListeners, RenderItems, RenderBounds, RenderUid, RenderFocusContext];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1091,12 +1102,246 @@ const diff2 = uid => {
   return diffResult;
 };
 
+const focusIndex = (state, index) => {
+  const newState = {
+    ...state,
+    focusedIndex: index,
+    focused: true
+  };
+  return newState;
+};
+
+const focusFirst = state => {
+  const firstIndex = 0;
+  return focusIndex(state, firstIndex);
+};
+
+const focusNext = state => {
+  const {
+    focusedIndex
+  } = state;
+  const nextIndex = focusedIndex + 1;
+  return focusIndex(state, nextIndex);
+};
+
+const focusPrevious = state => {
+  const previousIndex = state.focusedIndex - 1;
+  return focusIndex(state, previousIndex);
+};
+
+const openDetails = async state => {
+  // TODO ask editor worker to add completion details widget
+  return state;
+};
+
+const OnCompletion = 'onCompletion';
+
+const CompletionExecute = 'ExtensionHostCompletion.execute';
+
+const rpcs = Object.create(null);
+const set$a = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get = id => {
+  return rpcs[id];
+};
+
+/* eslint-disable  @typescript-eslint/explicit-function-return-type */
+
+const create = rpcId => {
+  return {
+    // @ts-ignore
+    invoke(method, ...params) {
+      const rpc = get(rpcId);
+      // @ts-ignore
+      return rpc.invoke(method, ...params);
+    },
+    // @ts-ignore
+    invokeAndTransfer(method, ...params) {
+      const rpc = get(rpcId);
+      // @ts-ignore
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    set(rpc) {
+      set$a(rpcId, rpc);
+    }
+  };
+};
+const EditorWorker$1 = 99;
+const ExtensionHostWorker = 44;
+const {
+  invoke: invoke$9,
+  invokeAndTransfer: invokeAndTransfer$9,
+  set: set$9
+} = create(EditorWorker$1);
+const EditorWorker = {
+  __proto__: null,
+  invoke: invoke$9,
+  invokeAndTransfer: invokeAndTransfer$9,
+  set: set$9
+};
+const {
+  invoke: invoke$7,
+  set: set$7
+} = create(ExtensionHostWorker);
+const ExtensionHost = {
+  __proto__: null,
+  invoke: invoke$7,
+  set: set$7
+};
+
+const {
+  invoke: invoke$1,
+  set: set$1,
+  invokeAndTransfer
+} = EditorWorker;
+
+// TODO add tests for this
+const activateByEvent = async event => {
+  // @ts-ignore
+  await invoke$1('ActivateByEvent.activateByEvent', event);
+};
+
+const {
+  invoke,
+  set
+} = ExtensionHost;
+
+const execute = async ({
+  editorLanguageId,
+  editorUid,
+  args,
+  event,
+  method,
+  noProviderFoundMessage,
+  noProviderFoundResult = undefined
+}) => {
+  const fullEvent = `${event}:${editorLanguageId}`;
+  await activateByEvent(fullEvent);
+  const result = await invoke(method, editorUid, ...args);
+  return result;
+};
+
+const executeCompletionProvider = async (editorUid, editorLanguageId, offset) => {
+  return execute({
+    editorUid,
+    editorLanguageId,
+    event: OnCompletion,
+    method: CompletionExecute,
+    args: [offset],
+    noProviderFoundMessage: 'no completion provider found',
+    noProviderFoundResult: []});
+};
+
+const getOffsetAtCursor = editorUid => {
+  // TODO ask editor worker
+  return 0;
+};
+
+// TODO possible to do this with events/state machine instead of promises -> enables canceling operations / concurrent calls
+const getCompletions = async (editorUid, editorLanguageId) => {
+  const offset = getOffsetAtCursor();
+  const completions = await executeCompletionProvider(editorUid, editorLanguageId, offset);
+  return completions;
+};
+
+const select = async (state, completionItem) => {
+  // TODO ask editor worker to apply changes and close completion widget
+  // const changes = await getEdits(state, completionItem)
+  // TODO ask editor worker to remove widget
+  // const index = state.widgets
+  //   .indexOf
+  //   // ViewletModuleId.EditorCompletion
+  //   ()
+  // if (index !== -1) {
+  //   state.widgets.splice(index, 1)
+  //   state.completionState = EditorCompletionState.None
+  //   state.completionUid = 0
+  // }
+  // // TODO dispose completion widget
+  // // TODO apply edit in editor worker instead of asking renderer worker
+  // // await RendererWorker.invoke('Viewlet.dispose', state.uid)
+  // const { widgets } = state
+  // const newWidgets = RemoveEditorWidget.removeEditorWidget(widgets, WidgetId.Completion)
+  // const intermediateEditor = await EditorCommandApplyEdit.applyEdit(state, changes)
+  return {
+    ...state
+  };
+};
+const selectIndex = async (state, index) => {
+  const {
+    items
+  } = state;
+  if (index === -1) {
+    return state;
+  }
+  if (index > items.length) {
+    throw new Error('index too large');
+  }
+  return select(state);
+};
+
+const selectCurrent = state => {
+  const {
+    focusedIndex
+  } = state;
+  return selectIndex(state, focusedIndex);
+};
+
 const commandIds = ['handleSliderPointerDown', 'handleSliderPointerMove', 'initialize'];
 
 const getCommandIds = () => {
   return commandIds;
 };
 
+const Enter = 3;
+const Space$1 = 9;
+const End = 255;
+const Home = 12;
+const UpArrow = 14;
+const DownArrow = 16;
+
+const CtrlCmd = 1 << 11 >>> 0;
+
+const FocusEditorCompletions = 9;
+const FocusEditorRename = 11;
+
+const Completion = 3;
+
+const getCommand = shortId => {
+  return {
+    command: 'Editor.executeWidgetCommand',
+    args: ['Completions', `Completions.${shortId}`, 0, Completion]
+  };
+};
+const getKeyBindings = () => {
+  return [{
+    key: DownArrow,
+    ...getCommand('focusNext'),
+    when: FocusEditorCompletions
+  }, {
+    key: UpArrow,
+    ...getCommand('focusPrevious'),
+    when: FocusEditorCompletions
+  }, {
+    key: Enter,
+    ...getCommand('selectCurrent'),
+    when: FocusEditorCompletions
+  }, {
+    key: End,
+    ...getCommand('focusLast'),
+    when: FocusEditorCompletions
+  }, {
+    key: Home,
+    ...getCommand('focusFirst'),
+    when: FocusEditorCompletions
+  }, {
+    key: CtrlCmd | Space$1,
+    ...getCommand('toggleDetails'),
+    when: FocusEditorCompletions
+  }];
+};
+
 const Diagonal = 1;
 const Left = 2;
 
@@ -1304,63 +1549,40 @@ const getListHeight = (itemsLength, itemHeight, maxHeight) => {
   return Math.min(totalHeight, maxHeight);
 };
 
-const rpcs = Object.create(null);
-const set$a = (id, rpc) => {
-  rpcs[id] = rpc;
-};
-const get = id => {
-  return rpcs[id];
+const getWordAtOffset = async editorUid => {
+  return invoke$1('Editor.getWordAtOffset2', editorUid);
 };
 
-/* eslint-disable  @typescript-eslint/explicit-function-return-type */
-
-const create = rpcId => {
+const handleEditorDeleteLeft = async state => {
+  const {
+    unfilteredItems,
+    itemHeight,
+    maxHeight,
+    editorUid
+  } = state;
+  const x = 0; // TODO
+  // @ts-ignore
+  const y = 0; // TODP
+  const wordAtOffset = await getWordAtOffset(editorUid);
+  if (!wordAtOffset) {
+    return {
+      ...state,
+      disposed: true
+    };
+  }
+  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
+  const newMaxLineY = Math.min(items.length, 8);
+  const height = getListHeight(items.length, itemHeight, maxHeight);
   return {
-    // @ts-ignore
-    invoke(method, ...params) {
-      const rpc = get(rpcId);
-      // @ts-ignore
-      return rpc.invoke(method, ...params);
-    },
-    // @ts-ignore
-    invokeAndTransfer(method, ...params) {
-      const rpc = get(rpcId);
-      // @ts-ignore
-      return rpc.invokeAndTransfer(method, ...params);
-    },
-    set(rpc) {
-      set$a(rpcId, rpc);
-    }
+    ...state,
+    items,
+    x,
+    y,
+    maxLineY: newMaxLineY,
+    leadingWord: wordAtOffset,
+    height
   };
 };
-const EditorWorker$1 = 99;
-const ExtensionHostWorker = 44;
-const {
-  invoke: invoke$9,
-  invokeAndTransfer: invokeAndTransfer$9,
-  set: set$9
-} = create(EditorWorker$1);
-const EditorWorker = {
-  __proto__: null,
-  invoke: invoke$9,
-  invokeAndTransfer: invokeAndTransfer$9,
-  set: set$9
-};
-const {
-  invoke: invoke$7,
-  set: set$7
-} = create(ExtensionHostWorker);
-const ExtensionHost = {
-  __proto__: null,
-  invoke: invoke$7,
-  set: set$7
-};
-
-const {
-  invoke: invoke$1,
-  set: set$1,
-  invokeAndTransfer
-} = EditorWorker;
 
 const getPositionAtCursor = async parentUid => {
   const position = await invoke$1('Editor.getPositionAtCursor', parentUid);
@@ -1368,7 +1590,6 @@ const getPositionAtCursor = async parentUid => {
 };
 
 const getWordBefore = async (editorUid, rowIndex, columnIndex) => {
-  // @ts-ignore
   return invoke$1('Editor.getWordBefore2', editorUid, rowIndex, columnIndex);
 };
 
@@ -1404,6 +1625,52 @@ const handleEditorType = async state => {
   };
 };
 
+const clamp = (num, min, max) => {
+  number(num);
+  number(min);
+  number(max);
+  return Math.min(Math.max(num, min), max);
+};
+
+// TODO optimize this function to return the minimum number
+// of visible items needed, e.g. when not scrolled 5 items with
+// 20px fill 100px but when scrolled 6 items are needed
+const getNumberOfVisibleItems = (listHeight, itemHeight) => {
+  return Math.ceil(listHeight / itemHeight) + 1;
+};
+
+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 handleWheel = (state, deltaMode, deltaY) => {
+  number(deltaMode);
+  number(deltaY);
+  return setDeltaY(state, state.deltaY + deltaY);
+};
+
 const getPortTuple = () => {
   const {
     port1,
@@ -1441,75 +1708,17 @@ const createExtensionHostRpc = async () => {
   }
 };
 
-const {
-  invoke,
-  set
-} = ExtensionHost;
-
 const initialize = async () => {
   const rpc = await createExtensionHostRpc();
   set(rpc);
 };
 
-const OnCompletion = 'onCompletion';
-
-const CompletionExecute = 'ExtensionHostCompletion.execute';
-
-// TODO add tests for this
-const activateByEvent = async event => {
-  // @ts-ignore
-  await invoke$1('ActivateByEvent.activateByEvent', event);
-};
-
-const execute = async ({
-  editorLanguageId,
-  editorUid,
-  args,
-  event,
-  method,
-  noProviderFoundMessage,
-  noProviderFoundResult = undefined
-}) => {
-  const fullEvent = `${event}:${editorLanguageId}`;
-  await activateByEvent(fullEvent);
-  const result = await invoke(method, editorUid, ...args);
-  return result;
-};
-
-const executeCompletionProvider = async (editorUid, editorLanguageId, offset) => {
-  return execute({
-    editorUid,
-    editorLanguageId,
-    event: OnCompletion,
-    method: CompletionExecute,
-    args: [offset],
-    noProviderFoundMessage: 'no completion provider found',
-    noProviderFoundResult: []});
-};
-
-const getOffsetAtCursor = editorUid => {
-  // TODO ask editor worker
-  return 0;
-};
-
-// TODO possible to do this with events/state machine instead of promises -> enables canceling operations / concurrent calls
-const getCompletions = async (editorUid, editorLanguageId) => {
-  const offset = getOffsetAtCursor();
-  const completions = await executeCompletionProvider(editorUid, editorLanguageId, offset);
-  return completions;
-};
-
 const getFinalDeltaY = (height, itemHeight, itemsLength) => {
   const contentHeight = itemsLength * itemHeight;
   const finalDeltaY = Math.max(contentHeight - height, 0);
   return finalDeltaY;
 };
 
-const getWordAtOffset = async editorUid => {
-  // @ts-ignore
-  return invoke$1('Editor.getWordAtOffset2', editorUid);
-};
-
 const loadContent = async state => {
   const {
     itemHeight,
@@ -1546,12 +1755,14 @@ const loadContent = async state => {
     // @ts-ignore
     rowIndex,
     columnIndex,
-    width: 200
+    width: 200,
+    version: 1
   };
 };
 
 const SetBounds = 'Viewlet.setBounds';
 const SetDom2 = 'Viewlet.setDom2';
+const SetUid = 'Viewlet.setUid';
 const SetEventListeners = 'Viewlet.registerEventListeners';
 
 const renderBounds = (oldState, newState) => {
@@ -1585,34 +1796,22 @@ const renderEventListeners = state => {
   return [SetEventListeners, uid, eventListeners];
 };
 
-const emptyObject = {};
-const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
-const i18nString = (key, placeholders = emptyObject) => {
-  if (placeholders === emptyObject) {
-    return key;
-  }
-  const replacer = (match, rest) => {
-    return placeholders[rest];
-  };
-  return key.replaceAll(RE_PLACEHOLDER, replacer);
+const renderFocusContext = (oldState, newState) => {
+  return [/* method */'Viewlet.setFocusContext', FocusEditorRename];
 };
 
-const NoResults = 'No Results';
-
-const noResults = () => {
-  return i18nString(NoResults);
-};
-
-const None = 'none';
-const Option = 'option';
-
 const ColoredMaskIcon = 'ColoredMaskIcon';
+const EditorCompletion = 'EditorCompletion';
 const EditorCompletionItem = 'EditorCompletionItem';
 const EditorCompletionItemDeprecated = 'EditorCompletionItemDeprecated';
 const EditorCompletionItemFocused = 'EditorCompletionItemFocused';
 const EditorCompletionItemHighlight = 'EditorCompletionItemHighlight';
 const FileIcon = 'FileIcon';
 const Label = 'Label';
+const Viewlet = 'Viewlet';
+
+const None = 'none';
+const Option = 'option';
 
 const Div = 4;
 const Span = 8;
@@ -1639,6 +1838,9 @@ const getIconDom = (fileIcon, symbolName) => {
   };
 };
 
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
 const Text = 12;
 const text = data => {
   return {
@@ -1717,12 +1919,34 @@ const getCompletionItemVirtualDom = visibleItem => {
   }, getIconDom(fileIcon, symbolName), ...getHighlightedLabelDom(label, highlights)];
 };
 
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  const replacer = (match, rest) => {
+    return placeholders[rest];
+  };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
+};
+
+const NoResults = 'No Results';
+
+const noResults = () => {
+  return i18nString(NoResults);
+};
+
+const getNoResultsVirtualDom = () => {
+  return [{
+    type: Div,
+    childCount: 1
+  }, text(noResults())];
+};
+
 const getCompletionItemsVirtualDom = visibleItems => {
   if (visibleItems.length === 0) {
-    return [{
-      type: Div,
-      childCount: 1
-    }, text(noResults())];
+    return getNoResultsVirtualDom();
   }
   const root = {
     type: Div,
@@ -1732,6 +1956,24 @@ const getCompletionItemsVirtualDom = visibleItems => {
   return dom;
 };
 
+const getCompletionVirtualDom = visibleItems => {
+  return [{
+    type: Div,
+    className: mergeClassNames(Viewlet, EditorCompletion),
+    id: 'Completions',
+    childCount: 1
+  }, {
+    type: Div,
+    className: 'ListItems',
+    role: 'listbox',
+    ariaLabel: 'Suggest',
+    childCount: 1
+  }, ...getCompletionItemsVirtualDom(visibleItems)
+
+  // TODO render scrollbar
+  ];
+};
+
 const Property = 1;
 const Value = 2;
 const Function = 3;
@@ -1819,10 +2061,18 @@ const renderItems = (oldState, newState) => {
     uid
   } = newState;
   const visibleItems = getVisibleItems(newState.items, newState.itemHeight, newState.leadingWord, newState.minLineY, newState.maxLineY, newState.focusedIndex);
-  const dom = getCompletionItemsVirtualDom(visibleItems);
+  const dom = getCompletionVirtualDom(visibleItems);
   return [SetDom2, uid, dom];
 };
 
+const renderUid = (oldState, newState) => {
+  const {
+    uid,
+    editorUid
+  } = newState;
+  return [SetUid, uid, editorUid];
+};
+
 const getRenderer = diffType => {
   switch (diffType) {
     case RenderContent:
@@ -1831,8 +2081,12 @@ const getRenderer = diffType => {
       return renderBounds;
     case RenderEventListeners:
       return renderEventListeners;
+    case RenderUid:
+      return renderUid;
     case RenderItems:
       return renderItems;
+    case RenderFocusContext:
+      return renderFocusContext;
     default:
       throw new Error('unknown renderer');
   }
@@ -1864,12 +2118,22 @@ const terminate = () => {
 const commandMap = {
   'Completions.create': create$1,
   'Completions.diff2': diff2,
+  'Completions.focusFirst': wrapCommand(focusFirst),
+  'Completions.focusIndex': wrapCommand(focusIndex),
+  'Completions.focusNext': wrapCommand(focusNext),
+  'Completions.focusPrevious': wrapCommand(focusPrevious),
   'Completions.getCommandIds': getCommandIds,
+  'Completions.getKeyBindings': getKeyBindings,
+  'Completions.handleEditorDeleteLeft': wrapCommand(handleEditorDeleteLeft),
+  'Completions.handleEditorType': handleEditorType,
+  'Completions.handleWheel': wrapCommand(handleWheel),
+  'Completions.initialize': initialize,
   'Completions.loadContent': wrapCommand(loadContent),
   'Completions.render2': render2,
+  'Completions.selectCurrent': wrapCommand(selectCurrent),
+  'Completions.selectIndex': wrapCommand(selectIndex),
   'Completions.terminate': terminate,
-  'Completions.initialize': initialize,
-  'Completions.handleEditorType': handleEditorType
+  'Completions.openDetails': wrapCommand(openDetails)
 };
 
 const listen = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/completion-worker",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Web Worker for the find widget in Lvce Editor",
   "repository": {
     "type": "git",