feat(react): refactored babel support so options are more easily cust…

…omized (nrwl#3089)

This reverts commit 7679df2.

docs/angular/api-web/builders/package.md

@@ -16,7 +16,7 @@ List of static assets.
 
 Type: `string`
 
-Path to a function which takes a babel config and returns an updated babel config
+(deprecated) Path to a function which takes a babel config and returns an updated babel config
 
 ### entryFile
 

docs/react/api-web/builders/package.md

@@ -17,7 +17,7 @@ List of static assets.
 
 Type: `string`
 
-Path to a function which takes a babel config and returns an updated babel config
+(deprecated) Path to a function which takes a babel config and returns an updated babel config
 
 ### entryFile
 

e2e/react.test.ts

@@ -199,7 +199,7 @@ forEachCli((currentCLIName) => {
       );
     }, 120000);
 
-    xit('should be able to use babel-jest', async () => {
+    it('should be able to use babel-jest', async () => {
       ensureProject();
       const appName = uniq('app');
       const libName = uniq('lib');
@@ -211,11 +211,6 @@ forEachCli((currentCLIName) => {
         `generate @nrwl/react:lib ${libName} --no-interactive --babelJest`
       );
 
-      checkFilesExist(
-        `apps/${appName}/babel-jest.config.json`,
-        `libs/${libName}/babel-jest.config.json`
-      );
-
       const appTestResults = await runCLIAsync(`test ${appName}`);
       expect(appTestResults.stderr).toContain('Test Suites: 1 passed, 1 total');
 
@@ -308,7 +303,7 @@ forEachCli((currentCLIName) => {
       }
       checkFilesExist(...filesToCheck);
       expect(readFile(`dist/apps/${appName}/main.js`)).toContain(
-        'var App = () => {'
+        'const App = () =>'
       );
       runCLI(`build ${appName} --prod --output-hashing none`);
       filesToCheck = [

e2e/utils.ts

@@ -175,7 +175,7 @@ export function newProject(): void {
       `@nrwl/storybook`,
       `@nrwl/nx-plugin`,
     ];
-    yarnAdd(packages.join(` `));
+    yarnAdd([`@nrwl/eslint-plugin-nx`].concat(packages).join(` `));
     packages
       .filter((f) => f != '@nrwl/nx-plugin')
       .forEach((p) => {

e2e/web.test.ts

@@ -1,12 +1,10 @@
-import { stripIndents } from '@angular-devkit/core/src/utils/literals';
 import {
   checkFilesExist,
   ensureProject,
   forEachCli,
   readFile,
   runCLI,
   runCLIAsync,
-  supportUi,
   uniq,
   updateFile,
 } from './utils';
@@ -54,72 +52,9 @@ forEachCli((currentCLIName) => {
       const lintE2eResults = runCLI(`lint ${appName}-e2e`);
       expect(lintE2eResults).toContain('All files pass linting.');
 
-      if (supportUi()) {
-        const e2eResults = runCLI(`e2e ${appName}-e2e`);
-        expect(e2eResults).toContain('All specs passed!');
-      }
+      const e2eResults = runCLI(`e2e ${appName}-e2e`);
+      expect(e2eResults).toContain('All specs passed!');
     }, 120000);
-
-    it('should support same syntax as TypeScript', () => {
-      ensureProject();
-      const appName = uniq('app');
-
-      runCLI(`generate @nrwl/web:app ${appName} --no-interactive`);
-
-      const mainPath = `apps/${appName}/src/app/app.element.ts`;
-      const content = readFile(mainPath);
-      updateFile(
-        mainPath,
-        content
-          // Testing decorators
-          .replace(
-            `export class AppElement extends HTMLElement`,
-            stripIndents`
-          function myDecorator(ctor) {
-            ctor.title = '${appName}';
-          }
-
-          @myDecorator
-          export class AppElement extends HTMLElement`
-          )
-          .replace('${title}', '${(AppElement as any).title}') +
-          // Testing const enums
-          stripIndents`
-            export const enum MyEnum {
-              a,
-              b,
-              b
-            };
-          `
-      );
-
-      if (supportUi()) {
-        const e2eResults = runCLI(`e2e ${appName}-e2e`);
-        expect(e2eResults).toContain('All specs passed!');
-      }
-    });
-
-    it('should support CSS modules', () => {
-      ensureProject();
-      const appName = uniq('app');
-
-      runCLI(`generate @nrwl/web:app ${appName} --no-interactive`);
-      updateFile(
-        `apps/${appName}/src/app/app.module.css`,
-        '.foo { color: red; }'
-      );
-      const mainPath = `apps/${appName}/src/app/app.element.ts`;
-      const content = readFile(mainPath);
-      updateFile(
-        mainPath,
-        `import styles from './app.module.css';\n${content}`
-      );
-
-      if (supportUi()) {
-        const e2eResults = runCLI(`e2e ${appName}-e2e`);
-        expect(e2eResults).toContain('All specs passed!');
-      }
-    });
   });
 
   describe('CLI - Environment Variables', () => {
@@ -140,7 +75,7 @@ forEachCli((currentCLIName) => {
         env: { ...process.env, NODE_ENV: 'test', NX_BUILD: '52', NX_API: 'QA' },
       });
       expect(readFile(`dist/apps/${appName}/main.js`)).toContain(
-        'var envVars = ["test", "52", "QA"];'
+        'const envVars = ["test", "52", "QA"];'
       );
     });
   });

package.json

@@ -50,13 +50,13 @@
     "@angular/router": "^9.1.0",
     "@angular/service-worker": "^9.1.0",
     "@angular/upgrade": "^9.1.0",
-    "@babel/core": "7.8.4",
+    "@babel/core": "7.9.6",
+    "@babel/preset-env": "7.9.6",
     "@babel/plugin-proposal-class-properties": "7.8.3",
     "@babel/plugin-proposal-decorators": "7.8.3",
-    "@babel/plugin-transform-regenerator": "7.8.3",
-    "@babel/preset-env": "7.8.4",
-    "@babel/preset-react": "7.8.3",
-    "@babel/preset-typescript": "7.8.3",
+    "@babel/plugin-transform-regenerator": "7.8.7",
+    "@babel/preset-typescript": "7.9.0",
+    "@babel/preset-react": "7.9.4",
     "@bazel/bazel": "^1.2.0",
     "@bazel/ibazel": "^0.10.3",
     "@cypress/webpack-preprocessor": "^4.1.2",
@@ -73,6 +73,7 @@
     "@ngrx/store-devtools": "9.1.0",
     "@ngtools/webpack": "~9.1.0",
     "@reduxjs/toolkit": "1.3.2",
+    "@rollup/plugin-babel": "5.0.2",
     "@rollup/plugin-commonjs": "11.0.2",
     "@rollup/plugin-image": "2.0.4",
     "@rollup/plugin-node-resolve": "7.1.1",
@@ -110,12 +111,12 @@
     "app-root-path": "^2.0.1",
     "autoprefixer": "9.7.4",
     "axios": "^0.19.0",
-    "babel-loader": "8.0.6",
-    "babel-plugin-const-enum": "^0.0.5",
+    "babel-loader": "8.1.0",
+    "babel-plugin-const-enum": "^1.0.1",
+    "babel-plugin-macros": "^2.8.0",
+    "babel-plugin-transform-async-to-promises": "^0.8.15",
     "babel-plugin-emotion": "^10.0.29",
-    "babel-plugin-macros": "2.6.1",
     "babel-plugin-styled-components": "^1.10.7",
-    "babel-plugin-transform-async-to-promises": "0.8.15",
     "browserslist": "4.8.7",
     "cacache": "12.0.2",
     "caniuse-lite": "^1.0.30001030",
@@ -126,7 +127,7 @@
     "confusing-browser-globals": "^1.0.9",
     "conventional-changelog-cli": "^2.0.23",
     "copy-webpack-plugin": "5.1.1",
-    "core-js": "^2.6.9",
+    "core-js": "^3.6.5",
     "cosmiconfig": "^4.0.0",
     "css-loader": "3.4.2",
     "cypress": "^4.1.0",
@@ -197,7 +198,6 @@
     "regenerator-runtime": "0.13.3",
     "release-it": "^7.4.0",
     "rollup": "1.31.1",
-    "rollup-plugin-babel": "4.3.3",
     "rollup-plugin-copy": "3.3.0",
     "rollup-plugin-filesize": "6.2.1",
     "rollup-plugin-local-resolve": "1.0.7",

packages/angular/src/schematics/init/init.spec.ts

@@ -23,7 +23,6 @@ describe('init', () => {
     expect(dependencies['@angular/platform-browser']).toBeDefined();
     expect(dependencies['@angular/platform-browser-dynamic']).toBeDefined();
     expect(dependencies['@angular/router']).toBeDefined();
-    expect(dependencies['core-js']).toBeDefined();
     expect(dependencies['rxjs']).toBeDefined();
     expect(dependencies['zone.js']).toBeDefined();
     expect(devDependencies['@angular/compiler-cli']).toBeDefined();

packages/angular/src/schematics/init/init.ts

@@ -34,7 +34,6 @@ const updateDependencies = addDepsToPackageJson(
     '@angular/platform-browser': angularVersion,
     '@angular/platform-browser-dynamic': angularVersion,
     '@angular/router': angularVersion,
-    'core-js': '^2.5.4',
     rxjs: rxjsVersion,
     'zone.js': '^0.10.2',
   },

packages/angular/src/schematics/karma-project/files/src/test.ts__tmpl__

@@ -1,6 +1,5 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 <% if (isLibrary) { %>
-import 'core-js/es7/reflect';
 import 'zone.js/dist/zone';
 <% } %>
 import 'zone.js/dist/zone-testing';

packages/angular/src/schematics/karma-project/karma-project.spec.ts

@@ -135,7 +135,6 @@ module.exports = function(config) {
         appTree
       );
       const testTs = resultTree.read('libs/lib1/src/test.ts').toString();
-      expect(testTs).toContain("import 'core-js/es7/reflect';");
       expect(testTs).toContain("import 'zone.js/dist/zone';");
     });
   });
@@ -199,7 +198,6 @@ module.exports = function(config) {
         appTree
       );
       const testTs = resultTree.read('apps/app1/src/test.ts').toString();
-      expect(testTs).not.toContain("import 'core-js/es7/reflect';");
       expect(testTs).not.toContain("import 'zone.js/dist/zone';");
     });
   });

