@nx/react 0.0.0-pr-30457-0ed97e4 → 0.0.0-pr-30516-4c8bfff

package/src/rules/update-module-federation-project.js

@@ -4,9 +4,23 @@ exports.updateModuleFederationProject = updateModuleFederationProject;
 const devkit_1 = require("@nx/devkit");
 const maybe_js_1 = require("../utils/maybe-js");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-function updateModuleFederationProject(host, options, isHost = false) {
+function updateModuleFederationProject(host, options) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
-    if (options.bundler !== 'rspack') {
+    if (options.bundler === 'rspack') {
+        projectConfig.targets.build.executor = '@nx/rspack:rspack';
+        projectConfig.targets.build.options = {
+            ...(projectConfig.targets.build.options ?? {}),
+            main: (0, maybe_js_1.maybeJs)({ js: options.js, useJsx: true }, `${options.appProjectRoot}/src/main.ts`),
+            rspackConfig: `${options.appProjectRoot}/rspack.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
+            target: 'web',
+        };
+        projectConfig.targets.build.configurations ??= {};
+        projectConfig.targets.build.configurations.production = {
+            ...(projectConfig.targets.build.configurations?.production ?? {}),
+            rspackConfig: `${options.appProjectRoot}/rspack.config.prod.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
+        };
+    }
+    else {
         projectConfig.targets.build.options = {
             ...(projectConfig.targets.build.options ?? {}),
             main: (0, maybe_js_1.maybeJs)(options, `${options.appProjectRoot}/src/main.ts`),
@@ -20,7 +34,15 @@ function updateModuleFederationProject(host, options, isHost = false) {
     }
     // If host should be configured to use dynamic federation
     if (options.dynamic) {
-        if (options.bundler !== 'rspack') {
+        if (options.bundler === 'rspack') {
+            const pathToProdRspackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `rspack.prod.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`);
+            if (host.exists(pathToProdRspackConfig)) {
+                host.delete(pathToProdRspackConfig);
+            }
+            delete projectConfig.targets.build.configurations.production
+                ?.rspackConfig;
+        }
+        else {
             const pathToProdWebpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.prod.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`);
             if (host.exists(pathToProdWebpackConfig)) {
                 host.delete(pathToProdWebpackConfig);
@@ -29,39 +51,36 @@ function updateModuleFederationProject(host, options, isHost = false) {
                 ?.webpackConfig;
         }
     }
-    if (options.bundler !== 'rspack') {
+    if (options.bundler === 'rspack') {
+        projectConfig.targets.serve.executor =
+            '@nx/rspack:module-federation-dev-server';
+    }
+    else {
         projectConfig.targets.serve.executor =
             '@nx/react:module-federation-dev-server';
     }
-    projectConfig.targets.serve ??= {};
-    projectConfig.targets.serve.options ??= {};
-    projectConfig.targets.serve.options.port =
-        options.bundler === 'rspack' && options.ssr && isHost
-            ? 4000
-            : options.devServerPort;
+    projectConfig.targets.serve.options.port = options.devServerPort;
     // `serve-static` for remotes that don't need to be in development mode
-    if (options.bundler !== 'rspack') {
-        const serveStaticExecutor = '@nx/react:module-federation-static-server';
-        projectConfig.targets['serve-static'] = {
-            executor: serveStaticExecutor,
-            defaultConfiguration: 'production',
-            options: {
-                serveTarget: `${options.projectName}:serve`,
+    const serveStaticExecutor = options.bundler === 'rspack'
+        ? '@nx/rspack:module-federation-static-server'
+        : '@nx/react:module-federation-static-server';
+    projectConfig.targets['serve-static'] = {
+        executor: serveStaticExecutor,
+        defaultConfiguration: 'production',
+        options: {
+            serveTarget: `${options.projectName}:serve`,
+        },
+        configurations: {
+            development: {
+                serveTarget: `${options.projectName}:serve:development`,
             },
-            configurations: {
-                development: {
-                    serveTarget: `${options.projectName}:serve:development`,
-                },
-                production: {
-                    serveTarget: `${options.projectName}:serve:production`,
-                },
+            production: {
+                serveTarget: `${options.projectName}:serve:production`,
             },
-        };
-    }
+        },
+    };
     // Typechecks must be performed first before build and serve to generate remote d.ts files.
     if ((0, ts_solution_setup_1.isUsingTsSolutionSetup)(host)) {
-        projectConfig.targets.build ??= {};
-        projectConfig.targets.serve ??= {};
         projectConfig.targets.build.dependsOn = ['^build', 'typecheck'];
         projectConfig.targets.serve.dependsOn = ['typecheck'];
     }

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

@@ -1,66 +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',
-  output: {
-    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
-    publicPath: 'auto'
-  },
-  devServer: {
-    port: <%= devServerPort %>,
-    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/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/src/generators/host/files/rspack-module-federation-ssr-ts/rspack.config.ts__tmpl__

@@ -1,66 +0,0 @@
-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 %>,
-    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/host/files/rspack-module-federation-ssr-ts/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/src/generators/host/lib/normalize-host-name.d.ts

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

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

@@ -1,12 +0,0 @@
-"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/remote/files/rspack-module-federation-ssr/rspack.config.js__tmpl__

@@ -1,69 +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',
-  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/src/main.server.tsx__tmpl__

@@ -1,45 +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';
-
-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/rspack.config.ts__tmpl__

@@ -1,69 +0,0 @@
-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/src/main.server.tsx__tmpl__

@@ -1,45 +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';
-
-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);
-      },
-    });
-  };
-}