feat(rspack): Update configuration generator to support NxWebpackAppP…

…lugin

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

@@ -165,6 +165,17 @@ export async function applicationGeneratorInternal(
       );
       tasks.push(ensureDependencies(host, { uiFramework: 'react' }));
     }
+  } else if (options.bundler === 'rspack') {
+    const { rspackInitGenerator } = ensurePackage(
+      '@nx/rspack',
+      nxRspackVersion
+    );
+    const rspackInitTask = await rspackInitGenerator(host, {
+      ...options,
+      addPlugin: false,
+      skipFormat: true,
+    });
+    tasks.push(rspackInitTask);
   }
 
   if (!options.rootProject) {
@@ -227,28 +238,28 @@ export async function applicationGeneratorInternal(
       false
     );
   } else if (options.bundler === 'rspack') {
-    const { configurationGenerator } = ensurePackage(
-      '@nx/rspack',
-      nxRspackVersion
-    );
-    const rspackTask = await configurationGenerator(host, {
-      project: options.projectName,
-      main: joinPathFragments(
-        options.appProjectRoot,
-        maybeJs(
-          {
-            js: options.js,
-            useJsx: true,
-          },
-          `src/main.tsx`
-        )
-      ),
-      tsConfig: joinPathFragments(options.appProjectRoot, 'tsconfig.app.json'),
-      target: 'web',
-      newProject: true,
-      framework: 'react',
-    });
-    tasks.push(rspackTask);
+    // const { configurationGenerator } = ensurePackage(
+    //   '@nx/rspack',
+    //   nxRspackVersion
+    // );
+    // const rspackTask = await configurationGenerator(host, {
+    //   project: options.projectName,
+    //   main: joinPathFragments(
+    //     options.appProjectRoot,
+    //     maybeJs(
+    //       {
+    //         js: options.js,
+    //         useJsx: true,
+    //       },
+    //       `src/main.tsx`
+    //     )
+    //   ),
+    //   tsConfig: joinPathFragments(options.appProjectRoot, 'tsconfig.app.json'),
+    //   target: 'web',
+    //   newProject: true,
+    //   framework: 'react',
+    // });
+    // tasks.push(rspackTask);
     addProjectRootToRspackPluginExcludesIfExists(host, options.appProjectRoot);
   }
 

packages/react/src/generators/application/files/base-rspack/rspack.config.js__tmpl__

@@ -0,0 +1,53 @@
+<%_ if (rspackPluginOptions) { _%>
+const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
+const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
+const { join } = require('path');
+
+module.exports = {
+  output: {
+    path: join(__dirname, '<%= offsetFromRoot %><%= rspackPluginOptions.outputPath %>'),
+  },
+  devServer: {
+    port: 4200,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+    },
+  },
+  plugins: [
+    new NxAppRspackPlugin({
+      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+      main: '<%= rspackPluginOptions.main %>',
+      index: '<%= rspackPluginOptions.index %>',
+      baseHref: '<%= rspackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactRspackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+  ],
+};
+<%_ } else { _%>
+const { composePlugins, withNx, withReact } = require('@nx/rspack');
+
+// Nx plugins for rspack.
+module.exports = composePlugins(
+  withNx(),
+  withReact({
+    // Uncomment this line if you don't want to use SVGR
+    // See: https://react-svgr.com/
+    // svgr: false
+  }),
+  (config) => {
+    // Update the rspack config as needed here.
+    // e.g. `config.plugins.push(new MyPlugin())`
+    return config;
+  }
+);
+<%_ } _%>

packages/react/src/generators/application/lib/create-application-files.ts

@@ -21,6 +21,7 @@ import {
   getNxCloudAppOnBoardingUrl,
   createNxCloudOnboardingURLForWelcomeApp,
 } from 'nx/src/nx-cloud/utilities/onboarding';
+import { hasRspackPlugin } from '../../../utils/has-rspack-plugin';
 
 export async function createApplicationFiles(
   host: Tree,
@@ -145,7 +146,12 @@ export async function createApplicationFiles(
       host,
       join(__dirname, '../files/base-rspack'),
       options.appProjectRoot,
-      templateVariables
+      {
+        ...templateVariables,
+        rspackPluginOptions: hasRspackPlugin(host)
+          ? createNxRspackPluginOptions(options)
+          : null,
+      }
     );
   }
 
@@ -226,3 +232,36 @@ function createNxWebpackPluginOptions(
           ],
   };
 }
+
+function createNxRspackPluginOptions(
+  options: NormalizedSchema
+): WithNxOptions & WithReactOptions {
+  return {
+    target: 'web',
+    outputPath: joinPathFragments(
+      'dist',
+      options.appProjectRoot != '.'
+        ? options.appProjectRoot
+        : options.projectName
+    ),
+    index: './src/index.html',
+    baseHref: '/',
+    main: maybeJs(
+      {
+        js: options.js,
+        useJsx: true,
+      },
+      `./src/main.tsx`
+    ),
+    tsConfig: './tsconfig.app.json',
+    assets: ['./src/favicon.ico', './src/assets'],
+    styles:
+      options.styledModule || !options.hasStyles
+        ? []
+        : [
+            `./src/styles.${
+              options.style !== 'tailwind' ? options.style : 'css'
+            }`,
+          ],
+  };
+}

packages/react/src/utils/has-rspack-plugin.ts

@@ -0,0 +1,10 @@
+import { readNxJson, Tree } from '@nx/devkit';
+
+export function hasRspackPlugin(tree: Tree) {
+  const nxJson = readNxJson(tree);
+  return !!nxJson.plugins?.some((p) =>
+    typeof p === 'string'
+      ? p === '@nx/rspack/plugin'
+      : p.plugin === '@nx/rspack/plugin'
+  );
+}