feat: add extract to jsx component refactoring and display it instead of extract into function code actions when range within jsx

update docs

Author: zardoy

README.MD

@@ -9,6 +9,7 @@ TOC:
 - [Minor Useful Features](#minor-useful-features)
 - [Method Snippets](#method-snippets)
 - [Auto Imports](#auto-imports)
+- [Type Driven Completions](#type-driven-completions)
 - [Rename Features](#rename-features)
 - [Special Commands List](#special-commands-list)
 - [Contributed Code Actions](#contributed-code-actions)
@@ -378,7 +379,9 @@ Another options that is accepted is
 
 ### Go to / Select Nodes by Kind
 
-Use cases: search excluding comments, search & replace only within strings, find interested JSX attribute node
+Extremely powerful command that allows you to leverage AST knowledge of opened file.
+
+Use cases: select all comments to exclude searching in comments. Or search & replace only within strings / find interested JSX attribute node.
 
 ## Contributed Code Actions
 

typescript/src/codeActions/decorateProxy.ts

@@ -7,15 +7,17 @@ export default (proxy: ts.LanguageService, languageService: ts.LanguageService,
     proxy.getApplicableRefactors = (fileName, positionOrRange, preferences) => {
         let prior = languageService.getApplicableRefactors(fileName, positionOrRange, preferences)
 
+        const program = languageService.getProgram()!
+        const sourceFile = program.getSourceFile(fileName)!
         processApplicableRefactors(
             prior.find(r => r.description === 'Extract function'),
             c,
+            positionOrRange,
+            sourceFile,
         )
 
         if (c('markTsCodeActions.enable')) prior = prior.map(item => ({ ...item, description: `🔵 ${item.description}` }))
 
-        const program = languageService.getProgram()
-        const sourceFile = program!.getSourceFile(fileName)!
         const { info: refactorInfo } = getCodeActions(sourceFile, positionOrRange, languageService, languageServiceHost)
         if (refactorInfo) prior = [...prior, refactorInfo]
 

typescript/src/codeActions/functionExtractors.ts

@@ -1,30 +1,75 @@
 import { GetConfig } from '../types'
-import { dedentString, findChildContainingPositionMaxDepth } from '../utils'
+import {
+    createDummySourceFile,
+    dedentString,
+    findChildContainingExactPosition,
+    findChildContainingPosition,
+    findChildContainingPositionMaxDepth,
+} from '../utils'
 
-export const processApplicableRefactors = (refactor: ts.ApplicableRefactorInfo | undefined, c: GetConfig) => {
+export const processApplicableRefactors = (
+    refactor: ts.ApplicableRefactorInfo | undefined,
+    c: GetConfig,
+    posOrRange: number | ts.TextRange,
+    sourceFile: ts.SourceFile,
+) => {
     if (!refactor) return
     const functionExtractors = refactor?.actions.filter(({ notApplicableReason }) => !notApplicableReason)
     if (functionExtractors?.length) {
         const kind = functionExtractors[0]!.kind!
         const blockScopeRefactor = functionExtractors.find(e => e.description.startsWith('Extract to inner function in'))
+        const addArrowCodeActions: ts.RefactorActionInfo[] = []
         if (blockScopeRefactor) {
-            refactor!.actions.push({
+            addArrowCodeActions.push({
                 description: 'Extract to arrow function above',
                 kind,
                 name: `${blockScopeRefactor.name}_local_arrow`,
             })
         }
+        let addExtractToJsxRefactor = false
         const globalScopeRefactor = functionExtractors.find(e =>
             ['Extract to function in global scope', 'Extract to function in module scope'].includes(e.description),
         )
         if (globalScopeRefactor) {
-            refactor!.actions.push({
+            addArrowCodeActions.push({
                 description: 'Extract to arrow function in global scope above',
                 kind,
                 name: `${globalScopeRefactor.name}_arrow`,
             })
+
+            addExtractToJsxRefactor = typeof posOrRange !== 'number' && !!possiblyAddExtractToJsx(sourceFile, posOrRange.pos, posOrRange.end)
         }
+
+        if (addExtractToJsxRefactor) {
+            refactor.actions = refactor.actions.filter(action => !action.name.startsWith('function_scope'))
+            refactor.actions.push({
+                description: 'Extract to JSX component',
+                kind: 'refactor.extract.jsx',
+                name: `${globalScopeRefactor!.name}_jsx`,
+            })
+            return
+        }
+
+        refactor.actions.push(...addArrowCodeActions)
+    }
+}
+
+const possiblyAddExtractToJsx = (sourceFile: ts.SourceFile, start: number, end: number): void | true => {
+    if (start === end) return
+    let node1 = findChildContainingPosition(ts, sourceFile, start)
+    const node2 = findChildContainingExactPosition(sourceFile, end)
+    if (!node1 || !node2) return
+    if (ts.isIdentifier(node1)) node1 = node1.parent
+    const nodeStart = node1.pos + node1.getLeadingTriviaWidth()
+    let validPosition = false
+    if (node1 === node2 && ts.isJsxSelfClosingElement(node1) && start === nodeStart && end === node1.end) {
+        validPosition = true
+    }
+    if (ts.isJsxOpeningElement(node1) && ts.isJsxClosingElement(node2) && node2.parent.openingElement === node1 && start === nodeStart && end === node2.end) {
+        validPosition = true
     }
+    if (!validPosition) return
+    return true
 }
 
 export const handleFunctionRefactorEdits = (
@@ -37,8 +82,8 @@ export const handleFunctionRefactorEdits = (
     refactorName: string,
     preferences: ts.UserPreferences | undefined,
 ): ts.RefactorEditInfo | undefined => {
-    if (!actionName.endsWith('_arrow')) return
-    const originalAcitonName = actionName.replace('_local_arrow', '').replace('_arrow', '')
+    if (!actionName.endsWith('_arrow') && !actionName.endsWith('_jsx')) return
+    const originalAcitonName = actionName.replace('_local_arrow', '').replace('_arrow', '').replace('_jsx', '')
     const { edits: originalEdits, renameFilename } = languageService.getEditsForRefactor(
         fileName,
         formatOptions,
@@ -51,6 +96,43 @@ export const handleFunctionRefactorEdits = (
     const { textChanges } = originalEdits[0]!
     const functionChange = textChanges.at(-1)!
     const oldFunctionText = functionChange.newText
+    const sourceFile = languageService.getProgram()!.getSourceFile(fileName)!
+    if (actionName.endsWith('_jsx')) {
+        const lines = oldFunctionText.trimStart().split('\n')
+        const oldFunctionSignature = lines[0]!
+        const componentName = tsFull.getUniqueName('ExtractedComponent', sourceFile as FullSourceFile)
+        const newFunctionSignature = changeArgumentsToDestructured(oldFunctionSignature, formatOptions, sourceFile, componentName)
+
+        const insertChange = textChanges.at(-2)!
+        let args = insertChange.newText.slice(1, -2)
+        args = args.slice(args.indexOf('(') + 1)
+        const fileEdits = [
+            {
+                fileName,
+                textChanges: [
+                    ...textChanges.slice(0, -2),
+                    {
+                        ...insertChange,
+                        newText: `<${componentName} ${args
+                            .split(', ')
+                            .map(identifierText => `${identifierText}={${identifierText}}`)
+                            .join(' ')} />`,
+                    },
+                    {
+                        span: functionChange.span,
+                        newText: oldFunctionText.match(/\s*/)![0] + newFunctionSignature.slice(0, -2) + '\n' + lines.slice(1).join('\n'),
+                    },
+                ],
+            },
+        ]
+        return {
+            edits: fileEdits,
+            renameFilename,
+            renameLocation: insertChange.span.start + 1,
+            // renameLocation: tsFull.getRenameLocation(fileEdits, fileName, componentName, /*preferLastLocation*/ false),
+        }
+    }
+
     const functionName = oldFunctionText.slice(oldFunctionText.indexOf('function ') + 'function '.length, oldFunctionText.indexOf('('))
     functionChange.newText = oldFunctionText
         .replace(/function /, 'const ')
@@ -73,11 +155,7 @@ export const handleFunctionRefactorEdits = (
 
     // global scope
     if (!isLocal) {
-        const lastNode = findChildContainingPositionMaxDepth(
-            languageService.getProgram()!.getSourceFile(fileName)!,
-            typeof positionOrRange === 'object' ? positionOrRange.pos : positionOrRange,
-            2,
-        )
+        const lastNode = findChildContainingPositionMaxDepth(sourceFile, typeof positionOrRange === 'object' ? positionOrRange.pos : positionOrRange, 2)
         if (lastNode) {
             const pos = lastNode.pos + (lastNode.getFullText().match(/^\s+/)?.[0]?.length ?? 1) - 1
             functionChange.span.start = pos
@@ -95,3 +173,44 @@ export const handleFunctionRefactorEdits = (
         renameFilename,
     }
 }
+
+export function changeArgumentsToDestructured(
+    oldFunctionSignature: string,
+    formatOptions: ts.FormatCodeSettings,
+    sourceFile: ts.SourceFile,
+    componentName: string,
+) {
+    const { factory } = ts
+    const dummySourceFile = createDummySourceFile(oldFunctionSignature)
+    const functionDeclaration = dummySourceFile.statements[0] as ts.FunctionDeclaration
+    const { parameters, type: returnType } = functionDeclaration
+    const paramNames = parameters.map(p => p.name as ts.Identifier)
+    const paramTypes = parameters.map(p => p.type!)
+    const newFunction = factory.createFunctionDeclaration(
+        undefined,
+        undefined,
+        componentName,
+        undefined,
+        [
+            factory.createParameterDeclaration(
+                undefined,
+                undefined,
+                factory.createObjectBindingPattern(paramNames.map(paramName => factory.createBindingElement(undefined, undefined, paramName))),
+                undefined,
+                factory.createTypeLiteralNode(
+                    paramNames.map((paramName, i) => {
+                        const type = paramTypes[i]!
+                        return factory.createPropertySignature(undefined, paramName, undefined, type)
+                    }),
+                ),
+            ),
+        ],
+        returnType,
+        factory.createBlock([]),
+    )
+    // const changesTracker = getChangesTracker(formatOptions)
+    // changesTracker.insertNodeAt(sourceFile, 0, newFunction)
+    // const newFunctionText = changesTracker.getChanges()[0]!.textChanges[0]!;
+    const newFunctionText = ts.createPrinter().printNode(ts.EmitHint.Unspecified, newFunction, sourceFile)
+    return newFunctionText
+}

typescript/src/utils.ts

@@ -235,6 +235,10 @@ const wordRangeAtPos = (text: string, position: number) => {
 
 type GetIs<T> = T extends (elem: any) => elem is infer T ? T : never
 
+export const createDummySourceFile = (code: string) => {
+    return ts.createSourceFile('test.ts', code, ts.ScriptTarget.ESNext, false)
+}
+
 export function approveCast<T2 extends Array<(node: ts.Node) => node is ts.Node>>(node: ts.Node | undefined, ...oneOfTest: T2): node is GetIs<T2[number]> {
     if (node === undefined) return false
     if (!oneOfTest) throw new Error('Tests are not provided')