@nx/react 21.0.0-canary.20250206-8bd0bcd → 21.0.0-canary.20250418-8619c1d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "21.0.0-canary.20250206-8bd0bcd",
+  "version": "21.0.0-canary.20250418-8619c1d",
   "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": "21.0.0-canary.20250206-8bd0bcd",
-    "@nx/js": "21.0.0-canary.20250206-8bd0bcd",
-    "@nx/eslint": "21.0.0-canary.20250206-8bd0bcd",
-    "@nx/web": "21.0.0-canary.20250206-8bd0bcd",
-    "@nx/module-federation": "21.0.0-canary.20250206-8bd0bcd",
+    "@nx/devkit": "21.0.0-canary.20250418-8619c1d",
+    "@nx/js": "21.0.0-canary.20250418-8619c1d",
+    "@nx/eslint": "21.0.0-canary.20250418-8619c1d",
+    "@nx/web": "21.0.0-canary.20250418-8619c1d",
+    "@nx/module-federation": "21.0.0-canary.20250418-8619c1d",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.js

@@ -57,7 +57,9 @@ function applyReactConfig(options, config = {}) {
     };
 }
 function addHotReload(config) {
-    if (config.mode === 'development' && config['devServer']?.hot) {
+    if (config.mode === 'development' &&
+        typeof config['devServer'] === 'object' &&
+        config['devServer']?.hot) {
         // add `react-refresh/babel` to babel loader plugin
         const babelLoader = config.module.rules.find((rule) => rule &&
             typeof rule !== 'string' &&

package/router-plugin.d.ts

@@ -0,0 +1 @@
+export { createNodesV2, ReactRouterPluginOptions, } from './src/plugins/router-plugin';

package/router-plugin.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNodesV2 = void 0;
+var router_plugin_1 = require("./src/plugins/router-plugin");
+Object.defineProperty(exports, "createNodesV2", { enumerable: true, get: function () { return router_plugin_1.createNodesV2; } });

package/src/generators/application/application.js

@@ -26,9 +26,11 @@ const add_rspack_1 = require("./lib/bundlers/add-rspack");
 const add_rsbuild_1 = require("./lib/bundlers/add-rsbuild");
 const add_vite_1 = require("./lib/bundlers/add-vite");
 const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
+const prompt_1 = require("@nx/devkit/src/generators/prompt");
 async function applicationGenerator(tree, schema) {
     return await applicationGeneratorInternal(tree, {
         addPlugin: false,
+        useProjectJson: true,
         ...schema,
     });
 }
@@ -44,11 +46,26 @@ async function applicationGeneratorInternal(tree, schema) {
     });
     tasks.push(jsInitTask);
     const options = await (0, normalize_options_1.normalizeOptions)(tree, schema);
-    // If we are using the new TS solution
-    // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
-    if (options.isUsingTsSolutionConfig) {
-        (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
-    }
+    options.useReactRouter =
+        options.routing && options.bundler === 'vite'
+            ? options.useReactRouter ??
+                (await (0, prompt_1.promptWhenInteractive)({
+                    name: 'response',
+                    message: 'Would you like to use react-router for server-side rendering?',
+                    type: 'autocomplete',
+                    choices: [
+                        {
+                            name: 'Yes',
+                            message: 'I want to use react-router   [ https://reactrouter.com/start/framework/routing   ]',
+                        },
+                        {
+                            name: 'No',
+                            message: 'I do not want to use react-router for server-side rendering',
+                        },
+                    ],
+                    initial: 0,
+                }, { response: 'No' }).then((r) => r.response === 'Yes'))
+            : false;
     (0, show_possible_warnings_1.showPossibleWarnings)(tree, options);
     const initTask = await (0, init_1.default)(tree, {
         ...options,
@@ -83,18 +100,22 @@ async function applicationGeneratorInternal(tree, schema) {
     }
     await (0, create_application_files_1.createApplicationFiles)(tree, options);
     (0, add_project_1.addProject)(tree, options);
+    // If we are using the new TS solution
+    // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
+    if (options.isUsingTsSolutionConfig) {
+        await (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
+    }
     if (options.style === 'tailwind') {
         const twTask = await (0, setup_tailwind_1.setupTailwindGenerator)(tree, {
             project: options.projectName,
         });
         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);
     }
@@ -105,8 +126,6 @@ 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') {
@@ -115,23 +134,41 @@ async function applicationGeneratorInternal(tree, schema) {
     }
     // Handle tsconfig.spec.json for jest or vitest
     (0, update_jest_config_1.updateSpecConfig)(tree, options);
-    const stylePreprocessorTask = await (0, install_common_dependencies_1.installCommonDependencies)(tree, options);
-    tasks.push(stylePreprocessorTask);
+    const commonDependencyTask = await (0, install_common_dependencies_1.installCommonDependencies)(tree, options);
+    tasks.push(commonDependencyTask);
     const styledTask = (0, add_styled_dependencies_1.addStyledModuleDependencies)(tree, options);
     tasks.push(styledTask);
-    const routingTask = (0, add_routing_1.addRouting)(tree, options);
-    tasks.push(routingTask);
+    if (!options.useReactRouter) {
+        const routingTask = (0, add_routing_1.addRouting)(tree, options);
+        tasks.push(routingTask);
+    }
     (0, set_defaults_1.setDefaults)(tree, options);
     if (options.bundler === 'rspack' && options.style === 'styled-jsx') {
         (0, add_rspack_1.handleStyledJsxForRspack)(tasks, tree, options);
     }
+    if (options.useReactRouter) {
+        (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.json'), (json) => {
+            const types = new Set(json.compilerOptions?.types || []);
+            types.add('@react-router/node');
+            return {
+                ...json,
+                compilerOptions: {
+                    ...json.compilerOptions,
+                    jsx: 'react-jsx',
+                    moduleResolution: 'bundler',
+                    types: Array.from(types),
+                },
+            };
+        });
+    }
+    // Only for the new TS solution
     (0, ts_solution_setup_1.updateTsconfigFiles)(tree, options.appProjectRoot, 'tsconfig.app.json', {
         jsx: 'react-jsx',
         module: 'esnext',
         moduleResolution: 'bundler',
     }, options.linter === 'eslint'
         ? ['eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
-        : undefined);
+        : undefined, options.useReactRouter ? 'app' : 'src');
     (0, sort_fields_1.sortPackageJsonFields)(tree, options.appProjectRoot);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);

package/src/generators/application/files/react-router-ssr/common/app/app-nav.tsx__tmpl__

@@ -0,0 +1,14 @@
+import { NavLink } from "react-router";
+
+export function AppNav() {
+  return (
+    <nav>
+      <NavLink to="/" end>
+        Home
+      </NavLink>
+      <NavLink to="/about" end>
+        About
+      </NavLink>
+    </nav>
+  );
+}

package/src/generators/application/files/react-router-ssr/common/app/entry.client.tsx__tmpl__

@@ -0,0 +1,18 @@
+/**
+ * By default, React Router will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx react-router reveal` ✨
+ * For more information, see https://reactrouter.com/explanation/special-files#entryclienttsx
+ */
+
+import { HydratedRouter } from 'react-router/dom';
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <HydratedRouter />
+    </StrictMode>
+  );
+});

package/src/generators/application/files/react-router-ssr/common/app/entry.server.tsx__tmpl__

@@ -0,0 +1,74 @@
+/**
+ * By default, React Router will handle generating the HTTP Response for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://reactrouter.com/explanation/special-files#entryservertsx
+ */
+
+import { PassThrough } from "node:stream";
+
+import type { AppLoadContext, EntryContext } from "react-router";
+import { createReadableStreamFromReadable } from "@react-router/node";
+import { ServerRouter } from "react-router";
+import { isbot } from "isbot";
+import type { RenderToPipeableStreamOptions } from "react-dom/server";
+import { renderToPipeableStream } from "react-dom/server";
+
+export const streamTimeout = 5_000;
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+  loadContext: AppLoadContext
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const userAgent = request.headers.get("user-agent");
+
+    // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+    // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+    const readyOption: keyof RenderToPipeableStreamOptions =
+      (userAgent && isbot(userAgent)) || routerContext.isSpaMode
+        ? "onAllReady"
+        : "onShellReady";
+
+    const { pipe, abort } = renderToPipeableStream(
+      <ServerRouter context={routerContext} url={request.url} />,
+      {
+        [readyOption]() {
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      }
+    );
+
+    // Abort the rendering stream after the `streamTimeout` so it has time to
+    // flush down the rejected boundaries
+    setTimeout(abort, streamTimeout + 1000);
+  });
+}

