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

package/babel.d.ts

@@ -7,6 +7,9 @@ interface NxReactBabelOptions {
         decoratorsBeforeExport?: boolean;
         legacy?: boolean;
     };
+    loose?: boolean;
+    /** @deprecated Use `loose` option instead of `classProperties.loose`
+     */
     classProperties?: {
         loose?: boolean;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "17.0.0-beta.8",
+  "version": "17.0.0-rc.1",
   "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.1",
+    "@nx/js": "17.0.0-rc.1",
+    "@nx/eslint": "17.0.0-rc.1",
+    "@nx/web": "17.0.0-rc.1",
+    "@nrwl/react": "17.0.0-rc.1"
   },
   "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"
     }
   }
 }

package/src/generators/application/lib/normalize-options.js

@@ -38,7 +38,7 @@ async function normalizeOptions(host, options, callingGenerator = '@nx/react:app
         ? null
         : options.style;
     (0, assertion_1.assertValidStyle)(options.style);
-    if (options.bundler === 'vite') {
+    if (options.bundler === 'vite' && options.unitTestRunner !== 'none') {
         options.unitTestRunner = 'vitest';
     }
     const normalized = {
@@ -58,9 +58,7 @@ async function normalizeOptions(host, options, callingGenerator = '@nx/react:app
     normalized.classComponent = normalized.classComponent ?? false;
     normalized.compiler = normalized.compiler ?? 'babel';
     normalized.bundler = normalized.bundler ?? 'webpack';
-    normalized.unitTestRunner =
-        normalized.unitTestRunner ??
-            (normalized.bundler === 'vite' ? 'vitest' : 'jest');
+    normalized.unitTestRunner = normalized.unitTestRunner ?? 'jest';
     normalized.e2eTestRunner = normalized.e2eTestRunner ?? 'cypress';
     normalized.inSourceTests = normalized.minimal || normalized.inSourceTests;
     normalized.devServerPort ??= (0, find_free_port_1.findFreePort)(host);

package/src/generators/component/component.js

@@ -73,7 +73,7 @@ function addExportsToBarrel(host, options) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
     const workspace = (0, devkit_1.getProjects)(host);
-    const isApp = workspace.get(options.project).projectType === 'application';
+    const isApp = workspace.get(options.projectName).projectType === 'application';
     if (options.export && !isApp) {
         const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.js ? 'index.js' : 'index.ts');
         const indexSource = host.read(indexFilePath, 'utf-8');

package/src/generators/component/lib/normalize-options.js

@@ -35,7 +35,7 @@ async function normalizeOptions(tree, options) {
     options.inSourceTests = options.inSourceTests ?? false;
     return {
         ...options,
-        project: projectName,
+        projectName,
         directory,
         styledModule,
         hasStyles: options.style !== 'none',

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

@@ -5,7 +5,7 @@ export interface Schema {
   /**
    * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18.
    */
-  project: string;
+  project?: string;
   style: SupportedStyles;
   skipTests?: boolean;
   directory?: string;
@@ -37,6 +37,7 @@ export interface Schema {
 
 export interface NormalizedSchema extends Schema {
   projectSourceRoot: string;
+  projectName: string;
   fileName: string;
   filePath: string;
   className: string;

package/src/generators/federate-module/federate-module.js

@@ -7,6 +7,12 @@ const utils_1 = require("./lib/utils");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const js_1 = require("@nx/js");
 async function federateModuleGenerator(tree, schema) {
+    // Check if the file exists
+    if (!tree.exists(schema.path)) {
+        throw new Error((0, devkit_1.stripIndents) `The "path" provided  does not exist. Please verify the path is correct and pointing to a file that exists in the workspace.
+    
+    Path: ${schema.path}`);
+    }
     const tasks = [];
     // Check remote exists
     const remote = (0, utils_1.checkRemoteExists)(tree, schema.remote);

package/src/generators/federate-module/schema.json

@@ -25,7 +25,7 @@
     },
     "path": {
       "type": "string",
-      "description": "The path to locate the federated module.",
+      "description": "The path to locate the federated module. This path should be relative to the workspace root and the file should exist.",
       "x-prompt": "What is the path to the module to be federated?"
     },
     "remote": {

package/src/generators/hook/hook.js

@@ -45,7 +45,7 @@ function addExportsToBarrel(host, options) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
     const workspace = (0, devkit_1.getProjects)(host);
-    const isApp = workspace.get(options.project).projectType === 'application';
+    const isApp = workspace.get(options.projectName).projectType === 'application';
     if (options.export && !isApp) {
         const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.js ? 'index.js' : 'index.ts');
         const indexSource = host.read(indexFilePath, 'utf-8');
@@ -88,7 +88,7 @@ async function normalizeOptions(host, options) {
             : 'use-'.concat(fileName);
     const hookName = 'use'.concat(className);
     const hookTypeName = 'Use'.concat(className);
-    const project = (0, devkit_1.getProjects)(host).get(options.project);
+    const project = (0, devkit_1.getProjects)(host).get(projectName);
     const { sourceRoot: projectSourceRoot, projectType } = project;
     if (options.export && projectType === 'application') {
         devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
@@ -112,6 +112,7 @@ async function normalizeOptions(host, options) {
         hookTypeName,
         fileName: hookFilename,
         projectSourceRoot,
+        projectName,
     };
 }
 function assertValidOptions(options) {

package/src/generators/redux/redux.js

@@ -115,7 +115,7 @@ async function normalizeOptions(host, options) {
     // for it without needing to specify --appProject.
     options.appProject =
         options.appProject ||
-            (projectType === 'application' ? options.project : undefined);
+            (projectType === 'application' ? projectName : undefined);
     if (options.appProject) {
         const appConfig = projects.get(options.appProject);
         if (appConfig.projectType !== 'application') {

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

@@ -1,6 +1,9 @@
 export interface Schema {
   name: string;
-  project: string;
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18.
+   */
+  project?: string;
   directory?: string;
   appProject?: string;
   js?: string;

package/src/generators/stories/schema.json

@@ -44,6 +44,9 @@
         "type": "string",
         "description": "Path to ignore."
       },
+      "default": [
+        "*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx"
+      ],
       "examples": [
         "apps/my-app/src/not-stories/**",
         "**/**/src/**/not-stories/**",

package/src/generators/storybook-configuration/schema.json

@@ -78,6 +78,9 @@
         "type": "string",
         "description": "Path to ignore."
       },
+      "default": [
+        "*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx"
+      ],
       "examples": [
         "apps/my-app/src/not-stories/**",
         "**/**/src/**/not-stories/**",