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

…by default
nrwl · May 30, 2023 · e776a20 · e776a20
1 parent 911f753
commit e776a20
Show file tree

Hide file tree

Showing 32 changed files with 197 additions and 161 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"
@@ -155,8 +155,8 @@
       "compiler": {
         "type": "string",
         "description": "The compiler to use.",
-        "enum": ["babel", "swc"],
-        "default": "babel"
+        "enum": ["swc", "babel"],
+        "default": "swc"
       },
       "skipPackageJson": {
         "description": "Do not add dependencies to `package.json`.",

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,
@@ -132,7 +132,7 @@
         "type": "string",
         "description": "The compiler to use",
         "enum": ["babel", "swc"],
-        "default": "babel"
+        "default": "swc"
       },
       "remotes": {
         "type": "array",

diff --git a/docs/generated/packages/react/generators/library.json b/docs/generated/packages/react/generators/library.json
@@ -169,8 +169,8 @@
       },
       "compiler": {
         "type": "string",
-        "enum": ["babel", "swc"],
-        "default": "babel",
+        "enum": ["swc", "babel"],
+        "default": "swc",
         "description": "Which compiler to use. Only applies to `bundler: 'rollup'`."
       },
       "skipPackageJson": {

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,
@@ -137,7 +137,7 @@
         "type": "string",
         "description": "The compiler to use.",
         "enum": ["babel", "swc"],
-        "default": "babel"
+        "default": "swc"
       },
       "host": {
         "type": "string",

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/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/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';

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'),