@nx/react 19.7.0-canary.20240906-a3c2db8 → 19.7.0

package/src/generators/remote/files/webpack-module-federation-ts/tsconfig.lint.json__tmpl__

@@ -0,0 +1,19 @@
+{
+  "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/src/generators/remote/lib/setup-ssr-for-remote.js

@@ -7,8 +7,8 @@ async function setupSsrForRemote(tree, options, appName) {
     const tasks = [];
     const project = (0, devkit_1.readProjectConfiguration)(tree, appName);
     const pathToModuleFederationSsrFiles = options.typescriptConfiguration
-        ? 'module-federation-ssr-ts'
-        : 'module-federation-ssr';
+        ? `${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,
         port: Number(options?.devServerPort) || 4200,

package/src/generators/remote/lib/update-host-with-remote.js

@@ -40,11 +40,15 @@ function findAppComponentPath(host, sourceRoot) {
         'app/app.tsx',
         'app/App.tsx',
         'app/app.js',
+        'app/app.jsx',
         'app/App.js',
+        'app/App.jsx',
         'app.tsx',
         'App.tsx',
         'app.js',
         'App.js',
+        'app.jsx',
+        'App.jsx',
     ];
     for (const loc of locations) {
         if (host.exists((0, devkit_1.joinPathFragments)(sourceRoot, loc))) {

package/src/generators/remote/remote.js

@@ -23,16 +23,22 @@ function addModuleFederationFiles(host, options) {
         ...options,
         tmpl: '',
     };
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/${options.js ? 'common' : 'common-ts'}`), options.appProjectRoot, templateVariables);
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/${options.js
+        ? options.bundler === 'rspack'
+            ? 'rspack-common'
+            : 'common'
+        : 'common-ts'}`), options.appProjectRoot, templateVariables);
     const pathToModuleFederationFiles = options.typescriptConfiguration
-        ? 'module-federation-ts'
-        : 'module-federation';
+        ? `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ts`
+        : `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation`;
     (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/${pathToModuleFederationFiles}`), options.appProjectRoot, templateVariables);
     if (options.typescriptConfiguration) {
-        const pathToWebpackConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.js');
-        const pathToWebpackProdConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.prod.js');
-        if (host.exists(pathToWebpackConfig)) {
-            host.delete(pathToWebpackConfig);
+        const pathToBundlerConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, options.bundler === 'rspack' ? 'rspack.config.js' : 'webpack.config.js');
+        const pathToWebpackProdConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, options.bundler === 'rspack'
+            ? 'rspack.config.prod.js'
+            : 'webpack.config.prod.js');
+        if (host.exists(pathToBundlerConfig)) {
+            host.delete(pathToBundlerConfig);
         }
         if (host.exists(pathToWebpackProdConfig)) {
             host.delete(pathToWebpackProdConfig);
@@ -57,6 +63,7 @@ async function remoteGeneratorInternal(host, schema) {
         dynamic: schema.dynamic ?? false,
         // TODO(colum): remove when MF works with Crystal
         addPlugin: false,
+        bundler: schema.bundler ?? 'rspack',
     };
     if (options.dynamic) {
         // Dynamic remotes generate with library { type: 'var' } by default.
@@ -68,8 +75,6 @@ async function remoteGeneratorInternal(host, schema) {
     }
     const initAppTask = await (0, application_1.default)(host, {
         ...options,
-        // Only webpack works with module federation for now.
-        bundler: 'webpack',
         skipFormat: true,
     });
     tasks.push(initAppTask);
@@ -79,7 +84,7 @@ async function remoteGeneratorInternal(host, schema) {
     // Module federation requires bootstrap code to be dynamically imported.
     // Renaming original entry file so we can use `import(./bootstrap)` in
     // new entry file.
-    host.rename((0, path_1.join)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, 'src/main.tsx')), (0, path_1.join)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, 'src/bootstrap.tsx')));
+    host.rename((0, path_1.join)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({ js: options.js, useJsx: options.bundler === 'rspack' }, 'src/main.tsx')), (0, path_1.join)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({ js: options.js, useJsx: options.bundler === 'rspack' }, 'src/bootstrap.tsx')));
     addModuleFederationFiles(host, options);
     (0, update_module_federation_project_1.updateModuleFederationProject)(host, options);
     (0, setup_tspath_for_remote_1.setupTspathForRemote)(host, options);
