Add autoCloseTag language service (microsoft#24543)

* Add autoCloseTag language service * Change name to getJsxClosingTagAtPosition and return an object

Author: Andy

src/compiler/parser.ts

@@ -4147,27 +4147,6 @@ namespace ts {
  return finishNode(node);
  }
 
- function tagNamesAreEquivalent(lhs: JsxTagNameExpression, rhs: JsxTagNameExpression): boolean {
- if (lhs.kind !== rhs.kind) {
- return false;
- }
-
- if (lhs.kind === SyntaxKind.Identifier) {
- return (<Identifier>lhs).escapedText === (<Identifier>rhs).escapedText;
- }
-
- if (lhs.kind === SyntaxKind.ThisKeyword) {
- return true;
- }
-
- // If we are at this statement then we must have PropertyAccessExpression and because tag name in Jsx element can only
- // take forms of JsxTagNameExpression which includes an identifier, "this" expression, or another propertyAccessExpression
- // it is safe to case the expression property as such. See parseJsxElementName for how we parse tag name in Jsx element
- return (<PropertyAccessExpression>lhs).name.escapedText === (<PropertyAccessExpression>rhs).name.escapedText &&
- tagNamesAreEquivalent((<PropertyAccessExpression>lhs).expression as JsxTagNameExpression, (<PropertyAccessExpression>rhs).expression as JsxTagNameExpression);
- }
-
-
  function parseJsxElementOrSelfClosingElementOrFragment(inExpressionContext: boolean): JsxElement | JsxSelfClosingElement | JsxFragment {
  const opening = parseJsxOpeningOrSelfClosingElementOrOpeningFragment(inExpressionContext);
  let result: JsxElement | JsxSelfClosingElement | JsxFragment;
@@ -7906,4 +7885,25 @@ namespace ts {
  }
  return argMap;
  }
+
+ /** @internal */
+ export function tagNamesAreEquivalent(lhs: JsxTagNameExpression, rhs: JsxTagNameExpression): boolean {
+ if (lhs.kind !== rhs.kind) {
+ return false;
+ }
+
+ if (lhs.kind === SyntaxKind.Identifier) {
+ return (<Identifier>lhs).escapedText === (<Identifier>rhs).escapedText;
+ }
+
+ if (lhs.kind === SyntaxKind.ThisKeyword) {
+ return true;
+ }
+
+ // If we are at this statement then we must have PropertyAccessExpression and because tag name in Jsx element can only
+ // take forms of JsxTagNameExpression which includes an identifier, "this" expression, or another propertyAccessExpression
+ // it is safe to case the expression property as such. See parseJsxElementName for how we parse tag name in Jsx element
+ return (<PropertyAccessExpression>lhs).name.escapedText === (<PropertyAccessExpression>rhs).name.escapedText &&
+ tagNamesAreEquivalent((<PropertyAccessExpression>lhs).expression as JsxTagNameExpression, (<PropertyAccessExpression>rhs).expression as JsxTagNameExpression);
+ }
 }

src/harness/fourslash.ts

