feat(typescript): add fallback for JSX detection (#1551)

src/parser.js

@@ -53,20 +53,15 @@ function parseWithBabylon(text) {
 }
 
 function parseWithTypeScript(text) {
-  // While we are working on typescript, we are putting it in devDependencies
+  const jsx = isProbablyJsx(text);
-  // so it shouldn't be picked up by static analysis
-  const r = require;
-  const parser = r("typescript-eslint-parser");
   try {
-    return parser.parse(text, {
+    try {
-      loc: true,
+      // Try passing with our best guess first.
-      range: true,
+      return tryParseTypeScript(text, jsx);
-      tokens: true,
+    } catch (e) {
-      attachComment: true,
+      // But if we get it wrong, try the opposite.
-      ecmaFeatures: {
+      return tryParseTypeScript(text, !jsx);
-        jsx: isJsx(text)
+    }
-      }
-    });
   } catch(e) {
     throw createError(
       e.message,
@@ -76,13 +71,27 @@ function parseWithTypeScript(text) {
   }
 }
 
+function tryParseTypeScript(text, jsx) {
+  // While we are working on typescript, we are putting it in devDependencies
+  // so it shouldn't be picked up by static analysis
+  const r = require;
+  const parser = r("typescript-eslint-parser");
+  return parser.parse(text, {
+    loc: true,
+    range: true,
+    tokens: true,
+    attachComment: true,
+    ecmaFeatures: { jsx }
+  });
+}
+
 /**
  * Use a naive regular expression until we address
  * https://github.com/prettier/prettier/issues/1538
  */
-function isJsx(text) {
+function isProbablyJsx(text) {
   return new RegExp([
-    "(</)", // Contains "</"
+    "(^[^\"'`]*</)", // Contains "</" when probably not in a string
     "|",
     "(^[^/]{2}.*\/>)" // Contains "/>" on line not starting with "//"
   ].join(""), "m").test(text);

tests/typescript_tsx/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`not-react.ts 1`] = `
+/// <reference types="node" />
+
+type ul = any;
+const somethingElse = 1;
+const thing = <ul>somethingElse;
+const div = "<div></div>";
+const h1 = \`<h1>Hi</h1>\`;
+const footer = '<footer></footer>';
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+/// <reference types="node" />
+
+type ul = any;
+const somethingElse = 1;
+const thing = <ul>somethingElse;
+const div = "<div></div>";
+const h1 = \`<h1>Hi</h1>\`;
+const footer = "<footer></footer>";
+
+`;
+
+exports[`react.tsx 1`] = `
+const MyCoolList = ({ things }) =>
+    <ul>
+        {things.map(MyCoolThing)}
+    </ul>;
+
+const MyCoolThing = ({ thingo }) => <li>{thingo}</li>;
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+const MyCoolList = ({ things }) => (
+  <ul>
+    {things.map(MyCoolThing)}
+  </ul>
+);
+
+const MyCoolThing = ({ thingo }) => <li>{thingo}</li>;
+
+`;

tests/typescript_tsx/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, {parser: "typescript"});

tests/typescript_tsx/not-react.ts

@@ -0,0 +1,8 @@
+/// <reference types="node" />
+
+type ul = any;
+const somethingElse = 1;
+const thing = <ul>somethingElse;
+const div = "<div></div>";
+const h1 = `<h1>Hi</h1>`;
+const footer = '<footer></footer>';

tests/typescript_tsx/react.tsx

@@ -0,0 +1,6 @@
+const MyCoolList = ({ things }) =>
+    <ul>
+        {things.map(MyCoolThing)}
+    </ul>;
+
+const MyCoolThing = ({ thingo }) => <li>{thingo}</li>;

tests_config/run_spec.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const fs = require("fs");
+const extname = require("path").extname;
 const prettier = require("../");
 const types = require("../src/ast-types");
 const parser = require("../src/parser");
@@ -25,10 +26,8 @@ function removeEmptyStatements(ast) {
 
 function run_spec(dirname, options, additionalParsers) {
   fs.readdirSync(dirname).forEach(filename => {
-    if (
+    const extension = extname(filename);
-      (filename.endsWith(".js") || filename.endsWith(".ts")) &&
+    if (/^\.[jt]sx?$/.test(extension) && filename !== "jsfmt.spec.js") {
-      filename !== "jsfmt.spec.js"
-    ) {
       const path = dirname + "/" + filename;
 
       if (!RUN_AST_TESTS) {