feat: Add methodSnippetsInsertText setting so you can finally preview method snippets and use them in Vue files!

Author: zardoy

src/configurationType.ts

@@ -358,6 +358,15 @@ export type Configuration = {
      * @default true
      */
     enableMethodSnippets: boolean
+    /**
+     * Wether add insert text and detail to every function completion on each suggest trigger (instead of expanding method snippet after completion accept).
+     * This way you can enable support for method snippets in Vue files.
+     * `methodSnippets.replaceArguments` isn't supported for now.
+     * This is not enabled by default as it might be really slow in some cases.
+     * Recommended to try!
+     * @default disable
+     */
+    methodSnippetsInsertText: 'disable' | 'only-local' | 'all'
     /**
      * ```ts
      * const example = ({ a }, b?, c = 5, ...d) => { }
@@ -540,6 +549,12 @@ export type Configuration = {
      * @default false
      */
     'experiments.changeKindToFunction': boolean
+    /**
+     * Use workaround method for inserting name of TypeScript suggestion.
+     * If you move to next suggestion and then to previous, and then run *insert name of completion* via keybinding, name of **last resolved** completion will be inserted, so you might prefer to enable this setting. Also it makes this feature work in Vue.
+     * @default false
+     */
+    'experiments.enableInsertNameOfSuggestionFix': boolean
     /**
      * Map *symbol - array of modules* to change sorting of imports - first available takes precedence in auto import code fixes (+ import all action)
      *
@@ -605,12 +620,6 @@ export type Configuration = {
               typeAlias: string
               interface: string
           }
-    /**
-     * Use workaround method for inserting name of TypeScript suggestion.
-     * If you move to next suggestion and then to previous, and then run *insert name of completion* via keybinding, name of **last resolved** completion will be inserted, so you might prefer to enable this setting. Also it makes this feature work in Vue.
-     * @default false
-     */
-    'experimental.enableInsertNameOfSuggestionFix': boolean
 }
 
 // scrapped using search editor. config: caseInsesetive, context lines: 0, regex: const fix\w+ = "[^ ]+"

typescript/src/completions/changeKindToFunction.ts

@@ -0,0 +1,70 @@
+import { oneOf } from '@zardoy/utils'
+import constructMethodSnippet from '../constructMethodSnippet'
+import { insertTextAfterEntry } from '../utils'
+import { sharedCompletionContext } from './sharedContext'
+
+export default (entries: ts.CompletionEntry[]) => {
+    const { languageService, c, sourceFile, position } = sharedCompletionContext
+
+    const methodSnippetInsertTextMode = c('methodSnippetsInsertText')
+    const enableResolvingInsertText = c('enableMethodSnippets') && methodSnippetInsertTextMode !== 'disable'
+    const changeKindToFunction = c('experiments.changeKindToFunction')
+
+    if (!enableResolvingInsertText && !changeKindToFunction) return
+
+    const typeChecker = languageService.getProgram()!.getTypeChecker()!
+    // let timeSpend = 0
+    const newEntries = entries.map(entry => {
+        const patch = (): ts.CompletionEntry | undefined => {
+            const { kind, symbol } = entry
+            if (
+                !enableResolvingInsertText &&
+                !oneOf(
+                    kind,
+                    ts.ScriptElementKind.alias,
+                    ts.ScriptElementKind.memberVariableElement,
+                    ts.ScriptElementKind.variableElement,
+                    ts.ScriptElementKind.localVariableElement,
+                    ts.ScriptElementKind.constElement,
+                    ts.ScriptElementKind.variableElement,
+                )
+            ) {
+                return
+            }
+            if (methodSnippetInsertTextMode === 'only-local' && entry.source) return
+            if (!symbol) return
+            const { valueDeclaration } = symbol
+            if (!valueDeclaration) return
+
+            // const dateNow = Date.now()
+            if (enableResolvingInsertText) {
+                const resolveData = {} as { isAmbiguous: boolean }
+                const methodSnippet = constructMethodSnippet(languageService, sourceFile, position, symbol, c, resolveData)
+                if (!methodSnippet || resolveData.isAmbiguous) return
+                return {
+                    ...entry,
+                    insertText: insertTextAfterEntry(entry, `(${methodSnippet.map((x, i) => `$\{${i + 1}:${x}}`).join(', ')})`),
+                    labelDetails: {
+                        detail: `(${methodSnippet.join(', ')})`,
+                        description: ts.displayPartsToString(entry.sourceDisplay),
+                    },
+                    kind: changeKindToFunction ? ts.ScriptElementKind.functionElement : entry.kind,
+                    isSnippet: true,
+                }
+            }
+            const type = typeChecker.getTypeOfSymbolAtLocation(symbol, valueDeclaration)
+            const signatures = typeChecker.getSignaturesOfType(type, ts.SignatureKind.Call)
+            // timeSpend += Date.now() - dateNow
+            if (signatures.length === 0) return
+
+            return { ...entry, kind: ts.ScriptElementKind.functionElement }
+        }
+
+        return patch() ?? entry
+    })
+
+    // remove logging once stable
+    // console.log('changeKindToFunction time:', timeSpend)
+
+    return newEntries
+}

