feat: Add absolutely massive feature for searching / replacing or selecting semantically different parts of TS/JS code. Add goToNodeBySyntaxKind and goToNodeBySyntaxKindWithinBlock commands. Filtering is simple and happens by kind property of node.

zardoy · zardoy · commit 687d94624288 · 2022-12-01T16:12:59.000+03:00
diff --git a/README.MD b/README.MD
@@ -2,6 +2,10 @@
 
 ## Top Features
 
+### Special Commands
+
+See [special commands list](#special-commands-list)
+
 ### JSX Outline
 
 (*disabled by default*) Enable with `tsEssentialPlugins.patchOutline`
@@ -144,6 +148,12 @@ type A<T extends 'foo' | 'bar' = ''> = ...
 
 ### Builtin CodeFix Fixes
 
+## Special Commands List
+
+### Go to / Select Nodes by Kind
+
+Use cases: search excluding comments, search & replace only within strings, find interested JSX attribute node
+
 ## Even Even More
 
 Please look at extension settings, as this extension has much more features than described here!
diff --git a/package.json b/package.json
@@ -41,6 +41,16 @@
                 "command": "pickAndInsertFunctionArguments",
                 "title": "Pick and Insert Function Arguments",
                 "category": "TS Essentials"
+            },
+            {
+                "command": "goToNodeBySyntaxKind",
+                "title": "Go to Node by Syntax Kind",
+                "category": "TS Essentials"
+            },
+            {
+                "command": "goToNodeBySyntaxKindWithinBlock",
+                "title": "Go to Node by Syntax Kind Within Block",
+                "category": "TS Essentials"
             }
         ],
         "typescriptServerPlugins": [
diff --git a/src/specialCommands.ts b/src/specialCommands.ts
@@ -1,10 +1,12 @@
 import * as vscode from 'vscode'
-import { getActiveRegularEditor } from '@zardoy/vscode-utils'
-import { registerExtensionCommand } from 'vscode-framework'
+import { getActiveRegularEditor, rangeToSelection } from '@zardoy/vscode-utils'
+import { getExtensionCommandId, registerExtensionCommand, VSCodeQuickPickItem } from 'vscode-framework'
 import { showQuickPick } from '@zardoy/vscode-utils/build/quickPick'
+import _ from 'lodash'
+import { compact } from '@zardoy/utils'
 import { RequestOptionsTypes, RequestResponseTypes } from '../typescript/src/ipcTypes'
 import { sendCommand } from './sendCommand'
-import { tsRangeToVscode } from './util'
+import { tsRangeToVscode, tsRangeToVscodeSelection } from './util'
 
 export default () => {
     registerExtensionCommand('removeFunctionArgumentsTypesInSelection', async () => {
@@ -55,45 +57,51 @@ export default () => {
         editor.selection = new vscode.Selection(currentValueRange.start, currentValueRange.end)
     })
 
-    registerExtensionCommand('pickAndInsertFunctionArguments', async () => {
-        const editor = getActiveRegularEditor()
-        if (!editor) return
-        const result = await sendCommand<RequestResponseTypes['pickAndInsertFunctionArguments']>('pickAndInsertFunctionArguments')
-        if (!result) return
+    const nodePicker = async <T>(data: T[], renderItem: (item: T) => Omit<VSCodeQuickPickItem, 'value'> & { nodeRange: [number, number] }) => {
+        const editor = vscode.window.activeTextEditor!
         const originalSelections = editor.selections
-
-        const renderArgs = (args: Array<[name: string, type: string]>) => `${args.map(([name, type]) => (type ? `${name}: ${type}` : name)).join(', ')}`
-
         let revealBack = true
-        const selectedFunction = await showQuickPick(
-            result.functions.map(func => {
-                const [name, _decl, args] = func
+
+        // todo-p1 button to merge nodes with duplicated contents (e.g. same strings)
+        const selected = await showQuickPick(
+            data.map(item => {
+                const custom = renderItem(item)
                 return {
-                    label: name,
-                    value: func,
-                    description: `(${renderArgs(args)})`,
+                    ...custom,
+                    value: item,
                     buttons: [
                         {
                             iconPath: new vscode.ThemeIcon('go-to-file'),
                             tooltip: 'Go to declaration',
+                            action: 'goToStartPos',
+                        },
+                        {
+                            iconPath: new vscode.ThemeIcon('arrow-both'),
+                            tooltip: 'Add to selection',
+                            action: 'addSelection',
                         },
                     ],
                 }
             }),
             {
-                onDidTriggerItemButton(event) {
+                title: 'Select node...',
+                onDidTriggerItemButton({ item, button }) {
+                    const { action } = button as any
+                    const sel = tsRangeToVscodeSelection(editor.document, (item as any).nodeRange)
                     revealBack = false
-                    this.hide()
-                    const pos = editor.document.positionAt(event.item.value[1][0])
-                    editor.selection = new vscode.Selection(pos, pos)
-                    editor.revealRange(editor.selection, vscode.TextEditorRevealType.InCenterIfOutsideViewport)
+                    if (action === 'goToStartPos') {
+                        editor.selection = new vscode.Selection(sel.start, sel.start)
+                        editor.revealRange(editor.selection, vscode.TextEditorRevealType.InCenterIfOutsideViewport)
+                        this.hide()
+                    } else {
+                        editor.selections = [...editor.selections, sel]
+                    }
                 },
                 onDidChangeFirstActive(item) {
-                    const pos = editor.document.positionAt(item.value[1][0])
+                    const pos = editor.document.positionAt((item as any).nodeRange[0])
                     editor.selection = new vscode.Selection(pos, pos)
                     editor.revealRange(editor.selection, vscode.TextEditorRevealType.InCenterIfOutsideViewport)
                 },
-                onDidShow() {},
                 matchOnDescription: true,
             },
         )
@@ -102,6 +110,23 @@ export default () => {
             editor.revealRange(editor.selection)
         }
 
+        return selected
+    }
+
+    registerExtensionCommand('pickAndInsertFunctionArguments', async () => {
+        const editor = getActiveRegularEditor()
+        if (!editor) return
+        const result = await sendCommand<RequestResponseTypes['pickAndInsertFunctionArguments']>('pickAndInsertFunctionArguments')
+        if (!result) return
+
+        const renderArgs = (args: Array<[name: string, type: string]>) => `${args.map(([name, type]) => (type ? `${name}: ${type}` : name)).join(', ')}`
+
+        const selectedFunction = await nodePicker(result.functions, ([name, decl, args]) => ({
+            label: name,
+            description: `(${renderArgs(args)})`,
+            nodeRange: decl,
+        }))
+
         if (!selectedFunction) return
         const selectedArgs = await showQuickPick(
             selectedFunction[2].map(arg => {
@@ -130,4 +155,64 @@ export default () => {
             }
         })
     })
+
+    registerExtensionCommand('goToNodeBySyntaxKind', async (_arg, { filterWithSelection = false }: { filterWithSelection?: boolean } = {}) => {
+        const editor = vscode.window.activeTextEditor
+        if (!editor) return
+        const { document } = editor
+        const result = await sendCommand<RequestResponseTypes['filterBySyntaxKind']>('filterBySyntaxKind')
+        if (!result) return
+        // todo optimize
+        if (filterWithSelection) {
+            result.nodesByKind = Object.fromEntries(
+                compact(
+                    Object.entries(result.nodesByKind).map(([kind, nodes]) => {
+                        const filteredNodes = nodes.filter(({ range: tsRange }) =>
+                            editor.selections.some(sel => sel.contains(tsRangeToVscode(document, tsRange))),
+                        )
+                        if (filteredNodes.length === 0) return
+                        return [kind, filteredNodes]
+                    }),
+                ),
+            )
+        }
+
+        const selectedKindNodes = await showQuickPick(
+            _.sortBy(Object.entries(result.nodesByKind), ([, nodes]) => nodes.length)
+                .reverse()
+                .map(([kind, nodes]) => ({
+                    label: kind,
+                    description: nodes.length.toString(),
+                    value: nodes,
+                    buttons: [
+                        {
+                            iconPath: new vscode.ThemeIcon('arrow-both'),
+                            tooltip: 'Select all nodes of this kind',
+                        },
+                    ],
+                })),
+            {
+                onDidTriggerItemButton(button) {
+                    editor.selections = button.item.value.map(({ range }) => tsRangeToVscodeSelection(document, range))
+                    this.hide()
+                },
+            },
+        )
+        if (!selectedKindNodes) return
+        const selectedNode = await nodePicker(selectedKindNodes, node => ({
+            label: document
+                .getText(tsRangeToVscode(document, node.range))
+                .trim()
+                .replace(/\r?\n\s+/g, ' '),
+            nodeRange: node.range,
+            value: node,
+        }))
+        if (!selectedNode) return
+        editor.selection = tsRangeToVscodeSelection(document, selectedNode.range)
+        editor.revealRange(editor.selection)
+    })
+
+    registerExtensionCommand('goToNodeBySyntaxKindWithinSelection', async () => {
+        await vscode.commands.executeCommand(getExtensionCommandId('goToNodeBySyntaxKind'), { filterWithSelection: true })
+    })
 }
diff --git a/src/util.ts b/src/util.ts
@@ -2,3 +2,6 @@ import * as vscode from 'vscode'
 
 export const tsRangeToVscode = (document: vscode.TextDocument, [start, end]: [number, number]) =>
     new vscode.Range(document.positionAt(start), document.positionAt(end))
+
+export const tsRangeToVscodeSelection = (document: vscode.TextDocument, [start, end]: [number, number]) =>
+    new vscode.Selection(document.positionAt(start), document.positionAt(end))
diff --git a/typescript/src/definitions.ts b/typescript/src/definitions.ts
@@ -4,12 +4,13 @@ export default (proxy: ts.LanguageService, info: ts.server.PluginCreateInfo, c:
     proxy.getDefinitionAndBoundSpan = (fileName, position) => {
         const prior = info.languageService.getDefinitionAndBoundSpan(fileName, position)
         if (!prior) return
-        if (__WEB__)
+        if (__WEB__) {
             // let extension handle it
             // TODO failedAliasResolution
             prior.definitions = prior.definitions?.filter(def => {
                 return !def.unverified || def.fileName === fileName
             })
+        }
 
         // used after check
         const firstDef = prior.definitions![0]!
diff --git a/typescript/src/ipcTypes.ts b/typescript/src/ipcTypes.ts
@@ -18,18 +18,23 @@ export type NodeAtPositionResponse = {
     end: number
 }
 
-export type PickFunctionArgsType = [name: string, declaration: [number, number], args: [name: string, type: string][]]
+type TsRange = [number, number]
+
+export type PickFunctionArgsType = [name: string, declaration: TsRange, args: [name: string, type: string][]]
 
 export type RequestResponseTypes = {
     removeFunctionArgumentsTypesInSelection: {
-        ranges: [number, number][]
+        ranges: TsRange[]
     }
     getRangeOfSpecialValue: {
-        range: [number, number]
+        range: TsRange
     }
     pickAndInsertFunctionArguments: {
         functions: PickFunctionArgsType[]
     }
+    filterBySyntaxKind: {
+        nodesByKind: Record<string, Array<{ range: TsRange }>>
+    }
 }
 
 export type RequestOptionsTypes = {
diff --git a/typescript/src/specialCommands/handle.ts b/typescript/src/specialCommands/handle.ts
@@ -1,6 +1,6 @@
 import { compact } from '@zardoy/utils'
 import postfixesAtPosition from '../completions/postfixesAtPosition'
-import { PickFunctionArgsType, NodeAtPositionResponse, RequestOptionsTypes, RequestResponseTypes, TriggerCharacterCommand, triggerCharacterCommands } from '../ipcTypes'
+import { NodeAtPositionResponse, RequestOptionsTypes, RequestResponseTypes, TriggerCharacterCommand, triggerCharacterCommands } from '../ipcTypes'
 import { findChildContainingPosition, getNodePath } from '../utils'
 import getEmmetCompletions from './emmet'
 
@@ -93,14 +93,14 @@ export default (
             }
         }
 
-        if(!targetNode) {
+        if (!targetNode) {
             ts.findAncestor(node, (n) => {
                 if (ts.isVariableDeclaration(n) && n.initializer && position < n.initializer.pos) {
                     targetNode = n.initializer
                     return true
                 }
                 if (ts.isCallExpression(n) && position < n.expression.end) {
-                    const pos = n.expression.end+1
+                    const pos = n.expression.end + 1
                     targetNode = [pos, pos]
                     return true
                 }
@@ -129,6 +129,8 @@ export default (
                     range: Array.isArray(targetNode) ? targetNode : [targetNode.pos, targetNode.end],
                 } satisfies RequestResponseTypes['getRangeOfSpecialValue'],
             }
+        } else {
+            return
         }
     }
     if (specialCommand === 'pickAndInsertFunctionArguments') {
@@ -146,7 +148,7 @@ export default (
             entries: [],
             typescriptEssentialsResponse: {
                 functions: collectedNodes.map((arr) => {
-                    return [arr[0], [arr[1].pos, arr[1].end], compact(arr[2].map(({name, type}) => {
+                    return [arr[0], [arr[1].pos, arr[1].end], compact(arr[2].map(({ name, type }) => {
                         // or maybe allow?
                         if (!ts.isIdentifier(name)) return
                         return [name.text, type?.getText() ?? ''];
@@ -155,9 +157,29 @@ export default (
             } satisfies RequestResponseTypes['pickAndInsertFunctionArguments'],
         }
     }
+    if (specialCommand === 'filterBySyntaxKind') {
+        const collectedNodes: RequestResponseTypes['filterBySyntaxKind']['nodesByKind'] = {}
+        collectedNodes.comment ??= []
+        const collectNodes = (node: ts.Node) => {
+            const kind = ts.SyntaxKind[node.kind]!;
+            const leadingTrivia = node.getLeadingTriviaWidth(sourceFile)
+            const comments = [...tsFull.getLeadingCommentRangesOfNode(node as any, sourceFile as any) ?? [], ...tsFull.getTrailingCommentRanges(node as any, sourceFile as any) ?? []]
+            collectedNodes.comment!.push(...comments?.map((comment) => ({ range: [comment.pos, comment.end] as [number, number] })))
+            collectedNodes[kind] ??= []
+            collectedNodes[kind]!.push({ range: [node.pos + leadingTrivia, node.end] })
+            node.forEachChild(collectNodes)
+        }
+        sourceFile.forEachChild(collectNodes)
+        return {
+            entries: [],
+            typescriptEssentialsResponse: {
+                nodesByKind: collectedNodes
+            } satisfies RequestResponseTypes['filterBySyntaxKind']
+        }
+    }
 }
 
-function changeType<T>(arg): asserts arg is T {}
+function changeType<T>(arg): asserts arg is T { }
 
 function nodeToApiResponse(node: ts.Node): NodeAtPositionResponse {
     return {

Original file line number	Diff line number	Diff line change
`@@ -18,18 +18,23 @@ export type NodeAtPositionResponse = {`
`18`	`18`	`end: number`
`19`	`19`	`}`
`20`	`20`
`21`		`-export type PickFunctionArgsType = [name: string, declaration: [number, number], args: [name: string, type: string][]]`
	`21`	`+type TsRange = [number, number]`
	`22`	`+`
	`23`	`+export type PickFunctionArgsType = [name: string, declaration: TsRange, args: [name: string, type: string][]]`
`22`	`24`
`23`	`25`	`export type RequestResponseTypes = {`
`24`	`26`	`removeFunctionArgumentsTypesInSelection: {`
`25`		`- ranges: [number, number][]`
	`27`	`+ ranges: TsRange[]`
`26`	`28`	`}`
`27`	`29`	`getRangeOfSpecialValue: {`
`28`		`- range: [number, number]`
	`30`	`+ range: TsRange`
`29`	`31`	`}`
`30`	`32`	`pickAndInsertFunctionArguments: {`
`31`	`33`	`functions: PickFunctionArgsType[]`
`32`	`34`	`}`
	`35`	`+ filterBySyntaxKind: {`
	`36`	`+ nodesByKind: Record<string, Array<{ range: TsRange }>>`
	`37`	`+ }`
`33`	`38`	`}`
`34`	`39`
`35`	`40`	`export type RequestOptionsTypes = {`