feat(react): add rspack experimental support (#16252)

docs/generated/cli/create-nx-workspace.md

@@ -35,7 +35,7 @@ The name of the application when a preset with pregenerated app is selected
 
 Type: `string`
 
-Choices: [webpack, vite]
+Choices: [webpack, vite, rspack]
 
 Bundler to be used to build the application
 

docs/generated/packages/nx/documents/create-nx-workspace.md

@@ -35,7 +35,7 @@ The name of the application when a preset with pregenerated app is selected
 
 Type: `string`
 
-Choices: [webpack, vite]
+Choices: [webpack, vite, rspack]
 
 Bundler to be used to build the application
 

docs/generated/packages/react/generators/application.json

@@ -174,7 +174,7 @@
       "bundler": {
         "description": "The bundler to use.",
         "type": "string",
-        "enum": ["vite", "webpack"],
+        "enum": ["vite", "webpack", "rspack"],
         "x-prompt": "Which bundler do you want to use to build the application?",
         "default": "webpack",
         "x-priority": "important"

docs/generated/packages/workspace/generators/preset.json

@@ -73,7 +73,7 @@
       "bundler": {
         "description": "The bundler to use for building the application.",
         "type": "string",
-        "enum": ["webpack", "vite"],
+        "enum": ["webpack", "vite", "rspack"],
         "default": "vite"
       },
       "docker": {

packages/create-nx-workspace/bin/create-nx-workspace.ts

@@ -712,6 +712,10 @@ async function determineBundler(
       name: 'webpack',
       message: 'Webpack [ https://webpack.js.org/ ]',
     },
+    {
+      name: 'rspack',
+      message: 'Rspack  [ https://www.rspack.dev/ ]',
+    },
   ];
 
   if (!parsedArgs.bundler) {
@@ -745,5 +749,5 @@ async function determineBundler(
     process.exit(1);
   }
 
-  return Promise.resolve(parsedArgs.bundler);
+  return parsedArgs.bundler;
 }

packages/create-nx-workspace/bin/types/bundler-list.ts

@@ -1,4 +1,4 @@
 // Bundler to be used to build the application
-export const bundlerList = ['webpack', 'vite'];
+export const bundlerList = ['webpack', 'vite', 'rspack'];
 
 export type Bundler = typeof bundlerList[number];

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

@@ -6,7 +6,7 @@ import { NormalizedSchema, Schema } from './schema';
 import { createApplicationFiles } from './lib/create-application-files';
 import { updateSpecConfig } from './lib/update-jest-config';
 import { normalizeOptions } from './lib/normalize-options';
-import { addProject } from './lib/add-project';
+import { addProject, maybeJs } from './lib/add-project';
 import { addCypress } from './lib/add-cypress';
 import { addJest } from './lib/add-jest';
 import { addRouting } from './lib/add-routing';
@@ -27,7 +27,11 @@ import {
 import reactInitGenerator from '../init/init';
 import { Linter, lintProjectGenerator } from '@nx/linter';
 import { mapLintPattern } from '@nx/linter/src/generators/lint-project/lint-project';
-import { nxVersion, swcLoaderVersion } from '../../utils/versions';
+import {
+  nxRspackVersion,
+  nxVersion,
+  swcLoaderVersion,
+} from '../../utils/versions';
 import { installCommonDependencies } from './lib/install-common-dependencies';
 import { extractTsConfigBase } from '../../utils/create-ts-config';
 import { addSwcDependencies } from '@nx/js/src/utils/swc/add-swc-dependencies';
@@ -135,6 +139,23 @@ export async function applicationGenerator(
       skipFormat: true,
     });
     tasks.push(webpackInitTask);
+  } else if (options.bundler === 'rspack') {
+    const { configurationGenerator } = ensurePackage(
+      '@nrwl/rspack',
+      nxRspackVersion
+    );
+    const rspackTask = await configurationGenerator(host, {
+      project: options.projectName,
+      main: joinPathFragments(
+        options.appProjectRoot,
+        maybeJs(options, `src/main.tsx`)
+      ),
+      tsConfig: joinPathFragments(options.appProjectRoot, 'tsconfig.app.json'),
+      target: 'web',
+      newProject: true,
+      uiFramework: 'react',
+    });
+    tasks.push(rspackTask);
   }
 
   if (options.bundler !== 'vite' && options.unitTestRunner === 'vitest') {

packages/react/src/generators/application/files/base-rspack/src/app/__fileName__.spec.tsx__tmpl__

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+<% if (routing) { %>
+import { BrowserRouter } from 'react-router-dom';
+<% } %>
+
+import App from './<%= fileName %>';
+
+describe('App', () => {
+  <%- appTests %>
+});

packages/react/src/generators/application/files/base-rspack/src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title><%= className %></title>
+    <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>
+  </body>
+</html>

packages/react/src/generators/application/files/base-rspack/src/main.tsx__tmpl__

@@ -0,0 +1,10 @@
+<% if (strict) { %>import { StrictMode } from 'react';<% } %>
+import * as ReactDOM from 'react-dom/client';
+<% if (routing) { %>import { BrowserRouter } from 'react-router-dom';<% } %>
+
+import App from './app/<%= fileName %>';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+<% if (strict) { %><StrictMode><% } %><% if (routing) { %><BrowserRouter><% } %><App /><% if (routing) { %></BrowserRouter><% } %><% if (strict) { %></StrictMode><% } %>
+);

packages/react/src/generators/application/files/base-rspack/tsconfig.app.json__tmpl__

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "<%= offsetFromRoot %>dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    <% if (style === 'styled-jsx') { %>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<% } %>
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": ["jest.config.ts","src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

packages/react/src/generators/application/lib/add-cypress.ts

@@ -22,7 +22,7 @@ export async function addCypress(host: Tree, options: NormalizedSchema) {
     name: options.e2eProjectName,
     directory: options.directory,
     project: options.projectName,
-    bundler: options.bundler,
+    bundler: options.bundler === 'rspack' ? 'webpack' : options.bundler,
     skipFormat: true,
   });
 }

