@nx/react 0.0.0-pr-27696-37f7ce3 → 0.0.0-pr-27404-ad15a9c

package/executors.json

@@ -9,6 +9,11 @@
       "implementation": "./src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl",
       "schema": "./src/executors/module-federation-ssr-dev-server/schema.json",
       "description": "Serve a host application along with it's known remotes."
+    },
+    "module-federation-static-server": {
+      "implementation": "./src/executors/module-federation-static-server/module-federation-static-server.impl",
+      "schema": "./src/executors/module-federation-static-server/schema.json",
+      "description": "Serve a host and its remotes statically."
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "0.0.0-pr-27696-37f7ce3",
+  "version": "0.0.0-pr-27404-ad15a9c",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Vitest, Playwright, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -39,11 +39,13 @@
     "minimatch": "9.0.3",
     "tslib": "^2.3.0",
     "@module-federation/enhanced": "~0.6.0",
-    "@nx/devkit": "0.0.0-pr-27696-37f7ce3",
-    "@nx/js": "0.0.0-pr-27696-37f7ce3",
-    "@nx/eslint": "0.0.0-pr-27696-37f7ce3",
-    "@nx/web": "0.0.0-pr-27696-37f7ce3",
-    "@nrwl/react": "0.0.0-pr-27696-37f7ce3"
+    "@nx/devkit": "0.0.0-pr-27404-ad15a9c",
+    "@nx/js": "0.0.0-pr-27404-ad15a9c",
+    "@nx/eslint": "0.0.0-pr-27404-ad15a9c",
+    "@nx/web": "0.0.0-pr-27404-ad15a9c",
+    "express": "^4.19.2",
+    "http-proxy-middleware": "^3.0.0",
+    "@nrwl/react": "0.0.0-pr-27404-ad15a9c"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.d.ts

@@ -1,19 +1,6 @@
 import { ExecutorContext } from '@nx/devkit';
-import { WebDevServerOptions } from '@nx/webpack/src/executors/dev-server/schema';
-type ModuleFederationDevServerOptions = WebDevServerOptions & {
-    devRemotes?: (string | {
-        remoteName: string;
-        configuration: string;
-    })[];
-    skipRemotes?: string[];
-    static?: boolean;
-    isInitialHost?: boolean;
-    parallel?: number;
-    staticRemotesPort?: number;
-    pathToManifestFile?: string;
-};
+import { ModuleFederationDevServerOptions } from './schema';
 export default function moduleFederationDevServer(options: ModuleFederationDevServerOptions, context: ExecutorContext): AsyncIterableIterator<{
     success: boolean;
     baseUrl?: string;
 }>;
-export {};

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -7,12 +7,11 @@ const file_server_impl_1 = require("@nx/web/src/executors/file-server/file-serve
 const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
 const async_iterable_1 = require("@nx/devkit/src/utils/async-iterable");
 const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
-const cache_directory_1 = require("nx/src/utils/cache-directory");
-const node_child_process_1 = require("node:child_process");
 const fs_1 = require("fs");
 const path_1 = require("path");
 const start_remote_proxies_1 = require("@nx/webpack/src/utils/module-federation/start-remote-proxies");
 const parse_static_remotes_config_1 = require("@nx/webpack/src/utils/module-federation/parse-static-remotes-config");
+const build_static_remotes_1 = require("../../utils/build-static.remotes");
 function getBuildOptions(buildTarget, context) {
     const target = (0, devkit_1.parseTargetString)(buildTarget, context);
     const buildOptions = (0, devkit_1.readTargetOptions)(target, context);
@@ -92,63 +91,6 @@ async function startRemotes(remotes, context, options, target = 'serve') {
     }
     return remoteIters;
 }
-async function buildStaticRemotes(staticRemotesConfig, nxBin, context, options) {
-    if (!staticRemotesConfig.remotes.length) {
-        return;
-    }
-    devkit_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')) {
-                devkit_1.logger.log(stdoutString);
-            }
-            if (stdoutString.includes('Successfully ran target build')) {
-                staticProcess.stdout.removeAllListeners('data');
-                devkit_1.logger.info(`NX Built ${staticRemotesConfig.remotes.length} static remotes`);
-                res();
-            }
-        });
-        staticProcess.stderr.on('data', (data) => devkit_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;
-}
 async function* moduleFederationDevServer(options, context) {
     // Force Node to resolve to look for the nx binary that is inside node_modules
     const nxBin = require.resolve('nx/bin/nx');
@@ -192,7 +134,7 @@ async function* moduleFederationDevServer(options, context) {
         p.name,
     ]);
     const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
