Add refactor convertToOptionalChainExpression (#39135)

* add convertOptionalChain

* cover more cases

* expose containsMatchingReference

* clean up performing edits

* bound start position

* add tests

* refactor and handle edge cases

* update tests

* consider explicit requests for empty spans

* update fourslash to use trigger reason

* add tests cases for trigger reason

* fix errors

* remove type assertion

* fix non ampersand chains

* clean up some logic

* add ternary case

* add diagnostic message

* add nullish check for ternary expressions

* Update src/services/refactors/convertToOptionalChainExpression.ts

Co-authored-by: Nathan Shively-Sanders <[email protected]>

* Update src/services/refactors/convertToOptionalChainExpression.ts

Co-authored-by: Nathan Shively-Sanders <[email protected]>

* Update tests/cases/fourslash/refactorConvertToOptionalChainExpressionForTriggerReason3.ts

Co-authored-by: Nathan Shively-Sanders <[email protected]>

* Update tests/cases/fourslash/refactorConvertToOptionalChainExpressionForTriggerReason1.ts

Co-authored-by: Nathan Shively-Sanders <[email protected]>

* reformat and remove unused checks

* allow any for ternary refactor

* add tests

* add tests

* check return and variable statements

* use isMatchingReference instead of containsMatchingReference

* allow partial selections

* fine tune selection ranges

* recurse for call expressions

* fix spellings

* add recursive cases

* remove isOrContainsMatchingReference

* cleanup

* more refactoring

* cleanup

* rename tests

* address PR comments

* check match syntactically

* handle another call expression case

* some renames

* inline some checks

* add test

* address comments

* add refactorNotAvailableReason

Co-authored-by: Nathan Shively-Sanders <[email protected]>

Author: jessetrinity

src/compiler/diagnosticMessages.json

@@ -5827,6 +5827,22 @@
         "category": "Message",
         "code": 95138
     },
+    "Convert to optional chain expression": {
+        "category": "Message",
+        "code": 95139
+    },
+    "Could not find convertible access expression": {
+        "category": "Message",
+        "code": 95140
+    },
+    "Could not find matching access expressions": {
+        "category": "Message",
+        "code": 95141
+    },
+    "Can only convert logical AND access chains": {
+        "category": "Message",
+        "code": 95142
+    },
 
     "No value exists in scope for the shorthand property '{0}'. Either declare one or provide an initializer.": {
         "category": "Error",

src/compiler/utilities.ts

@@ -2452,7 +2452,7 @@ namespace ts {
         }
     }
 
-    function getSingleVariableOfVariableStatement(node: Node): VariableDeclaration | undefined {
+    export function getSingleVariableOfVariableStatement(node: Node): VariableDeclaration | undefined {
         return isVariableStatement(node) ? firstOrUndefined(node.declarationList.declarations) : undefined;
     }
 

src/harness/fourslashImpl.ts

@@ -3289,9 +3289,9 @@ namespace FourSlash {
             }
         }
 
