@nx/react 24.0.0-pr.37405.acdaf31 → 24.0.0-rc.0

package/dist/src/generators/federate-module/schema.json

@@ -1,89 +0,0 @@
-{
-  "$schema": "https://json-schema.org/schema",
-  "cli": "nx",
-  "$id": "NxReactFederateModule",
-  "title": "Federate Module",
-  "description": "Create a federated module, which can be loaded by a Consumer (host) via a Producer (remote).",
-  "examples": [
-    {
-      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=myRemote --remoteDirectory=apps/myRemote",
-      "description": "Create a federated module from myRemote, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule."
-    },
-    {
-      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --producer=myProducer --producerDirectory=apps/myProducer",
-      "description": "Create a federated module from myProducer, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule."
-    }
-  ],
-  "type": "object",
-  "properties": {
-    "path": {
-      "type": "string",
-      "$default": {
-        "$source": "argv",
-        "index": 0
-      },
-      "description": "The path to locate the federated module. This path should be relative to the workspace root and the file should exist.",
-      "x-prompt": "What is the path to the module to be federated?"
-    },
-    "name": {
-      "description": "The name of the module.",
-      "type": "string",
-      "x-prompt": "What name would you like to use for the module?",
-      "pattern": "^[a-zA-Z][^:]*$",
-      "x-priority": "important"
-    },
-    "remote": {
-      "type": "string",
-      "description": "The name of the Producer (remote).",
-      "x-prompt": "What is/should the Producer (remote) be named?",
-      "alias": "producer"
-    },
-    "remoteDirectory": {
-      "description": "The directory of the new Producer (remote) application if one needs to be created.",
-      "type": "string",
-      "alias": "producerDirectory"
-    },
-    "style": {
-      "description": "The file extension to be used for style files.",
-      "type": "string",
-      "default": "none",
-      "alias": "s"
-    },
-    "linter": {
-      "description": "The tool to use for running lint checks. Defaults to the linter the workspace already uses.",
-      "type": "string",
-      "enum": ["eslint", "oxlint", "none"]
-    },
-    "skipFormat": {
-      "description": "Skip formatting files.",
-      "type": "boolean",
-      "default": false,
-      "x-priority": "internal"
-    },
-    "unitTestRunner": {
-      "type": "string",
-      "enum": ["jest", "vitest", "none"],
-      "description": "Test runner to use for unit tests.",
-      "default": "jest"
-    },
-    "e2eTestRunner": {
-      "type": "string",
-      "enum": ["cypress", "playwright", "none"],
-      "description": "Test runner to use for end to end (E2E) tests.",
-      "x-prompt": "Which E2E test runner would you like to use?",
-      "default": "cypress"
-    },
-    "host": {
-      "type": "string",
-      "description": "The Consumer (host) application for this Producer (remote)."
-    },
-    "bundler": {
-      "description": "The bundler to use.",
-      "type": "string",
-      "enum": ["rspack", "webpack"],
-      "default": "rspack"
-    }
-  },
-  "required": ["name", "path", "remote"],
-  "additionalProperties": false
-}

package/dist/src/generators/host/files/common/src/app/__fileName__.js__tmpl__

@@ -1,40 +0,0 @@
-import * as React from 'react';
-<%_ if (!minimal) { _%>
-import NxWelcome from "./nx-welcome";
-<%_ } _%>
-import { Link, Route, Routes } from 'react-router-dom';
-<%_ if (dynamic && remotes.length > 0) { _%>
-import { loadRemote } from '@module-federation/enhanced/runtime';
-<%_ } _%>
-
-<%_ if (remotes.length > 0) {
- remotes.forEach(function(r) { _%>
-<%_ if (dynamic) { _%>
-const <%= r.className %> = React.lazy(() => loadRemote('<%= r.fileName %>/Module') as any)
-<%_ } else  { _%>
-const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
-<%_ } _%>
- <%_ }); _%>
-<%_ } _%>
-export function App() {
-  return (
-    <React.Suspense fallback={null}>
-      <ul>
-        <li><Link to="/">Home</Link></li>
-       <%_ remotes.forEach(function(r) { _%>
-        <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
-       <%_ }); _%>
-      </ul>
-      <Routes>
-       <%_ if (!minimal) { _%>
-        <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
-       <%_ } _%>
-       <%_ remotes.forEach(function(r) { _%>
-        <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
-       <%_ }); _%>
-      </Routes>
-    </React.Suspense>
-  );
-}
-
-export default App;

