Merge pull request #67 from zardoy/develop

zardoy · web-flow · commit 481a8e3e4410 · 2022-12-14T06:15:20.000+03:00
feat: also add a way to configure position of original suggestion (including method snippet). Also plugin's completions have no JS limitation.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -23,12 +23,21 @@
             "name": "Attach to TS Server",
             "type": "node",
             "request": "attach",
-            "protocol": "inspector",
+            "restart": true,
             "port": 9229,
             "sourceMaps": true,
             "outFiles": [
                 "${workspaceFolder}/out/**/*.js"
             ],
         }
+    ],
+    "compounds": [
+        {
+            "name": "Extension + TS Plugin",
+            "configurations": [
+                "Launch Extension",
+                "Attach to TS Server"
+            ]
+        }
     ]
 }
diff --git a/src/configurationType.ts b/src/configurationType.ts
@@ -288,4 +288,29 @@ export type Configuration = {
      * @default []
      */
     'figIntegration.enableWhenStartsWith': string[]
+    /**
+     * Propose additional completions in object. Just like `typescript.suggest.objectLiteralMethodSnippets.enabled`, but also for string, arrays and objects
+     * @default true
+     */
+    'objectLiteralCompletions.moreVariants': boolean
+    /**
+     * When `moreVariants` enabled, always add as fallback variant if other variant can't be derived
+     * @default false
+     */
+    'objectLiteralCompletions.fallbackVariant': boolean
+    /**
+     * For `objectLiteralCompletions.moreVariants`, wether to insert newline for objects / arrays
+     * @default true
+     */
+    'objectLiteralCompletions.insertNewLine': boolean
+    /**
+     * For `objectLiteralCompletions.moreVariants`
+     * @default displayBelow
+     */
+    // 'objectLiteralCompletions.deepVariants': 'disable' | 'displayBelow' | 'replaceNotDeep'
+    /**
+     * Also affects builtin typescript.suggest.objectLiteralMethodSnippets, even when additional completions disabled
+     * @default below
+     */
+    'objectLiteralCompletions.keepOriginal': 'below' | 'above' | 'remove'
 }
diff --git a/src/onCompletionAccepted.ts b/src/onCompletionAccepted.ts
@@ -15,10 +15,17 @@ export default (tsApi: { onCompletionAccepted }) => {
             return
         }
 
-        const { insertText, documentation = '', kind } = item
+        const { label, insertText, documentation = '', kind } = item
         if (kind === vscode.CompletionItemKind.Keyword) {
             if (insertText === 'return ') justAcceptedReturnKeywordSuggestion = true
             else if (insertText === 'default ') void vscode.commands.executeCommand('editor.action.triggerSuggest')
+            return
+        }
+
+        // todo: use cleaner detection
+        if (typeof insertText === 'object' && typeof label === 'object' && label.detail && [': [],', ': {},', ': "",', ": '',"].includes(label.detail)) {
+            void vscode.commands.executeCommand('editor.action.triggerSuggest')
+            return
         }
 
         const enableMethodSnippets = vscode.workspace.getConfiguration(process.env.IDS_PREFIX, item.document).get('enableMethodSnippets')
