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

package/src/generators/redux/redux.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.reduxGenerator = reduxGenerator;
-exports.reduxGeneratorInternal = reduxGeneratorInternal;
 const path = require("path");
 const ast_utils_1 = require("../../utils/ast-utils");
 const versions_1 = require("../../utils/versions");
@@ -9,14 +8,9 @@ const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 let tsModule;
 async function reduxGenerator(host, schema) {
-    return reduxGeneratorInternal(host, {
-        nameAndDirectoryFormat: 'derived',
-        ...schema,
-    });
-}
-async function reduxGeneratorInternal(host, schema) {
     const options = await normalizeOptions(host, schema);
     generateReduxFiles(host, options);
     addExportsToBarrel(host, options);
@@ -27,13 +21,10 @@ async function reduxGeneratorInternal(host, schema) {
     return installTask;
 }
 function generateReduxFiles(host, options) {
-    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, './files'), options.directory, {
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, 'files', options.fileExtensionType), options.projectDirectory, {
         ...options,
-        tmpl: '',
+        ext: options.fileExtension,
     });
-    if (options.js) {
-        (0, devkit_1.toJS)(host);
-    }
 }
 function addReduxPackageDependencies(host) {
     return (0, devkit_1.addDependenciesToPackageJson)(host, {
@@ -45,16 +36,17 @@ function addExportsToBarrel(host, options) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
-    const indexFilePath = path.join(options.projectSourcePath, options.js ? 'index.js' : 'index.ts');
-    const indexSource = host.read(indexFilePath, 'utf-8');
-    if (indexSource !== null) {
-        const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
-        const statePath = options.directory
-            ? `./lib/${options.directory}/${options.fileName}`
-            : `./lib/${options.fileName}`;
-        const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from '${statePath}.slice';`));
-        host.write(indexFilePath, changes);
+    const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourcePath, options.fileExtensionType === 'js' ? 'index.js' : 'index.ts');
+    if (!host.exists(indexFilePath)) {
+        return;
     }
+    const indexSource = host.read(indexFilePath, 'utf-8');
+    const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
+    const statePath = options.path
+        ? `./lib/${options.path}/${options.fileName}`
+        : `./lib/${options.fileName}`;
+    const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from '${statePath}.slice';`));
+    host.write(indexFilePath, changes);
 }
 function addStoreConfiguration(host, options) {
     if (!options.appProjectSourcePath) {
@@ -84,30 +76,27 @@ function updateReducerConfiguration(host, options) {
     host.write(options.appMainFilePath, changes);
 }
 async function normalizeOptions(host, options) {
-    const { artifactName: name, directory, fileName, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
-        artifactType: 'slice',
-        callingGenerator: '@nx/react:redux',
+    const { artifactName: name, directory, fileName, fileExtension, fileExtensionType, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+        path: options.path,
         name: options.name,
-        directory: options.directory,
-        derivedDirectory: options.directory,
-        flat: true,
-        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
-        project: options.project,
-        fileExtension: 'tsx',
+        suffix: 'slice',
+        allowedFileExtensions: ['js', 'ts'],
+        fileExtension: options.js ? 'js' : 'ts',
+        js: options.js,
     });
     let appProjectSourcePath;
     let appMainFilePath;
     const extraNames = (0, devkit_1.names)(name);
     const projects = (0, devkit_1.getProjects)(host);
     const project = projects.get(projectName);
-    const { sourceRoot, projectType } = project;
+    const { root, sourceRoot, projectType } = project;
     const tsConfigJson = (0, devkit_1.readJson)(host, (0, js_1.getRootTsConfigPathInTree)(host));
     const tsPaths = tsConfigJson.compilerOptions
         ? tsConfigJson.compilerOptions.paths || {}
         : {};
-    const modulePath = projectType === 'application'
-        ? options.directory
-            ? `./app/${options.directory}/${extraNames.fileName}.slice`
+    const modulePath = (0, ts_solution_setup_1.getProjectType)(host, root, projectType) === 'application'
+        ? options.path
+            ? `./app/${options.path}/${extraNames.fileName}.slice`
             : `./app/${extraNames.fileName}.slice`
         : Object.keys(tsPaths).find((k) => tsPaths[k].some((s) => s.includes(sourceRoot)));
     // If --project is set to an app, automatically configure store
@@ -130,8 +119,10 @@ async function normalizeOptions(host, options) {
         ...options,
         ...extraNames,
         fileName,
-        constantName: (0, devkit_1.names)(options.name).constantName.toUpperCase(),
-        directory,
+        fileExtension,
+        fileExtensionType,
+        constantName: (0, devkit_1.names)(name).constantName.toUpperCase(),
+        projectDirectory: directory,
         projectType,
         projectSourcePath: sourceRoot,
         projectModulePath: modulePath,

package/src/generators/redux/schema.d.ts

@@ -1,17 +1,19 @@
+import type { FileExtensionType } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
+
 export interface Schema {
-  name: string;
+  path: string;
+  name?: string;
+  appProject?: string;
+
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v20.
+   * @deprecated Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21.
    */
-  project?: string;
-  directory?: string;
-  appProject?: string;
-  js?: string;
-  nameAndDirectoryFormat?: 'as-provided' | 'derived';
+  js?: boolean;
 }
 
-interface NormalizedSchema extends Schema {
+interface NormalizedSchema extends Omit<Schema, 'js'> {
   projectType: string;
+  projectDirectory: string;
   projectSourcePath: string;
   projectModulePath: string;
   appProjectSourcePath: string;
@@ -20,4 +22,6 @@ interface NormalizedSchema extends Schema {
   constantName: string;
   propertyName: string;
   fileName: string;
+  fileExtension: string;
+  fileExtensionType: FileExtensionType;
 }

package/src/generators/redux/schema.json

@@ -5,36 +5,34 @@
   "title": "Create Redux state",
   "description": "Create a Redux state slice for a React project.",
   "type": "object",
+  "examples": [
+    {
+      "description": "Generate a Redux state slice with the exported symbol matching the file name. It results in the slice `fooSlice` at `mylib/src/lib/foo.slice.ts`",
+      "command": "nx g @nx/react:redux mylib/src/lib/foo.slice.ts"
+    },
+    {
+      "description": "Generate a Redux state slice with the exported symbol different from the file name. It results in the slice `customSlice` at `mylib/src/lib/foo.slice.ts`",
+      "command": "nx g @nx/react:redux mylib/src/lib/foo.slice.ts --name=custom"
+    },
+    {
+      "description": "Generate a Redux state slice without providing the \"slice\" suffix and the file extension. It results in the slice `fooSlice` at `mylib/src/lib/foo.slice.ts`",
+      "command": "nx g @nx/react:redux mylib/src/lib/foo"
+    }
+  ],
   "properties": {
-    "name": {
+    "path": {
       "type": "string",
-      "description": "Redux slice name.",
+      "description": "The file path to the Redux state slice. Relative to the current working directory.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
+      "x-prompt": "What is the Redux stateslice file path?",
       "x-priority": "important"
     },
-    "project": {
-      "type": "string",
-      "description": "The name of the project to add the slice to. If it is an application, then the store configuration will be updated too.",
-      "alias": "p",
-      "$default": {
-        "$source": "projectName"
-      },
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v20."
-    },
-    "directory": {
-      "type": "string",
-      "alias": "dir",
-      "default": "",
-      "description": "The directory at which to create the Redux files. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
-      "x-priority": "important"
-    },
-    "nameAndDirectoryFormat": {
-      "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
+    "name": {
       "type": "string",
-      "enum": ["as-provided", "derived"]
+      "description": "The Redux state slice symbol name. Defaults to the last segment of the file path."
     },
     "appProject": {
       "type": "string",
@@ -44,8 +42,8 @@
     "js": {
       "type": "boolean",
       "description": "Generate JavaScript files rather than TypeScript files.",
-      "default": false
+      "x-deprecated": "Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21."
     }
   },
-  "required": ["name"]
+  "required": ["path"]
 }

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

@@ -1,9 +1,12 @@
+/**
+* Nx requires a default export of the config to allow correct resolution of the module federation graph.
+**/
 module.exports = {
-   name: '<%= projectName %>',
-   <% if (dynamic) { %>
-   library: { type: 'var', name: '<%= projectName %>'},
-   <% } %>
-   exposes: {
-     './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
-   },
+  name: '<%= projectName %>',
+  <%_ if (dynamic) { _%>
+  library: { type: 'var', name: '<%= projectName %>'},
+  <%_ } _%>
+  exposes: {
+    './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+  },
 };

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

@@ -1,16 +1,43 @@
-const { composePlugins, withNx, withReact } = require('@nx/rspack');
-const { withModuleFederation } = require('@nx/rspack/module-federation');
+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 config = require('./module-federation.config');
 
-const config = {
-  ...baseConfig,
+module.exports = {
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    headers: {
+      "Access-Control-Allow-Origin": "*"
+    },
+    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 }),
+  ],
 };
-
-// Nx plugins for rspack to build config object from Nx options and context.
-/**
- * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support Module Federation
- * The DTS Plugin can be enabled by setting dts: true
- * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
- */
-module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config, { dts: false }));

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

@@ -1,6 +1,15 @@
+/**
+* Nx requires a default export of the config to allow correct resolution of the module federation graph.
+**/
 module.exports = {
-    name: '<%= projectName %>',
-   exposes: {
-     './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
-   },
+  name: '<%= projectName %>',
+  exposes: {
+    './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+  },
+  shared: (libraryName, libraryConfig) => {
+      return {
+        ...libraryConfig,
+        eager: true
+      }
+    },
 };

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

@@ -0,0 +1,69 @@
+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',
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    headers: {
+      "Access-Control-Allow-Origin": "*"
+    },
+    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/src/generators/remote/files/rspack-module-federation-ssr/server.ts__tmpl__

@@ -7,8 +7,8 @@ import { handleRequest } from './src/main.server';
 const port = process.env['PORT'] || <%= port %>;
 const app = express();
 
-const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
-const serverDist = path.join(process.cwd(), '<%= serverBuildOutputPath %>');
+const browserDist = path.join(process.cwd(), '<%= rspackPluginOptions.outputPath %>', 'browser');
+const serverDist = path.join(process.cwd(), '<%= rspackPluginOptions.outputPath %>', 'server');
 const indexPath = path.join(browserDist, 'index.html');
 
 app.use(cors());

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

@@ -0,0 +1,45 @@
+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';
+
+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(<App />, {
+      [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/src/generators/remote/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__

@@ -1,10 +1,19 @@
-import {ModuleFederationConfig} from '@nx/rspack/module-federation';
+import {ModuleFederationConfig} from '@nx/module-federation';
 
 const config: ModuleFederationConfig = {
-    name: '<%= projectName %>',
-    exposes: {
-        './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+  name: '<%= projectName %>',
+  exposes: {
+      './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+  },
+  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;

package/src/generators/remote/files/rspack-module-federation-ssr-ts/rspack.config.ts__tmpl__

@@ -0,0 +1,69 @@
+import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
+import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
+import { NxModuleFederationPlugin, NxModuleFederationSSRDevServerPlugin } from '@nx/module-federation/rspack';
+import { join } from 'path';
+
+import browserMfConfig from './module-federation.config';
+import serverMfConfig from './module-federation.server.config';
+
+const browserRspackConfig = {
+  name: 'browser',
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    headers: {
+      "Access-Control-Allow-Origin": "*"
+    },
+    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 }),
+    ],
+};
+
+export default [browserRspackConfig, serverRspackConfig];

package/src/generators/remote/files/rspack-module-federation-ssr-ts/server.ts__tmpl__

@@ -7,8 +7,8 @@ import { handleRequest } from './src/main.server';
 const port = process.env['PORT'] || <%= port %>;
 const app = express();
 
-const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
-const serverDist = path.join(process.cwd(), '<%= serverBuildOutputPath %>');
+const browserDist = path.join(process.cwd(), '<%= rspackPluginOptions.outputPath %>', 'browser');
+const serverDist = path.join(process.cwd(), '<%= rspackPluginOptions.outputPath %>', 'server');
 const indexPath = path.join(browserDist, 'index.html');
 
 app.use(cors());

package/src/generators/remote/files/rspack-module-federation-ssr-ts/src/main.server.tsx__tmpl__

@@ -0,0 +1,45 @@
+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';
+
+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(<App />, {
+      [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/src/generators/remote/files/rspack-module-federation-ts/module-federation.config.ts__tmpl__

@@ -1,13 +1,16 @@
-import {ModuleFederationConfig} from '@nx/rspack/module-federation';
+import {ModuleFederationConfig} from '@nx/module-federation';
 
 const config: ModuleFederationConfig = {
-    name: '<%= projectName %>',
-    <% if (dynamic) { %>
-   library: { type: 'var', name: '<%= projectName %>'},
-   <% } %>
-    exposes: {
-        './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
-    },
+  name: '<%= projectName %>',
+  <%_ if (dynamic) { _%>
+  library: { type: 'var', name: '<%= projectName %>'},
+  <%_ } _%>
+  exposes: {
+    './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
+  },
 };
 
+/**
+* Nx requires a default export of the config to allow correct resolution of the module federation graph.
+**/
 export default config;