@nx/react 20.5.0-beta.3 → 20.5.0-canary.20250128-e0c49d3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.5.0-beta.3",
+  "version": "20.5.0-canary.20250128-e0c49d3",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Vitest, Playwright, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -38,11 +38,11 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "20.5.0-beta.3",
-    "@nx/js": "20.5.0-beta.3",
-    "@nx/eslint": "20.5.0-beta.3",
-    "@nx/web": "20.5.0-beta.3",
-    "@nx/module-federation": "20.5.0-beta.3",
+    "@nx/devkit": "20.5.0-canary.20250128-e0c49d3",
+    "@nx/js": "20.5.0-canary.20250128-e0c49d3",
+    "@nx/eslint": "20.5.0-canary.20250128-e0c49d3",
+    "@nx/web": "20.5.0-canary.20250128-e0c49d3",
+    "@nx/module-federation": "20.5.0-canary.20250128-e0c49d3",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

package/src/generators/application/application.js

@@ -89,11 +89,12 @@ async function applicationGeneratorInternal(tree, schema) {
         });
         tasks.push(twTask);
     }
-    const lintTask = await (0, add_linting_1.addLinting)(tree, options);
-    tasks.push(lintTask);
     if (options.bundler === 'vite') {
         await (0, add_vite_1.setupViteConfiguration)(tree, options, tasks);
     }
+    else if (options.bundler === 'rspack') {
+        await (0, add_rspack_1.setupRspackConfiguration)(tree, options, tasks);
+    }
     else if (options.bundler === 'rsbuild') {
         await (0, add_rsbuild_1.setupRsbuildConfiguration)(tree, options, tasks);
     }
@@ -104,6 +105,8 @@ async function applicationGeneratorInternal(tree, schema) {
         options.inSourceTests) {
         tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/${options.fileName}.spec.tsx`));
     }
+    const lintTask = await (0, add_linting_1.addLinting)(tree, options);
+    tasks.push(lintTask);
     const e2eTask = await (0, add_e2e_1.addE2e)(tree, options);
     tasks.push(e2eTask);
     if (options.unitTestRunner === 'jest') {

package/src/generators/application/files/base-rspack/rspack.config.js__tmpl__

@@ -5,7 +5,7 @@ const { join } = require('path');
 
 module.exports = {
   output: {
-    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
+    path: join(__dirname, '<%= offsetFromRoot %><%= rspackPluginOptions.outputPath %>'),
   },
   devServer: {
     port: 4200,

package/src/generators/application/files/base-webpack/webpack.config.js__tmpl__

@@ -5,7 +5,7 @@ const { join } = require('path');
 
 module.exports = {
   output: {
-    path: join(__dirname, '<%= webpackPluginOptions.outputPath %>'),
+    path: join(__dirname, '<%= offsetFromRoot %><%= webpackPluginOptions.outputPath %>'),
   },
   devServer: {
     port: 4200,

package/src/generators/application/lib/add-project.js

@@ -33,6 +33,11 @@ function addProject(host, options) {
             name: options.projectName,
             version: '0.0.1',
             private: true,
+            nx: options.parsedTags?.length
+                ? {
+                    tags: options.parsedTags,
+                }
+                : undefined,
         });
     }
     if (!options.isUsingTsSolutionConfig || options.alwaysGenerateProjectJson) {
@@ -40,15 +45,6 @@ function addProject(host, options) {
             ...project,
         });
     }
-    else if (options.parsedTags?.length ||
-        Object.keys(project.targets).length) {
-        const updatedProject = {
-            root: options.appProjectRoot,
-            targets: project.targets,
-            tags: options.parsedTags?.length ? options.parsedTags : undefined,
-        };
-        (0, devkit_1.updateProjectConfiguration)(host, options.projectName, updatedProject);
-    }
 }
 function createRspackBuildTarget(options) {
     return {
@@ -56,11 +52,7 @@ function createRspackBuildTarget(options) {
         outputs: ['{options.outputPath}'],
         defaultConfiguration: 'production',
         options: {
-            outputPath: options.isUsingTsSolutionConfig
-                ? (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'dist')
-                : (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot !== '.'
-                    ? options.appProjectRoot
-                    : options.projectName),
+            outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot),
             index: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/index.html'),
             baseHref: '/',
             main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/main.tsx`)),