package/dist/src/generators/host/files/common/src/main.js__tmpl__

@@ -1,13 +0,0 @@
-<%_ if (dynamic) { _%>
-import { registerRemotes } from '@module-federation/enhanced/runtime';
-
-fetch('/assets/module-federation.manifest.json')
-.then((res) => res.json())
-.then((remotes: Record<string, string>) =>
-    Object.entries(remotes).map(([name, entry]) => ({ name, entry }))
-)
-.then((remotes) => registerRemotes(remotes))
-.then(() =>  import('./bootstrap').catch(err => console.error(err)));
-<%_ } else { _%>
-import('./bootstrap').catch(err => console.error(err));
-<%_ } _%>

package/dist/src/generators/host/files/common/tsconfig.lint.json__tmpl__

@@ -1,19 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-        "node",
-        "@nx/react/typings/cssmodule.d.ts",
-        "@nx/react/typings/image.d.ts"
-    ]
-  },
-  "include": [
-    "src/**/*.js",
-    "src/**/*.jsx",
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "webpack.config.ts",
-    "webpack.prod.config.ts"
-  ]
-}

package/dist/src/generators/host/files/common-ts/src/app/__fileName__.tsx__tmpl__

@@ -1,41 +0,0 @@
-import * as React from 'react';
-<%_ if (!minimal) { _%>
-import NxWelcome from "./nx-welcome";
-<%_ } _%>
-import { Link, Route, Routes } from 'react-router-dom';
-<%_ if (dynamic && remotes.length > 0) { _%>
-import { loadRemote } from '@module-federation/enhanced/runtime';
-<%_ } _%>
-
-<%_ if (remotes.length > 0) {
- remotes.forEach(function(r) { _%>
-<%_ if (dynamic) { _%>
-const <%= r.className %> = React.lazy(() => loadRemote('<%= r.fileName %>/Module') as any)
-<%_ } else  { _%>
-const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
-<%_ } _%>
- <%_ }); _%>
-<%_ } _%>
-
-export function App() {
-  return (
-    <React.Suspense fallback={null}>
-      <ul>
-        <li><Link to="/">Home</Link></li>
-       <%_ remotes.forEach(function(r) { _%>
-        <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
-       <%_ }); _%>
-      </ul>
-      <Routes>
-       <%_ if (!minimal) { _%>
-        <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
-       <%_ } _%>
-       <%_ remotes.forEach(function(r) { _%>
-        <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
-       <%_ }); _%>
-      </Routes>
-    </React.Suspense>
-  );
-}
-
-export default App;

package/dist/src/generators/host/files/common-ts/src/main.ts__tmpl__

@@ -1,13 +0,0 @@
-<%_ if (dynamic) { _%>
-import { registerRemotes } from '@module-federation/enhanced/runtime';
-
-fetch('/assets/module-federation.manifest.json')
-.then((res) => res.json())
-.then((remotes: Record<string, string>) =>
-    Object.entries(remotes).map(([name, entry]) => ({ name, entry }))
-)
-.then((remotes) => registerRemotes(remotes))
-.then(() =>  import('./bootstrap').catch(err => console.error(err)));
-<%_ } else { _%>
-import('./bootstrap').catch(err => console.error(err));
-<%_ } _%>

package/dist/src/generators/host/files/rspack-common/src/app/__fileName__.jsx__tmpl__