package/src/generators/application/files/react-router-ssr/common/app/root.tsx__tmpl__

@@ -0,0 +1,51 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  type MetaFunction, 
+  type LinksFunction
+} from "react-router";
+
+import { AppNav } from './app-nav'
+
+export const meta: MetaFunction = () => ([{
+  title: "New Nx React Router App",
+}]);
+
+export const links: LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous",
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+  },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <AppNav />
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+    return <Outlet />;
+}

package/src/generators/application/files/react-router-ssr/common/app/routes/about.tsx__tmpl__

@@ -0,0 +1,7 @@
+export default function AboutComponent() {
+  return (
+    <div>
+      <h1>About!!!</h1>
+    </div>
+  );
+}

package/src/generators/application/files/react-router-ssr/common/app/routes.tsx__tmpl__

@@ -0,0 +1,6 @@
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
+
+export default [
+  index('<%- js ? `./${fileName}.jsx` : `./${fileName}.tsx` %>'),
+  route('about', './routes/about.tsx')
+  ] satisfies RouteConfig;

package/src/generators/application/files/react-router-ssr/common/react-router.config.ts__tmpl__

@@ -0,0 +1,5 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  ssr: true,
+} satisfies Config;

package/src/generators/application/files/react-router-ssr/common/tests/routes/_index.spec.tsx__tmpl__