packages/react/src/generators/application/lib/add-project.ts

@@ -27,7 +27,7 @@ export function addProject(host, options: NormalizedSchema) {
   });
 }
 
-function maybeJs(options: NormalizedSchema, path: string): string {
+export function maybeJs(options: NormalizedSchema, path: string): string {
   return options.js && (path.endsWith('.ts') || path.endsWith('.tsx'))
     ? path.replace(/\.tsx?$/, '.js')
     : path;

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

@@ -34,17 +34,16 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
     inSourceVitestTests: getInSourceVitestTestsTemplate(appTests),
   };
 
-  generateFiles(
-    host,
-    join(
-      __dirname,
-      options.bundler === 'vite'
-        ? '../files/base-vite'
-        : '../files/base-webpack'
-    ),
-    options.appProjectRoot,
-    templateVariables
-  );
+  let fileDirectory: string;
+  if (options.bundler === 'vite') {
+    fileDirectory = join(__dirname, '../files/base-vite');
+  } else if (options.bundler === 'webpack') {
+    fileDirectory = join(__dirname, '../files/base-webpack');
+  } else if (options.bundler === 'rspack') {
+    fileDirectory = join(__dirname, '../files/base-rspack');
+  }
+
+  generateFiles(host, fileDirectory, options.appProjectRoot, templateVariables);
 
   if (
     options.unitTestRunner === 'none' ||

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

@@ -28,7 +28,7 @@ export interface Schema {
   devServerPort?: number;
   skipPackageJson?: boolean;
   rootProject?: boolean;
-  bundler?: 'webpack' | 'vite';
+  bundler?: 'webpack' | 'vite' | 'rspack';
   minimal?: boolean;
 }
 

packages/react/src/generators/application/schema.json

@@ -180,7 +180,7 @@
     "bundler": {
       "description": "The bundler to use.",
       "type": "string",
-      "enum": ["vite", "webpack"],
+      "enum": ["vite", "webpack", "rspack"],
       "x-prompt": "Which bundler do you want to use to build the application?",
       "default": "webpack",
       "x-priority": "important"

packages/react/src/utils/versions.ts

@@ -1,5 +1,8 @@
 export const nxVersion = require('../../package.json').version;
 
+// Always pull the latest version until we merge rspack plugin into the repo.
+export const nxRspackVersion = '*';
+
 export const reactVersion = '18.2.0';
 export const reactDomVersion = '18.2.0';
 export const reactIsVersion = '18.2.0';

packages/workspace/src/generators/preset/schema.d.ts

@@ -10,7 +10,7 @@ export interface Schema {
   standaloneConfig?: boolean;
   framework?: string;
   packageManager?: PackageManager;
-  bundler?: 'vite' | 'webpack';
+  bundler?: 'vite' | 'webpack' | 'rspack';
   docker?: boolean;
   routing?: boolean;
   standaloneApi?: boolean;

packages/workspace/src/generators/preset/schema.json

@@ -76,7 +76,7 @@
     "bundler": {
       "description": "The bundler to use for building the application.",
       "type": "string",
-      "enum": ["webpack", "vite"],
+      "enum": ["webpack", "vite", "rspack"],
       "default": "vite"
     },
     "docker": {