Update .babelrc generation for v7 templates

Author: CompuIves

packages/app/src/sandbox/compile.js

@@ -4,6 +4,7 @@ import _debug from 'app/utils/debug';
 import parseConfigurations from 'common/templates/configuration/parse';
 import initializeErrorTransformers from 'sandbox-hooks/errors/transformers';
 import { inject, unmount } from 'sandbox-hooks/react-error-overlay/overlay';
+import { isBabel7 } from 'common/utils/is-babel-7';
 
 import getPreset from './eval';
 import Manager from './eval/manager';
@@ -27,8 +28,6 @@ import getDefinition from '../../../common/templates/index';
 
 import { showRunOnClick } from './status-screen/run-on-click';
 
-import { isBabel7 } from './eval/utils/is-babel-7';
-
 let initializedResizeListener = false;
 let manager: ?Manager = null;
 let actionsEnabled = false;

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

@@ -1,4 +1,4 @@
-import semver from 'semver';
+import { isBabel7 } from 'common/utils/is-babel-7';
 
 import Preset from '../';
 
@@ -9,20 +9,6 @@ import rawTranspiler from '../../transpilers/raw';
 import svgrTranspiler from '../../transpilers/svgr';
 import sassTranspiler from '../../transpilers/sass';
 
-export function isVersion2(dependencies) {
-  const usedDeps = dependencies || {};
-  if (usedDeps['react-scripts']) {
-    const reactScriptsVersion = usedDeps['react-scripts'];
-
-    return (
-      /^[a-z]/.test(reactScriptsVersion) ||
-      semver.intersects(reactScriptsVersion, '^2.0.0')
-    );
-  }
-
-  return false;
-}
-
 export default function initialize() {
   let v2Initialized = false;
   const preset = new Preset(
@@ -35,7 +21,7 @@ export default function initialize() {
         const configurations = manager.configurations;
 
         if (
-          isVersion2(
+          isBabel7(
             configurations &&
               configurations.package &&
               configurations.package.parsed &&

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

@@ -1,13 +1,13 @@
 // @flow
 import BabelWorker from 'worker-loader?publicPath=/&name=babel-transpiler.[hash:8].worker.js!./worker/index.js';
+import { isBabel7 } from 'common/utils/is-babel-7';
 
 import isESModule from '../../utils/is-es-module';
 import regexGetRequireStatements from './worker/simple-get-require-statements';
 import getBabelConfig from './babel-parser';
 import WorkerTranspiler from '../worker-transpiler';
 import { type LoaderContext } from '../../transpiled-module';
 import type { default as Manager } from '../../manager';
-import { isBabel7 } from '../../utils/is-babel-7';
 
 import delay from '../../../utils/delay';
 

packages/app/src/sandbox/eval/utils/is-babel-7.js

@@ -1,4 +1,6 @@
 // @flow
+import { isBabel7 } from 'common/utils/is-babel-7';
+
 import type { ConfigurationFile } from '../types';
 
 const JSX_PRAGMA = {
@@ -16,6 +18,17 @@ const config: ConfigurationFile = {
     template: string,
     resolveModule: (path: string) => ?{ code: string }
   ) => {
+    let isV7 = false;
+
+    try {
+      const packageJSON = resolveModule('/package.json');
+      const parsed = JSON.parse(packageJSON.code || '');
+
+      isV7 = isBabel7(parsed.dependencies, parsed.devDependencies);
+    } catch (e) {
+      console.error(e);
+    }
+
     if (template === 'preact-cli') {
       return JSON.stringify(
         {
@@ -48,22 +61,12 @@ const config: ConfigurationFile = {
        *
        * Need to fix this ASAP and make vue-cli 3 a separate template.
        */
-      try {
-        const packageJSON = resolveModule('/package.json');
-        const parsed = JSON.parse(packageJSON.code);
-
-        if (
-          parsed.devDependencies &&
-          parsed.devDependencies['@vue/cli-plugin-babel']
-        ) {
-          return JSON.stringify({
-            presets: ['@vue/app'],
-          });
-        }
-      } catch (e) {
-        console.error(e);
-      }
 
+      if (isV7) {
+        return JSON.stringify({
+          presets: ['@vue/app'],
+        });
+      }
       return JSON.stringify(
         {
           presets: [
@@ -97,16 +100,18 @@ const config: ConfigurationFile = {
 
     if (template === 'parcel') {
       const presets = ['env'];
-      const plugins = [
-        [
-          'transform-runtime',
-          {
-            polyfill: false,
-            regenerator: true,
-          },
-        ],
-        'transform-object-rest-spread',
-      ];
+      const plugins = isV7
+        ? []
+        : [
+            [
+              'transform-runtime',
+              {
+                polyfill: false,
+                regenerator: true,
+              },
+            ],
+            'transform-object-rest-spread',
+          ];
 
       const packageJSONModule = resolveModule('/package.json');
 

packages/common/templates/configuration/babelrc/index.js

@@ -0,0 +1,31 @@
+import semver from 'semver';
+
+function isCRAVersion2(dependencies) {
+  const usedDeps = dependencies || {};
+  if (usedDeps['react-scripts']) {
+    const reactScriptsVersion = usedDeps['react-scripts'];
+
+    return (
+      /^[a-z]/.test(reactScriptsVersion) ||
+      semver.intersects(reactScriptsVersion, '^2.0.0')
+    );
+  }
+
+  return false;
+}
+
+export function isBabel7(dependencies = {}, devDependencies = {}) {
+  if (devDependencies['@vue/cli-plugin-babel']) {
+    return true;
+  }
+
+  if (devDependencies['@babel/core']) {
+    return true;
+  }
+
+  if (isCRAVersion2(dependencies)) {
+    return true;
+  }
+
+  return false;
+}