-    const mappedLocationsOfStaticRemotes = await buildStaticRemotes(staticRemotesConfig, nxBin, context, options);
+    const mappedLocationsOfStaticRemotes = await (0, build_static_remotes_1.buildStaticRemotes)(staticRemotesConfig, nxBin, context, options);
     const devRemoteIters = await startRemotes(remotes.devRemotes, context, options, 'serve');
     const staticRemotesIter = startStaticRemotesFileServer(staticRemotesConfig, context, options);
     (0, start_remote_proxies_1.startRemoteProxies)(staticRemotesConfig, mappedLocationsOfStaticRemotes, options.ssl

package/src/executors/module-federation-dev-server/schema.d.ts

@@ -0,0 +1,17 @@
+import { WebDevServerOptions } from '@nx/webpack';
+
+export type ModuleFederationDevServerOptions = WebDevServerOptions & {
+  devRemotes?: (
+    | string
+    | {
+        remoteName: string;
+        configuration: string;
+      }
+  )[];
+  skipRemotes?: string[];
+  static?: boolean;
+  isInitialHost?: boolean;
+  parallel?: number;
+  staticRemotesPort?: number;
+  pathToManifestFile?: string;
+};

package/src/executors/module-federation-static-server/module-federation-static-server.impl.d.ts

@@ -0,0 +1,12 @@
+import { ModuleFederationStaticServerSchema } from './schema';
+import { ModuleFederationDevServerOptions } from '../module-federation-dev-server/schema';
+import { ExecutorContext } from 'nx/src/config/misc-interfaces';
+import { StaticRemotesConfig } from '@nx/webpack/src/utils/module-federation/parse-static-remotes-config';
+export declare function startProxies(staticRemotesConfig: StaticRemotesConfig, hostServeOptions: ModuleFederationDevServerOptions, mappedLocationOfHost: string, mappedLocationsOfRemotes: Record<string, string>, sslOptions?: {
+    pathToCert: string;
+    pathToKey: string;
+}): void;
+export default function moduleFederationStaticServer(schema: ModuleFederationStaticServerSchema, context: ExecutorContext): AsyncGenerator<{
+    success: boolean;
+    baseUrl: string;
+}, any, unknown>;

package/src/executors/module-federation-static-server/module-federation-static-server.impl.js

@@ -0,0 +1,240 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startProxies = startProxies;
+exports.default = moduleFederationStaticServer;
+const path_1 = require("path");
+const devkit_1 = require("@nx/devkit");
+const fs_1 = require("fs");
+const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
+const parse_static_remotes_config_1 = require("@nx/webpack/src/utils/module-federation/parse-static-remotes-config");
+const build_static_remotes_1 = require("../../utils/build-static.remotes");
+const child_process_1 = require("child_process");
+const process = require("node:process");
+const file_server_impl_1 = require("@nx/web/src/executors/file-server/file-server.impl");
+const async_iterable_1 = require("@nx/devkit/src/utils/async-iterable");
+const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
+function getBuildAndServeOptionsFromServeTarget(serveTarget, context) {
+    const target = (0, devkit_1.parseTargetString)(serveTarget, context);
+    const serveOptions = (0, devkit_1.readTargetOptions)(target, context);
+    const buildTarget = (0, devkit_1.parseTargetString)(serveOptions.buildTarget, context);
+    const buildOptions = (0, devkit_1.readTargetOptions)(buildTarget, context);
+    let pathToManifestFile = (0, path_1.join)(context.root, context.projectGraph.nodes[context.projectName].data.sourceRoot, 'assets/module-federation.manifest.json');
+    if (serveOptions.pathToManifestFile) {
+        const userPathToManifestFile = (0, path_1.join)(context.root, serveOptions.pathToManifestFile);
+        if (!(0, fs_1.existsSync)(userPathToManifestFile)) {
+            throw new Error(`The provided Module Federation manifest file path does not exist. Please check the file exists at "${userPathToManifestFile}".`);
+        }
+        else if ((0, path_1.extname)(serveOptions.pathToManifestFile) !== '.json') {
+            throw new Error(`The Module Federation manifest file must be a JSON. Please ensure the file at ${userPathToManifestFile} is a JSON.`);
+        }
+        pathToManifestFile = userPathToManifestFile;
+    }
+    return {
+        buildTarget,
+        buildOptions,
+        serveOptions,
+        pathToManifestFile,
+    };
+}
+async function buildHost(nxBin, buildTarget, context) {
+    await new Promise((res, rej) => {
+        const staticProcess = (0, child_process_1.fork)(nxBin, [
+            `run`,
+            `${buildTarget.project}:${buildTarget.target}${buildTarget.configuration
+                ? `:${buildTarget.configuration}`
+                : context.configurationName
+                    ? `:${context.configurationName}`
+                    : ''}`,
+        ], {
+            cwd: context.root,
+            stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
+        });
+        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, '');
+            // 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')) {
+                devkit_1.logger.log(stdoutString);
+            }
+            if (stdoutString.includes('Successfully ran target build')) {
+                staticProcess.stdout.removeAllListeners('data');
+                devkit_1.logger.info(`NX Built host`);
+                res();
+            }
+        });
+        staticProcess.stderr.on('data', (data) => devkit_1.logger.info(data.toString()));
+        staticProcess.once('exit', (code) => {
+            staticProcess.stdout.removeAllListeners('data');
+            staticProcess.stderr.removeAllListeners('data');
+            if (code !== 0) {
+                rej(`Host failed to build. See above for details.`);
+            }
+            else {
+                res();
+            }
+        });
+        process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
+        process.on('exit', () => staticProcess.kill('SIGTERM'));
+    });
+}
+function moveToTmpDirectory(staticRemotesConfig, hostOutputPath, hostUrlSegment) {
+    const commonOutputDirectory = (0, path_1.join)(devkit_1.workspaceRoot, 'tmp/static-module-federation');
+    for (const app of staticRemotesConfig.remotes) {
+        const remoteConfig = staticRemotesConfig.config[app];
+        (0, fs_1.cpSync)(remoteConfig.outputPath, (0, path_1.join)(commonOutputDirectory, remoteConfig.urlSegment), {
+            force: true,
+            recursive: true,
+        });
+    }
+    (0, fs_1.cpSync)(hostOutputPath, (0, path_1.join)(commonOutputDirectory, hostUrlSegment), {
+        force: true,
+        recursive: true,
+    });
+    const cleanup = () => {
+        (0, fs_1.rmSync)(commonOutputDirectory, { force: true, recursive: true });
+    };
+    process.on('SIGTERM', () => {
+        cleanup();
+    });
+    process.on('exit', () => {
+        cleanup();
+    });
+    return commonOutputDirectory;
+}
+function startProxies(staticRemotesConfig, hostServeOptions, mappedLocationOfHost, mappedLocationsOfRemotes, sslOptions) {
+    const { createProxyMiddleware } = require('http-proxy-middleware');
+    const express = require('express');
+    let sslCert;
+    let sslKey;
+    if (sslOptions && sslOptions.pathToCert && sslOptions.pathToKey) {
+        if ((0, fs_1.existsSync)(sslOptions.pathToCert) && (0, fs_1.existsSync)(sslOptions.pathToKey)) {
+            sslCert = (0, fs_1.readFileSync)(sslOptions.pathToCert);
+            sslKey = (0, fs_1.readFileSync)(sslOptions.pathToKey);
+        }
+        else {
+            devkit_1.logger.warn(`Encountered SSL options in project.json, however, the certificate files do not exist in the filesystem. Using http.`);
+            devkit_1.logger.warn(`Attempted to find '${sslOptions.pathToCert}' and '${sslOptions.pathToKey}'.`);
+        }
+    }
+    const http = require('http');
+    const https = require('https');
+    devkit_1.logger.info(`NX Starting static remotes proxies...`);
+    for (const app of staticRemotesConfig.remotes) {
+        const expressProxy = express();
+        expressProxy.use(createProxyMiddleware({
+            target: mappedLocationsOfRemotes[app],
+            changeOrigin: true,
+            secure: sslCert ? false : undefined,
+        }));
+        const proxyServer = (sslCert ? https : http)
+            .createServer({ cert: sslCert, key: sslKey }, expressProxy)
+            .listen(staticRemotesConfig.config[app].port);
+        process.on('SIGTERM', () => proxyServer.close());
+        process.on('exit', () => proxyServer.close());
+    }
+    devkit_1.logger.info(`NX Static remotes proxies started successfully`);
+    devkit_1.logger.info(`NX Starting static host proxy...`);
+    const expressProxy = express();
+    expressProxy.use(createProxyMiddleware({
+        target: mappedLocationOfHost,
+        changeOrigin: true,
+        secure: sslCert ? false : undefined,
+        pathRewrite: (path) => {
+            let pathRewrite = path;
+            for (const app of staticRemotesConfig.remotes) {
+                if (path.endsWith(app)) {
+                    pathRewrite = '/';
+                    break;
+                }
+            }
+            return pathRewrite;
+        },
+    }));
+    const proxyServer = (sslCert ? https : http)
+        .createServer({ cert: sslCert, key: sslKey }, expressProxy)
+        .listen(hostServeOptions.port);
+    process.on('SIGTERM', () => proxyServer.close());
+    process.on('exit', () => proxyServer.close());
+    devkit_1.logger.info('NX Static host proxy started successfully');
+}
+async function* moduleFederationStaticServer(schema, context) {
+    // Force Node to resolve to look for the nx binary that is inside node_modules
+    const nxBin = require.resolve('nx/bin/nx');
+    // Get the remotes from the module federation config
+    const p = context.projectsConfigurations.projects[context.projectName];
+    const options = getBuildAndServeOptionsFromServeTarget(schema.serveTarget, context);
+    const moduleFederationConfig = (0, module_federation_1.getModuleFederationConfig)(options.buildOptions.tsConfig, context.root, p.root, 'react');
+    const remotes = (0, module_federation_1.getRemotes)([], options.serveOptions.skipRemotes, moduleFederationConfig, {
+        projectName: context.projectName,
+        projectGraph: context.projectGraph,
+        root: context.root,
+    }, options.pathToManifestFile);
+    const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
+    options.serveOptions.staticRemotesPort ??= remotes.staticRemotePort;
+    const mappedLocationsOfStaticRemotes = await (0, build_static_remotes_1.buildStaticRemotes)(staticRemotesConfig, nxBin, context, options.serveOptions);
+    // Build the host
+    const hostUrlSegment = (0, path_1.basename)(options.buildOptions.outputPath);
+    const mappedLocationOfHost = `http${options.serveOptions.ssl ? 's' : ''}://${options.serveOptions.host}:${options.serveOptions.staticRemotesPort}/${hostUrlSegment}`;
+    await buildHost(nxBin, options.buildTarget, context);
+    // Move to a temporary directory
+    const commonOutputDirectory = moveToTmpDirectory(staticRemotesConfig, options.buildOptions.outputPath, hostUrlSegment);
+    // File Serve the temporary directory
+    const staticFileServerIter = (0, file_server_impl_1.default)({
+        cors: true,
+        watch: false,
+        staticFilePath: commonOutputDirectory,
+        parallel: false,
+        spa: false,
+        withDeps: false,
+        host: options.serveOptions.host,
+        port: options.serveOptions.staticRemotesPort,
+        ssl: options.serveOptions.ssl,
+        sslCert: options.serveOptions.sslCert,
+        sslKey: options.serveOptions.sslKey,
+        cacheSeconds: -1,
+    }, context);
+    // express proxy all of it
+    startProxies(staticRemotesConfig, options.serveOptions, mappedLocationOfHost, mappedLocationsOfStaticRemotes, options.serveOptions.ssl
+        ? {
+            pathToCert: (0, path_1.join)(devkit_1.workspaceRoot, options.serveOptions.sslCert),
+            pathToKey: (0, path_1.join)(devkit_1.workspaceRoot, options.serveOptions.sslKey),
+        }
+        : undefined);
+    return yield* (0, async_iterable_1.combineAsyncIterables)(staticFileServerIter, (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
+        const host = options.serveOptions.host ?? 'localhost';
+        const baseUrl = `http${options.serveOptions.ssl ? 's' : ''}://${host}:${options.serveOptions.port}`;
+        if (remotes.remotePorts.length === 0) {
+            const portsToWaitFor = [options.serveOptions.staticRemotesPort];
+            await Promise.all(portsToWaitFor.map((port) => (0, wait_for_port_open_1.waitForPortOpen)(port, {
+                retries: 480,
+                retryDelay: 2500,
+                host: host,
+            })));
+            devkit_1.logger.info(`NX Server ready at ${baseUrl}`);
+            next({ success: true, baseUrl: baseUrl });
+            done();
+            return;
+        }
+        try {
+            const portsToWaitFor = staticFileServerIter
+                ? [options.serveOptions.staticRemotesPort, ...remotes.remotePorts]
+                : [...remotes.remotePorts];
+            await Promise.all(portsToWaitFor.map((port) => (0, wait_for_port_open_1.waitForPortOpen)(port, {
+                retries: 480,
+                retryDelay: 2500,
+                host: host,
+            })));
+            devkit_1.logger.info(`NX Server ready at ${baseUrl}`);
+            next({ success: true, baseUrl: baseUrl });
+        }
+        catch (err) {
+            throw new Error(`Failed to start. Check above for any errors.`, {
+                cause: err,
+            });
+        }
+        finally {
+            done();
+        }
+    }));
+}