-        public applyRefactor({ refactorName, actionName, actionDescription, newContent: newContentWithRenameMarker }: FourSlashInterface.ApplyRefactorOptions) {
+        public applyRefactor({ refactorName, actionName, actionDescription, newContent: newContentWithRenameMarker, triggerReason }: FourSlashInterface.ApplyRefactorOptions) {
             const range = this.getSelection();
-            const refactors = this.getApplicableRefactorsAtSelection();
+            const refactors = this.getApplicableRefactorsAtSelection(triggerReason);
             const refactorsWithName = refactors.filter(r => r.name === refactorName);
             if (refactorsWithName.length === 0) {
                 this.raiseError(`The expected refactor: ${refactorName} is not available at the marker location.\nAvailable refactors: ${refactors.map(r => r.name)}`);

src/harness/fourslashInterfaceImpl.ts

@@ -1503,6 +1503,7 @@ namespace FourSlashInterface {
         actionName: string;
         actionDescription: string;
         newContent: NewFileContent;
+        triggerReason?: ts.RefactorTriggerReason;
     }
 
     export type ExpectedCompletionEntry = string | ExpectedCompletionEntryObject;

src/services/refactors/convertToOptionalChainExpression.ts

@@ -0,0 +1,284 @@
+/* @internal */
+namespace ts.refactor.convertToOptionalChainExpression {
+    const refactorName = "Convert to optional chain expression";
+    const convertToOptionalChainExpressionMessage = getLocaleSpecificMessage(Diagnostics.Convert_to_optional_chain_expression);
+
+    registerRefactor(refactorName, { getAvailableActions, getEditsForAction });
+
+    function getAvailableActions(context: RefactorContext): readonly ApplicableRefactorInfo[] {
+        const info = getInfo(context, context.triggerReason === "invoked");
+        if (!info) return emptyArray;
+
+        if (!info.error) {
+            return [{
+                name: refactorName,
+                description: convertToOptionalChainExpressionMessage,
+                actions: [{
+                    name: refactorName,
+                    description: convertToOptionalChainExpressionMessage
+                }]
+            }];
+        }
+
+        if (context.preferences.provideRefactorNotApplicableReason) {
+            return [{
+                name: refactorName,
+                description: convertToOptionalChainExpressionMessage,
+                actions: [{
+                    name: refactorName,
+                    description: convertToOptionalChainExpressionMessage,
+                    notApplicableReason: info.error
+                }]
+            }];
+        }
+        return emptyArray;
+    }
+
+    function getEditsForAction(context: RefactorContext, actionName: string): RefactorEditInfo | undefined {
+        const info = getInfo(context);
+        if (!info || !info.info) return undefined;
+        const edits = textChanges.ChangeTracker.with(context, t =>
+            doChange(context.file, context.program.getTypeChecker(), t, Debug.checkDefined(info.info, "context must have info"), actionName)
+        );
+        return { edits, renameFilename: undefined, renameLocation: undefined };
+    }
+
+    type InfoOrError = {
+        info: Info,
+        error?: never;
+    } | {
+        info?: never,
+        error: string;
+    };
+
+    interface Info {
+        finalExpression: PropertyAccessExpression | CallExpression,
+        occurrences: (PropertyAccessExpression | Identifier)[],
+        expression: ValidExpression,
+    };
+
+    type ValidExpressionOrStatement = ValidExpression | ValidStatement;
+
+    /**
+     * Types for which a "Convert to optional chain refactor" are offered.
+     */
+    type ValidExpression = BinaryExpression | ConditionalExpression;
+
+    /**
+     * Types of statements which are likely to include a valid expression for extraction.
+     */
+    type ValidStatement = ExpressionStatement | ReturnStatement | VariableStatement;
+
+    function isValidExpression(node: Node): node is ValidExpression {
+        return isBinaryExpression(node) || isConditionalExpression(node);
+    }
+
+    function isValidStatement(node: Node): node is ValidStatement {
+        return isExpressionStatement(node) || isReturnStatement(node) || isVariableStatement(node);
+    }
+
+    function isValidExpressionOrStatement(node: Node): node is ValidExpressionOrStatement {
+        return isValidExpression(node) || isValidStatement(node);
+    }
+
+    function getInfo(context: RefactorContext, considerEmptySpans = true): InfoOrError | undefined {
+        const { file, program } = context;
+        const span = getRefactorContextSpan(context);
+
+        const forEmptySpan = span.length === 0;
+        if (forEmptySpan && !considerEmptySpans) return undefined;
+
+        // selecting fo[|o && foo.ba|]r should be valid, so adjust span to fit start and end tokens
+        const startToken = getTokenAtPosition(file, span.start);
+        const endToken = findTokenOnLeftOfPosition(file, span.start + span.length);
+        const adjustedSpan = createTextSpanFromBounds(startToken.pos, endToken && endToken.end >= startToken.pos ? endToken.getEnd() : startToken.getEnd());
+
+        const parent = forEmptySpan ? getValidParentNodeOfEmptySpan(startToken) : getValidParentNodeContainingSpan(startToken, adjustedSpan);
+        const expression = parent && isValidExpressionOrStatement(parent) ? getExpression(parent) : undefined;
+        if (!expression) return { error: getLocaleSpecificMessage(Diagnostics.Could_not_find_convertible_access_expression) };
+
+        const checker = program.getTypeChecker();
+        return isConditionalExpression(expression) ? getConditionalInfo(expression, checker) : getBinaryInfo(expression);
+    }
+
+    function getConditionalInfo(expression: ConditionalExpression, checker: TypeChecker): InfoOrError | undefined {
+        const condition = expression.condition;
+        const finalExpression = getFinalExpressionInChain(expression.whenTrue);
+
+        if (!finalExpression || checker.isNullableType(checker.getTypeAtLocation(finalExpression))) {
+            return { error: getLocaleSpecificMessage(Diagnostics.Could_not_find_convertible_access_expression) };
+        };
+
+        if ((isPropertyAccessExpression(condition) || isIdentifier(condition))
+            && getMatchingStart(condition, finalExpression.expression)) {
+            return { info: { finalExpression, occurrences: [condition], expression } };
+        }
+        else if (isBinaryExpression(condition)) {
+            const occurrences = getOccurrencesInExpression(finalExpression.expression, condition);
+            return occurrences ? { info: { finalExpression, occurrences, expression } } :
+                { error: getLocaleSpecificMessage(Diagnostics.Could_not_find_matching_access_expressions) };
+        }
+    }
+
+    function getBinaryInfo(expression: BinaryExpression): InfoOrError | undefined {
+        if (expression.operatorToken.kind !== SyntaxKind.AmpersandAmpersandToken) {
+            return { error: getLocaleSpecificMessage(Diagnostics.Can_only_convert_logical_AND_access_chains) };
+        };
+        const finalExpression = getFinalExpressionInChain(expression.right);
+
+        if (!finalExpression) return { error: getLocaleSpecificMessage(Diagnostics.Could_not_find_convertible_access_expression) };
+
+        const occurrences = getOccurrencesInExpression(finalExpression.expression, expression.left);
+        return occurrences ? { info: { finalExpression, occurrences, expression } } :
+            { error: getLocaleSpecificMessage(Diagnostics.Could_not_find_matching_access_expressions) };
+    }
+
+    /**
+     * Gets a list of property accesses that appear in matchTo and occur in sequence in expression.
+     */
+    function getOccurrencesInExpression(matchTo: Expression, expression: Expression): (PropertyAccessExpression | Identifier)[] | undefined {
+        const occurrences: (PropertyAccessExpression | Identifier)[] = [];
+        while (isBinaryExpression(expression) && expression.operatorToken.kind === SyntaxKind.AmpersandAmpersandToken) {
+            const match = getMatchingStart(skipParentheses(matchTo), skipParentheses(expression.right));
+            if (!match) {
+                break;
+            }
+            occurrences.push(match);
+            matchTo = match;
+            expression = expression.left;
+        }
+        const finalMatch = getMatchingStart(matchTo, expression);
+        if (finalMatch) {
+            occurrences.push(finalMatch);
+        }
+        return occurrences.length > 0 ? occurrences: undefined;
+    }
+
+    /**
+     * Returns subchain if chain begins with subchain syntactically.
+     */
+    function getMatchingStart(chain: Expression, subchain: Expression): PropertyAccessExpression | Identifier | undefined {
+        return (isIdentifier(subchain) || isPropertyAccessExpression(subchain)) &&
+        chainStartsWith(chain, subchain) ? subchain : undefined;
+    }
+
+    /**
+     * Returns true if chain begins with subchain syntactically.
+     */
+    function chainStartsWith(chain: Node, subchain: Node): boolean {
+        // skip until we find a matching identifier.
+        while (isCallExpression(chain) || isPropertyAccessExpression(chain)) {
+            const subchainName = isPropertyAccessExpression(subchain) ? subchain.name.getText() : subchain.getText();
+            if (isPropertyAccessExpression(chain) && chain.name.getText() === subchainName) break;
+            chain = chain.expression;
+        }
+        // check that the chains match at each access.  Call chains in subchain are not valid.
+        while (isPropertyAccessExpression(chain) && isPropertyAccessExpression(subchain)) {
+            if (chain.name.getText() !== subchain.name.getText()) return false;
+            chain = chain.expression;
+            subchain = subchain.expression;
+        }
+        // check if we have reached a final identifier.
+        return isIdentifier(chain) && isIdentifier(subchain) && chain.getText() === subchain.getText();
+    }
+
+    /**
+     * Find the least ancestor of the input node that is a valid type for extraction and contains the input span.
+     */
+    function getValidParentNodeContainingSpan(node: Node, span: TextSpan): ValidExpressionOrStatement | undefined {
+        while (node.parent) {
+            if (isValidExpressionOrStatement(node) && span.length !== 0 && node.end >= span.start + span.length) {
+                return node;
+            }
+            node = node.parent;
+        }
+        return undefined;
+    }
+
+    /**
+     * Finds an ancestor of the input node that is a valid type for extraction, skipping subexpressions.
+     */
+    function getValidParentNodeOfEmptySpan(node: Node): ValidExpressionOrStatement | undefined {
+        while (node.parent) {
+            if (isValidExpressionOrStatement(node) && !isValidExpressionOrStatement(node.parent)) {
+                return node;
+            }
+            node = node.parent;
+        }
+        return undefined;
+    }
+
+    /**
+     * Gets an expression of valid extraction type from a valid statement or expression.
+     */
+    function getExpression(node: ValidExpressionOrStatement): ValidExpression | undefined {
+        if (isValidExpression(node)) {
+            return node;
+        }
+        if (isVariableStatement(node)) {
+            const variable = getSingleVariableOfVariableStatement(node);
+            const initializer = variable?.initializer;
+            return initializer && isValidExpression(initializer) ? initializer : undefined;
+        }
+        return node.expression && isValidExpression(node.expression) ? node.expression : undefined;
+    }
+
+    /**
+     * Gets a property access expression which may be nested inside of a binary expression. The final
+     * expression in an && chain will occur as the right child of the parent binary expression, unless
+     * it is followed by a different binary operator.
+     * @param node the right child of a binary expression or a call expression.
+     */
+    function getFinalExpressionInChain(node: Expression): CallExpression | PropertyAccessExpression | undefined {
+        // foo && |foo.bar === 1|; - here the right child of the && binary expression is another binary expression.
+        // the rightmost member of the && chain should be the leftmost child of that expression.
+        node = skipParentheses(node);
+        if (isBinaryExpression(node)) {
+            return getFinalExpressionInChain(node.left);
+        }
+        // foo && |foo.bar()()| - nested calls are treated like further accesses.
+        else if ((isPropertyAccessExpression(node) || isCallExpression(node)) && !isOptionalChain(node)) {
+            return node;
+        }
+        return undefined;
+    }
+
+    /**
+     * Creates an access chain from toConvert with '?.' accesses at expressions appearing in occurrences.
+     */
+    function convertOccurrences(checker: TypeChecker, toConvert: Expression, occurrences: (PropertyAccessExpression | Identifier)[]): Expression {
+        if (isPropertyAccessExpression(toConvert) || isCallExpression(toConvert)) {
+            const chain = convertOccurrences(checker, toConvert.expression, occurrences);
+            const lastOccurrence = occurrences.length > 0 ? occurrences[occurrences.length - 1] : undefined;
+            const isOccurrence = lastOccurrence?.getText() === toConvert.expression.getText();
+            if (isOccurrence) occurrences.pop();
+            if (isCallExpression(toConvert)) {
+                return isOccurrence ?
+                    factory.createCallChain(chain, factory.createToken(SyntaxKind.QuestionDotToken), toConvert.typeArguments, toConvert.arguments) :
+                    factory.createCallChain(chain, toConvert.questionDotToken, toConvert.typeArguments, toConvert.arguments);
+            }
+            else if (isPropertyAccessExpression(toConvert)) {
+                return isOccurrence ?
+                    factory.createPropertyAccessChain(chain, factory.createToken(SyntaxKind.QuestionDotToken), toConvert.name) :
+                    factory.createPropertyAccessChain(chain, toConvert.questionDotToken, toConvert.name);
+            }
+        }
+        return toConvert;
+    }
+
+    function doChange(sourceFile: SourceFile, checker: TypeChecker, changes: textChanges.ChangeTracker, info: Info, _actionName: string): void {
+        const { finalExpression, occurrences, expression } = info;
+        const firstOccurrence = occurrences[occurrences.length - 1];
+        const convertedChain = convertOccurrences(checker, finalExpression, occurrences);
+        if (convertedChain && (isPropertyAccessExpression(convertedChain) || isCallExpression(convertedChain))) {
+            if (isBinaryExpression(expression)) {
+                changes.replaceNodeRange(sourceFile, firstOccurrence, finalExpression, convertedChain);
+            }
+            else if (isConditionalExpression(expression)) {
+                changes.replaceNode(sourceFile, expression,
+                    factory.createBinaryExpression(convertedChain, factory.createToken(SyntaxKind.QuestionQuestionToken), expression.whenFalse)
+                );
+            }
+        }
+    }
+}

src/services/tsconfig.json

@@ -107,6 +107,7 @@
         "codefixes/fixExpectedComma.ts",
         "refactors/convertExport.ts",
         "refactors/convertImport.ts",
+        "refactors/convertToOptionalChainExpression.ts",
         "refactors/convertOverloadListToSingleSignature.ts",
         "refactors/extractSymbol.ts",
         "refactors/extractType.ts",

tests/cases/fourslash/fourslash.ts

@@ -426,7 +426,7 @@ declare namespace FourSlashInterface {
         enableFormatting(): void;
         disableFormatting(): void;
 
-        applyRefactor(options: { refactorName: string, actionName: string, actionDescription: string, newContent: NewFileContent }): void;
+        applyRefactor(options: { refactorName: string, actionName: string, actionDescription: string, newContent: NewFileContent, triggerReason?: RefactorTriggerReason }): void;
     }
     class debug {
         printCurrentParameterHelp(): void;

tests/cases/fourslash/refactorConvertToOptionalChainExpression_AccessCallCallReturnValue.ts

@@ -0,0 +1,14 @@
+/// <reference path='fourslash.ts' />
+
+////let a = { b: () => { return () => { c: 0 } } }
+/////*a*/a && a.b && a.b()().c/*b*/;
+
+goTo.select("a", "b");
+edit.applyRefactor({
+    refactorName: "Convert to optional chain expression",
+    actionName: "Convert to optional chain expression",
+    actionDescription: "Convert to optional chain expression",
+    newContent:
+`let a = { b: () => { return () => { c: 0 } } }
+a?.b?.()().c;`
+});

tests/cases/fourslash/refactorConvertToOptionalChainExpression_AccessCallReturnValue.ts

@@ -0,0 +1,14 @@
+/// <reference path='fourslash.ts' />
+
+////let a = { b: () => { return { c: 0 } } }
+/////*a*/a && a.b && a.b().c/*b*/;
+
+goTo.select("a", "b");
+edit.applyRefactor({
+    refactorName: "Convert to optional chain expression",
+    actionName: "Convert to optional chain expression",
+    actionDescription: "Convert to optional chain expression",
+    newContent:
+`let a = { b: () => { return { c: 0 } } }
+a?.b?.().c;`
+});

tests/cases/fourslash/refactorConvertToOptionalChainExpression_AccessThenCall.ts

@@ -0,0 +1,12 @@
+/// <reference path='fourslash.ts' />
+
+/////*a*/a && a.b && a.b()/*b*/;
+
+goTo.select("a", "b");
+edit.applyRefactor({
+    refactorName: "Convert to optional chain expression",
+    actionName: "Convert to optional chain expression",
+    actionDescription: "Convert to optional chain expression",
+    newContent:
+`a?.b?.();`
+});