typescript/src/completions/functionCompletions.ts

@@ -1,4 +1,4 @@
-import { getFullTypeChecker, isTs5 } from '../utils'
+import { getFullTypeChecker, insertTextAfterEntry, isTs5 } from '../utils'
 import { sharedCompletionContext } from './sharedContext'
 
 export default (prior: ts.CompletionInfo): ts.CompletionEntry[] | void => {
@@ -66,7 +66,7 @@ export default (prior: ts.CompletionInfo): ts.CompletionEntry[] | void => {
         const insertSnippetVariant = completingStyleMap.find(([, detector]) => detector(type!, typeChecker))?.[0] ?? fallbackSnippet
         if (!insertSnippetVariant) continue
         const [insertSnippetText, insertSnippetPreview] = typeof insertSnippetVariant === 'function' ? insertSnippetVariant() : insertSnippetVariant
-        const insertText = entry.name.replace(/\$/g, '\\$') + insertSnippetText
+        const insertText = insertTextAfterEntry(entry, insertSnippetText)
         const index = entries.indexOf(entry)
         entries.splice(index + (keepOriginal === 'before' ? 1 : 0), keepOriginal === 'remove' ? 1 : 0, {
             ...entry,

typescript/src/completions/objectLiteralCompletions.ts

@@ -26,11 +26,11 @@ import adjustAutoImports from './completions/adjustAutoImports'
 import addSourceDefinition from './completions/addSourceDefinition'
 import { sharedCompletionContext } from './completions/sharedContext'
 import displayImportedInfo from './completions/displayImportedInfo'
-import changeKindToFunction from './completions/changeKindToFunction'
 import functionPropsAndMethods from './completions/functionPropsAndMethods'
 import { getTupleSignature } from './tupleSignature'
 import stringTemplateTypeCompletions from './completions/stringTemplateType'
 import localityBonus from './completions/localityBonus'
+import functionCompletions from './completions/functionCompletions'
 
 export type PrevCompletionMap = Record<
     string,
@@ -357,9 +357,7 @@ export const getCompletionsAtPosition = (
     if (exactNode) {
         prior.entries = filterJsxElements(prior.entries, exactNode, position, languageService, c) ?? prior.entries
     }
-    if (c('experiments.changeKindToFunction')) {
-        prior.entries = changeKindToFunction(prior.entries)
-    }
+    prior.entries = functionCompletions(prior.entries) ?? prior.entries
 
     if (c('correctSorting.enable')) {
         prior.entries = prior.entries.map(({ ...entry }, index) => ({

typescript/src/completionsAtPosition.ts

@@ -281,3 +281,6 @@ export const patchMethod = <T, K extends keyof T>(obj: T, method: K, overriden:
         })
     }
 }
+
+export const insertTextAfterEntry = (entryOrName: ts.CompletionEntry | string, appendText: string) =>
+    (typeof entryOrName === 'string' ? entryOrName : entryOrName.name).replace(/\$/g, '\\$') + appendText