package/src/executors/module-federation-static-server/schema.d.ts

@@ -0,0 +1,3 @@
+export interface ModuleFederationStaticServerSchema {
+  serveTarget: string;
+}

package/src/executors/module-federation-static-server/schema.json

@@ -0,0 +1,14 @@
+{
+  "version": 2,
+  "outputCapture": "direct-nodejs",
+  "title": "Module Federation Static Dev Server",
+  "description": "Serve a host application statically along with it's remotes.",
+  "cli": "nx",
+  "type": "object",
+  "properties": {
+    "serveTarget": {
+      "type": "string"
+    }
+  },
+  "required": ["serveTarget"]
+}

package/src/generators/application/application.js

@@ -26,6 +26,7 @@ const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
 const js_1 = require("@nx/js");
 const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
+const flat_config_1 = require("@nx/eslint/src/utils/flat-config");
 async function addLinting(host, options) {
     const tasks = [];
     if (options.linter === eslint_1.Linter.EsLint) {
@@ -43,7 +44,18 @@ async function addLinting(host, options) {
         });
         tasks.push(lintTask);
         if ((0, eslint_file_1.isEslintConfigSupported)(host)) {
-            (0, eslint_file_1.addExtendsToLintConfig)(host, options.appProjectRoot, 'plugin:@nx/react');
+            if ((0, flat_config_1.useFlatConfig)(host)) {
+                (0, eslint_file_1.addPredefinedConfigToFlatLintConfig)(host, options.appProjectRoot, 'flat/react');
+                // Add an empty rules object to users know how to add/override rules
+                (0, eslint_file_1.addOverrideToLintConfig)(host, options.appProjectRoot, {
+                    files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+                    rules: {},
+                });
+            }
+            else {
+                const addExtendsTask = (0, eslint_file_1.addExtendsToLintConfig)(host, options.appProjectRoot, { name: 'plugin:@nx/react', needCompatFixup: true });
+                tasks.push(addExtendsTask);
+            }
         }
         if (!options.skipPackageJson) {
             const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, lint_1.extraEslintDependencies.devDependencies);

package/src/generators/library/lib/add-linting.d.ts

@@ -1,3 +1,4 @@
 import { Tree } from 'nx/src/generators/tree';
+import { GeneratorCallback } from '@nx/devkit';
 import { NormalizedSchema } from '../schema';
-export declare function addLinting(host: Tree, options: NormalizedSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function addLinting(host: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;

package/src/generators/library/lib/add-linting.js

@@ -6,8 +6,10 @@ const path_1 = require("nx/src/utils/path");
 const devkit_1 = require("@nx/devkit");
 const lint_1 = require("../../../utils/lint");
 const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
+const flat_config_1 = require("@nx/eslint/src/utils/flat-config");
 async function addLinting(host, options) {
     if (options.linter === eslint_1.Linter.EsLint) {
+        const tasks = [];
         const lintTask = await (0, eslint_1.lintProjectGenerator)(host, {
             linter: options.linter,
             project: options.name,
@@ -20,14 +22,30 @@ async function addLinting(host, options) {
             setParserOptionsProject: options.setParserOptionsProject,
             addPlugin: options.addPlugin,
         });
+        tasks.push(lintTask);
         if ((0, eslint_file_1.isEslintConfigSupported)(host)) {
-            (0, eslint_file_1.addExtendsToLintConfig)(host, options.projectRoot, 'plugin:@nx/react');
+            if ((0, flat_config_1.useFlatConfig)(host)) {
+                (0, eslint_file_1.addPredefinedConfigToFlatLintConfig)(host, options.projectRoot, 'flat/react');
+                // Add an empty rules object to users know how to add/override rules
+                (0, eslint_file_1.addOverrideToLintConfig)(host, options.projectRoot, {
+                    files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+                    rules: {},
+                });
+            }
+            else {
+                const addExtendsTask = (0, eslint_file_1.addExtendsToLintConfig)(host, options.projectRoot, {
+                    name: 'plugin:@nx/react',
+                    needCompatFixup: true,
+                });
+                tasks.push(addExtendsTask);
+            }
         }
         let installTask = () => { };
         if (!options.skipPackageJson) {
             installTask = (0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, lint_1.extraEslintDependencies.devDependencies);
+            tasks.push(installTask);
         }
-        return (0, devkit_1.runTasksInSerial)(lintTask, installTask);
+        return (0, devkit_1.runTasksInSerial)(...tasks);
     }
     else {
         return () => { };

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;
@@ -7,4 +7,4 @@ export declare function updateModuleFederationProject(host: Tree, options: {
     typescriptConfiguration?: boolean;
     dynamic?: boolean;
     bundler?: 'rspack' | 'webpack';
-}): GeneratorCallback;
+}): void;

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

@@ -2,7 +2,6 @@
 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);
@@ -59,23 +58,23 @@ function updateModuleFederationProject(host, options) {
     }
     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/versions.d.ts

@@ -22,10 +22,9 @@ export declare const reactRouterDomVersion = "6.11.2";
 export declare const testingLibraryReactVersion = "15.0.6";
 export declare const reduxjsToolkitVersion = "1.9.3";
 export declare const reactReduxVersion = "8.0.5";
-export declare const reactTestRendererVersion = "18.2.0";
-export declare const eslintPluginImportVersion = "2.27.5";
+export declare const eslintPluginImportVersion = "2.30.0";
 export declare const eslintPluginJsxA11yVersion = "6.7.1";
-export declare const eslintPluginReactVersion = "7.32.2";
+export declare const eslintPluginReactVersion = "7.35.0";
 export declare const eslintPluginReactHooksVersion = "4.6.0";
 export declare const babelPluginStyledComponentsVersion = "1.10.7";
 export declare const tsLibVersion = "^2.3.0";

package/src/utils/versions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.swcPluginStyledComponentsVersion = exports.swcPluginEmotionVersion = exports.swcPluginStyledJsxVersion = exports.svgrRollupVersion = exports.rollupPluginUrlVersion = exports.sassVersion = exports.lessVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.tailwindcssVersion = exports.postcssVersion = exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactTestRendererVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryReactVersion = exports.reactRouterDomVersion = exports.styledJsxVersion = exports.emotionBabelPlugin = exports.emotionReactVersion = exports.emotionStyledVersion = exports.typesStyledComponentsVersion = exports.styledComponentsVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.reactViteVersion = exports.typesReactIsVersion = exports.typesReactDomVersion = exports.typesReactVersion = exports.babelLoaderVersion = exports.swcLoaderVersion = exports.reactIsVersion = exports.reactDomVersion = exports.reactVersion = exports.nxRspackVersion = exports.nxVersion = void 0;
+exports.swcPluginStyledComponentsVersion = exports.swcPluginEmotionVersion = exports.swcPluginStyledJsxVersion = exports.svgrRollupVersion = exports.rollupPluginUrlVersion = exports.sassVersion = exports.lessVersion = exports.moduleFederationEnhancedVersion = exports.moduleFederationNodeVersion = exports.typesCorsVersion = exports.corsVersion = exports.isbotVersion = exports.typesExpressVersion = exports.expressVersion = exports.autoprefixerVersion = exports.tailwindcssVersion = exports.postcssVersion = exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.reactReduxVersion = exports.reduxjsToolkitVersion = exports.testingLibraryReactVersion = exports.reactRouterDomVersion = exports.styledJsxVersion = exports.emotionBabelPlugin = exports.emotionReactVersion = exports.emotionStyledVersion = exports.typesStyledComponentsVersion = exports.styledComponentsVersion = exports.babelCoreVersion = exports.babelPresetReactVersion = exports.typesNodeVersion = exports.reactViteVersion = exports.typesReactIsVersion = exports.typesReactDomVersion = exports.typesReactVersion = exports.babelLoaderVersion = exports.swcLoaderVersion = exports.reactIsVersion = exports.reactDomVersion = exports.reactVersion = exports.nxRspackVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
 // Always pull the latest version until we merge rspack plugin into the repo.
 exports.nxRspackVersion = '*';
@@ -27,10 +27,9 @@ exports.reactRouterDomVersion = '6.11.2';
 exports.testingLibraryReactVersion = '15.0.6';
 exports.reduxjsToolkitVersion = '1.9.3';
 exports.reactReduxVersion = '8.0.5';
-exports.reactTestRendererVersion = '18.2.0';
-exports.eslintPluginImportVersion = '2.27.5';
+exports.eslintPluginImportVersion = '2.30.0';
 exports.eslintPluginJsxA11yVersion = '6.7.1';
-exports.eslintPluginReactVersion = '7.32.2';
+exports.eslintPluginReactVersion = '7.35.0';
 exports.eslintPluginReactHooksVersion = '4.6.0';
 exports.babelPluginStyledComponentsVersion = '1.10.7';
 exports.tsLibVersion = '^2.3.0';