@@ -0,0 +1,16 @@
+import { createRoutesStub } from 'react-router';
+import { render, screen, waitFor } from '@testing-library/react';
+import App from '../../app/app';
+
+test('renders loader data', async () => {
+  const ReactRouterStub = createRoutesStub([
+    {
+      path: '/',
+      Component: App,
+    },
+  ]);
+
+  render(<ReactRouterStub />);
+
+  await waitFor(() => screen.findByText('Hello there,'));
+});

package/src/generators/application/files/react-router-ssr/common/tsconfig.app.json__tmpl__

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "app/**/*.ts",
+    "app/**/*.tsx",
+    "app/**/*.js",
+    "app/**/*.jsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
+  "exclude": [
+    "tests/**/*.spec.ts",
+    "tests/**/*.test.ts",
+    "tests/**/*.spec.tsx",
+    "tests/**/*.test.tsx",
+    "tests/**/*.spec.js",
+    "tests/**/*.test.js",
+    "tests/**/*.spec.jsx",
+    "tests/**/*.test.jsx"
+  ]
+}

package/src/generators/application/files/react-router-ssr/common/tsconfig.json__tmpl__

@@ -0,0 +1,27 @@
+{
+  "extends": "<%= offsetFromRoot %>tsconfig.base.json",
+  "compilerOptions": {
+      "lib": ["DOM", "DOM.Iterable", "ES2019"],
+      "types": ["@react-router/node", "vite/client"],
+      "isolatedModules": true,
+      "esModuleInterop": true,
+      "jsx": "react-jsx",
+      "module": "ESNext",
+      "moduleResolution": "Bundler",
+      "resolveJsonModule": true,
+      "target": "ES2022",
+      "strict": true,
+      "allowJs": true,
+      "skipLibCheck": true,
+      "forceConsistentCasingInFileNames": true,
+      // Vite takes care of building everything.
+      "noEmit": true
+    },
+    "include": [],
+    "files": [],
+    "references": [
+      {
+        "path": "./tsconfig.app.json"
+      }
+    ]
+}

package/src/generators/application/files/react-router-ssr/non-root/.gitignore__tmpl__

@@ -0,0 +1,5 @@
+.cache
+build
+public/build
+.env
+.react-router

package/src/generators/application/files/react-router-ssr/non-root/package.json__tmpl__

@@ -0,0 +1,24 @@
+{
+  "name": "<%= projectName %>",
+  "private": true,
+  "type": "module",
+  "scripts": {},
+  "dependencies": {
+    "@react-router/node": "<%= reactRouterVersion %>",
+    "@react-router/serve": "<%= reactRouterVersion %>",
+    "isbot": "<%= reactRouterIsBotVersion %>",
+    "react": "<%= reactVersion %>",
+    "react-dom": "<%= reactVersion %>",
+    "react-router": "<%= reactRouterVersion %>"
+  },
+  "devDependencies": {
+    "@react-router/dev": "<%= reactRouterVersion %>",
+    "@types/node": "<%= typesNodeVersion %>",
+    "@types/react": "<%= reactVersion %>",
+    "@types/react-dom": "<%= reactVersion %>"
+  },
+  "engines": {
+  "node": ">=20"
+  },
+  "sideEffects": false
+}