feat(web): update Next.js, Web, and Node generators to not use Babel …

…by default Note: React still needs Babel by default if using styled-components or emotion. Will address it in a separate PR.
nrwl · May 29, 2023 · 0879035 · 0879035
1 parent f01cdca
commit 0879035
Show file tree

Hide file tree

Showing 33 changed files with 51 additions and 217 deletions.
diff --git a/docs/generated/packages/express/generators/application.json b/docs/generated/packages/express/generators/application.json
@@ -50,11 +50,6 @@
         "type": "string",
         "description": "Frontend project that needs to access this application. This sets up proxy configuration."
       },
-      "babelJest": {
-        "type": "boolean",
-        "description": "Use `babel` instead `ts-jest`.",
-        "default": false
-      },
       "pascalCaseFiles": {
         "type": "boolean",
         "description": "Use pascal case file names.",

diff --git a/docs/generated/packages/jest/generators/jest-project.json b/docs/generated/packages/jest/generators/jest-project.json
@@ -48,7 +48,7 @@
       },
       "compiler": {
         "type": "string",
-        "enum": ["tsc", "babel", "swc"],
+        "enum": ["tsc", "swc", "babel"],
         "description": "The compiler to use for source and tests.",
         "default": "tsc"
       },

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

diff --git a/docs/generated/packages/node/generators/library.json b/docs/generated/packages/node/generators/library.json
@@ -92,11 +92,6 @@
         "description": "The test environment to use if `unitTestRunner` is set to `jest`.",
         "default": "jsdom"
       },
-      "babelJest": {
-        "type": "boolean",
-        "description": "Use `babel` instead of `ts-jest`.",
-        "default": false
-      },
       "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"
@@ -155,7 +155,7 @@
       "compiler": {
         "type": "string",
         "description": "The compiler to use.",
-        "enum": ["babel", "swc"],
+        "enum": ["swc", "babel"],
         "default": "babel"
       },
       "skipPackageJson": {

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/library.json b/docs/generated/packages/react/generators/library.json
@@ -169,7 +169,7 @@
       },
       "compiler": {
         "type": "string",
-        "enum": ["babel", "swc"],
+        "enum": ["swc", "babel"],
         "default": "babel",
         "description": "Which compiler to use. Only applies to `bundler: 'rollup'`."
       },

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/packages/express/src/generators/application/schema.d.ts b/packages/express/src/generators/application/schema.d.ts
@@ -10,7 +10,6 @@ export interface Schema {
   tags?: string;
   linter: Linter;
   frontendProject?: string;
-  babelJest?: boolean;
   js: boolean;
   pascalCaseFiles: boolean;
   standaloneConfig?: boolean;

diff --git a/packages/express/src/generators/application/schema.json b/packages/express/src/generators/application/schema.json
@@ -50,11 +50,6 @@
       "type": "string",
       "description": "Frontend project that needs to access this application. This sets up proxy configuration."
     },
-    "babelJest": {
-      "type": "boolean",
-      "description": "Use `babel` instead `ts-jest`.",
-      "default": false
-    },
     "pascalCaseFiles": {
       "type": "boolean",
       "description": "Use pascal case file names.",

diff --git a/packages/jest/src/generators/jest-project/schema.json b/packages/jest/src/generators/jest-project/schema.json
@@ -47,7 +47,7 @@
     },
     "compiler": {
       "type": "string",
-      "enum": ["tsc", "babel", "swc"],
+      "enum": ["tsc", "swc", "babel"],
       "description": "The compiler to use for source and tests.",
       "default": "tsc"
     },