@@ -1,42 +0,0 @@
-import * as React from 'react';
-<%_ if (!minimal) { _%>
-import NxWelcome from "./nx-welcome";
-<%_ } _%>
-import { Link, Route, Routes } from 'react-router-dom';
-
-<%_ if (dynamic && remotes.length > 0) { _%>
-import { loadRemote } from '@module-federation/enhanced/runtime';
-<%_ } _%>
-
-<%_ if (remotes.length > 0) {
- remotes.forEach(function(r) { _%>
-<%_ if (dynamic) { _%>
-const <%= r.className %> = React.lazy(() => loadRemote('<%= r.fileName %>/Module') as any)
-<%_ } else  { _%>
-const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
-<%_ } _%>
- <%_ }); _%>
-<%_ } _%>
-
-export function App() {
-  return (
-    <React.Suspense fallback={null}>
-     <ul>
-       <li><Link to="/">Home</Link></li>
-       <%_ remotes.forEach(function(r) { _%>
-         <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
-       <%_ }); _%>
-     </ul>
-     <Routes>
-       <%_ if (!minimal) { _%>
-       <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
-       <%_ } _%>
-       <%_ remotes.forEach(function(r) { _%>
-         <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
-       <%_ }); _%>
-     </Routes>
-    </React.Suspense>
-  );
-}
-
-export default App;

package/dist/src/generators/host/files/rspack-common/src/main.jsx__tmpl__

@@ -1,13 +0,0 @@
-<%_ if (dynamic) { _%>
-import { init } from '@module-federation/enhanced/runtime';
-
-fetch('/assets/module-federation.manifest.json')
-.then((res) => res.json())
-.then((remotes: Record<string, string>) =>
-    Object.entries(remotes).map(([name, entry]) => ({ name, entry }))
-)
-.then((remotes) => init({ name: '<%= projectName %>', remotes }))
-.then(() =>  import('./bootstrap').catch(err => console.error(err)));
-<%_ } else { _%>
-import('./bootstrap').catch(err => console.error(err));
-<%_ } _%>

package/dist/src/generators/host/files/rspack-common/tsconfig.lint.json__tmpl__

@@ -1,19 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-        "node",
-        "@nx/react/typings/cssmodule.d.ts",
-        "@nx/react/typings/image.d.ts"
-    ]
-  },
-  "include": [
-    "src/**/*.js",
-    "src/**/*.jsx",
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "webpack.config.ts",
-    "webpack.prod.config.ts"
-  ]
-}

package/dist/src/generators/host/files/rspack-module-federation/module-federation.config.js__tmpl__

@@ -1,24 +0,0 @@
-/**
-* Nx requires a default export of the config to allow correct resolution of the module federation graph.
-**/
-module.exports = {
-  name: '<%= projectName %>',
-  /**
-   * To use a remote that does not exist in your current Nx Workspace
-   * You can use the tuple-syntax to define your remote
-   *
-   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
-   *
-   * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
-   * following content:
-   *
-   * declare module 'my-external-remote';
-   *
-   */
-  remotes: [
-    <%_ if (static) { 
-      remotes.forEach(function(r) { _%> 
-    "<%= r.fileName %>", 
-      <%_ }); } _%>
-  ],
-};

package/dist/src/generators/host/files/rspack-module-federation/rspack.config.js__tmpl__

@@ -1,42 +0,0 @@
-const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
-const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
-const { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } = require('@nx/module-federation/rspack');
-const { join } = require('path');
-
-const config = require('./module-federation.config');
-
-module.exports = {
-  // rspack-cli dev mode defaults this on; it breaks module federation.
-  lazyCompilation: false,
-  output: {
-    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
-    publicPath: 'auto'
-  },
-  devServer: {
-    port: <%= port %>,
-    historyApiFallback: {
-      index: '/index.html',
-      disableDotRule: true,
-      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
-    },
-  },
-  plugins: [
-    new NxAppRspackPlugin({
-      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
-      main: '<%= rspackPluginOptions.main %>',
-      index: '<%= rspackPluginOptions.index %>',
-      baseHref: '<%= rspackPluginOptions.baseHref %>',
-      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
-      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
-      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
-      optimization: process.env['NODE_ENV'] === 'production',
-    }),
-    new NxReactRspackPlugin({
-      // Uncomment this line if you don't want to use SVGR
-      // See: https://react-svgr.com/
-      // svgr: false
-    }),
-    new NxModuleFederationPlugin({ config }, { dts: false }),
-    new NxModuleFederationDevServerPlugin({ config }),
-  ],
-};

package/dist/src/generators/host/files/rspack-module-federation/rspack.config.prod.js__tmpl__