diff --git a/typescript/src/completions/defaultHelpers.ts b/typescript/src/completions/defaultHelpers.ts
@@ -0,0 +1,24 @@
+import { approveCast } from '../utils'
+
+export default (entries: ts.CompletionEntry[], node: ts.Node, languageService: ts.LanguageService): ts.CompletionEntry[] | void => {
+    if (entries.length && node) {
+        if (ts.isStringLiteralLike(node) && approveCast(node.parent, ts.isPropertyAssignment) && ts.isObjectLiteralExpression(node.parent.parent)) {
+            const typeChecker = languageService.getProgram()!.getTypeChecker()!
+            const type = typeChecker.getContextualType(node.parent.parent)
+            if (type) {
+                const properties = type.getProperties()
+                const propName = node.parent.name.getText()
+                const completingPropName = properties.find(({ name }) => name === propName)
+                const defaultValue = completingPropName?.getJsDocTags().find(({ name, text }) => name === 'default' && text?.length)?.text?.[0]?.text
+                if (defaultValue) {
+                    const entryIndex = entries.findIndex(({ name, kind }) => name === defaultValue && kind === ts.ScriptElementKind.string)
+                    if (entryIndex === -1) return
+                    const entry = entries[entryIndex]!
+                    const newEntries = [...entries]
+                    newEntries.splice(entryIndex, 1, { ...entry, sortText: `z${entry.sortText}`, sourceDisplay: [{ kind: 'text', text: 'Default' }] })
+                    return newEntries
+                }
+            }
+        }
+    }
+}
diff --git a/typescript/src/completions/objectLiteralCompletions.ts b/typescript/src/completions/objectLiteralCompletions.ts
@@ -0,0 +1,106 @@
+import { GetConfig } from '../types'
+
+export default (
+    entries: ts.CompletionEntry[],
+    node: ts.Node,
+    languageService: ts.LanguageService,
+    preferences: ts.UserPreferences,
+    c: GetConfig,
+): ts.CompletionEntry[] | void => {
+    if (entries.length && node) {
+        const enableMoreVariants = c('objectLiteralCompletions.moreVariants')
+        const keepOriginal = c('objectLiteralCompletions.keepOriginal')
+        if (!preferences.includeCompletionsWithObjectLiteralMethodSnippets && !enableMoreVariants) return
+        // plans to make it hihgly configurable! e.g. if user wants to make some subtype leading (e.g. from [] | {})
+        if (ts.isIdentifier(node)) node = node.parent
+        if (ts.isShorthandPropertyAssignment(node)) node = node.parent
+        entries = [...entries]
+        if (ts.isObjectLiteralExpression(node)) {
+            const typeChecker = languageService.getProgram()!.getTypeChecker()!
+            const objType = typeChecker.getContextualType(node)
+            if (!objType) return
+            const properties = objType.getProperties()
+            for (const property of properties) {
+                const entry = entries.find(({ name }) => name === property.name)
+                if (!entry) return
+                const type = typeChecker.getTypeOfSymbolAtLocation(property, node)
+                if (!type) continue
+                if (isMethodCompletionCall(type, typeChecker)) {
+                    if (['above', 'remove'].includes(keepOriginal) && preferences.includeCompletionsWithObjectLiteralMethodSnippets) {
+                        const methodEntryIndex = entries.findIndex(e => e.name === entry.name && isObjectLiteralMethodSnippet(e))
+                        const methodEntry = entries[methodEntryIndex]
+                        if (methodEntry) {
+                            entries.splice(methodEntryIndex, 1)
+                            entries.splice(entries.indexOf(entry) + (keepOriginal === 'below' ? 1 : 0), keepOriginal === 'remove' ? 1 : 0, {
+                                ...methodEntry,
+                                // let correctSorting.enable sort it
+                                sortText: entry.sortText,
+                            })
+                        }
+                    }
+                    continue
+                }
+                if (!enableMoreVariants) continue
+                const getQuotedSnippet = (): [string, string] => {
+                    const quote = tsFull.getQuoteFromPreference(tsFull.getQuotePreference(node.getSourceFile() as any, preferences))
+                    return [`: ${quote}$1${quote},$0`, `: ${quote}${quote},`]
+                }
+                const insertObjectArrayInnerText = c('objectLiteralCompletions.insertNewLine') ? '\n\t$1\n' : '$1'
+                const completingStyleMap = [
+                    [getQuotedSnippet, isStringCompletion],
+                    [[`: [${insertObjectArrayInnerText}],$0`, `: [],`], isArrayCompletion],
+                    [[`: {${insertObjectArrayInnerText}},$0`, `: {},`], isObjectCompletion],
+                ] as const
+                const fallbackSnippet = c('objectLiteralCompletions.fallbackVariant') ? ([': $0,', ': ,'] as const) : undefined
+                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 + insertSnippetText
+                const index = entries.indexOf(entry)
+                entries.splice(index + (keepOriginal === 'below' ? 1 : 0), keepOriginal === 'remove' ? 1 : 0, {
+                    ...entry,
+                    // todo setting incompatible!!!
+                    sortText: entry.sortText,
+                    labelDetails: {
+                        detail: insertSnippetPreview,
+                    },
+                    insertText,
+                    isSnippet: true,
+                })
+            }
+            return entries
+        }
+    }
+}
+
+const isObjectLiteralMethodSnippet = (entry: ts.CompletionEntry) => {
+    const { detail } = entry.labelDetails ?? {}
+    return detail?.startsWith('(') && detail.split('\n')[0]!.trimEnd().endsWith(')')
+}
+
+const isMethodCompletionCall = (type: ts.Type, checker: ts.TypeChecker) => {
+    if (checker.getSignaturesOfType(type, ts.SignatureKind.Call).length > 0) return true
+    if (type.isUnion()) return type.types.some(type => isMethodCompletionCall(type, checker))
+}
+
+const isStringCompletion = (type: ts.Type) => {
+    if (type.flags & ts.TypeFlags.Undefined) return true
+    if (type.flags & ts.TypeFlags.StringLike) return true
+    if (type.isUnion()) return type.types.every(type => isStringCompletion(type))
+    return false
+}
+
+const isArrayCompletion = (type: ts.Type, checker: ts.TypeChecker) => {
+    if (type.flags & ts.TypeFlags.Any) return false
+    if (type.flags & ts.TypeFlags.Undefined) return true
+    if (checker['isArrayLikeType'](type)) return true
+    if (type.isUnion()) return type.types.every(type => isArrayCompletion(type, checker))
+    return false
+}
+
+const isObjectCompletion = (type: ts.Type) => {
+    if (type.flags & ts.TypeFlags.Undefined) return true
+    if (type.flags & ts.TypeFlags.Object) return true
+    if (type.isUnion()) return type.types.every(type => isObjectCompletion(type))
+    return false
+}
diff --git a/typescript/src/completionsAtPosition.ts b/typescript/src/completionsAtPosition.ts
@@ -10,13 +10,14 @@ import { isGoodPositionBuiltinMethodCompletion } from './completions/isGoodPosit
 import improveJsxCompletions from './completions/jsxAttributes'
 import arrayMethods from './completions/arrayMethods'
 import prepareTextForEmmet from './specialCommands/prepareTextForEmmet'
