[JavaScript] Rename TypeScript to TSX, add proper TypeScript syntax

Author: wbond

JavaScript/JSX.sublime-syntax

@@ -5,7 +5,7 @@ name: JSX
 file_extensions:
   - jsx
 scope: source.jsx
-extends: Packages/JavaScript/JavaScript.sublime-syntax
+extends: JavaScript.sublime-syntax
 
 variables:
   jsx_identifier_part: (?:{{identifier_part}}|-)

JavaScript/TSX.sublime-syntax

@@ -0,0 +1,10 @@
+%YAML 1.2
+---
+version: 2
+name: TSX
+file_extensions:
+  - tsx
+scope: source.tsx
+extends:
+  - JSX.sublime-syntax
+  - TypeScript.sublime-syntax

JavaScript/TypeScript.sublime-syntax

@@ -5,7 +5,7 @@ name: TypeScript
 file_extensions:
   - ts
 scope: source.ts
-extends: Packages/JavaScript/JSX.sublime-syntax
+extends: JavaScript.sublime-syntax
 
 variables:
   dot_accessor: (?:[?!]?\.)

JavaScript/tests/syntax_test_tsx.tsx

@@ -0,0 +1,25 @@
+// SYNTAX TEST "Packages/JavaScript/TSX.sublime-syntax"
+
+    <foo />;
+//  ^^^^^^^ meta.jsx meta.tag
+//  ^ punctuation.definition.tag.begin
+//   ^^^ meta.tag.name entity.name.tag
+//       ^^ punctuation.definition.tag.end
+
+    type x < T = Foo > = any;
+//  ^^^^^^^^^^^^^^^^^^^^^^^^ meta.type-alias
+//  ^^^^ storage.type
+//       ^ entity.name.type
+//         ^^^^^^^^^^^ meta.generic
+//         ^ punctuation.definition.generic.begin
+//           ^ variable.parameter.generic
+//             ^ keyword.operator.assignment
+//               ^^^ support.class
+//                   ^ punctuation.definition.generic.end
+//                     ^ keyword.operator.assignment
+//                       ^^^ meta.type-alias support.type.any
+
+// This is invalid TSX as the TypeScript type assertion is parsed as a JSX tag
+let strLength: number = (<string>someValue).length; // </string>
+//                       ^^^^^^^^ meta.tag - meta.assertion
+//                                                     ^^^^^^^^^ meta.tag - comment

JavaScript/tests/syntax_test_typescript.ts

@@ -377,6 +377,10 @@ x as const;
 //    ^ keyword.operator.type
 //      ^ punctuation.terminator.statement
 
+// This is a type assertion that is incompatible with JSX
+let strLength: number = (<string>someValue).length; // </string>
+//                       ^^^^^^^^ meta.assertion - meta.tag
+//                                                     ^^^^^^^^^ comment - meta.tag
 
 /* Types */