@@ -2743,6 +2743,14 @@ Actual: ${stringify(fullActual)}`);
  }
  }
 
+ public verifyJsxClosingTag(map: { [markerName: string]: ts.JsxClosingTagInfo | undefined }): void {
+ for (const markerName in map) {
+ this.goToMarker(markerName);
+ const actual = this.languageService.getJsxClosingTagAtPosition(this.activeFile.fileName, this.currentCaretPosition);
+ assert.deepEqual(actual, map[markerName]);
+ }
+ }
+
  public verifyMatchingBracePosition(bracePosition: number, expectedMatchPosition: number) {
  const actual = this.languageService.getBraceMatchingAtPosition(this.activeFile.fileName, bracePosition);
 
@@ -4079,6 +4087,10 @@ namespace FourSlashInterface {
  this.state.verifyBraceCompletionAtPosition(this.negative, openingBrace);
  }
 
+ public jsxClosingTag(map: { [markerName: string]: ts.JsxClosingTagInfo | undefined }): void {
+ this.state.verifyJsxClosingTag(map);
+ }
+
  public isInCommentAtPosition(onlyMultiLineDiverges?: boolean) {
  this.state.verifySpanOfEnclosingComment(this.negative, onlyMultiLineDiverges);
  }

src/harness/harnessLanguageService.ts

@@ -509,6 +509,9 @@ namespace Harness.LanguageService {
  isValidBraceCompletionAtPosition(fileName: string, position: number, openingBrace: number): boolean {
  return unwrapJSONCallResult(this.shim.isValidBraceCompletionAtPosition(fileName, position, openingBrace));
  }
+ getJsxClosingTagAtPosition(): never {
+ throw new Error("Not supported on the shim.");
+ }
  getSpanOfEnclosingComment(fileName: string, position: number, onlyMultiLine: boolean): ts.TextSpan {
  return unwrapJSONCallResult(this.shim.getSpanOfEnclosingComment(fileName, position, onlyMultiLine));
  }

src/harness/unittests/session.ts

@@ -224,6 +224,7 @@ namespace ts.server {
  CommandNames.Occurrences,
  CommandNames.DocumentHighlights,
  CommandNames.DocumentHighlightsFull,
+ CommandNames.JsxClosingTag,
  CommandNames.Open,
  CommandNames.Quickinfo,
  CommandNames.QuickinfoFull,

src/server/client.ts

@@ -552,6 +552,10 @@ namespace ts.server {
  return notImplemented();
  }
 
+ getJsxClosingTagAtPosition(_fileName: string, _position: number): never {
+ return notImplemented();
+ }
+
  getSpanOfEnclosingComment(_fileName: string, _position: number, _onlyMultiLine: boolean): TextSpan {
  return notImplemented();
  }

src/server/protocol.ts

@@ -6,6 +6,7 @@
 namespace ts.server.protocol {
  // NOTE: If updating this, be sure to also update `allCommandNames` in `harness/unittests/session.ts`.
  export const enum CommandTypes {
+ JsxClosingTag = "jsxClosingTag",
  Brace = "brace",
  /* @internal */
  BraceFull = "brace-full",
@@ -890,6 +891,17 @@ namespace ts.server.protocol {
  openingBrace: string;
  }
 
+ export interface JsxClosingTagRequest extends FileLocationRequest {
+ readonly command: CommandTypes.JsxClosingTag;
+ readonly arguments: JsxClosingTagRequestArgs;
+ }
+
+ export interface JsxClosingTagRequestArgs extends FileLocationRequestArgs {}
+
+ export interface JsxClosingTagResponse extends Response {
+ readonly body: TextInsertion;
+ }
+
  /**
  * @deprecated
  * Get occurrences request; value of command field is

src/server/session.ts

@@ -818,6 +818,13 @@ namespace ts.server {
  return this.getDiagnosticsWorker(args, /*isSemantic*/ true, (project, file) => project.getLanguageService().getSuggestionDiagnostics(file), !!args.includeLinePosition);
  }
 
+ private getJsxClosingTag(args: protocol.JsxClosingTagRequestArgs): TextInsertion | undefined {
+ const { file, project } = this.getFileAndProject(args);
+ const position = this.getPositionInFile(args, file);
+ const tag = project.getLanguageService().getJsxClosingTagAtPosition(file, position);
+ return tag === undefined ? undefined : { newText: tag.newText, caretOffset: 0 };
+ }
+
  private getDocumentHighlights(args: protocol.DocumentHighlightsRequestArgs, simplifiedResult: boolean): ReadonlyArray<protocol.DocumentHighlightsItem> | ReadonlyArray<DocumentHighlights> {
  const { file, project } = this.getFileAndProject(args);
  const position = this.getPositionInFile(args, file);
@@ -2130,6 +2137,9 @@ namespace ts.server {
  this.projectService.reloadProjects();
  return this.notRequired();
  },
+ [CommandNames.JsxClosingTag]: (request: protocol.JsxClosingTagRequest) => {
+ return this.requiredResponse(this.getJsxClosingTag(request.arguments));
+ },
  [CommandNames.GetCodeFixes]: (request: protocol.CodeFixRequest) => {
  return this.requiredResponse(this.getCodeFixes(request.arguments, /*simplifiedResult*/ true));
  },

src/services/services.ts

@@ -2047,6 +2047,17 @@ namespace ts {
  return true;
  }
 
+ function getJsxClosingTagAtPosition(fileName: string, position: number): JsxClosingTagInfo | undefined {
+ const sourceFile = syntaxTreeCache.getCurrentSourceFile(fileName);
+ const token = findPrecedingToken(position, sourceFile);
+ if (!token) return undefined;
+ const element = token.kind === SyntaxKind.GreaterThanToken && isJsxOpeningElement(token.parent) ? token.parent.parent
+ : isJsxText(token) ? token.parent : undefined;
+ if (element && !tagNamesAreEquivalent(element.openingElement.tagName, element.closingElement.tagName)) {
+ return { newText: `</${element.openingElement.tagName.getText(sourceFile)}>` };
+ }
+ }
+
  function getSpanOfEnclosingComment(fileName: string, position: number, onlyMultiLine: boolean): TextSpan | undefined {
  const sourceFile = syntaxTreeCache.getCurrentSourceFile(fileName);
  const range = formatting.getRangeOfEnclosingComment(sourceFile, position, onlyMultiLine);
@@ -2279,6 +2290,7 @@ namespace ts {
  getFormattingEditsAfterKeystroke,
  getDocCommentTemplateAtPosition,
  isValidBraceCompletionAtPosition,
+ getJsxClosingTagAtPosition,
  getSpanOfEnclosingComment,
  getCodeFixesAtPosition,
  getCombinedCodeFix,

src/services/types.ts

@@ -323,6 +323,11 @@ namespace ts {
  getDocCommentTemplateAtPosition(fileName: string, position: number): TextInsertion | undefined;
 
  isValidBraceCompletionAtPosition(fileName: string, position: number, openingBrace: number): boolean;
+ /**
+ * This will return a defined result if the position is after the `>` of the opening tag, or somewhere in the text, of a JSXElement with no closing tag.
+ * Editors should call this after `>` is typed.
+ */
+ getJsxClosingTagAtPosition(fileName: string, position: number): JsxClosingTagInfo | undefined;
 
  getSpanOfEnclosingComment(fileName: string, position: number, onlyMultiLine: boolean): TextSpan | undefined;
 
@@ -353,6 +358,10 @@ namespace ts {
  dispose(): void;
  }
 
+ export interface JsxClosingTagInfo {
+ readonly newText: string;
+ }
+
  export interface CombinedCodeFixScope { type: "file"; fileName: string; }
 
  export type OrganizeImportsScope = CombinedCodeFixScope;

tests/baselines/reference/api/tsserverlibrary.d.ts

@@ -4566,6 +4566,11 @@ declare namespace ts {
  getFormattingEditsAfterKeystroke(fileName: string, position: number, key: string, options: FormatCodeOptions | FormatCodeSettings): TextChange[];
  getDocCommentTemplateAtPosition(fileName: string, position: number): TextInsertion | undefined;
  isValidBraceCompletionAtPosition(fileName: string, position: number, openingBrace: number): boolean;
+ /**
+ * This will return a defined result if the position is after the `>` of the opening tag, or somewhere in the text, of a JSXElement with no closing tag.
+ * Editors should call this after `>` is typed.
+ */
+ getJsxClosingTagAtPosition(fileName: string, position: number): JsxClosingTagInfo | undefined;
  getSpanOfEnclosingComment(fileName: string, position: number, onlyMultiLine: boolean): TextSpan | undefined;
  toLineColumnOffset?(fileName: string, position: number): LineAndCharacter;
  getCodeFixesAtPosition(fileName: string, start: number, end: number, errorCodes: ReadonlyArray<number>, formatOptions: FormatCodeSettings, preferences: UserPreferences): ReadonlyArray<CodeFixAction>;
@@ -4587,6 +4592,9 @@ declare namespace ts {
  getProgram(): Program | undefined;
  dispose(): void;
  }
+ interface JsxClosingTagInfo {
+ readonly newText: string;
+ }
  interface CombinedCodeFixScope {
  type: "file";
  fileName: string;
@@ -5516,6 +5524,7 @@ declare namespace ts.server {
  */
 declare namespace ts.server.protocol {
  enum CommandTypes {
+ JsxClosingTag = "jsxClosingTag",
  Brace = "brace",
  BraceCompletion = "braceCompletion",
  GetSpanOfEnclosingComment = "getSpanOfEnclosingComment",
@@ -6185,6 +6194,15 @@ declare namespace ts.server.protocol {
  */
  openingBrace: string;
  }
+ interface JsxClosingTagRequest extends FileLocationRequest {
+ readonly command: CommandTypes.JsxClosingTag;
+ readonly arguments: JsxClosingTagRequestArgs;
+ }
+ interface JsxClosingTagRequestArgs extends FileLocationRequestArgs {
+ }
+ interface JsxClosingTagResponse extends Response {
+ readonly body: TextInsertion;
+ }
  /**
  * @deprecated
  * Get occurrences request; value of command field is
@@ -8473,6 +8491,7 @@ declare namespace ts.server {
  private getSyntacticDiagnosticsSync;
  private getSemanticDiagnosticsSync;
  private getSuggestionDiagnosticsSync;
+ private getJsxClosingTag;
  private getDocumentHighlights;
  private setCompilerOptionsForInferredProjects;
  private getProjectInfo;