@nx/react 17.0.0-beta.8 → 17.0.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "17.0.0-beta.8",
+  "version": "17.0.0-rc.0",
   "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, 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": {
@@ -37,11 +37,11 @@
     "file-loader": "^6.2.0",
     "minimatch": "3.0.5",
     "tslib": "^2.3.0",
-    "@nx/devkit": "17.0.0-beta.8",
-    "@nx/js": "17.0.0-beta.8",
-    "@nx/eslint": "17.0.0-beta.8",
-    "@nx/web": "17.0.0-beta.8",
-    "@nrwl/react": "17.0.0-beta.8"
+    "@nx/devkit": "17.0.0-rc.0",
+    "@nx/js": "17.0.0-rc.0",
+    "@nx/eslint": "17.0.0-rc.0",
+    "@nx/web": "17.0.0-rc.0",
+    "@nrwl/react": "17.0.0-rc.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,8 +1,10 @@
 import { ExecutorContext } from '@nx/devkit';
 import { WebDevServerOptions } from '@nx/webpack/src/executors/dev-server/schema';
 type ModuleFederationDevServerOptions = WebDevServerOptions & {
-    devRemotes?: string | string[];
+    devRemotes?: string[];
     skipRemotes?: string[];
+    static?: boolean;
+    isInitialHost?: boolean;
 };
 export default function moduleFederationDevServer(options: ModuleFederationDevServerOptions, context: ExecutorContext): AsyncIterableIterator<{
     success: boolean;

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

@@ -2,14 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const devkit_1 = require("@nx/devkit");
 const dev_server_impl_1 = require("@nx/webpack/src/executors/dev-server/dev-server.impl");
-const path_1 = require("path");
+const file_server_impl_1 = require("@nx/web/src/executors/file-server/file-server.impl");
+const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
 const async_iterable_1 = require("@nx/devkit/src/utils/async-iterable");
-const chalk = require("chalk");
 const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
-const find_matching_projects_1 = require("nx/src/utils/find-matching-projects");
 const child_process_1 = require("child_process");
-const fs_1 = require("fs");
-const internal_1 = require("@nx/js/src/internal");
 function getBuildOptions(buildTarget, context) {
     const target = (0, devkit_1.parseTargetString)(buildTarget, context);
     const buildOptions = (0, devkit_1.readTargetOptions)(target, context);
@@ -17,111 +14,88 @@ function getBuildOptions(buildTarget, context) {
         ...buildOptions,
     };
 }
-function getModuleFederationConfig(tsconfigPath, workspaceRoot, projectRoot) {
-    const moduleFederationConfigPathJS = (0, path_1.join)(workspaceRoot, projectRoot, 'module-federation.config.js');
-    const moduleFederationConfigPathTS = (0, path_1.join)(workspaceRoot, projectRoot, 'module-federation.config.ts');
-    let moduleFederationConfigPath = moduleFederationConfigPathJS;
-    // create a no-op so this can be called with issue
-    const fullTSconfigPath = tsconfigPath.startsWith(workspaceRoot)
-        ? tsconfigPath
-        : (0, path_1.join)(workspaceRoot, tsconfigPath);
-    let cleanupTranspiler = () => { };
-    if ((0, fs_1.existsSync)(moduleFederationConfigPathTS)) {
-        cleanupTranspiler = (0, internal_1.registerTsProject)(fullTSconfigPath);
-        moduleFederationConfigPath = moduleFederationConfigPathTS;
-    }
-    try {
-        const config = require(moduleFederationConfigPath);
-        cleanupTranspiler();
-        return config.default || config;
-    }
-    catch {
-        throw new Error(`Could not load ${moduleFederationConfigPath}. Was this project generated with "@nx/react:host"?\nSee: https://nx.dev/concepts/more-concepts/faster-builds-with-module-federation`);
-    }
-}
 async function* moduleFederationDevServer(options, context) {
     const nxBin = require.resolve('nx');
-    const currIter = (0, dev_server_impl_1.default)(options, context);
+    const currIter = options.static
+        ? (0, file_server_impl_1.default)({
+            ...options,
+            parallel: false,
+            withDeps: false,
+            spa: false,
+            cors: true,
+        }, context)
+        : (0, dev_server_impl_1.default)(options, context);
     const p = context.projectsConfigurations.projects[context.projectName];
     const buildOptions = getBuildOptions(options.buildTarget, context);
-    const moduleFederationConfig = getModuleFederationConfig(buildOptions.tsConfig, context.root, p.root);
-    const remotesToSkip = new Set((0, find_matching_projects_1.findMatchingProjects)(options.skipRemotes, context.projectGraph.nodes) ?? []);
-    if (remotesToSkip.size > 0) {
-        devkit_1.logger.info(`Remotes not served automatically: ${[...remotesToSkip.values()].join(', ')}`);
+    if (!options.isInitialHost) {
+        return yield* currIter;
     }
-    const remotesNotInWorkspace = [];
-    const knownRemotes = (moduleFederationConfig.remotes ?? []).filter((r) => {
-        const validRemote = Array.isArray(r) ? r[0] : r;
-        if (remotesToSkip.has(validRemote)) {
-            return false;
-        }
-        else if (!context.projectGraph.nodes[validRemote]) {
-            remotesNotInWorkspace.push(validRemote);
-            return false;
-        }
-        else {
-            return true;
-        }
+    const moduleFederationConfig = (0, module_federation_1.getModuleFederationConfig)(buildOptions.tsConfig, context.root, p.root, 'react');
+    const remotes = (0, module_federation_1.getRemotes)(options.devRemotes, options.skipRemotes, moduleFederationConfig, {
+        projectName: context.projectName,
+        projectGraph: context.projectGraph,
+        root: context.root,
     });
-    if (remotesNotInWorkspace.length > 0) {
-        devkit_1.logger.warn(`Skipping serving ${remotesNotInWorkspace.join(', ')} as they could not be found in the workspace. Ensure they are served correctly.`);
-    }
-    const remotePorts = knownRemotes.map((r) => context.projectGraph.nodes[r].data.targets['serve'].options.port);
-    const devServeApps = !options.devRemotes
-        ? []
-        : Array.isArray(options.devRemotes)
-            ? (0, find_matching_projects_1.findMatchingProjects)(options.devRemotes, context.projectGraph.nodes)
-            : (0, find_matching_projects_1.findMatchingProjects)([options.devRemotes], context.projectGraph.nodes);
-    devkit_1.logger.info(`NX Starting module federation dev-server for ${chalk.bold(context.projectName)} with ${knownRemotes.length} remotes`);
-    const devRemoteIters = [];
     let isCollectingStaticRemoteOutput = true;
-    for (const app of knownRemotes) {
-        const appName = Array.isArray(app) ? app[0] : app;
-        if (devServeApps.includes(appName)) {
-            devRemoteIters.push(await (0, devkit_1.runExecutor)({
-                project: appName,
-                target: 'serve',
-                configuration: context.configurationName,
-            }, {
-                watch: true,
-            }, context));
-        }
-        else {
-            let outWithErr = [];
-            const staticProcess = (0, child_process_1.fork)(nxBin, [
-                'run',
-                `${appName}:serve-static${context.configurationName ? `:${context.configurationName}` : ''}`,
-            ], {
-                cwd: context.root,
-                stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
-            });
-            staticProcess.stdout.on('data', (data) => {
-                if (isCollectingStaticRemoteOutput) {
-                    outWithErr.push(data.toString());
-                }
-                else {
-                    outWithErr = null;
-                    staticProcess.stdout.removeAllListeners('data');
-                }
-            });
-            staticProcess.stderr.on('data', (data) => devkit_1.logger.info(data.toString()));
-            staticProcess.on('exit', (code) => {
-                if (code !== 0) {
-                    devkit_1.logger.info(outWithErr.join(''));
-                    throw new Error(`Remote failed to start. See above for errors.`);
-                }
-            });
-            process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
-            process.on('exit', () => staticProcess.kill('SIGTERM'));
-        }
+    const devRemoteIters = [];
+    for (const app of remotes.devRemotes) {
+        const remoteProjectServeTarget = context.projectGraph.nodes[app].data.targets['serve'];
+        const isUsingModuleFederationDevServerExecutor = remoteProjectServeTarget.executor.includes('module-federation-dev-server');
+        devRemoteIters.push(await (0, devkit_1.runExecutor)({
+            project: app,
+            target: 'serve',
+            configuration: context.configurationName,
+        }, {
+            watch: true,
+            ...(isUsingModuleFederationDevServerExecutor
+                ? { isInitialHost: false }
+                : {}),
+        }, context));
+    }
+    for (const app of remotes.staticRemotes) {
+        const remoteProjectServeTarget = context.projectGraph.nodes[app].data.targets['serve-static'];
+        const isUsingModuleFederationDevServerExecutor = remoteProjectServeTarget.executor.includes('module-federation-dev-server');
+        let outWithErr = [];
+        const staticProcess = (0, child_process_1.fork)(nxBin, [
+            'run',
+            `${app}:serve-static${context.configurationName ? `:${context.configurationName}` : ''}`,
+            ...(isUsingModuleFederationDevServerExecutor
+                ? [`--isInitialHost=false`]
+                : []),
+        ], {
+            cwd: context.root,
+            stdio: ['ignore', 'pipe', 'pipe', 'ipc'],
+        });
+        staticProcess.stdout.on('data', (data) => {
+            if (isCollectingStaticRemoteOutput) {
+                outWithErr.push(data.toString());
+            }
+            else {
+                outWithErr = null;
+                staticProcess.stdout.removeAllListeners('data');
+            }
+        });
+        staticProcess.stderr.on('data', (data) => devkit_1.logger.info(data.toString()));
+        staticProcess.on('exit', (code) => {
+            if (code !== 0) {
+                devkit_1.logger.info(outWithErr.join(''));
+                throw new Error(`Remote failed to start. See above for errors.`);
+            }
+        });
+        process.on('SIGTERM', () => staticProcess.kill('SIGTERM'));
+        process.on('exit', () => staticProcess.kill('SIGTERM'));
     }
     return yield* (0, async_iterable_1.combineAsyncIterables)(currIter, ...devRemoteIters, (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
-        if (remotePorts.length === 0) {
+        if (!options.isInitialHost) {
+            done();
+            return;
+        }
+        if (remotes.remotePorts.length === 0) {
             done();
             return;
         }
         try {
-            await Promise.all(remotePorts.map((port) => 
+            await Promise.all(remotes.remotePorts.map((port) => 
             // Allow 20 minutes for each remote to start, which is plenty of time but we can tweak it later if needed.
             // Most remotes should start in under 1 minute.
             (0, wait_for_port_open_1.waitForPortOpen)(port, {

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

@@ -91,6 +91,16 @@
     "baseHref": {
       "type": "string",
       "description": "Base url for the application being built."
+    },
+    "static": {
+      "type": "boolean",
+      "description": "Whether to use a static file server instead of the webpack-dev-server. This should be used for remote applications that are also host applications."
+    },
+    "isInitialHost": {
+      "type": "boolean",
+      "description": "Whether the host that is running this executor is the first in the project tree to do so.",
+      "default": true,
+      "x-priority": "internal"
     }
   }
 }