feat(js): do not generate root babel.config.json for babel projects

- Project will only use its .babelrc and ignore .babelrc of other projects (e.g. other libs) - For prevous behavior user can set `babelUpwardRootMode: true` for @nx/webpack:webpack or @nx/rollup:rollup executors
nrwl · Jun 5, 2023 · ca7af0b · ca7af0b
1 parent bbb64f8
commit ca7af0b
Show file tree

Hide file tree

Showing 54 changed files with 359 additions and 488 deletions.
diff --git a/docs/generated/packages/express/generators/application.json b/docs/generated/packages/express/generators/application.json
@@ -50,10 +50,16 @@
         "type": "string",
         "description": "Frontend project that needs to access this application. This sets up proxy configuration."
       },
+      "swcJest": {
+        "type": "boolean",
+        "description": "Use `@swc/jest` instead `ts-jest` for faster test compilation.",
+        "default": false
+      },
       "babelJest": {
         "type": "boolean",
         "description": "Use `babel` instead `ts-jest`.",
-        "default": false
+        "default": false,
+        "x-deprecated": "Use --swcJest instead for faster compilation"
       },
       "pascalCaseFiles": {
         "type": "boolean",

diff --git a/docs/generated/packages/node/generators/application.json b/docs/generated/packages/node/generators/application.json
@@ -54,11 +54,17 @@
         "description": "Frontend project that needs to access this application. This sets up proxy configuration.",
         "x-priority": "important"
       },
