type-driven completions docs

a few minor fixes for new method completions
add todo tests

Author: zardoy

README.MD

@@ -163,8 +163,6 @@ Try to restore [original](https://github.com/microsoft/TypeScript/issues/49012)
 We extend completion list with extensions from module augmentation (e.g. `.css` files if you have `declare module '*.css'`).
 But for unchecked contexts list of extensions can be extended with `tsEssentialPlugins.additionalIncludeExtensions` setting.
 
-<!-- ## Type-Driven Completions -->
-
 ### Mark Code Actions
 
 (*enabled by default* with two settings)
@@ -193,7 +191,38 @@ const a = 5
 a = 6
 ```
 
-### Method Snippets
+### Format Ignore Directives
+
+We support [format ignore directives](https://github.com/microsoft/TypeScript/issues/18261)
+
+## Type-Driven Completions
+
+All in this section requires TypeScript nightly extension.
+
+### JSX Elements
+
+To Enable: `"tsEssentialPlugins.experiments.excludeNonJsxCompletions": true`
+
+We can filter out completions so only Function Components stay in your list:
+
+```tsx
+class Foo {}
+const Bar = () => <div />
+
+const elem = </* Bar is suggested, Foo not
+```
+
+Super handy in MUI + Electron projects.
+
+Class components are not supported (no need).
+
+### Change kind to function
+
+Enable with `tsEssentialPlugins.experiments.changeKindToFunction`
+
+![change-icon-kind](media/change-kind.png)
+
+## Method Snippets
 
 (*enabled by default*)
 

src/onCompletionAccepted.ts

@@ -36,7 +36,7 @@ export default (tsApi: { onCompletionAccepted }) => {
 
         const enableMethodSnippets = vscode.workspace.getConfiguration(process.env.IDS_PREFIX, item.document).get('enableMethodSnippets')
 
-        if (enableMethodSnippets && (typeof insertText !== 'object' || !insertText.value.endsWith(')$0'))) {
+        if (enableMethodSnippets && /* either snippet by vscode or by us to ignore pos */ typeof insertText !== 'object') {
             const editor = getActiveRegularEditor()!
             const startPos = editor.selection.start
             const nextSymbol = editor.document.getText(new vscode.Range(startPos, startPos.translate(0, 1)))
@@ -80,6 +80,9 @@ export default (tsApi: { onCompletionAccepted }) => {
                         if (i !== parameters.length - 1) snippet.appendText(', ')
                     }
 
+                    const allFiltered = data.parameters.length > parameters.length
+                    if (allFiltered) snippet.appendTabstop()
+
                     snippet.appendText(')')
                     void editor.insertSnippet(snippet, undefined, {
                         undoStopAfter: false,

typescript/test/completions.spec.ts

@@ -97,7 +97,9 @@ const fourslashLikeTester = (contents: string, fileName = entrypoint) => {
                 if (includes) {
                     const { names, all } = includes
                     if (names) {
-                        expect(result?.entryNames, message).toContain(names)
+                        for (const name of names) {
+                            expect(result?.entryNames, message).toContain(name)
+                        }
                     }
                     if (all) {
                         for (const entry of result.entries.filter(e => names?.includes(e.name))) {
@@ -334,6 +336,33 @@ test('Case-sensetive completions', () => {
     }
 })
 
+// ts 5
+test.todo('Change to function kind', () => {
+    settingsOverride['experiments.changeKindToFunction'] = true
+    const tester = fourslashLikeTester(/* ts */ `
+        // declare const foo: boolean
+        const foo = () => {}
+        foo/*1*/
+    `)
+    tester.completion(1, {
+        includes: {
+            names: ['foo'],
+            all: {
+                kind: ts.ScriptElementKind.functionElement,
+            },
+        },
+    })
+    settingsOverride['experiments.changeKindToFunction'] = false
+})
+
+// ts 5
+test.todo('Filter JSX Components', () => {
+    const tester = fourslashLikeTester(/* ts */ `
+        const a = () => {}
+        a/*1*/
+    `)
+})
+
 test('Omit<..., ""> suggestions', () => {
     const tester = fourslashLikeTester(/* ts */ `
       interface A {