@lvce-editor/completion-worker 1.1.0 → 1.3.0

package/dist/completionWorkerMain.js

@@ -1020,7 +1020,7 @@ const {
   wrapCommand
 } = create$2();
 
-const create$1 = (uid, x, y, width, height, parentUid) => {
+const create$1 = (uid, x, y, width, height, editorUid, editorLanguageId) => {
   const state = {
     uid,
     items: [],
@@ -1039,13 +1039,37 @@ const create$1 = (uid, x, y, width, height, parentUid) => {
     headerHeight: 0,
     leadingWord: '',
     unfilteredItems: [],
-    version: 0
+    version: 0,
+    editorUid,
+    editorLanguageId
   };
   set$2(uid, state, state);
 };
 
-const modules = [];
-const numbers = [];
+const isEqual$3 = (oldState, newState) => {
+  return oldState.x === newState.x && oldState.y === newState.y && oldState.width === newState.width && oldState.height === newState.height;
+};
+
+const isEqual$2 = (oldState, newState) => {
+  return oldState.version === newState.version;
+};
+
+const isEqual$1 = (oldState, newState) => {
+  return oldState.items === newState.items;
+};
+
+const isEqual = (oldState, newState) => {
+  return oldState.version === newState.version;
+};
+
+const RenderItems = 1;
+const RenderBounds = 8;
+const RenderEventListeners = 11;
+const RenderUid = 12;
+const RenderContent = 13;
+
+const modules = [isEqual$2, isEqual$1, isEqual$3, isEqual];
+const numbers = [RenderEventListeners, RenderItems, RenderBounds, RenderUid];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1073,157 +1097,6 @@ const getCommandIds = () => {
   return commandIds;
 };
 
-const getPortTuple = () => {
-  const {
-    port1,
-    port2
-  } = new MessageChannel();
-  return {
-    port1,
-    port2
-  };
-};
-
-const rpcs = Object.create(null);
-const set$9 = (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$9(rpcId, rpc);
-    }
-  };
-};
-const EditorWorker$1 = 99;
-const ExtensionHostWorker = 44;
-const {
-  invoke: invoke$8,
-  invokeAndTransfer: invokeAndTransfer$8,
-  set: set$8
-} = create(EditorWorker$1);
-const EditorWorker = {
-  __proto__: null,
-  invoke: invoke$8,
-  invokeAndTransfer: invokeAndTransfer$8,
-  set: set$8
-};
-const {
-  invoke: invoke$6,
-  set: set$6
-} = create(ExtensionHostWorker);
-const ExtensionHost = {
-  __proto__: null,
-  invoke: invoke$6,
-  set: set$6
-};
-
-const {
-  invoke: invoke$1,
-  set: set$1,
-  invokeAndTransfer
-} = EditorWorker;
-
-const sendMessagePortToExtensionHostWorker = async port => {
-  const command = 'HandleMessagePort.handleMessagePort2';
-  // @ts-ignore
-  await invokeAndTransfer(
-  // @ts-ignore
-  'SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, 0 // TODO
-  );
-};
-
-const createExtensionHostRpc = async () => {
-  try {
-    const {
-      port1,
-      port2
-    } = getPortTuple();
-    await sendMessagePortToExtensionHostWorker(port2);
-    const rpc = await PlainMessagePortRpcParent.create({
-      commandMap: {},
-      messagePort: port1
-    });
-    return rpc;
-  } catch (error) {
-    throw new VError(error, `Failed to create extension host rpc`);
-  }
-};
-
-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 ({
-  editor,
-  args,
-  event,
-  method,
-  noProviderFoundMessage,
-  noProviderFoundResult = undefined
-}) => {
-  const fullEvent = `${event}:${editor.languageId}`;
-  await activateByEvent(fullEvent);
-  const result = await invoke(method, editor.uid, ...args);
-  return result;
-};
-
-const executeCompletionProvider = async (editor, offset) => {
-  return execute({
-    editor,
-    event: OnCompletion,
-    method: CompletionExecute,
-    args: [offset],
-    noProviderFoundMessage: 'no completion provider found',
-    noProviderFoundResult: []});
-};
-
-const getOffsetAtCursor = editor => {
-  // TODO
-  return 0;
-};
-
-// TODO possible to do this with events/state machine instead of promises -> enables canceling operations / concurrent calls
-const getCompletions = async editor => {
-  const offset = getOffsetAtCursor();
-  const completions = await executeCompletionProvider(editor, offset);
-  return completions;
-};
-
 const Diagonal = 1;
 const Left = 2;
 
