Merge pull request microsoft#6411 from Microsoft/classifyJsx2

add support for classifying jsx text and string literals in jsx attributes

Author: vladima

src/harness/fourslash.ts

@@ -3285,6 +3285,30 @@ namespace FourSlashInterface {
  return getClassification("typeAliasName", text, position);
  }
 
+ export function jsxOpenTagName(text: string, position?: number): { classificationType: string; text: string; textSpan?: FourSlash.TextSpan } {
+ return getClassification("jsxOpenTagName", text, position);
+ }
+
+ export function jsxCloseTagName(text: string, position?: number): { classificationType: string; text: string; textSpan?: FourSlash.TextSpan } {
+ return getClassification("jsxCloseTagName", text, position);
+ }
+
+ export function jsxSelfClosingTagName(text: string, position?: number): { classificationType: string; text: string; textSpan?: FourSlash.TextSpan } {
+ return getClassification("jsxSelfClosingTagName", text, position);
+ }
+
+ export function jsxAttribute(text: string, position?: number): { classificationType: string; text: string; textSpan?: FourSlash.TextSpan } {
+ return getClassification("jsxAttribute", text, position);
+ }
+
+ export function jsxText(text: string, position?: number): { classificationType: string; text: string; textSpan?: FourSlash.TextSpan } {
+ return getClassification("jsxText", text, position);
+ }
+
+ export function jsxAttributeStringLiteralValue(text: string, position?: number): { classificationType: string; text: string; textSpan?: FourSlash.TextSpan } {
+ return getClassification("jsxAttributeStringLiteralValue", text, position);
+ }
+
  function getClassification(type: string, text: string, position?: number) {
  return {
  classificationType: type,

src/services/services.ts

@@ -1616,6 +1616,9 @@ namespace ts {
  public static jsxOpenTagName = "jsx open tag name";
  public static jsxCloseTagName = "jsx close tag name";
  public static jsxSelfClosingTagName = "jsx self closing tag name";
+ public static jsxAttribute = "jsx attribute";
+ public static jsxText = "jsx text";
+ public static jsxAttributeStringLiteralValue = "jsx attribute string literal value";
  }
 
  export const enum ClassificationType {
@@ -1640,7 +1643,9 @@ namespace ts {
  jsxOpenTagName = 19,
  jsxCloseTagName = 20,
  jsxSelfClosingTagName = 21,
- jsxAttribute = 22
+ jsxAttribute = 22,
+ jsxText = 23,
+ jsxAttributeStringLiteralValue = 24,
  }
 
  /// Language Service
@@ -6595,6 +6600,9 @@ namespace ts {
  case ClassificationType.jsxOpenTagName: return ClassificationTypeNames.jsxOpenTagName;
  case ClassificationType.jsxCloseTagName: return ClassificationTypeNames.jsxCloseTagName;
  case ClassificationType.jsxSelfClosingTagName: return ClassificationTypeNames.jsxSelfClosingTagName;
+ case ClassificationType.jsxAttribute: return ClassificationTypeNames.jsxAttribute;
+ case ClassificationType.jsxText: return ClassificationTypeNames.jsxText;
+ case ClassificationType.jsxAttributeStringLiteralValue: return ClassificationTypeNames.jsxAttributeStringLiteralValue;
  }
  }
 
@@ -6803,12 +6811,12 @@ namespace ts {
  }
  }
 
- function classifyToken(token: Node): void {
+ function classifyTokenOrJsxText(token: Node): void {
  if (nodeIsMissing(token)) {
  return;
  }
 
- const tokenStart = classifyLeadingTriviaAndGetTokenStart(token);
+ const tokenStart = token.kind === SyntaxKind.JsxText ? token.pos : classifyLeadingTriviaAndGetTokenStart(token);
 
  const tokenWidth = token.end - tokenStart;
  Debug.assert(tokenWidth >= 0);
@@ -6844,7 +6852,8 @@ namespace ts {
  // the '=' in a variable declaration is special cased here.
  if (token.parent.kind === SyntaxKind.VariableDeclaration ||
  token.parent.kind === SyntaxKind.PropertyDeclaration ||
- token.parent.kind === SyntaxKind.Parameter) {
+ token.parent.kind === SyntaxKind.Parameter ||
+ token.parent.kind === SyntaxKind.JsxAttribute) {
  return ClassificationType.operator;
  }
  }
@@ -6863,7 +6872,7 @@ namespace ts {
  return ClassificationType.numericLiteral;
  }
  else if (tokenKind === SyntaxKind.StringLiteral || tokenKind === SyntaxKind.StringLiteralType) {
- return ClassificationType.stringLiteral;
+ return token.parent.kind === SyntaxKind.JsxAttribute ? ClassificationType.jsxAttributeStringLiteralValue : ClassificationType.stringLiteral;
  }
  else if (tokenKind === SyntaxKind.RegularExpressionLiteral) {
  // TODO: we should get another classification type for these literals.
@@ -6873,6 +6882,9 @@ namespace ts {
  // TODO (drosen): we should *also* get another classification type for these literals.
  return ClassificationType.stringLiteral;
  }
+ else if (tokenKind === SyntaxKind.JsxText) {
+ return ClassificationType.jsxText;
+ }
  else if (tokenKind === SyntaxKind.Identifier) {
  if (token) {
  switch (token.parent.kind) {
@@ -6946,8 +6958,8 @@ namespace ts {
  const children = element.getChildren(sourceFile);
  for (let i = 0, n = children.length; i < n; i++) {
  const child = children[i];
- if (isToken(child)) {
- classifyToken(child);
+ if (isToken(child) || child.kind === SyntaxKind.JsxText) {
+ classifyTokenOrJsxText(child);
  }
  else {
  // Recurse into our child nodes.

tests/cases/fourslash/fourslash.ts

@@ -338,6 +338,36 @@ declare namespace FourSlashInterface {
  text: string;
  textSpan?: TextSpan;
  };
+ function jsxOpenTagName(text: string, position?: number): {
+ classificationType: string;
+ text: string;
+ textSpan?: TextSpan;
+ };
+ function jsxCloseTagName(text: string, position?: number): {
+ classificationType: string;
+ text: string;
+ textSpan?: TextSpan;
+ };
+ function jsxSelfClosingTagName(text: string, position?: number): {
+ classificationType: string;
+ text: string;
+ textSpan?: TextSpan;
+ };
+ function jsxAttribute(text: string, position?: number): {
+ classificationType: string;
+ text: string;
+ textSpan?: TextSpan;
+ };
+ function jsxText(text: string, position?: number): {
+ classificationType: string;
+ text: string;
+ textSpan?: TextSpan;
+ };
+ function jsxAttributeStringLiteralValue(text: string, position?: number): {
+ classificationType: string;
+ text: string;
+ textSpan?: TextSpan;
+ };
  }
 }
 declare function verifyOperationIsCancelled(f: any): void;

tests/cases/fourslash/syntacticClassificationsJsx1.ts

@@ -0,0 +1,27 @@
+/// <reference path="fourslash.ts"/>
+
+// @Filename: file1.tsx
+////let x = <div a = "some-value" b = {1}>
+//// some jsx text
+////</div>;
+////
+////let y = <element attr="123"/>
+
+const c = classification; 
+verify.syntacticClassificationsAre(
+ c.keyword("let"), c.identifier("x"), c.operator("="),
+ c.punctuation("<"), 
+ c.jsxOpenTagName("div"),
+ c.jsxAttribute("a"), c.operator("="), c.jsxAttributeStringLiteralValue(`"some-value"`),
+ c.jsxAttribute("b"), c.operator("="), c.punctuation("{"), c.numericLiteral("1"), c.punctuation("}"),
+ c.punctuation(">"),
+ c.jsxText(`
+ some jsx text
+`),
+ c.punctuation("<"), c.punctuation("/"), c.jsxCloseTagName("div"), c.punctuation(">"), c.punctuation(";"),
+ c.keyword("let"), c.identifier("y"), c.operator("="),
+ c.punctuation("<"), 
+ c.jsxSelfClosingTagName("element"), 
+ c.jsxAttribute("attr"), c.operator("="), c.jsxAttributeStringLiteralValue(`"123"`), 
+ c.punctuation("/"), c.punctuation(">")
+)