@nx/react 20.6.0-beta.0 → 20.6.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.6.0-beta.0",
+  "version": "20.6.0-beta.1",
   "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.6.0-beta.0",
-    "@nx/js": "20.6.0-beta.0",
-    "@nx/eslint": "20.6.0-beta.0",
-    "@nx/web": "20.6.0-beta.0",
-    "@nx/module-federation": "20.6.0-beta.0",
+    "@nx/devkit": "20.6.0-beta.1",
+    "@nx/js": "20.6.0-beta.1",
+    "@nx/eslint": "20.6.0-beta.1",
+    "@nx/web": "20.6.0-beta.1",
+    "@nx/module-federation": "20.6.0-beta.1",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

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,6 +26,7 @@ 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,
@@ -45,6 +46,25 @@ async function applicationGeneratorInternal(tree, schema) {
     });
     tasks.push(jsInitTask);
     const options = await (0, normalize_options_1.normalizeOptions)(tree, schema);
+    options.useReactRouter = options.routing
+        ? 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,
@@ -113,16 +133,34 @@ 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',

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+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
+}