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

e2e/web/src/web.test.ts

@@ -77,7 +77,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`,

packages/react/src/generators/application/application.spec.ts

@@ -967,6 +967,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', () => {

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 (
+    } else if (options.compiler === 'swc') {
-      options.style === 'styled-components' ||
+      const swcrc: any = {
-      options.style === '@emotion/styled' ||
+        jsc: {
-      options.style === 'styled-jsx'
+          target: 'es2016',
-    ) {
+        },
-      writeJson(
+      };
-        host,
+      if (options.style === 'styled-components') {
-        `${options.appProjectRoot}/.swcrc`,
+        swcrc.jsc.experimental = {
-
+          plugins: [
-        {
+            [
-          jsc: {
+              '@swc/plugin-styled-components',
-            experimental: {
+              {
-              plugins: [
+                displayName: true,
-                options.style === 'styled-components'
+                ssr: true,
-                  ? [
+              },
-                      '@swc/plugin-styled-components',
+            ],
-                      {
+          ],
-                        displayName: true,
+        };
-                        ssr: true,
+      } else if (options.style === '@emotion/styled') {
-                      },
+        swcrc.jsc.experimental = {
-                    ]
+          plugins: [['@swc/plugin-emotion', {}]],
-                  : undefined,
+        };
-                options.style === 'styled-jsx'
+      } else if (options.style === 'styled-jsx') {
-                  ? ['@swc/plugin-styled-jsx', {}]
+        swcrc.jsc.experimental = {
-                  : undefined,
+          plugins: [['@swc/plugin-styled-jsx', {}]],
-                options.style === '@emotion/styled'
+        };
-                  ? ['@swc/plugin-emotion', {}]
+      }
-                  : undefined,
+      writeJson(host, `${options.appProjectRoot}/.swcrc`, swcrc);
-              ].filter(Boolean),
-            },
-          },
-        }
-      );
     }
   } else if (options.bundler === 'rspack') {
     generateFiles(

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();
     });
   });
 

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);

packages/web/src/generators/application/files/app-webpack/.babelrc__tmpl__

@@ -1,5 +0,0 @@
-{
-  "presets": [
-    "@nx/js/babel"
-  ]
-}