diff --git a/packages/next/src/generators/library/library.spec.ts b/packages/next/src/generators/library/library.spec.ts
@@ -13,67 +13,6 @@ describe('next library', () => {
   let mockedInstalledCypressVersion: jest.Mock<
     ReturnType<typeof installedCypressVersion>
   > = installedCypressVersion as never;
-  it('should use "@nx/next/babel" preset in babelrc', async () => {
-    const baseOptions: Schema = {
-      name: '',
-      linter: Linter.EsLint,
-      skipFormat: false,
-      skipTsConfig: false,
-      unitTestRunner: 'jest',
-      style: 'css',
-      component: true,
-    };
-
-    const appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
-
-    await libraryGenerator(appTree, {
-      ...baseOptions,
-      name: 'myLib',
-    });
-    await libraryGenerator(appTree, {
-      ...baseOptions,
-      name: 'myLib2',
-      style: '@emotion/styled',
-    });
-    await libraryGenerator(appTree, {
-      ...baseOptions,
-      name: 'myLib-styled-jsx',
-      style: 'styled-jsx',
-    });
-    await libraryGenerator(appTree, {
-      ...baseOptions,
-      name: 'myLib3',
-      directory: 'myDir',
-    });
-
-    expect(readJson(appTree, 'libs/my-lib/.babelrc')).toEqual({
-      presets: ['@nx/next/babel'],
-      plugins: [],
-    });
-    expect(readJson(appTree, 'libs/my-lib2/.babelrc')).toEqual({
-      presets: [
-        [
-          '@nx/next/babel',
-          {
-            'preset-react': {
-              runtime: 'automatic',
-              importSource: '@emotion/react',
-            },
-          },
-        ],
-      ],
-      plugins: ['@emotion/babel-plugin'],
-    });
-    expect(readJson(appTree, 'libs/my-lib-styled-jsx/.babelrc')).toEqual({
-      presets: ['@nx/next/babel'],
-      plugins: [],
-    });
-    expect(readJson(appTree, 'libs/my-dir/my-lib3/.babelrc')).toEqual({
-      presets: ['@nx/next/babel'],
-      plugins: [],
-    });
-  });
-
   it('should use @nx/next images.d.ts file', async () => {
     const baseOptions: Schema = {
       name: '',

diff --git a/packages/next/src/generators/library/library.ts b/packages/next/src/generators/library/library.ts
@@ -71,36 +71,6 @@ export async function libraryGenerator(host: Tree, rawOptions: Schema) {
   );
   addTsConfigPath(host, `${options.importPath}/server`, [serverEntryPath]);
 
-  updateJson(
-    host,
-    joinPathFragments(options.projectRoot, '.babelrc'),
-    (json) => {
-      if (options.style === '@emotion/styled') {
-        json.presets = [
-          [
-            '@nx/next/babel',
-            {
-              'preset-react': {
-                runtime: 'automatic',
-                importSource: '@emotion/react',
-              },
-            },
-          ],
-        ];
-      } else if (options.style === 'styled-jsx') {
-        // next.js doesn't require the `styled-jsx/babel' plugin as it is already
-        // built-into the `next/babel` preset
-        json.presets = ['@nx/next/babel'];
-        json.plugins = (json.plugins || []).filter(
-          (x) => x !== 'styled-jsx/babel'
-        );
-      } else {
-        json.presets = ['@nx/next/babel'];
-      }
-      return json;
-    }
-  );
-
   updateJson(
     host,
     joinPathFragments(options.projectRoot, 'tsconfig.json'),

diff --git a/packages/node/src/generators/application/application.spec.ts b/packages/node/src/generators/application/application.spec.ts
@@ -343,31 +343,6 @@ describe('app', () => {
     });
   });
 
-  describe('--babelJest', () => {
-    it('should use babel for jest', async () => {
-      await applicationGenerator(tree, {
-        name: 'myNodeApp',
-        tags: 'one,two',
-        babelJest: true,
-      } as Schema);
-
-      expect(tree.read(`my-node-app/jest.config.ts`, 'utf-8'))
-        .toMatchInlineSnapshot(`
-        "/* eslint-disable */
-        export default {
-          displayName: 'my-node-app',
-          preset: '../jest.preset.js',
-          testEnvironment: 'node',
-          transform: {
-            '^.+\\\\.[tj]s$': 'babel-jest',
-          },
-          moduleFileExtensions: ['ts', 'js', 'html'],
-          coverageDirectory: '../coverage/my-node-app',
-        };
-        "
-      `);
-    });
-  });
   describe('--js flag', () => {
     it('should generate js files instead of ts files', async () => {
       await applicationGenerator(tree, {

diff --git a/packages/node/src/generators/application/schema.d.ts b/packages/node/src/generators/application/schema.d.ts
@@ -10,7 +10,6 @@ export interface Schema {
   linter?: Linter;
   tags?: string;
   frontendProject?: string;
-  babelJest?: boolean;
   js?: boolean;
   pascalCaseFiles?: boolean;
   setParserOptionsProject?: boolean;

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

diff --git a/packages/node/src/generators/library/library.spec.ts b/packages/node/src/generators/library/library.spec.ts
@@ -448,30 +448,6 @@ describe('lib', () => {
     });
   });
 
-  describe(`--babelJest`, () => {
-    it('should use babel for jest', async () => {
-      await libraryGenerator(tree, {
-        name: 'myLib',
-        babelJest: true,
-      } as Schema);
-
-      expect(tree.read(`libs/my-lib/jest.config.ts`, 'utf-8'))
-        .toMatchInlineSnapshot(`
-        "/* eslint-disable */
-        export default {
-          displayName: 'my-lib',
-          preset: '../../jest.preset.js',
-          testEnvironment: 'node',
-          transform: {
-            '^.+\\\\.[tj]s$': 'babel-jest',
-          },
-          moduleFileExtensions: ['ts', 'js', 'html'],
-          coverageDirectory: '../../coverage/libs/my-lib',
-        };
-        "
-      `);
-    });
-  });
   describe('--js flag', () => {
     it('should generate js files instead of ts files', async () => {
       await libraryGenerator(tree, {

diff --git a/packages/node/src/generators/library/library.ts b/packages/node/src/generators/library/library.ts
@@ -51,7 +51,6 @@ export async function libraryGenerator(tree: Tree, schema: Schema) {
   const libraryInstall = await jsLibraryGenerator(tree, {
     ...schema,
     bundler: schema.buildable ? 'tsc' : 'none',
-    includeBabelRc: schema.babelJest,
     importPath: options.importPath,
     testEnvironment: 'node',
     skipFormat: true,

diff --git a/packages/node/src/generators/library/schema.d.ts b/packages/node/src/generators/library/schema.d.ts
@@ -14,7 +14,6 @@ export interface Schema {
   importPath?: string;
   testEnvironment?: 'jsdom' | 'node';
   rootDir?: string;
-  babelJest?: boolean;
   js?: boolean;
   pascalCaseFiles?: boolean;
   strict?: boolean;

diff --git a/packages/node/src/generators/library/schema.json b/packages/node/src/generators/library/schema.json
@@ -92,11 +92,6 @@
       "description": "The test environment to use if `unitTestRunner` is set to `jest`.",
       "default": "jsdom"
     },
-    "babelJest": {
-      "type": "boolean",
-      "description": "Use `babel` instead of `ts-jest`.",
-      "default": false
-    },
     "pascalCaseFiles": {
       "type": "boolean",
       "description": "Use pascal case file names.",

diff --git a/packages/react/src/generators/application/application.spec.ts b/packages/react/src/generators/application/application.spec.ts
@@ -849,12 +849,12 @@ describe('app', () => {
     ).toBeUndefined();
   });
 
-  describe('--skipWorkspaceJson', () => {
+  describe('--skipNxJson', () => {
     it('should update workspace with defaults when --skipprojectsConfigurations=false', async () => {
       await applicationGenerator(appTree, {
         ...schema,
         style: 'styled-components',
-        skipWorkspaceJson: false,
+        skipNxJson: false,
       });
 
       const nxJson = readNxJson(appTree);

diff --git a/packages/react/src/generators/application/lib/set-defaults.ts b/packages/react/src/generators/application/lib/set-defaults.ts
@@ -2,7 +2,7 @@ import { readNxJson, Tree, updateNxJson } from '@nx/devkit';
 import { NormalizedSchema } from '../schema';
 
 export function setDefaults(host: Tree, options: NormalizedSchema) {
-  if (options.skipWorkspaceJson) {
+  if (options.skipNxJson) {
     return;
   }
 

diff --git a/packages/react/src/generators/application/schema.d.ts b/packages/react/src/generators/application/schema.d.ts
@@ -14,7 +14,7 @@ export interface Schema {
   pascalCaseFiles?: boolean;
   classComponent?: boolean;
   routing?: boolean;
-  skipWorkspaceJson?: boolean;
+  skipNxJson?: boolean;
   js?: boolean;
   globalCss?: boolean;
   strict?: boolean;