@@ -119,11 +111,9 @@ function createBuildTarget(options) {
         defaultConfiguration: 'production',
         options: {
             compiler: options.compiler ?? 'babel',
-            outputPath: options.isUsingTsSolutionConfig
-                ? (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'dist')
-                : (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot !== '.'
-                    ? options.appProjectRoot
-                    : options.projectName),
+            outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot != '.'
+                ? options.appProjectRoot
+                : options.projectName),
             index: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/index.html'),
             baseHref: '/',
             main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/main.tsx`)),

package/src/generators/application/lib/bundlers/add-rspack.d.ts

@@ -1,4 +1,5 @@
 import { type Tree } from '@nx/devkit';
 import { NormalizedSchema, Schema } from '../../schema';
 export declare function initRspack(tree: Tree, options: NormalizedSchema<Schema>, tasks: any[]): Promise<void>;
+export declare function setupRspackConfiguration(tree: Tree, options: NormalizedSchema<Schema>, tasks: any[]): Promise<void>;
 export declare function handleStyledJsxForRspack(tasks: any[], tree: Tree, options: NormalizedSchema<Schema>): void;

package/src/generators/application/lib/bundlers/add-rspack.js

@@ -1,18 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initRspack = initRspack;
+exports.setupRspackConfiguration = setupRspackConfiguration;
 exports.handleStyledJsxForRspack = handleStyledJsxForRspack;
 const devkit_1 = require("@nx/devkit");
 const pc = require("picocolors");
 const versions_1 = require("../../../../utils/versions");
+const maybe_js_1 = require("../../../../utils/maybe-js");
 async function initRspack(tree, options, tasks) {
     const { rspackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
     const rspackInitTask = await rspackInitGenerator(tree, {
         ...options,
+        addPlugin: false,
         skipFormat: true,
     });
     tasks.push(rspackInitTask);
 }
+async function setupRspackConfiguration(tree, options, tasks) {
+    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
+    const rspackTask = await configurationGenerator(tree, {
+        project: options.projectName,
+        main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({
+            js: options.js,
+            useJsx: true,
+        }, `src/main.tsx`)),
+        tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
+        target: 'web',
+        newProject: true,
+        framework: 'react',
+    });
+    tasks.push(rspackTask);
+}
 function handleStyledJsxForRspack(tasks, tree, options) {
     devkit_1.logger.warn(`${pc.bold('styled-jsx')} is not supported by ${pc.bold('Rspack')}. We've added ${pc.bold('babel-loader')} to your project, but using babel will slow down your build.`);
     tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, { 'babel-loader': versions_1.babelLoaderVersion }));

package/src/generators/application/lib/create-application-files.js

@@ -57,7 +57,7 @@ async function createApplicationFiles(host, options) {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-webpack'), options.appProjectRoot, {
             ...templateVariables,
             webpackPluginOptions: (0, has_webpack_plugin_1.hasWebpackPlugin)(host)
-                ? createNxWebpackPluginOptions(options, templateVariables.offsetFromRoot)
+                ? createNxWebpackPluginOptions(options)
                 : null,
         });
         if (options.compiler === 'babel') {
@@ -120,7 +120,7 @@ async function createApplicationFiles(host, options) {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-rspack'), options.appProjectRoot, {
             ...templateVariables,
             rspackPluginOptions: (0, has_rspack_plugin_1.hasRspackPlugin)(host)
-                ? createNxRspackPluginOptions(options, templateVariables.offsetFromRoot)
+                ? createNxRspackPluginOptions(options)
                 : null,
         });
     }
@@ -147,15 +147,13 @@ async function createApplicationFiles(host, options) {
     }
     (0, create_ts_config_1.createTsConfig)(host, options.appProjectRoot, 'app', options, relativePathToRootTsConfig);
 }
-function createNxWebpackPluginOptions(options, rootOffset) {
+function createNxWebpackPluginOptions(options) {
     return {
         target: 'web',
         compiler: options.compiler ?? 'babel',
-        outputPath: options.isUsingTsSolutionConfig
-            ? 'dist'
-            : (0, devkit_1.joinPathFragments)(rootOffset, 'dist', options.appProjectRoot != '.'
-                ? options.appProjectRoot
-                : options.projectName),
+        outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot != '.'
+            ? options.appProjectRoot
+            : options.projectName),
         index: './src/index.html',
         baseHref: '/',
         main: (0, maybe_js_1.maybeJs)({
@@ -171,14 +169,12 @@ function createNxWebpackPluginOptions(options, rootOffset) {
             ],
     };
 }
-function createNxRspackPluginOptions(options, rootOffset) {
+function createNxRspackPluginOptions(options) {
     return {
         target: 'web',
-        outputPath: options.isUsingTsSolutionConfig
-            ? 'dist'
-            : (0, devkit_1.joinPathFragments)(rootOffset, 'dist', options.appProjectRoot != '.'
-                ? options.appProjectRoot
-                : options.projectName),
+        outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot != '.'
+            ? options.appProjectRoot
+            : options.projectName),
         index: './src/index.html',
         baseHref: '/',
         main: (0, maybe_js_1.maybeJs)({

package/src/generators/application/lib/get-app-tests.js

@@ -11,9 +11,9 @@ function getAppTests(options) {
 
   it('should have a greeting as the title', () => {
     ${options.routing
-        ? 'const { getAllByText } = render(<BrowserRouter><App /></BrowserRouter>);'
-        : 'const { getAllByText } = render(<App />);'}
-    expect(getAllByText(new RegExp('Welcome ${options.projectName}', 'gi')).length > 0).toBeTruthy();
+        ? 'const { getByText } = render(<BrowserRouter><App /></BrowserRouter>);'
+        : 'const { getByText } = render(<App />);'}
+    expect(getByText(new RegExp('Welcome ${options.projectName}', 'gi'))).toBeTruthy();
   });
 `;
 }