@@ -1,66 +0,0 @@
-const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
-const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
-const { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } = require('@nx/module-federation/rspack');
-const { join } = require('path');
-
-const baseConfig = require('./module-federation.config');
-
-const prodConfig = {
-	...baseConfig,
-	/*
-		* Remote overrides for production.
-		* Each entry is a pair of a unique name and the URL where it is deployed.
-		*
-		* e.g.
-		* remotes: [
-		*   ['app1', 'http://app1.example.com'],
-		*   ['app2', 'http://app2.example.com'],
-		* ]
-		*
-		* You can also use a full path to the remoteEntry.js file if desired.
-		*
-		* remotes: [
-		*   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
-		*   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
-		* ]
-		*/
-	remotes: [
-		<%_ remotes.forEach(function(r) { _%>
-		['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],
-		<%_ }); _%>
-	],
-};
-
-module.exports = {
-  output: {
-    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
-    publicPath: 'auto'
-  },
-  devServer: {
-    port: <%= port %>,
-    historyApiFallback: {
-      index: '/index.html',
-      disableDotRule: true,
-      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
-    },
-  },
-  plugins: [
-    new NxAppRspackPlugin({
-      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
-      main: '<%= rspackPluginOptions.main %>',
-      index: '<%= rspackPluginOptions.index %>',
-      baseHref: '<%= rspackPluginOptions.baseHref %>',
-      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
-      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
-      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
-      optimization: process.env['NODE_ENV'] === 'production',
-    }),
-    new NxReactRspackPlugin({
-      // Uncomment this line if you don't want to use SVGR
-      // See: https://react-svgr.com/
-      // svgr: false
-    }),
-    new NxModuleFederationPlugin({ config: prodConfig }, { dts: false }),
-    new NxModuleFederationDevServerPlugin({ config: prodConfig }),
-  ],
-};

package/dist/src/generators/host/files/rspack-module-federation-ssr/module-federation.server.config.js__tmpl__

@@ -1,27 +0,0 @@
-// @ts-check
-
-/**
- * @type {import('@nx/module-federation').ModuleFederationConfig}
- **/
-const moduleFederationConfig = {
-    name: '<%= projectName %>',
-    remotes: [
-      <%_ if (static) { 
-        remotes.forEach(function(r) { _%> 
-      "<%= r.fileName %>",
-        <%_ }); 
-      }
-    _%>
-  ],
-    shared: (libraryName, libraryConfig) => {
-        return {
-            ...libraryConfig,
-            eager: true
-        }
-   },
-};
-
-/**
-* Nx requires a default export of the config to allow correct resolution of the module federation graph.
-**/
-module.exports = moduleFederationConfig;

package/dist/src/generators/host/files/rspack-module-federation-ssr/rspack.config.js__tmpl__

@@ -1,68 +0,0 @@
-const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
-const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
-const { NxModuleFederationPlugin, NxModuleFederationSSRDevServerPlugin } = require('@nx/module-federation/rspack');
-const { join } = require('path');
-
-const browserMfConfig = require('./module-federation.config');
-const serverMfConfig = require('./module-federation.server.config');
-
-const browserRspackConfig = {
-  name: 'browser',
-  // rspack-cli dev mode defaults this on; it breaks module federation.
-  lazyCompilation: false,
-  output: {
-    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
-    publicPath: 'auto'
-  },
-  devServer: {
-    port: <%= port %>,
-    historyApiFallback: {
-      index: '/index.html',
-      disableDotRule: true,
-      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
-    },
-    devMiddleware: {
-      writeToDisk: (file: string) => !file.includes('.hot-update.'),
-    },
-  },
-  plugins: [
-    new NxAppRspackPlugin({
-      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
-      main: '<%= rspackPluginOptions.main %>',
-      index: '<%= rspackPluginOptions.index %>',
-      baseHref: '<%= rspackPluginOptions.baseHref %>',
-      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
-      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
-      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
-      optimization: process.env['NODE_ENV'] === 'production',
-    }),
-    new NxReactRspackPlugin({
-      // Uncomment this line if you don't want to use SVGR
-      // See: https://react-svgr.com/
-      // svgr: false
-    }),
-    new NxModuleFederationPlugin({ config: browserMfConfig }, { dts: false }),
-  ],
-};
-
-const serverRspackConfig = {
-  name: 'server',
-  target: 'async-node',
-  output: {
-    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
-    filename: 'server.js'
-  },
-  plugins: [
-    new NxAppRspackPlugin({
-      outputPath: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
-      outputFileName: 'server.js',
-      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
-      main: '<%= rspackPluginOptions.mainServer %>',
-      baseHref: '<%= rspackPluginOptions.baseHref %>',
-    }),
-    new NxModuleFederationPlugin({ config: serverMfConfig, isServer: true }, { dts: false }),
-    new NxModuleFederationSSRDevServerPlugin({ config: serverMfConfig }),
-  ],
-};
-
-module.exports = [browserRspackConfig, serverRspackConfig];

package/dist/src/generators/host/files/rspack-module-federation-ssr/server.ts__tmpl__

@@ -1,28 +0,0 @@
-import * as path from 'path';
-import express from 'express';
-import cors from 'cors';
-
-import { handleRequest } from './src/main.server';
-
-const port = process.env['PORT'] || <%= port %>;
-const app = express();
-
-const browserDist = path.join(process.cwd(), '<%= rspackPluginOptions.outputPath %>', 'browser');
-const indexPath = path.join(browserDist, 'index.html');
-
-app.use(cors());
-
-app.get(
-  '*.*',
-  express.static(browserDist, {
-    maxAge: '1y',
-  })
-);
-
-app.use('*', handleRequest(indexPath));
-
-const server = app.listen(port, () => {
-  console.log(`Express server listening on http://localhost:${port}`);
-});
-
-server.on('error', console.error);

package/dist/src/generators/host/files/rspack-module-federation-ssr/src/main.server.tsx__tmpl__

@@ -1,49 +0,0 @@
-import type { Request, Response } from 'express';
-import * as fs from 'fs';
-import * as ReactDOMServer from 'react-dom/server';
-import isbot from 'isbot'
-
-import App from './app/app';
-
-import { StaticRouter } from 'react-router-dom/server';
-
-
-let indexHtml: null | string = null;
-
-export function handleRequest(indexPath: string) {
-  return function render(req: Request, res: Response) {
-    let didError = false;
-
-    if (!indexHtml) {
-      indexHtml = fs.readFileSync(indexPath).toString();
-    }
-
-    const [htmlStart, htmlEnd] = indexHtml.split(`<div id="root"></div>`);
-
-    // For bots (e.g. search engines), the content will not be streamed but render all at once.
-    // For users, content should be streamed to the user as they are ready.
-    const callbackName = isbot(req.headers['user-agent']) ? 'onAllReady' : 'onShellReady';
-
-    const stream = ReactDOMServer.renderToPipeableStream(
-      <StaticRouter location={req.originalUrl}><App /></StaticRouter>,
-      {
-        [callbackName]() {
-          res.statusCode = didError ? 500 : 200;
-          res.setHeader('Content-type', 'text/html; charset=utf-8');
-          res.write(`${htmlStart}<div id="root">`);
-          stream.pipe(res);
-          res.write(`</div>${htmlEnd}`);
-        },
-        onShellError(error) {
-          console.error(error);
-          res.statusCode = 500;
-          res.send('<!doctype html><h1>Server Error</h1>');
-        },
-        onError(error) {
-          didError = true;
-          console.error(error);
-        }
-      }
-    );
-  }
-}

package/dist/src/generators/host/files/rspack-module-federation-ssr/tsconfig.server.json__tmpl__

@@ -1,17 +0,0 @@
-{
-  "extends": "./tsconfig.app.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/server",
-    "target": "es2019",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
-  },
-  "include": [
-    "src/remotes.d.ts",
-    "src/main.server.tsx",
-    "server.ts"
-  ]
-}

package/dist/src/generators/host/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__

@@ -1,22 +0,0 @@
-import type { ModuleFederationConfig } from '@nx/module-federation';
-
-const config: ModuleFederationConfig = {
-  name: '<%= projectName %>',
-  remotes: [
-    <%_ if (static) { 
-      remotes.forEach(function(r) { _%>
-    "<%= r.fileName %>", 
-      <%_ }); } _%>
-  ],
-  shared: (libraryName, libraryConfig) => {
-    return {
-      ...libraryConfig,
-      eager: true
-    }
-  },
-};
-
-/**
-* Nx requires a default export of the config to allow correct resolution of the module federation graph.
-**/
-export default config;