Make JSX check for shouldTranspile far more aggressive

Author: CompuIves

packages/app/src/sandbox/eval/presets/create-react-app/index.js

@@ -25,7 +25,12 @@ export default function initialize() {
             configurations &&
               configurations.package &&
               configurations.package.parsed &&
-              configurations.package.parsed.dependencies
+              configurations.package.parsed.dependencies,
+
+            configurations &&
+              configurations.package &&
+              configurations.package.parsed &&
+              configurations.package.parsed.devDependencies
           ) &&
           !v2Initialized
         ) {

packages/app/src/sandbox/eval/transpilers/babel/check.js

@@ -1,7 +1,29 @@
 import isESModule from '../../utils/is-es-module';
 
-const JSXSyntax = /<\w(.|\n)*\/?>/;
+const JSXSyntax = /(.*)<\w(.|\n)*?\/?>/;
 
 export function shouldTranspile(code: string, path: string) {
-  return isESModule(code) || JSXSyntax.test(code);
+  if (isESModule(code)) {
+    return true;
+  }
+
+  const match = code.match(JSXSyntax);
+  if (match) {
+    const startOfLine = match[1];
+
+    // If it's in a comment or string, we're extremely aggressive here because
+    // transpiling is absolutely our last resort.
+    if (
+      startOfLine.indexOf('//') > -1 ||
+      startOfLine.indexOf('*') > -1 ||
+      startOfLine.indexOf("'") > -1 ||
+      startOfLine.indexOf('"') > -1 ||
+      startOfLine.indexOf('`') > -1
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+  return false;
 }

packages/app/src/sandbox/eval/transpilers/babel/check.test.js

@@ -0,0 +1,15 @@
+import { shouldTranspile } from './check';
+
+describe('shouldTranspile', () => {
+  it('does have to transpile clear jsx', () => {
+    const code = '<div></div>';
+
+    expect(shouldTranspile(code, '')).toBe(true);
+  });
+
+  it("doesn't have to transpile comments with jsx", () => {
+    const code = '    // Setting .type throws on non-<input> tags';
+
+    expect(shouldTranspile(code, '')).toBe(false);
+  });
+});

packages/common/utils/is-babel-7.js

@@ -1,10 +1,9 @@
 import semver from 'semver';
 
 function isCRAVersion2(dependencies, devDependencies) {
-  const usedDeps = { ...dependencies, ...devDependencies };
-  if (usedDeps['react-scripts']) {
-    const reactScriptsVersion = usedDeps['react-scripts'];
-
+  const reactScriptsVersion =
+    dependencies['react-scripts'] || devDependencies['react-scripts'];
+  if (reactScriptsVersion) {
     return (
       /^[a-z]/.test(reactScriptsVersion) ||
       semver.intersects(reactScriptsVersion, '^2.0.0')