fix(web): generate .swcrc file with modern defaults when creating new webapps (#18749)

jaysoo · FrozenPandaz · commit 42e2141bba14 · 2023-08-22T20:26:18.000-04:00
(cherry picked from commit 750f485)
diff --git a/e2e/web/src/web.test.ts b/e2e/web/src/web.test.ts
@@ -75,7 +75,7 @@ describe('Web Components Applications', () => {
       customElements.define('app-root', AppElement);
     `
     );
-    runCLI(`build ${appName} --outputHashing none --compiler babel`);
+    runCLI(`build ${appName} --outputHashing none`);
     checkFilesExist(
       `dist/apps/${appName}/index.html`,
       `dist/apps/${appName}/runtime.js`,
diff --git a/packages/react/src/generators/application/application.spec.ts b/packages/react/src/generators/application/application.spec.ts
@@ -966,6 +966,17 @@ describe('app', () => {
         'swc-loader': expect.any(String),
       });
     });
+
+    it('should add .swcrc when --compiler=swc', async () => {
+      await applicationGenerator(appTree, {
+        ...schema,
+        compiler: 'swc',
+      });
+
+      expect(readJson(appTree, '/apps/my-app/.swcrc')).toEqual({
+        jsc: { target: 'es2016' },
+      });
+    });
   });
 
   describe('--root-project', () => {
diff --git a/packages/react/src/generators/application/lib/create-application-files.ts b/packages/react/src/generators/application/lib/create-application-files.ts
@@ -79,39 +79,34 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
             : undefined,
         ].filter(Boolean),
       });
-    } else if (
-      options.style === 'styled-components' ||
-      options.style === '@emotion/styled' ||
-      options.style === 'styled-jsx'
-    ) {
-      writeJson(
-        host,
-        `${options.appProjectRoot}/.swcrc`,
-
-        {
-          jsc: {
-            experimental: {
-              plugins: [
-                options.style === 'styled-components'
-                  ? [
-                      '@swc/plugin-styled-components',
-                      {
-                        displayName: true,
-                        ssr: true,
-                      },
-                    ]
-                  : undefined,
-                options.style === 'styled-jsx'
-                  ? ['@swc/plugin-styled-jsx', {}]
-                  : undefined,
-                options.style === '@emotion/styled'
-                  ? ['@swc/plugin-emotion', {}]
-                  : undefined,
-              ].filter(Boolean),
-            },
-          },
-        }
-      );
+    } else if (options.compiler === 'swc') {
+      const swcrc: any = {
+        jsc: {
+          target: 'es2016',
+        },
+      };
+      if (options.style === 'styled-components') {
+        swcrc.jsc.experimental = {
+          plugins: [
+            [
+              '@swc/plugin-styled-components',
+              {
+                displayName: true,
+                ssr: true,
+              },
+            ],
+          ],
+        };
+      } else if (options.style === '@emotion/styled') {
+        swcrc.jsc.experimental = {
+          plugins: [['@swc/plugin-emotion', {}]],
+        };
+      } else if (options.style === 'styled-jsx') {
+        swcrc.jsc.experimental = {
+          plugins: [['@swc/plugin-styled-jsx', {}]],
+        };
+      }
+      writeJson(host, `${options.appProjectRoot}/.swcrc`, swcrc);
     }
   } else if (options.bundler === 'rspack') {
     generateFiles(
diff --git a/packages/web/src/generators/application/application.spec.ts b/packages/web/src/generators/application/application.spec.ts
@@ -586,6 +586,9 @@ describe('app', () => {
         };
         "
       `);
+
+      expect(tree.exists('apps/my-app/.babelrc')).toBeTruthy();
+      expect(tree.exists('apps/my-app/.swcrc')).toBeFalsy();
     });
 
     it('should support swc compiler', async () => {
@@ -609,6 +612,9 @@ describe('app', () => {
         };
         "
       `);
+
+      expect(tree.exists('apps/my-app/.babelrc')).toBeFalsy();
+      expect(tree.exists('apps/my-app/.swcrc')).toBeTruthy();
     });
   });
 
diff --git a/packages/web/src/generators/application/application.ts b/packages/web/src/generators/application/application.ts
@@ -20,6 +20,7 @@ import {
   Tree,
   updateNxJson,
   updateProjectConfiguration,
+  writeJson,
 } from '@nx/devkit';
 import { swcCoreVersion } from '@nx/js/src/utils/versions';
 import type { Linter } from '@nx/linter';
@@ -312,12 +313,24 @@ export async function applicationGenerator(host: Tree, schema: Schema) {
   }
 
   if (options.compiler === 'swc') {
+    writeJson(host, joinPathFragments(options.appProjectRoot, '.swcrc'), {
+      jsc: {
+        parser: {
+          syntax: 'typescript',
+        },
+        target: 'es2016',
+      },
+    });
     const installTask = addDependenciesToPackageJson(
       host,
       {},
       { '@swc/core': swcCoreVersion, 'swc-loader': swcLoaderVersion }
     );
     tasks.push(installTask);
+  } else {
+    writeJson(host, joinPathFragments(options.appProjectRoot, '.babelrc'), {
+      presets: ['@nx/js/babel'],
+    });
   }
 
   setDefaults(host, options);
diff --git a/packages/web/src/generators/application/files/app-webpack/.babelrc__tmpl__ b/packages/web/src/generators/application/files/app-webpack/.babelrc__tmpl__

Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@ describe('Web Components Applications', () => {`
`75`	`75`	`customElements.define('app-root', AppElement);`
`76`	`76`	`
`77`	`77`	`);`
`78`		- runCLI(`build ${appName} --outputHashing none --compiler babel`);
	`78`	+ runCLI(`build ${appName} --outputHashing none`);
`79`	`79`	`checkFilesExist(`
`80`	`80`	`dist/apps/${appName}/index.html`,
`81`	`81`	`dist/apps/${appName}/runtime.js`,