packages/jest/src/schematics/jest-project/jest-project.spec.ts

@@ -133,38 +133,6 @@ describe('jestProject', () => {
     });
   });
 
-  describe('--babelJest', () => {
-    it('should have a babel config when true', async () => {
-      const resultTree = await runSchematic(
-        'jest-project',
-        {
-          project: 'lib1',
-          setupFile: 'none',
-          babelJest: true,
-        },
-        appTree
-      );
-      expect(
-        resultTree.exists('/libs/lib1/babel-jest.config.json')
-      ).toBeTruthy();
-    });
-
-    it('should NOT have a babel config when false', async () => {
-      const resultTree = await runSchematic(
-        'jest-project',
-        {
-          project: 'lib1',
-          setupFile: 'none',
-          babelJest: false,
-        },
-        appTree
-      );
-      expect(
-        resultTree.exists('/libs/lib1/babel-jest.config.json')
-      ).toBeFalsy();
-    });
-  });
-
   describe('--setup-file', () => {
     it('should generate src/test-setup.ts', async () => {
       const resultTree = await runSchematic(

packages/jest/src/utils/versions.ts

@@ -3,8 +3,8 @@ export const jestVersion = '25.2.3';
 export const jestTypesVersion = '25.1.4';
 export const tsJestVersion = '25.2.1';
 
-export const babelCoreVersion = '7.8.4';
-export const babelPresetEnvVersion = '7.8.4';
-export const babelPresetTypescriptVersion = '7.8.3';
-export const babelPresetReactVersion = '7.8.3';
+export const babelCoreVersion = '7.9.6';
+export const babelPresetEnvVersion = '7.9.6';
+export const babelPresetTypescriptVersion = '7.9.0';
+export const babelPresetReactVersion = '7.9.4';
 export const babelJestVersion = '25.1.0';

packages/next/src/schematics/application/files/.babelrc__tmpl__

@@ -1,4 +1,4 @@
 {
   "presets": ["next/babel"],
-  "plugins": [<% if (style === 'styled-components') { %>["styled-components", { "pure": true, "ssr": true }]<% } %> ]
+  "plugins": [<% if (style === 'styled-components') { %>["styled-components", { "pure": true, "ssr": true }]<% } %>]
 }

packages/react/babel.ts

@@ -0,0 +1,10 @@
+/*
+ * Babel preset to provide React support for Nx.
+ */
+
+module.exports = function (api: any, options: {}) {
+  api.assertVersion(7);
+  return {
+    presets: [[require.resolve('@babel/preset-react'), { useBuiltIns: true }]],
+  };
+};