npm - @nx/react - Versions diffs - 20.7.2 → 20.8.0-beta.0 - Mend

@nx/react 20.7.2 → 20.8.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/src/generators/host/files/rspack-module-federation-ssr-ts/src/main.server.tsx__tmpl__ ADDED Viewed

@@ -0,0 +1,49 @@
+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/src/generators/host/files/rspack-module-federation-ts/rspack.config.prod.ts__tmpl__ CHANGED Viewed

@@ -1,6 +1,8 @@
-import { composePlugins, withNx, withReact } from '@nx/rspack';
-import { withModuleFederation } from '@nx/module-federation/rspack';
+import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
+import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
+import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack';
 import { ModuleFederationConfig } from '@nx/module-federation';
+import { join } from 'path';
 import baseConfig from './module-federation.config';
@@ -30,10 +32,36 @@ const prodConfig: ModuleFederationConfig = {
 	],
 };
-// 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 for 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
- */
-export default composePlugins(withNx(), withReact(), withModuleFederation(prodConfig, { dts: false }));
+export default {
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    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/src/generators/host/files/rspack-module-federation-ts/rspack.config.ts__tmpl__ CHANGED Viewed

@@ -1,17 +1,40 @@
-import {composePlugins, withNx, withReact} from '@nx/rspack';
-import { withModuleFederation } from '@nx/module-federation/rspack';
-import { ModuleFederationConfig } from '@nx/module-federation';
+import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
+import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
+import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack';
+import { join } from 'path';
-import baseConfig from './module-federation.config';
+import config from './module-federation.config';
-const config: ModuleFederationConfig = {
-  ...baseConfig,
+export default {
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    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 for 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
- */
-export default composePlugins(withNx(), withReact(), withModuleFederation(config, { dts: false }));

package/src/generators/host/host.js CHANGED Viewed

@@ -16,11 +16,14 @@ const js_1 = require("@nx/js");
 const versions_1 = require("../../utils/versions");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const update_module_federation_tsconfig_1 = require("./lib/update-module-federation-tsconfig");
+const normalize_host_name_1 = require("./lib/normalize-host-name");
 async function hostGenerator(host, schema) {
     const tasks = [];
+    const name = await (0, normalize_host_name_1.normalizeHostName)(host, schema.directory, schema.name);
     const options = {
         ...(await (0, normalize_options_1.normalizeOptions)(host, {
             ...schema,
+            name,
             useProjectJson: true,
         })),
         js: schema.js ?? false,
@@ -28,8 +31,8 @@ async function hostGenerator(host, schema) {
             ? false
             : schema.typescriptConfiguration ?? true,
         dynamic: schema.dynamic ?? false,
-        // TODO(colum): remove when MF works with Crystal
-        addPlugin: false,
+        // TODO(colum): remove when Webpack MF works with Crystal
+        addPlugin: !schema.bundler || schema.bundler === 'rspack' ? true : false,
         bundler: schema.bundler ?? 'rspack',
     };
     // Check to see if remotes are provided and also check if --dynamic is provided
@@ -81,25 +84,22 @@ async function hostGenerator(host, schema) {
         }
     }
     (0, add_module_federation_files_1.addModuleFederationFiles)(host, options, remotesWithPorts);
-    (0, update_module_federation_project_1.updateModuleFederationProject)(host, options);
+    (0, update_module_federation_project_1.updateModuleFederationProject)(host, options, true);
     (0, update_module_federation_e2e_project_1.updateModuleFederationE2eProject)(host, options);
     (0, update_module_federation_tsconfig_1.updateModuleFederationTsconfig)(host, options);
     if (options.ssr) {
-        const setupSsrTask = await (0, setup_ssr_1.default)(host, {
-            project: options.projectName,
-            serverPort: options.devServerPort,
-            skipFormat: true,
-        });
-        tasks.push(setupSsrTask);
+        if (options.bundler !== 'rspack') {
+            const setupSsrTask = await (0, setup_ssr_1.default)(host, {
+                project: options.projectName,
+                serverPort: options.devServerPort,
+                skipFormat: true,
+            });
+            tasks.push(setupSsrTask);
+        }
         const setupSsrForHostTask = await (0, setup_ssr_for_host_1.setupSsrForHost)(host, options, options.projectName, remotesWithPorts);
         tasks.push(setupSsrForHostTask);
         const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
-        if (options.bundler === 'rspack') {
-            projectConfig.targets.server.executor = '@nx/rspack:rspack';
-            projectConfig.targets.server.options.rspackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `rspack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
-            delete projectConfig.targets.server.options.webpackConfig;
-        }
-        else {
+        if (options.bundler !== 'rspack') {
             projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
         }
         (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);

package/src/generators/host/lib/add-module-federation-files.js CHANGED Viewed

@@ -3,19 +3,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addModuleFederationFiles = addModuleFederationFiles;
 const devkit_1 = require("@nx/devkit");
 const maybe_js_1 = require("../../../utils/maybe-js");
+const create_application_files_1 = require("../../application/lib/create-application-files");
 function addModuleFederationFiles(host, options, defaultRemoteManifest) {
-    const templateVariables = {
-        ...(0, devkit_1.names)(options.projectName),
-        ...options,
-        static: !options?.dynamic,
-        tmpl: '',
-        remotes: defaultRemoteManifest.map(({ name, port }) => {
-            return {
-                ...(0, devkit_1.names)(name),
-                port,
-            };
-        }),
-    };
+    const templateVariables = options.bundler === 'rspack'
+        ? {
+            ...(0, create_application_files_1.getDefaultTemplateVariables)(host, options),
+            rspackPluginOptions: {
+                ...(0, create_application_files_1.createNxRspackPluginOptions)(options, (0, devkit_1.offsetFromRoot)(options.appProjectRoot), false),
+                mainServer: `./server.ts`,
+            },
+            static: !options?.dynamic,
+            remotes: defaultRemoteManifest.map(({ name, port }) => {
+                return {
+                    ...(0, devkit_1.names)(name),
+                    port,
+                };
+            }),
+        }
+        : {
+            ...(0, devkit_1.names)(options.projectName),
+            ...options,
+            static: !options?.dynamic,
+            tmpl: '',
+            remotes: defaultRemoteManifest.map(({ name, port }) => {
+                return {
+                    ...(0, devkit_1.names)(name),
+                    port,
+                };
+            }),
+        };
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
     const pathToMFManifest = (0, devkit_1.joinPathFragments)(projectConfig.sourceRoot, 'assets/module-federation.manifest.json');
     // Module federation requires bootstrap code to be dynamically imported.

package/src/generators/host/lib/normalize-host-name.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { Tree } from '@nx/devkit';
2	+ export declare function normalizeHostName(tree: Tree, directory: string, name?: string): Promise<string>;

package/src/generators/host/lib/normalize-host-name.js ADDED Viewed

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeHostName = normalizeHostName;
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+async function normalizeHostName(tree, directory, name) {
+    const { projectName } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
+        name,
+        directory,
+        projectType: 'application',
+    });
+    return projectName;
+}

package/src/generators/host/lib/setup-ssr-for-host.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import type { GeneratorCallback, Tree } from '@nx/devkit';
-import type { Schema } from '../schema';
-export declare function setupSsrForHost(tree: Tree, options: Schema, appName: string, defaultRemoteManifest: {
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import type { NormalizedSchema } from '../schema';
+export declare function setupSsrForHost(tree: Tree, options: NormalizedSchema, appName: string, defaultRemoteManifest: {
     name: string;
     port: number;
 }[]): Promise<GeneratorCallback>;

package/src/generators/host/lib/setup-ssr-for-host.js CHANGED Viewed

@@ -2,35 +2,59 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupSsrForHost = setupSsrForHost;
 const devkit_1 = require("@nx/devkit");
+const devkit_2 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
+const create_application_files_1 = require("../../application/lib/create-application-files");
 async function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
     const tasks = [];
-    let project = (0, devkit_1.readProjectConfiguration)(tree, appName);
-    project.targets.serve.executor =
-        options.bundler === 'rspack'
-            ? '@nx/rspack:module-federation-ssr-dev-server'
-            : '@nx/react:module-federation-ssr-dev-server';
-    (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
+    let project = (0, devkit_2.readProjectConfiguration)(tree, appName);
+    if (options.bundler !== 'rspack') {
+        project.targets.serve.executor =
+            '@nx/react:module-federation-ssr-dev-server';
+        (0, devkit_2.updateProjectConfiguration)(tree, appName, project);
+    }
     const pathToModuleFederationSsrFiles = options.typescriptConfiguration
         ? `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr-ts`
         : `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr`;
-    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, {
-        ...options,
-        static: !options?.dynamic,
-        port: Number(options?.devServerPort) || 4200,
-        remotes: defaultRemoteManifest.map(({ name, port }) => {
-            return {
-                ...(0, devkit_1.names)(name),
-                port,
-            };
-        }),
-        appName,
-        tmpl: '',
-        browserBuildOutputPath: project.targets.build.options.outputPath,
-    });
-    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
+    const templateVariables = options.bundler === 'rspack'
+        ? {
+            ...(0, create_application_files_1.getDefaultTemplateVariables)(tree, options),
+            rspackPluginOptions: {
+                ...(0, create_application_files_1.createNxRspackPluginOptions)(options, (0, devkit_1.offsetFromRoot)(options.appProjectRoot), false),
+                mainServer: `./server.ts`,
+            },
+            port: Number(options?.devServerPort) || 4200,
+            appName,
+            static: !options?.dynamic,
+            remotes: defaultRemoteManifest.map(({ name, port }) => {
+                return {
+                    ...(0, devkit_2.names)(name),
+                    port,
+                };
+            }),
+        }
+        : {
+            ...options,
+            static: !options?.dynamic,
+            port: Number(options?.devServerPort) || 4200,
+            appName,
+            tmpl: '',
+            browserBuildOutputPath: project.targets.build?.options?.outputPath,
+            remotes: defaultRemoteManifest.map(({ name, port }) => {
+                return {
+                    ...(0, devkit_2.names)(name),
+                    port,
+                };
+            }),
+        };
+    (0, devkit_2.generateFiles)(tree, (0, devkit_2.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, templateVariables);
+    const installTask = (0, devkit_2.addDependenciesToPackageJson)(tree, {
         '@module-federation/node': versions_1.moduleFederationNodeVersion,
+        cors: versions_1.corsVersion,
+        isbot: versions_1.isbotVersion,
+        express: versions_1.expressVersion,
+        '@types/express': versions_1.typesExpressVersion,
     }, {});
     tasks.push(installTask);
-    return (0, devkit_1.runTasksInSerial)(...tasks);
+    return (0, devkit_2.runTasksInSerial)(...tasks);
 }

package/src/generators/library/library.js CHANGED Viewed

@@ -2,28 +2,29 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.libraryGenerator = libraryGenerator;
 exports.libraryGeneratorInternal = libraryGeneratorInternal;
-const path_1 = require("path");
 const devkit_1 = require("@nx/devkit");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 const js_1 = require("@nx/js");
-const versions_1 = require("../../utils/versions");
+const path_1 = require("path");
+const add_release_config_1 = require("@nx/js/src/generators/library/utils/add-release-config");
+const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const use_legacy_versioning_1 = require("nx/src/command-line/release/config/use-legacy-versioning");
+const create_ts_config_1 = require("../../utils/create-ts-config");
+const jest_utils_1 = require("../../utils/jest-utils");
 const maybe_js_1 = require("../../utils/maybe-js");
+const versions_1 = require("../../utils/versions");
 const component_1 = require("../component/component");
 const init_1 = require("../init/init");
-const jest_utils_1 = require("../../utils/jest-utils");
-const normalize_options_1 = require("./lib/normalize-options");
-const add_rollup_build_target_1 = require("./lib/add-rollup-build-target");
 const add_linting_1 = require("./lib/add-linting");
-const update_app_routes_1 = require("./lib/update-app-routes");
+const add_rollup_build_target_1 = require("./lib/add-rollup-build-target");
 const create_files_1 = require("./lib/create-files");
-const create_ts_config_1 = require("../../utils/create-ts-config");
+const determine_entry_fields_1 = require("./lib/determine-entry-fields");
 const install_common_dependencies_1 = require("./lib/install-common-dependencies");
+const normalize_options_1 = require("./lib/normalize-options");
 const set_defaults_1 = require("./lib/set-defaults");
-const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-const determine_entry_fields_1 = require("./lib/determine-entry-fields");
-const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
-const add_release_config_1 = require("@nx/js/src/generators/library/utils/add-release-config");
+const update_app_routes_1 = require("./lib/update-app-routes");
 async function libraryGenerator(host, schema) {
     return await libraryGeneratorInternal(host, {
         addPlugin: false,
@@ -196,7 +197,8 @@ async function libraryGeneratorInternal(host, schema) {
             await (0, add_release_config_1.addReleaseConfigForTsSolution)(host, options.name, projectConfiguration);
         }
         else {
-            await (0, add_release_config_1.addReleaseConfigForNonTsSolution)(host, options.name, projectConfiguration);
+            const nxJson = (0, devkit_1.readNxJson)(host);
+            await (0, add_release_config_1.addReleaseConfigForNonTsSolution)((0, use_legacy_versioning_1.shouldUseLegacyVersioning)(nxJson.release), host, options.name, projectConfiguration);
         }
         (0, devkit_1.updateProjectConfiguration)(host, options.name, projectConfiguration);
         tasks.push(await (0, add_release_config_1.releaseTasks)(host));

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

@@ -1,16 +1,43 @@
-const { composePlugins, withNx, withReact } = require('@nx/rspack');
-const { withModuleFederation } = require('@nx/module-federation/rspack');
+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__ CHANGED Viewed

@@ -6,4 +6,10 @@ module.exports = {
   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__ ADDED Viewed

@@ -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__ CHANGED Viewed

@@ -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__ ADDED Viewed

@@ -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__ CHANGED Viewed

@@ -5,6 +5,12 @@ const config: ModuleFederationConfig = {
   exposes: {
       './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
   },
+  shared: (libraryName, libraryConfig) => {
+      return {
+        ...libraryConfig,
+        eager: true
+      }
+    },
 };
 /**