@nx/react 0.0.0-pr-31222-862e973 → 0.0.0-pr-31313-387cdca

package/src/generators/application/files/base-vite/src/main.tsx__tmpl__

@@ -1,10 +1,35 @@
-<% if (strict) { %>import { StrictMode } from 'react';<% } %>
+<%_ if (strict) { _%>
+import { StrictMode } from 'react';
+<%_ } _%>
+<%_ if (routing) { _%>
+import { BrowserRouter } from 'react-router-dom';
+<%_ } _%>
 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><% } %>
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
 );
+
+root.render(
+<%_ if(strict && !routing) { _%>
+  <StrictMode>
+    <App/>
+  </StrictMode>
+<%_ } _%>
+<%_ if(!strict && routing) { _%>
+  <BrowserRouter>
+    <App/>
+  </BrowserRouter>
+<%_ } _%>
+<%_ if(strict && routing) { _%>
+  <StrictMode>
+    <BrowserRouter>
+      <App/>
+    </BrowserRouter>
+  </StrictMode>
+<%_ } _%>
+<%_ if(!strict && !routing) { _%>
+  <App/>
+<%_ } _%>
+);

package/src/generators/application/files/base-vite/tsconfig.app.json__tmpl__

@@ -1,14 +1,31 @@
-{
+<%_ if (isUsingTsSolutionSetup) { _%>{
+  "extends": "<%= offsetFromRoot%>tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "jsx": "react-jsx",
+    "lib": ["dom"],
+    "types": [
+      "node",
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": ["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"]
+}<% } else { %>{
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
-      ]
+    ]
   },
   "exclude": ["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"]
 }
+<% } %>

package/src/generators/application/files/base-webpack/src/app/__fileName__.spec.tsx__tmpl__

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

package/src/generators/application/files/base-webpack/src/main.tsx__tmpl__

@@ -5,6 +5,26 @@ import * as ReactDOM from 'react-dom/client';
 import App from './app/<%= fileName %>';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+<%_ if(strict && !routing) { _%>
 root.render(
-<% if (strict) { %><StrictMode><% } %><% if (routing) { %><BrowserRouter><% } %><App /><% if (routing) { %></BrowserRouter><% } %><% if (strict) { %></StrictMode><% } %>
-);
+  <StrictMode>
+    <App/>
+  </StrictMode>
+)
+<%_ } _%>
+<%_ if(!strict && routing) { _%>
+root.render(
+  <BrowserRouter>
+    <App/>
+  </BrowserRouter>
+)
+<%_ } _%>
+<%_ if(strict && routing) { _%>
+root.render(
+  <StrictMode>
+    <BrowserRouter>
+      <App/>
+    </BrowserRouter>
+  </StrictMode>
+)
+<%_ } _%>

package/src/generators/application/files/base-webpack/tsconfig.app.json__tmpl__

@@ -1,14 +1,31 @@
-{
+<%_ if (isUsingTsSolutionSetup) { _%>{
+  "extends": "<%= offsetFromRoot%>tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "jsx": "react-jsx",
+    "lib": ["dom"],
+    "types": [
+      "node",
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": ["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"]
+}<% } else { %>{
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@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"],
+  "exclude": ["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"]
 }
+<% } %>

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

@@ -1,11 +1,11 @@
-<% if (webpackPluginOptions) { %>
+<%_ if (webpackPluginOptions) { _%>
 const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
 const { join } = require('path');
 
 module.exports = {
   output: {
-    path: join(__dirname, '<%= offsetFromRoot %><%= webpackPluginOptions.outputPath %>'),
+    path: join(__dirname, '<%= webpackPluginOptions.outputPath %>'),
   },
   devServer: {
     port: 4200,
@@ -34,7 +34,7 @@ module.exports = {
     }),
   ],
 };
-<% } else { %>
+<%_ } else { _%>
 const { composePlugins, withNx } = require('@nx/webpack');
 const { withReact } = require('@nx/react');
 
@@ -52,4 +52,4 @@ module.exports = composePlugins(
     return config;
   }
 );
-<% } %>
+<%_ } _%>

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,21 @@
+{
+  "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 %>"
+  },
+  "sideEffects": false
+}