-      "babelJest": {
+      "swcJest": {
         "type": "boolean",
-        "description": "Use `babel` instead of `ts-jest`.",
+        "description": "Use `@swc/jest` instead `ts-jest` for faster test compilation.",
         "default": false
       },
+      "babelJest": {
+        "type": "boolean",
+        "description": "Use `babel` instead `ts-jest`.",
+        "default": false,
+        "x-deprecated": "Use --swcJest instead for faster compilation"
+      },
       "pascalCaseFiles": {
         "type": "boolean",
         "description": "Use pascal case file names.",

diff --git a/docs/generated/packages/react/generators/application.json b/docs/generated/packages/react/generators/application.json
@@ -92,8 +92,8 @@
         "default": false,
         "x-priority": "internal"
       },
-      "skipWorkspaceJson": {
-        "description": "Skip updating `workspace.json` with default options based on values provided to this app (e.g. babel, style).",
+      "skipNxJson": {
+        "description": "Skip updating `nx.json` with default options based on values provided to this app.",
         "type": "boolean",
         "default": false,
         "x-priority": "internal"

diff --git a/docs/generated/packages/react/generators/host.json b/docs/generated/packages/react/generators/host.json
@@ -73,7 +73,7 @@
         "default": false,
         "x-priority": "internal"
       },
-      "skipWorkspaceJson": {
+      "skipNxJson": {
         "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
         "type": "boolean",
         "default": false,

diff --git a/docs/generated/packages/react/generators/init.json b/docs/generated/packages/react/generators/init.json
@@ -31,11 +31,6 @@
         "type": "boolean",
         "default": false
       },
-      "skipBabelConfig": {
-        "description": "Do not generate a root babel.config.json (if babel is not needed).",
-        "type": "boolean",
-        "default": false
-      },
       "skipHelperLibs": {
         "description": "Do not install  tslib.",
         "type": "boolean",

diff --git a/docs/generated/packages/react/generators/remote.json b/docs/generated/packages/react/generators/remote.json
@@ -78,7 +78,7 @@
         "default": false,
         "x-priority": "internal"
       },
-      "skipWorkspaceJson": {
+      "skipNxJson": {
         "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
         "type": "boolean",
         "default": false,

diff --git a/docs/generated/packages/web/generators/application.json b/docs/generated/packages/web/generators/application.json
@@ -43,8 +43,8 @@
       "compiler": {
         "type": "string",
         "description": "The compiler to use",
-        "enum": ["babel", "swc"],
-        "default": "babel",
+        "enum": ["swc", "babel"],
+        "default": "swc",
         "x-priority": "important"
       },
       "bundler": {

diff --git a/docs/generated/packages/web/generators/init.json b/docs/generated/packages/web/generators/init.json
@@ -37,11 +37,6 @@
         "type": "boolean",
         "default": false,
         "x-priority": "internal"
-      },
-      "skipBabelConfig": {
-        "description": "Do not generate a root babel.config.json (if babel is not needed).",
-        "type": "boolean",
-        "default": false
       }
     },
     "required": [],

diff --git a/e2e/web/src/web.test.ts b/e2e/web/src/web.test.ts
@@ -7,7 +7,6 @@ import {
   killPorts,
   newProject,
   readFile,
-  removeFile,
   rmDist,
   runCLI,
   runCLIAsync,
@@ -100,10 +99,10 @@ describe('Web Components Applications', () => {
     checkFilesExist(`dist/libs/${libName}/_should_keep.txt`);
   }, 120000);
 
-  it('should emit decorator metadata when it is enabled in tsconfig', async () => {
+  it('should emit decorator metadata when --compiler=babel and it is enabled in tsconfig', async () => {
     const appName = uniq('app');
     runCLI(
-      `generate @nx/web:app ${appName} --bundler=webpack --no-interactive`
+      `generate @nx/web:app ${appName} --bundler=webpack --compiler=babel --no-interactive`
     );
 
     updateFile(`apps/${appName}/src/app/app.element.ts`, (content) => {
@@ -155,6 +154,48 @@ describe('Web Components Applications', () => {
     );
   }, 120000);
 
+  it('should emit decorator metadata when using --compiler=swc', async () => {
+    const appName = uniq('app');
+    runCLI(
+      `generate @nx/web:app ${appName} --bundler=webpack --compiler=swc --no-interactive`
+    );
+
+    updateFile(`apps/${appName}/src/app/app.element.ts`, (content) => {
+      const newContent = `${content}
+        function enumerable(value: boolean) {
+          return function (
+            target: any,
+            propertyKey: string,
+            descriptor: PropertyDescriptor
+          ) {
+            descriptor.enumerable = value;
+          };
+        }
+        function sealed(target: any) {
+          return target;
+        }
+
+        @sealed
+        class Foo {
+          @enumerable(false) bar() {}
+        }
+      `;
+      return newContent;
+    });
+
+    updateFile(`apps/${appName}/src/app/app.element.ts`, (content) => {
+      const newContent = `${content}
+        // bust babel and nx cache
+      `;
+      return newContent;
+    });
+    runCLI(`build ${appName} --outputHashing none`);
+
+    expect(readFile(`dist/apps/${appName}/main.js`)).toMatch(
+      /Foo=__decorate\(\[sealed\],Foo\)/
+    );
+  }, 120000);
+
   it('should support custom webpackConfig option', async () => {
     const appName = uniq('app');
     runCLI(
@@ -257,7 +298,7 @@ describe('CLI - Environment Variables', () => {
       `;
 
     runCLI(
-      `generate @nx/web:app ${appName} --bundler=webpack --no-interactive`
+      `generate @nx/web:app ${appName} --bundler=webpack --no-interactive --compiler=babel`
     );
 
     const content = readFile(main);
@@ -282,7 +323,7 @@ describe('CLI - Environment Variables', () => {
     const newCode2 = `const envVars = [process.env.NODE_ENV, process.env.NX_BUILD, process.env.NX_API, process.env.NX_WS_BASE, process.env.NX_WS_ENV_LOCAL, process.env.NX_WS_LOCAL_ENV, process.env.NX_APP_BASE, process.env.NX_APP_ENV_LOCAL, process.env.NX_APP_LOCAL_ENV, process.env.NX_SHARED_ENV];`;
 
     runCLI(
-      `generate @nx/web:app ${appName2} --bundler=webpack --no-interactive`
+      `generate @nx/web:app ${appName2} --bundler=webpack --no-interactive --compiler=babel`
     );
 
     const content2 = readFile(main2);
@@ -401,16 +442,16 @@ describe('index.html interpolation', () => {
     const srcPath = `apps/${appName}/src`;
     const indexPath = `${srcPath}/index.html`;
     const indexContent = `<!DOCTYPE html>
-    <html lang="en">
+    <html lang='en'>
       <head>
-        <meta charset="utf-8" />
+        <meta charset='utf-8' />
         <title>BestReactApp</title>
-        <base href="/" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/x-icon" href="favicon.ico" />
+        <base href='/' />
+        <meta name='viewport' content='width=device-width, initial-scale=1' />
+        <link rel='icon' type='image/x-icon' href='favicon.ico' />
       </head>
       <body>
-        <div id="root"></div>
+        <div id='root'></div>
         <div>Nx Variable: %NX_VARIABLE%</div>
         <div>Some other variable: %SOME_OTHER_VARIABLE%</div>
         <div>Deploy Url: %DEPLOY_URL%</div>

diff --git a/packages/express/src/generators/application/schema.d.ts b/packages/express/src/generators/application/schema.d.ts
@@ -10,6 +10,8 @@ export interface Schema {
   tags?: string;
   linter: Linter;
   frontendProject?: string;
+  swcJest?: boolean;
+  /** @deprecated use `swcJest` instead */
   babelJest?: boolean;
   js: boolean;
   pascalCaseFiles: boolean;

diff --git a/packages/express/src/generators/application/schema.json b/packages/express/src/generators/application/schema.json
@@ -50,10 +50,16 @@
       "type": "string",
       "description": "Frontend project that needs to access this application. This sets up proxy configuration."
     },
+    "swcJest": {
+      "type": "boolean",
+      "description": "Use `@swc/jest` instead `ts-jest` for faster test compilation.",
+      "default": false
+    },
     "babelJest": {
       "type": "boolean",
       "description": "Use `babel` instead `ts-jest`.",
-      "default": false
+      "default": false,
+      "x-deprecated": "Use --swcJest instead for faster compilation"
     },
     "pascalCaseFiles": {
       "type": "boolean",

diff --git a/packages/jest/src/generators/jest-project/__snapshots__/jest-project.spec.ts.snap b/packages/jest/src/generators/jest-project/__snapshots__/jest-project.spec.ts.snap
@@ -8,7 +8,12 @@ export default {
   transform: {
     '^.+\\\\.[tj]sx?$': [
       '@swc/jest',
-      { jsc: { transform: { react: { runtime: 'automatic' } } } },
+      {
+        jsc: {
+          parser: { syntax: 'typescript', tsx: true },
+          transform: { react: { runtime: 'automatic' } },
+        },
+      },
     ],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],

diff --git a/packages/jest/src/generators/jest-project/jest-project.spec.ts b/packages/jest/src/generators/jest-project/jest-project.spec.ts
@@ -60,15 +60,6 @@ describe('jestProject', () => {
     expect(tree.read('libs/lib1/jest.config.ts', 'utf-8')).toMatchSnapshot();
   });
 
-  it('should generate files w/babel-jest', async () => {
-    await jestProjectGenerator(tree, {
-      ...defaultOptions,
-      project: 'lib1',
-      babelJest: true,
-    } as JestProjectSchema);
-    expect(tree.exists('babel.config.json')).toBeTruthy();
-  });
-
   it('should alter project configuration', async () => {
     await jestProjectGenerator(tree, {
       ...defaultOptions,

diff --git a/packages/jest/src/generators/jest-project/lib/create-files.ts b/packages/jest/src/generators/jest-project/lib/create-files.ts
@@ -21,7 +21,7 @@ export function createFiles(tree: Tree, options: NormalizedJestProjectSchema) {
     transformer = '@swc/jest';
     if (options.supportTsx) {
       transformerOptions =
-        "{ jsc: { transform: { react: { runtime: 'automatic' } } } }";
+        "{ jsc: { parser: { syntax: 'typescript', tsx: true }, transform: { react: { runtime: 'automatic' } } } }";
     }
   } else {
     transformer = 'ts-jest';
@@ -48,15 +48,6 @@ export function createFiles(tree: Tree, options: NormalizedJestProjectSchema) {
     tree.delete(join(projectConfig.root, './src/test-setup.ts'));
   }
 
-  if (options.babelJest && !tree.exists('babel.config.json')) {
-    tree.write(
-      'babel.config.json',
-      JSON.stringify({
-        babelrcRoots: ['*'],
-      })
-    );
-  }
-
   if (options.js) {
     tree.rename(
       join(projectConfig.root, 'jest.config.ts'),

diff --git a/packages/js/src/generators/library/library.ts b/packages/js/src/generators/library/library.ts
@@ -91,10 +91,6 @@ export async function projectGenerator(
     });
     tasks.push(viteTask);
   }
-  if (options.bundler === 'rollup') {
-    ensureBabelRootConfigExists(tree);
-  }
-
   if (options.linter !== 'none') {
     const lintCallback = await addLint(tree, options);
     tasks.push(lintCallback);
@@ -583,14 +579,6 @@ function getBuildExecutor(bundler: Bundler) {
   }
 }
 
-function ensureBabelRootConfigExists(tree: Tree) {
-  if (tree.exists('babel.config.json')) return;
-
-  writeJson(tree, 'babel.config.json', {
-    babelrcRoots: ['*'],
-  });
-}
-
 function getOutputPath(options: NormalizedSchema, destinationDir?: string) {
   const parts = ['dist'];
   if (destinationDir) {

diff --git a/packages/js/src/utils/add-babel-inputs.ts b/packages/js/src/utils/add-babel-inputs.ts
@@ -1,12 +1,13 @@
 import {
-  formatFiles,
   joinPathFragments,
   readNxJson,
   Tree,
   updateNxJson,
   writeJson,
 } from '@nx/devkit';
 
+/** @deprecated Do not use this function as the root babel.config.json file is no longer needed */
+// TODO(jack): Remove This in Nx 17 once we don't need to support Nx 15 anymore. Currently this function is used in v15 migrations.
 export function addBabelInputs(tree: Tree) {
   const nxJson = readNxJson(tree);
   let globalBabelFile = ['babel.config.js', 'babel.config.json'].find((file) =>

diff --git a/packages/next/src/generators/init/init.ts b/packages/next/src/generators/init/init.ts
@@ -65,7 +65,6 @@ export async function nextInitGenerator(host: Tree, schema: InitSchema) {
   const reactTask = await reactInitGenerator(host, {
     ...schema,
     skipFormat: true,
-    skipBabelConfig: true,
   });
   tasks.push(reactTask);