@@ -88,12 +93,20 @@ async function remoteGeneratorInternal(host, schema) {
             project: options.projectName,
             serverPort: options.devServerPort,
             skipFormat: true,
+            bundler: options.bundler,
         });
         tasks.push(setupSsrTask);
         const setupSsrForRemoteTask = await (0, setup_ssr_for_remote_1.setupSsrForRemote)(host, options, options.projectName);
         tasks.push(setupSsrForRemoteTask);
         const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
-        projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
+        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 {
+            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);
     }
     if (!options.setParserOptionsProject) {

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

@@ -28,6 +28,7 @@ export interface Schema {
   unitTestRunner: 'jest' | 'vitest' | 'none';
   typescriptConfiguration?: boolean;
   dynamic?: boolean;
+  bundler?: 'rspack' | 'webpack';
 }
 
 export interface NormalizedSchema extends ApplicationNormalizedSchema {

package/src/generators/remote/schema.json

@@ -182,6 +182,14 @@
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
+    },
+    "bundler": {
+      "description": "The bundler to use.",
+      "type": "string",
+      "enum": ["rspack", "webpack"],
+      "x-prompt": "Which bundler do you want to use to build the application?",
+      "default": "rspack",
+      "x-priority": "important"
     }
   },
   "required": ["name"],

package/src/generators/setup-ssr/schema.d.ts

@@ -4,4 +4,5 @@ export interface Schema {
   serverPort?: number;
   skipFormat?: boolean;
   extraInclude?: string[];
+  bundler?: 'rspack' | 'webpack';
 }

package/src/generators/setup-ssr/schema.json

@@ -41,6 +41,12 @@
       "hidden": true,
       "description": "Extra include entries in tsconfig.",
       "default": []
+    },
+    "bundler": {
+      "description": "The bundler to use.",
+      "type": "string",
+      "enum": ["rspack", "webpack"],
+      "default": "webpack"
     }
   },
   "required": ["project"],

package/src/generators/setup-ssr/setup-ssr.js