@@ -1420,12 +1293,6 @@ const filterCompletionItems = (completionItems, word) => {
   return filteredCompletions;
 };
 
-const getFinalDeltaY = (height, itemHeight, itemsLength) => {
-  const contentHeight = itemsLength * itemHeight;
-  const finalDeltaY = Math.max(contentHeight - height, 0);
-  return finalDeltaY;
-};
-
 const getListHeight = (itemsLength, itemHeight, maxHeight) => {
   number(itemsLength);
   number(itemHeight);
@@ -1437,46 +1304,229 @@ 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];
+};
+
+/* 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;
+
 const getPositionAtCursor = async parentUid => {
   const position = await invoke$1('Editor.getPositionAtCursor', parentUid);
   return position;
 };
 
-const RE_WORD = /[\w\-]+$/;
-const getWordAtOffset = editor => {
+const getWordBefore = async (editorUid, rowIndex, columnIndex) => {
+  // @ts-ignore
+  return invoke$1('Editor.getWordBefore2', editorUid, rowIndex, columnIndex);
+};
+
+const handleEditorType = async state => {
   const {
-    lines,
-    selections
-  } = editor;
-  const rowIndex = selections[0];
-  const columnIndex = selections[1];
-  const line = lines[rowIndex];
-  const part = line.slice(0, columnIndex);
-  const wordMatch = part.match(RE_WORD);
-  if (wordMatch) {
-    return wordMatch[0];
+    unfilteredItems,
+    itemHeight,
+    maxHeight,
+    editorUid
+  } = state;
+  const {
+    x,
+    y,
+    rowIndex,
+    columnIndex
+  } = await getPositionAtCursor(editorUid);
+  const wordAtOffset = await getWordBefore(editorUid, rowIndex, columnIndex);
+  const items = filterCompletionItems(unfilteredItems, wordAtOffset);
+  const newMinLineY = 0;
+  const newMaxLineY = Math.min(items.length, 8);
+  const height = getListHeight(items.length, itemHeight, maxHeight);
+  const finalDeltaY = items.length * itemHeight - height;
+  return {
+    ...state,
+    items,
+    x,
+    y,
+    minLineY: newMinLineY,
+    maxLineY: newMaxLineY,
+    leadingWord: wordAtOffset,
+    height,
+    finalDeltaY
+  };
+};
+
+const getPortTuple = () => {
+  const {
+    port1,
+    port2
+  } = new MessageChannel();
+  return {
+    port1,
+    port2
+  };
+};
+
+const sendMessagePortToExtensionHostWorker = async port => {
+  const command = 'HandleMessagePort.handleMessagePort2';
+  // @ts-ignore
+  await invokeAndTransfer(
+  // @ts-ignore
+  'SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, 0 // TODO
+  );
+};
+
+const createExtensionHostRpc = async () => {
+  try {
+    const {
+      port1,
+      port2
+    } = getPortTuple();
+    await sendMessagePortToExtensionHostWorker(port2);
+    const rpc = await PlainMessagePortRpcParent.create({
+      commandMap: {},
+      messagePort: port1
+    });
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create extension host rpc`);
   }
-  return '';
+};
+
+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 editor = {}; // TODO
   const {
     itemHeight,
-    maxHeight
+    maxHeight,
+    editorUid,
+    editorLanguageId
   } = state;
-  const unfilteredItems = await getCompletions(editor);
-  const wordAtOffset = getWordAtOffset(editor);
+  const unfilteredItems = await getCompletions(editorUid, editorLanguageId);
+  const wordAtOffset = await getWordAtOffset(editorUid);
   const items = filterCompletionItems(unfilteredItems, wordAtOffset);
   const {
     rowIndex,
     columnIndex,
     x,
     y
-  } = await getPositionAtCursor(editor);
+  } = await getPositionAtCursor(editorUid);
   const newMaxLineY = Math.min(items.length, 8);
-  editor.widgets = editor.widgets || [];
-  // editor.widgets.push(ViewletModuleId.EditorCompletion)
   const itemsLength = items.length;
   const newFocusedIndex = itemsLength === 0 ? -1 : 0;
   const total = items.length;
@@ -1496,14 +1546,24 @@ const loadContent = async state => {
     // @ts-ignore
     rowIndex,
     columnIndex,
-    // editorUid,
     width: 200
   };
 };
 
-const RenderContent = 13;
-
+const SetBounds = 'Viewlet.setBounds';
 const SetDom2 = 'Viewlet.setDom2';
+const SetEventListeners = 'Viewlet.registerEventListeners';
+
+const renderBounds = (oldState, newState) => {
+  const {
+    x,
+    y,
+    width,
+    height,
+    uid
+  } = newState;
+  return [SetBounds, uid, x, y, width, height];
+};
 
 const renderContent = (oldState, newState) => {
   const {
@@ -1513,10 +1573,266 @@ const renderContent = (oldState, newState) => {
   return [SetDom2, uid, dom];
 };
 
+const getEventListeners = uid => {
+  return [];
+};
+
+const renderEventListeners = state => {
+  const {
+    uid
+  } = state;
+  const eventListeners = getEventListeners();
+  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 NoResults = 'No Results';
+
+const noResults = () => {
+  return i18nString(NoResults);
+};
+
+const None = 'none';
+const Option = 'option';
+
+const ColoredMaskIcon = 'ColoredMaskIcon';
+const EditorCompletionItem = 'EditorCompletionItem';
+const EditorCompletionItemDeprecated = 'EditorCompletionItemDeprecated';
+const EditorCompletionItemFocused = 'EditorCompletionItemFocused';
+const EditorCompletionItemHighlight = 'EditorCompletionItemHighlight';
+const FileIcon = 'FileIcon';
+const Label = 'Label';
+
+const Div = 4;
+const Span = 8;
+const Img = 17;
+
+const getFileIconVirtualDom = icon => {
+  return {
+    type: Img,
+    className: FileIcon,
+    src: icon,
+    role: None,
+    childCount: 0
+  };
+};
+
+const getIconDom = (fileIcon, symbolName) => {
+  if (fileIcon) {
+    return getFileIconVirtualDom(fileIcon);
+  }
+  return {
+    type: Div,
+    className: `${ColoredMaskIcon} ${symbolName}`,
+    childCount: 0
+  };
+};
+
+const Text = 12;
+const text = data => {
+  return {
+    type: Text,
+    text: data,
+    childCount: 0
+  };
+};
+
+const label1 = {
+  type: Div,
+  className: Label,
+  childCount: 1
+};
+const completionHighlight = {
+  type: Span,
+  className: EditorCompletionItemHighlight,
+  childCount: 1
+};
+const getHighlightedLabelDom = (label, highlights) => {
+  if (highlights.length === 0) {
+    return [label1, text(label)];
+  }
+  const dom = [];
+  const labelDom = {
+    type: Div,
+    className: Label,
+    childCount: 0
+  };
+  dom.push(labelDom);
+  let position = 0;
+  for (let i = 0; i < highlights.length; i += 2) {
+    const highlightStart = highlights[i];
+    const highlightEnd = highlights[i + 1];
+    if (position < highlightStart) {
+      const beforeText = label.slice(position, highlightStart);
+      labelDom.childCount++;
+      dom.push(text(beforeText));
+    }
+    const highlightText = label.slice(highlightStart, highlightEnd);
+    labelDom.childCount++;
+    dom.push(completionHighlight, text(highlightText));
+    position = highlightEnd;
+  }
+  if (position < label.length) {
+    const afterText = label.slice(position);
+    labelDom.childCount++;
+    dom.push(text(afterText));
+  }
+  return dom;
+};
+
+const getCompletionItemVirtualDom = visibleItem => {
+  const {
+    top,
+    label,
+    symbolName,
+    highlights,
+    focused,
+    deprecated,
+    fileIcon
+  } = visibleItem;
+  let className = EditorCompletionItem;
+  if (focused) {
+    className += ' ' + EditorCompletionItemFocused;
+  }
+  if (deprecated) {
+    className += ' ' + EditorCompletionItemDeprecated;
+  }
+  return [{
+    type: Div,
+    role: Option,
+    className,
+    top,
+    childCount: 2
+  }, getIconDom(fileIcon, symbolName), ...getHighlightedLabelDom(label, highlights)];
+};
+
+const getCompletionItemsVirtualDom = visibleItems => {
+  if (visibleItems.length === 0) {
+    return [{
+      type: Div,
+      childCount: 1
+    }, text(noResults())];
+  }
+  const root = {
+    type: Div,
+    childCount: visibleItems.length
+  };
+  const dom = [root, ...visibleItems.flatMap(getCompletionItemVirtualDom)];
+  return dom;
+};
+
+const Property = 1;
+const Value = 2;
+const Function = 3;
+const Variable = 4;
+const Keyword = 5;
+const Folder = 6;
+const File = 7;
+const Field = 8;
+
+const SymbolProperty = 'SymbolProperty';
+const SymbolValue = 'SymbolValue';
+const SymbolFunction = 'SymbolFunction';
+const SymbolVariable = 'SymbolVariable';
+const SymbolKeyword = 'SymbolKeyword';
+const SymbolDefault = 'SymbolDefault';
+const SymbolField = 'SymbolField';
+const SymbolNone = '';
+
+const getSymbolName = kind => {
+  switch (kind) {
+    case Property:
+      return SymbolProperty;
+    case Value:
+      return SymbolValue;
+    case Function:
+      return SymbolFunction;
+    case Variable:
+      return SymbolVariable;
+    case Keyword:
+      return SymbolKeyword;
+    case Field:
+      return SymbolField;
+    case File:
+      return SymbolNone;
+    default:
+      return SymbolDefault;
+  }
+};
+
+// TODO
+const getCompletionFileIcon = kind => {
+  switch (kind) {
+    case File:
+      return EmptyString;
+    case Folder:
+      return EmptyString;
+    default:
+      return EmptyString;
+  }
+};
+
+const getHighlights = item => {
+  const {
+    matches
+  } = item;
+  return matches.slice(1);
+};
+
+const getLabel = item => {
+  return item.label;
+};
+const getVisibleIem = (item, itemHeight, leadingWord, i, focusedIndex) => {
+  return {
+    label: getLabel(item),
+    symbolName: getSymbolName(item.kind),
+    top: i * itemHeight,
+    highlights: getHighlights(item),
+    focused: i === focusedIndex,
+    deprecated: item.flags & Deprecated,
+    fileIcon: getCompletionFileIcon(item.kind)
+  };
+};
+
+const getVisibleItems = (filteredItems, itemHeight, leadingWord, minLineY, maxLineY, focusedIndex) => {
+  const visibleItems = [];
+  for (let i = minLineY; i < maxLineY; i++) {
+    const filteredItem = filteredItems[i];
+    visibleItems.push(getVisibleIem(filteredItem, itemHeight, leadingWord, i, focusedIndex));
+  }
+  return visibleItems;
+};
+
+const renderItems = (oldState, newState) => {
+  const {
+    uid
+  } = newState;
+  const visibleItems = getVisibleItems(newState.items, newState.itemHeight, newState.leadingWord, newState.minLineY, newState.maxLineY, newState.focusedIndex);
+  const dom = getCompletionItemsVirtualDom(visibleItems);
+  return [SetDom2, uid, dom];
+};
+
 const getRenderer = diffType => {
   switch (diffType) {
     case RenderContent:
       return renderContent;
+    case RenderBounds:
+      return renderBounds;
+    case RenderEventListeners:
+      return renderEventListeners;
+    case RenderItems:
+      return renderItems;
     default:
       throw new Error('unknown renderer');
   }
@@ -1552,7 +1868,8 @@ const commandMap = {
   'Completions.loadContent': wrapCommand(loadContent),
   'Completions.render2': render2,
   'Completions.terminate': terminate,
-  'Completions.initialize': initialize
+  'Completions.initialize': initialize,
+  'Completions.handleEditorType': handleEditorType
 };
 
 const listen = async () => {

package/package.json

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