-import objectLiteralHelpers from './completions/objectLiteralHelpers'
 import switchCaseExcludeCovered from './completions/switchCaseExcludeCovered'
 import additionalTypesSuggestions from './completions/additionalTypesSuggestions'
 import boostKeywordSuggestions from './completions/boostKeywordSuggestions'
 import boostTextSuggestions from './completions/boostNameSuggestions'
 import keywordsSpace from './completions/keywordsSpace'
 import jsdocDefault from './completions/jsdocDefault'
+import defaultHelpers from './completions/defaultHelpers'
+import objectLiteralCompletions from './completions/objectLiteralCompletions'
 
 export type PrevCompletionMap = Record<string, { originalName?: string; documentationOverride?: string | ts.SymbolDisplayPart[] }>
 
@@ -51,6 +52,7 @@ export const getCompletionsAtPosition = (
      * useful as in most cases we work with node that is behind the cursor */
     const leftNode = findChildContainingPosition(ts, sourceFile, position - 1)
     const exactNode = findChildContainingExactPosition(sourceFile, position)
+    options?.quotePreference
     if (['.jsx', '.tsx'].some(ext => fileName.endsWith(ext))) {
         // #region JSX tag improvements
         if (node) {
@@ -142,14 +144,17 @@ export const getCompletionsAtPosition = (
         //         ({ name }) => name === 'toExponential',
         //         ({ name }) => name === 'toString',
         //     )
-        const indexToPatch = prior.entries.findIndex(({ name }) => name === 'toString')
+        const indexToPatch = prior.entries.findIndex(({ name, kind }) => name === 'toString' && kind !== ts.ScriptElementKind.warning)
         if (indexToPatch !== -1) {
             prior.entries[indexToPatch]!.insertText = `${prior.entries[indexToPatch]!.insertText ?? prior.entries[indexToPatch]!.name}()`
             prior.entries[indexToPatch]!.kind = ts.ScriptElementKind.constElement
             // prior.entries[indexToPatch]!.isSnippet = true
         }
     }
 
+    if (node) prior.entries = defaultHelpers(prior.entries, node, languageService) ?? prior.entries
+    if (node) prior.entries = objectLiteralCompletions(prior.entries, node, languageService, options ?? {}, c) ?? prior.entries
+
     const banAutoImportPackages = c('suggestions.banAutoImportPackages')
     if (banAutoImportPackages?.length)
         prior.entries = prior.entries.filter(entry => {
@@ -197,7 +202,8 @@ export const getCompletionsAtPosition = (
         })
     }
 
-    if (c('correctSorting.enable')) prior.entries = prior.entries.map((entry, index) => ({ ...entry, sortText: `${entry.sortText ?? ''}${index}` }))
+    if (c('correctSorting.enable'))
+        prior.entries = prior.entries.map((entry, index) => ({ ...entry, sortText: `${entry.sortText ?? ''}${index.toString().padStart(4, '0')}` }))
 
     // console.log('signatureHelp', JSON.stringify(languageService.getSignatureHelpItems(fileName, position, {})))
     return {
diff --git a/typescript/src/dummyLanguageService.ts b/typescript/src/dummyLanguageService.ts
@@ -1,5 +1,4 @@
 // only for basic testing, as vscode is actually using server
-import ts from 'typescript/lib/tsserverlibrary'
 import { nodeModules } from './utils'
 
 export const createLanguageService = (files: Record<string, string>, { useLib = true }: { useLib?: boolean } = {}) => {
diff --git a/typescript/src/utils.ts b/typescript/src/utils.ts
@@ -169,3 +169,9 @@ const wordRangeAtPos = (text: string, position: number) => {
     }
     return text.slice(startPos + 1, endPos)
 }
+
+export function approveCast<TOut extends TIn, TIn = any>(value: TIn | undefined, test: (value: TIn) => value is TOut): value is TOut
+export function approveCast<T>(value: T, test: (value: T) => boolean): T | undefined
+export function approveCast<T>(value: T, test: (value: T) => boolean): T | undefined {
+    return value !== undefined && test(value) ? value : undefined
+}
diff --git a/typescript/test/completions.spec.ts b/typescript/test/completions.spec.ts
@@ -10,6 +10,7 @@ import { getNavTreeItems } from '../src/getPatchedNavTree'
 import { createRequire } from 'module'
 import { findChildContainingPosition } from '../src/utils'
 import handleCommand from '../src/specialCommands/handle'
+import _ from 'lodash'
 
 const require = createRequire(import.meta.url)
 //@ts-ignore plugin expect it to set globallly
@@ -79,6 +80,7 @@ const getCompletionsAtPosition = (pos: number, fileName = entrypoint) => {
     return {
         ...result,
         entries: result.completions.entries,
+        entriesSorted: _.sortBy(result.completions.entries, ({ sortText }) => sortText),
         entryNames: result.completions.entries.map(({ name }) => name),
     }
 }
@@ -256,6 +258,99 @@ test('Switch Case Exclude Covered', () => {
     }
 })
 
+test('Object Literal Completions', () => {
+    const [_positivePositions, _negativePositions, numPositions] = fileContentsSpecialPositions(/* ts */ `
+    interface Options {
+        mood?: 'happy' | 'sad'
+        callback?()
+        additionalOptions?: {
+            foo?: boolean
+        }
+        plugins: Array<{ name: string, setup(build) }>
+    }
+
+    const makeDay = (options: Options) => {}
+    makeDay({
+        /*1*/
+    })
+    `)
+    const { entriesSorted } = getCompletionsAtPosition(numPositions[1]!) ?? {}
+    // todo resolve sorting problem + add tests with other keepOriginal (it was tested manually)
+    expect(entriesSorted?.map(entry => Object.fromEntries(Object.entries(entry).filter(([, value]) => value !== undefined)))).toMatchInlineSnapshot(`
+      [
+        {
+          "insertText": "plugins",
+          "isSnippet": true,
+          "kind": "property",
+          "kindModifiers": "",
+          "name": "plugins",
+          "sortText": "110000",
+        },
+        {
+          "insertText": "plugins: [
+      	$1
+      ],$0",
+          "isSnippet": true,
+          "kind": "property",
+          "kindModifiers": "",
+          "labelDetails": {
+            "detail": ": [],",
+          },
+          "name": "plugins",
+          "sortText": "110001",
+        },
+        {
+          "insertText": "additionalOptions",
+          "isSnippet": true,
+          "kind": "property",
+          "kindModifiers": "optional",
+          "name": "additionalOptions",
+          "sortText": "120002",
+        },
+        {
+          "insertText": "additionalOptions: {
+      	$1
+      },$0",
+          "isSnippet": true,
+          "kind": "property",
+          "kindModifiers": "optional",
+          "labelDetails": {
+            "detail": ": {},",
+          },
+          "name": "additionalOptions",
+          "sortText": "120003",
+        },
+        {
+          "insertText": "callback",
+          "isSnippet": true,
+          "kind": "method",
+          "kindModifiers": "optional",
+          "name": "callback",
+          "sortText": "120004",
+        },
+        {
+          "insertText": "mood",
+          "isSnippet": true,
+          "kind": "property",
+          "kindModifiers": "optional",
+          "name": "mood",
+          "sortText": "120005",
+        },
+        {
+          "insertText": "mood: \\"$1\\",$0",
+          "isSnippet": true,
+          "kind": "property",
+          "kindModifiers": "optional",
+          "labelDetails": {
+            "detail": ": \\"\\",",
+          },
+          "name": "mood",
+          "sortText": "120006",
+        },
+      ]
+    `)
+})
+
 // TODO move/remove this test from here
 test('Patched navtree (outline)', () => {
     globalThis.__TS_SEVER_PATH__ = require.resolve('typescript/lib/tsserver')

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`// only for basic testing, as vscode is actually using server`
`2`		`-import ts from 'typescript/lib/tsserverlibrary'`
`3`	`2`	`import { nodeModules } from './utils'`
`4`	`3`
`5`	`4`	`export const createLanguageService = (files: Record<string, string>, { useLib = true }: { useLib?: boolean } = {}) => {`
Original file line number	Diff line number	Diff line change
`@@ -169,3 +169,9 @@ const wordRangeAtPos = (text: string, position: number) => {`
`169`	`169`	`}`
`170`	`170`	`return text.slice(startPos + 1, endPos)`
`171`	`171`	`}`
	`172`	`+`
	`173`	`+export function approveCast<TOut extends TIn, TIn = any>(value: TIn \| undefined, test: (value: TIn) => value is TOut): value is TOut`
	`174`	`+export function approveCast<T>(value: T, test: (value: T) => boolean): T \| undefined`
	`175`	`+export function approveCast<T>(value: T, test: (value: T) => boolean): T \| undefined {`
	`176`	`+ return value !== undefined && test(value) ? value : undefined`
	`177`	`+}`