@@ -69,7 +69,9 @@ async function setupSsrGenerator(tree, options) {
         ...projectConfig.targets,
         server: {
             dependsOn: ['build'],
-            executor: '@nx/webpack:webpack',
+            executor: options.bundler === 'rspack'
+                ? '@nx/rspack:rspack'
+                : '@nx/webpack:webpack',
             outputs: ['{options.outputPath}'],
             defaultConfiguration: 'production',
             options: {
@@ -81,7 +83,11 @@ async function setupSsrGenerator(tree, options) {
                 compiler: 'babel',
                 externalDependencies: 'all',
                 outputHashing: 'none',
-                webpackConfig: (0, devkit_1.joinPathFragments)(projectRoot, 'webpack.config.js'),
+                ...(options.bundler === 'rspack'
+                    ? { rspackConfig: (0, devkit_1.joinPathFragments)(projectRoot, 'rspack.config.js') }
+                    : {
+                        webpackConfig: (0, devkit_1.joinPathFragments)(projectRoot, 'webpack.config.js'),
+                    }),
             },
             configurations: {
                 development: {
@@ -117,7 +123,9 @@ async function setupSsrGenerator(tree, options) {
             },
         },
         serve: {
-            executor: '@nx/webpack:ssr-dev-server',
+            executor: options.bundler === 'rspack'
+                ? '@nx/rspack:ssr-dev-server'
+                : '@nx/webpack:ssr-dev-server',
             defaultConfiguration: 'development',
             options: {
                 browserTarget: `${options.project}:build:development`,

package/src/module-federation/utils.js

@@ -69,7 +69,7 @@ async function getModuleFederationConfig(mfConfig, options = { isServer: false }
     let mappedRemotes = {};
     if (mfConfig.remotes && mfConfig.remotes.length > 0) {
         const isLibraryTypeVar = mfConfig.library?.type === 'var';
-        mappedRemotes = mapRemotesFunction(mfConfig.remotes, 'js', determineRemoteUrlFunction, isLibraryTypeVar);
+        mappedRemotes = mapRemotesFunction(mfConfig.remotes, 'js', determineRemoteUrlFunction, true);
     }
     return { sharedLibraries, sharedDependencies, mappedRemotes };
 }

package/src/module-federation/with-module-federation.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederation = withModuleFederation;
 const utils_1 = require("./utils");
 const webpack_1 = require("@module-federation/enhanced/webpack");
-const isVarOrWindow = (libType) => libType === 'var' || libType === 'window';
 /**
  * @param {ModuleFederationConfig} options
  * @return {Promise<AsyncNxComposableWebpackPlugin>}
@@ -13,13 +12,10 @@ async function withModuleFederation(options, configOverride) {
         return (config) => config;
     }
     const { sharedDependencies, sharedLibraries, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options);
-    const isGlobal = isVarOrWindow(options.library?.type);
     return (config, ctx) => {
         config.output.uniqueName = options.name;
         config.output.publicPath = 'auto';
-        if (isGlobal) {
-            config.output.scriptType = 'text/javascript';
-        }
+        config.output.scriptType = 'text/javascript';
         config.optimization = {
             ...(config.optimization ?? {}),
             runtimeChunk: false,
@@ -29,13 +25,8 @@ async function withModuleFederation(options, configOverride) {
             !options.exposes) {
             config.optimization.runtimeChunk = 'single';
         }
-        config.experiments = {
-            ...config.experiments,
-            outputModule: !isGlobal,
-        };
         config.plugins.push(new webpack_1.ModuleFederationPlugin({
             name: options.name,
-            library: options.library ?? { type: 'module' },
             filename: 'remoteEntry.js',
             exposes: options.exposes,
             remotes: mappedRemotes,
@@ -48,7 +39,7 @@ async function withModuleFederation(options, configOverride) {
              *  { appX: 'appX@http://localhost:3001/remoteEntry.js' }
              *  { appY: 'appY@http://localhost:3002/remoteEntry.js' }
              */
-            ...(isGlobal ? { remoteType: 'script' } : {}),
+            remoteType: 'script',
             /**
              * Apply user-defined config overrides
              */

package/src/rules/update-module-federation-project.d.ts

@@ -1,4 +1,4 @@
-import { GeneratorCallback, Tree } from '@nx/devkit';
+import { Tree } from '@nx/devkit';
 export declare function updateModuleFederationProject(host: Tree, options: {
     js?: boolean;
     projectName: string;
@@ -6,4 +6,5 @@ export declare function updateModuleFederationProject(host: Tree, options: {
     devServerPort?: number;
     typescriptConfiguration?: boolean;
     dynamic?: boolean;
-}): GeneratorCallback;
+    bundler?: 'rspack' | 'webpack';
+}): void;

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

@@ -2,48 +2,79 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateModuleFederationProject = updateModuleFederationProject;
 const devkit_1 = require("@nx/devkit");
-const versions_1 = require("../utils/versions");
 const maybe_js_1 = require("../utils/maybe-js");
 function updateModuleFederationProject(host, options) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
-    projectConfig.targets.build.options = {
-        ...projectConfig.targets.build.options,
-        main: (0, maybe_js_1.maybeJs)(options, `${options.appProjectRoot}/src/main.ts`),
-        webpackConfig: `${options.appProjectRoot}/webpack.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
-    };
-    projectConfig.targets.build.configurations.production = {
-        ...projectConfig.targets.build.configurations.production,
-        webpackConfig: `${options.appProjectRoot}/webpack.config.prod.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
-    };
+    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.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`),
+            webpackConfig: `${options.appProjectRoot}/webpack.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
+        };
+        projectConfig.targets.build.configurations.production = {
+            ...projectConfig.targets.build.configurations.production,
+            webpackConfig: `${options.appProjectRoot}/webpack.config.prod.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
+        };
+    }
     // If host should be configured to use dynamic federation
     if (options.dynamic) {
-        const pathToProdWebpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.prod.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`);
-        if (host.exists(pathToProdWebpackConfig)) {
-            host.delete(pathToProdWebpackConfig);
+        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;
         }
-        delete projectConfig.targets.build.configurations.production?.webpackConfig;
+        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);
+            }
+            delete projectConfig.targets.build.configurations.production
+                ?.webpackConfig;
+        }
+    }
+    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.executor =
-        '@nx/react:module-federation-dev-server';
     projectConfig.targets.serve.options.port = options.devServerPort;
     // `serve-static` for remotes that don't need to be in development mode
+    const serveStaticExecutor = options.bundler === 'rspack'
+        ? '@nx/rspack:module-federation-static-server'
+        : '@nx/react:module-federation-static-server';
     projectConfig.targets['serve-static'] = {
-        executor: '@nx/web:file-server',
+        executor: serveStaticExecutor,
         defaultConfiguration: 'production',
         options: {
-            buildTarget: `${options.projectName}:build`,
-            watch: false,
-            port: options.devServerPort,
+            serveTarget: `${options.projectName}:serve`,
         },
         configurations: {
             development: {
-                buildTarget: `${options.projectName}:build:development`,
+                serveTarget: `${options.projectName}:serve:development`,
             },
             production: {
-                buildTarget: `${options.projectName}:build:production`,
+                serveTarget: `${options.projectName}:serve:production`,
             },
         },
     };
     (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
-    return (0, devkit_1.addDependenciesToPackageJson)(host, {}, { '@nx/web': versions_1.nxVersion });
 }

package/src/utils/build-static.remotes.d.ts

@@ -0,0 +1,4 @@
+import type { StaticRemotesConfig } from '@nx/webpack/src/utils/module-federation/parse-static-remotes-config';
+import { ExecutorContext } from '@nx/devkit';
+import { ModuleFederationDevServerOptions } from '../executors/module-federation-dev-server/schema';
+export declare function buildStaticRemotes(staticRemotesConfig: StaticRemotesConfig, nxBin: any, context: ExecutorContext, options: ModuleFederationDevServerOptions): Promise<Record<string, string>>;

package/src/utils/build-static.remotes.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildStaticRemotes = buildStaticRemotes;
+const logger_1 = require("nx/src/utils/logger");
+const node_child_process_1 = require("node:child_process");
+const path_1 = require("path");
+const cache_directory_1 = require("nx/src/utils/cache-directory");
+const fs_1 = require("fs");
+async function buildStaticRemotes(staticRemotesConfig, nxBin, context, options) {
+    if (!staticRemotesConfig.remotes.length) {
+        return;
+    }
+    logger_1.logger.info(`NX Building ${staticRemotesConfig.remotes.length} static remotes...`);
+    const mappedLocationOfRemotes = {};
+    for (const app of staticRemotesConfig.remotes) {
+        mappedLocationOfRemotes[app] = `http${options.ssl ? 's' : ''}://${options.host}:${options.staticRemotesPort}/${staticRemotesConfig.config[app].urlSegment}`;
+    }
+    await new Promise((res, rej) => {
+        const staticProcess = (0, node_child_process_1.fork)(nxBin, [
+            'run-many',
+            `--target=build`,
+            `--projects=${staticRemotesConfig.remotes.join(',')}`,
+            ...(context.configurationName
+                ? [`--configuration=${context.configurationName}`]
+                : []),
+            ...(options.parallel ? [`--parallel=${options.parallel}`] : []),
+        ], {
+            cwd: context.root,
+            stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
+        });
+        // File to debug build failures e.g. 2024-01-01T00_00_0_0Z-build.log'
+        const remoteBuildLogFile = (0, path_1.join)(cache_directory_1.workspaceDataDirectory, `${new Date().toISOString().replace(/[:\.]/g, '_')}-build.log`);
+        const stdoutStream = (0, fs_1.createWriteStream)(remoteBuildLogFile);
+        staticProcess.stdout.on('data', (data) => {
+            const ANSII_CODE_REGEX = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
+            const stdoutString = data.toString().replace(ANSII_CODE_REGEX, '');
+            stdoutStream.write(stdoutString);
+            // in addition to writing into the stdout stream, also show error directly in console
+            // so the error is easily discoverable. 'ERROR in' is the key word to search in webpack output.
+            if (stdoutString.includes('ERROR in')) {
+                logger_1.logger.log(stdoutString);
+            }
+            if (stdoutString.includes('Successfully ran target build')) {
+                staticProcess.stdout.removeAllListeners('data');
+                logger_1.logger.info(`NX Built ${staticRemotesConfig.remotes.length} static remotes`);
+                res();
+            }
+        });
+        staticProcess.stderr.on('data', (data) => logger_1.logger.info(data.toString()));
+        staticProcess.once('exit', (code) => {
+            stdoutStream.end();
+            staticProcess.stdout.removeAllListeners('data');
+            staticProcess.stderr.removeAllListeners('data');
+            if (code !== 0) {
+                rej(`Remote failed to start. A complete log can be found in: ${remoteBuildLogFile}`);
+            }
+            else {
+                res();
+            }
+        });
+        process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
+        process.on('exit', () => staticProcess.kill('SIGTERM'));
+    });
+    return mappedLocationOfRemotes;
+}

package/src/utils/maybe-js.d.ts

@@ -1,3 +1,4 @@
 export declare function maybeJs(options: {
     js?: boolean;
+    useJsx?: boolean;
 }, path: string): string;

package/src/utils/maybe-js.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.maybeJs = maybeJs;
 function maybeJs(options, path) {
     return options.js && (path.endsWith('.ts') || path.endsWith('.tsx'))
-        ? path.replace(/\.tsx?$/, '.js')
+        ? path.replace(/\.tsx?$/, options.useJsx ? '.jsx' : '.js')
         : path;
 }