@nx/react 22.0.0-canary.20251014-82acc84 → 22.0.0-canary.20251015-f37c13b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "22.0.0-canary.20251014-82acc84",
+  "version": "22.0.0-canary.20251015-f37c13b",
   "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": {
@@ -38,22 +38,22 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "22.0.0-canary.20251014-82acc84",
-    "@nx/js": "22.0.0-canary.20251014-82acc84",
-    "@nx/eslint": "22.0.0-canary.20251014-82acc84",
-    "@nx/web": "22.0.0-canary.20251014-82acc84",
-    "@nx/vite": "22.0.0-canary.20251014-82acc84",
-    "@nx/module-federation": "22.0.0-canary.20251014-82acc84",
-    "@nx/rollup": "22.0.0-canary.20251014-82acc84",
+    "@nx/devkit": "22.0.0-canary.20251015-f37c13b",
+    "@nx/js": "22.0.0-canary.20251015-f37c13b",
+    "@nx/eslint": "22.0.0-canary.20251015-f37c13b",
+    "@nx/web": "22.0.0-canary.20251015-f37c13b",
+    "@nx/vite": "22.0.0-canary.20251015-f37c13b",
+    "@nx/module-federation": "22.0.0-canary.20251015-f37c13b",
+    "@nx/rollup": "22.0.0-canary.20251015-f37c13b",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.5",
     "semver": "^7.6.3"
   },
   "devDependencies": {
-    "@nx/cypress": "22.0.0-canary.20251014-82acc84",
-    "@nx/playwright": "22.0.0-canary.20251014-82acc84",
-    "@nx/rsbuild": "22.0.0-canary.20251014-82acc84",
-    "nx": "22.0.0-canary.20251014-82acc84"
+    "@nx/cypress": "22.0.0-canary.20251015-f37c13b",
+    "@nx/playwright": "22.0.0-canary.20251015-f37c13b",
+    "@nx/rsbuild": "22.0.0-canary.20251015-f37c13b",
+    "nx": "22.0.0-canary.20251015-f37c13b"
   },
   "publishConfig": {
     "access": "public"

package/src/generators/host/host.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/host/host.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIjB,IAAI,EAEL,MAAM,YAAY,CAAC;AAapB,OAAO,EAAoB,MAAM,EAAE,MAAM,UAAU,CAAC;AAWpD,wBAAsB,aAAa,CACjC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,GACb,OAAO,CAAC,iBAAiB,CAAC,CAkI5B;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/host/host.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAKjB,IAAI,EAGL,MAAM,YAAY,CAAC;AAapB,OAAO,EAAoB,MAAM,EAAE,MAAM,UAAU,CAAC;AAYpD,wBAAsB,aAAa,CACjC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,GACb,OAAO,CAAC,iBAAiB,CAAC,CAmJ5B;AAmCD,eAAe,aAAa,CAAC"}

package/src/generators/host/host.js

@@ -13,6 +13,7 @@ const setup_ssr_for_host_1 = require("./lib/setup-ssr-for-host");
 const update_module_federation_e2e_project_1 = require("./lib/update-module-federation-e2e-project");
 const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 const js_1 = require("@nx/js");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const versions_1 = require("../../utils/versions");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const update_module_federation_tsconfig_1 = require("./lib/update-module-federation-tsconfig");
@@ -24,7 +25,6 @@ async function hostGenerator(host, schema) {
         ...(await (0, normalize_options_1.normalizeOptions)(host, {
             ...schema,
             name,
-            useProjectJson: true,
         })),
         js: schema.js ?? false,
         typescriptConfiguration: schema.js
@@ -53,9 +53,18 @@ async function hostGenerator(host, schema) {
         // The target use-case is loading remotes as child routes, thus always enable routing.
         routing: true,
         skipFormat: true,
-        useProjectJson: true,
     });
     tasks.push(initTask);
+    // In TS solution setup, update package.json to use simple name instead of scoped name
+    if ((0, ts_solution_setup_1.isUsingTsSolutionSetup)(host)) {
+        const hostPackageJsonPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json');
+        if (host.exists(hostPackageJsonPath)) {
+            (0, devkit_1.updateJson)(host, hostPackageJsonPath, (json) => {
+                json.name = options.projectName;
+                return json;
+            });
+        }
+    }
     const remotesWithPorts = [];
     if (schema.remotes) {
         let remotePort = options.devServerPort + 1;
@@ -87,6 +96,10 @@ async function hostGenerator(host, schema) {
     (0, update_module_federation_project_1.updateModuleFederationProject)(host, options, true);
     (0, update_module_federation_e2e_project_1.updateModuleFederationE2eProject)(host, options);
     (0, update_module_federation_tsconfig_1.updateModuleFederationTsconfig)(host, options);
+    // Add remotes as devDependencies in TS solution setup
+    if ((0, ts_solution_setup_1.isUsingTsSolutionSetup)(host) && remotesWithPorts.length > 0) {
+        addRemotesAsHostDependencies(host, options.projectName, remotesWithPorts);
+    }
     if (options.ssr) {
         if (options.bundler !== 'rspack') {
             const setupSsrTask = await (0, setup_ssr_1.default)(host, {
@@ -118,4 +131,22 @@ async function hostGenerator(host, schema) {
     }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
+function addRemotesAsHostDependencies(tree, hostName, remotes) {
+    const hostConfig = (0, devkit_1.readProjectConfiguration)(tree, hostName);
+    const hostPackageJsonPath = (0, devkit_1.joinPathFragments)(hostConfig.root, 'package.json');
+    if (!tree.exists(hostPackageJsonPath)) {
+        throw new Error(`Host package.json not found at ${hostPackageJsonPath}. ` +
+            `TypeScript solution setup requires package.json for all projects.`);
+    }
+    const packageManager = (0, devkit_1.detectPackageManager)(tree.root);
+    const versionSpec = packageManager === 'npm' ? '*' : 'workspace:*';
+    (0, devkit_1.updateJson)(tree, hostPackageJsonPath, (json) => {
+        json.devDependencies ??= {};
+        for (const remote of remotes) {
+            // Use simple remote name directly to match module-federation.config.ts
+            json.devDependencies[remote.name] = versionSpec;
+        }
+        return json;
+    });
+}
 exports.default = hostGenerator;

package/src/generators/host/lib/add-module-federation-files.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add-module-federation-files.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/host/lib/add-module-federation-files.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EAML,MAAM,YAAY,CAAC;AAOpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAG7C,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,gBAAgB,EACzB,qBAAqB,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,QAuIxD"}
+{"version":3,"file":"add-module-federation-files.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/host/lib/add-module-federation-files.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EAML,MAAM,YAAY,CAAC;AAUpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAG7C,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,gBAAgB,EACzB,qBAAqB,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,QAgJxD"}

package/src/generators/host/lib/add-module-federation-files.js

@@ -68,6 +68,13 @@ function addModuleFederationFiles(host, options, defaultRemoteManifest) {
             processBundlerConfigFile(options, host, 'webpack.config.js');
             processBundlerConfigFile(options, host, 'webpack.config.prod.js');
         }
+        // Delete TypeScript prod config in TS solution setup - not needed in Crystal
+        if ((0, ts_solution_setup_1.isUsingTsSolutionSetup)(host)) {
+            const prodConfigFileName = options.bundler === 'rspack'
+                ? 'rspack.config.prod.ts'
+                : 'webpack.config.prod.ts';
+            processBundlerConfigFile(options, host, prodConfigFileName);
+        }
     }
     if (options.dynamic) {
         processBundlerConfigFile(options, host, 'webpack.config.prod.js');

package/src/generators/remote/lib/setup-package-json-exports-for-remote.d.ts

@@ -0,0 +1,4 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../../application/schema';
+export declare function setupPackageJsonExportsForRemote(tree: Tree, options: NormalizedSchema): void;
+//# sourceMappingURL=setup-package-json-exports-for-remote.d.ts.map

package/src/generators/remote/lib/setup-package-json-exports-for-remote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-package-json-exports-for-remote.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/remote/lib/setup-package-json-exports-for-remote.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,IAAI,EAEL,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,wBAAgB,gCAAgC,CAC9C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,gBAAgB,QA+B1B"}

package/src/generators/remote/lib/setup-package-json-exports-for-remote.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupPackageJsonExportsForRemote = setupPackageJsonExportsForRemote;
+const devkit_1 = require("@nx/devkit");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const maybe_js_1 = require("../../../utils/maybe-js");
+function setupPackageJsonExportsForRemote(tree, options) {
+    const project = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
+    const packageJsonPath = (0, devkit_1.joinPathFragments)(project.root, 'package.json');
+    if (!tree.exists(packageJsonPath)) {
+        throw new Error(`package.json not found at ${packageJsonPath}. ` +
+            `TypeScript solution setup requires package.json for all projects.`);
+    }
+    const exportPath = (0, maybe_js_1.maybeJs)(options, './src/remote-entry.ts');
+    const customCondition = (0, ts_solution_setup_1.getDefinedCustomConditionName)(tree);
+    (0, devkit_1.updateJson)(tree, packageJsonPath, (json) => {
+        json.exports = {
+            ...json.exports,
+            './Module': {
+                [customCondition]: exportPath,
+                types: exportPath,
+                import: exportPath,
+                default: exportPath,
+            },
+        };
+        // Set types for IDE support (no main needed - this is an app, not a library)
+        json.types = exportPath;
+        return json;
+    });
+}

package/src/generators/remote/lib/update-host-with-remote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"update-host-with-remote.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/remote/lib/update-host-with-remote.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,IAAI,EACL,MAAM,YAAY,CAAC;AAUpB,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,QAmEnB"}
+{"version":3,"file":"update-host-with-remote.d.ts","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/remote/lib/update-host-with-remote.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,IAAI,EAEL,MAAM,YAAY,CAAC;AAapB,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,QAwEnB"}

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

@@ -35,6 +35,10 @@ function updateHostWithRemote(host, hostName, remoteName) {
     else {
         devkit_1.logger.warn(`Could not find app component at ${appComponentPath}. Did you generate this project with "@nx/react:host" or "@nx/react:consumer"?`);
     }
+    // Add remote as devDependency in TS solution setup
+    if ((0, ts_solution_setup_1.isUsingTsSolutionSetup)(host)) {
+        addRemoteAsHostDependency(host, hostName, remoteName);
+    }
 }
 function findAppComponentPath(host, sourceRoot) {
     const locations = [
@@ -57,3 +61,20 @@ function findAppComponentPath(host, sourceRoot) {
         }
     }
 }
+function addRemoteAsHostDependency(tree, hostName, remoteName) {
+    const hostConfig = (0, devkit_1.readProjectConfiguration)(tree, hostName);
+    const hostPackageJsonPath = (0, devkit_1.joinPathFragments)(hostConfig.root, 'package.json');
+    if (!tree.exists(hostPackageJsonPath)) {
+        throw new Error(`Host package.json not found at ${hostPackageJsonPath}. ` +
+            `TypeScript solution setup requires package.json for all projects.`);
+    }
+    const packageManager = (0, devkit_1.detectPackageManager)(tree.root);
+    // npm doesn't support workspace: protocol, use * instead
+    const versionSpec = packageManager === 'npm' ? '*' : 'workspace:*';
+    (0, devkit_1.updateJson)(tree, hostPackageJsonPath, (json) => {
+        json.devDependencies ??= {};
+        // Use simple remote name directly to match module-federation.config.ts
+        json.devDependencies[remoteName] = versionSpec;
+        return json;
+    });
+}

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

@@ -1 +1 @@
-{"version":3,"file":"remote.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/remote/remote.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAMjB,IAAI,EAEL,MAAM,YAAY,CAAC;AAoBpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAMzD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,QAsElC;AAED,wBAAsB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAmJ/D;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"remote.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/remote/remote.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAOjB,IAAI,EAGL,MAAM,YAAY,CAAC;AAuBpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAOzD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,QAmFlC;AAED,wBAAsB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAqK/D;AAED,eAAe,eAAe,CAAC"}

package/src/generators/remote/remote.js

@@ -17,6 +17,7 @@ const create_application_files_1 = require("../application/lib/create-applicatio
 const normalize_options_1 = require("../application/lib/normalize-options");
 const setup_ssr_1 = require("../setup-ssr/setup-ssr");
 const add_remote_to_dynamic_host_1 = require("./lib/add-remote-to-dynamic-host");
+const setup_package_json_exports_for_remote_1 = require("./lib/setup-package-json-exports-for-remote");
 const setup_ssr_for_remote_1 = require("./lib/setup-ssr-for-remote");
 const setup_tspath_for_remote_1 = require("./lib/setup-tspath-for-remote");
 const update_host_with_remote_1 = require("./lib/update-host-with-remote");
@@ -54,6 +55,15 @@ function addModuleFederationFiles(host, options) {
         if (host.exists(pathToWebpackProdConfig)) {
             host.delete(pathToWebpackProdConfig);
         }
+        // Delete TypeScript prod config in TS solution setup - not needed in Crystal
+        if ((0, ts_solution_setup_1.isUsingTsSolutionSetup)(host)) {
+            const pathToTsProdConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, options.bundler === 'rspack'
+                ? 'rspack.config.prod.ts'
+                : 'webpack.config.prod.ts');
+            if (host.exists(pathToTsProdConfig)) {
+                host.delete(pathToTsProdConfig);
+            }
+        }
     }
 }
 async function remoteGenerator(host, schema) {
@@ -63,7 +73,6 @@ async function remoteGenerator(host, schema) {
         ...(await (0, normalize_options_1.normalizeOptions)(host, {
             ...schema,
             name,
-            useProjectJson: true,
         })),
         // when js is set to true, we want to use the js configuration
         js: schema.js ?? false,
@@ -92,9 +101,18 @@ async function remoteGenerator(host, schema) {
         ...options,
         name: options.projectName,
         skipFormat: true,
-        useProjectJson: true,
     });
     tasks.push(initAppTask);
+    // In TS solution setup, update package.json to use simple name instead of scoped name
+    if ((0, ts_solution_setup_1.isUsingTsSolutionSetup)(host)) {
+        const remotePackageJsonPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json');
+        if (host.exists(remotePackageJsonPath)) {
+            (0, devkit_1.updateJson)(host, remotePackageJsonPath, (json) => {
+                json.name = options.projectName;
+                return json;
+            });
+        }
+    }
     if (options.host) {
         (0, update_host_with_remote_1.updateHostWithRemote)(host, options.host, options.projectName);
     }
@@ -104,7 +122,13 @@ async function remoteGenerator(host, schema) {
     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);
+    // Conditionally setup TS path or package.json exports based on TS solution setup
+    if ((0, ts_solution_setup_1.isUsingTsSolutionSetup)(host)) {
+        (0, setup_package_json_exports_for_remote_1.setupPackageJsonExportsForRemote)(host, options);
+    }
+    else {
+        (0, setup_tspath_for_remote_1.setupTspathForRemote)(host, options);
+    }
     if (options.ssr) {
         if (options.bundler !== 'rspack') {
             const setupSsrTask = await (0, setup_ssr_1.default)(host, {

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

@@ -6,6 +6,7 @@ const maybe_js_1 = require("../utils/maybe-js");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 function updateModuleFederationProject(host, options, isHost = false) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
+    projectConfig.targets ??= {};
     if (options.bundler !== 'rspack') {
         projectConfig.targets.build.options = {
             ...(projectConfig.targets.build.options ?? {}),