@nx/react 23.2.0-beta.7 → 23.2.0-beta.9

package/dist/module-federation.d.ts

@@ -1,5 +1,4 @@
-import { withModuleFederation } from '@nx/module-federation/webpack';
-import { withModuleFederationForSSR } from '@nx/module-federation/webpack';
+import { withModuleFederation, withModuleFederationForSSR } from '@nx/module-federation/webpack';
 /**
  * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
  */

package/dist/module-federation.js

@@ -3,8 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederationForSSR = exports.withModuleFederation = void 0;
 const webpack_1 = require("@nx/module-federation/webpack");
 Object.defineProperty(exports, "withModuleFederation", { enumerable: true, get: function () { return webpack_1.withModuleFederation; } });
-const webpack_2 = require("@nx/module-federation/webpack");
-Object.defineProperty(exports, "withModuleFederationForSSR", { enumerable: true, get: function () { return webpack_2.withModuleFederationForSSR; } });
+Object.defineProperty(exports, "withModuleFederationForSSR", { enumerable: true, get: function () { return webpack_1.withModuleFederationForSSR; } });
 // Support for older generated code: `const withModuleFederation = require('@nx/react/module-federation')`
 /**
  * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
@@ -18,4 +17,4 @@ module.exports.withModuleFederation = webpack_1.withModuleFederation;
 /**
  * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
  */
-module.exports.withModuleFederationForSSR = webpack_2.withModuleFederationForSSR;
+module.exports.withModuleFederationForSSR = webpack_1.withModuleFederationForSSR;

package/dist/plugins/component-testing/webpack-fallback.js

@@ -78,6 +78,11 @@ const loaderModulesOptions = {
     modules: {
         mode: 'local',
         getLocalIdent: webpack_1.getCSSModuleLocalIdent,
+        // css-loader 7 defaults namedExport to true, and to camel-case-only
+        // locals when it is off. Generated components import the default
+        // export and reference class names as authored, so pin both.
+        namedExport: false,
+        exportLocalsConvention: 'asIs',
     },
     importLoaders: 1,
 };

package/dist/src/generators/application/application.js

@@ -6,9 +6,8 @@ const tslib_1 = require("tslib");
 const internal_1 = require("@nx/devkit/internal");
 const assert_supported_react_version_1 = require("../../utils/assert-supported-react-version");
 const devkit_1 = require("@nx/devkit");
-const internal_2 = require("@nx/devkit/internal");
 const js_1 = require("@nx/js");
-const internal_3 = require("@nx/js/internal");
+const internal_2 = require("@nx/js/internal");
 const create_ts_config_1 = require("../../utils/create-ts-config");
 const init_1 = tslib_1.__importDefault(require("../init/init"));
 const create_application_files_1 = require("./lib/create-application-files");
@@ -35,13 +34,12 @@ async function applicationGenerator(tree, schema) {
 async function applicationGeneratorInternal(tree, schema) {
     (0, assert_supported_react_version_1.assertSupportedReactVersion)(tree);
     const tasks = [];
-    const addTsPlugin = (0, internal_3.shouldConfigureTsSolutionSetup)(tree, schema.addPlugin, schema.useTsSolution);
+    const addTsPlugin = (0, internal_2.shouldConfigureTsSolutionSetup)(tree, schema.addPlugin, schema.useTsSolution);
     const jsInitTask = await (0, js_1.initGenerator)(tree, {
         ...schema,
         tsConfigName: schema.rootProject ? 'tsconfig.json' : 'tsconfig.base.json',
         skipFormat: true,
         addTsPlugin,
-        formatter: schema.formatter,
         platform: 'web',
     });
     tasks.push(jsInitTask);
@@ -49,22 +47,11 @@ async function applicationGeneratorInternal(tree, schema) {
     options.useReactRouter =
         options.routing && options.bundler === 'vite'
             ? (options.useReactRouter ??
-                (await (0, internal_1.promptWhenInteractive)({
-                    name: 'response',
-                    message: 'Would you like to use react-router for server-side rendering?',
-                    type: 'autocomplete',
-                    choices: [
-                        {
-                            name: 'Yes',
-                            message: 'I want to use react-router   [ https://reactrouter.com/start/framework/routing   ]',
-                        },
-                        {
-                            name: 'No',
-                            message: 'I do not want to use react-router for server-side rendering',
-                        },
-                    ],
-                    initial: 0,
-                }, { response: 'No' }).then((r) => r.response === 'Yes')))
+                ((0, internal_1.isInteractive)()
+                    ? await (0, internal_1.confirmationPrompt)({
+                        message: 'Would you like to use react-router for server-side rendering?',
+                    })
+                    : false))
             : false;
     const initTask = await (0, init_1.default)(tree, {
         ...options,
@@ -76,7 +63,7 @@ async function applicationGeneratorInternal(tree, schema) {
         const nxJson = (0, devkit_1.readNxJson)(tree) ?? {};
         const existing = findBuildDefault(nxJson.targetDefaults);
         if (!existing) {
-            (0, internal_2.upsertTargetDefault)(tree, nxJson, {
+            (0, internal_1.upsertTargetDefault)(tree, nxJson, {
                 target: 'build',
                 cache: true,
                 dependsOn: ['^build'],
@@ -84,7 +71,7 @@ async function applicationGeneratorInternal(tree, schema) {
             (0, devkit_1.updateNxJson)(tree, nxJson);
         }
         else if (!existing.dependsOn) {
-            (0, internal_2.upsertTargetDefault)(tree, nxJson, {
+            (0, internal_1.upsertTargetDefault)(tree, nxJson, {
                 target: 'build',
                 dependsOn: ['^build'],
             });
@@ -108,7 +95,7 @@ async function applicationGeneratorInternal(tree, schema) {
     // If we are using the new TS solution
     // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
     if (options.isUsingTsSolutionConfig) {
-        await (0, internal_3.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
+        await (0, internal_2.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
     }
     const lintTask = await (0, add_linting_1.addLinting)(tree, options);
     tasks.push(lintTask);
@@ -157,14 +144,14 @@ async function applicationGeneratorInternal(tree, schema) {
         });
     }
     // Only for the new TS solution
-    (0, internal_3.updateTsconfigFiles)(tree, options.appProjectRoot, 'tsconfig.app.json', {
+    (0, internal_2.updateTsconfigFiles)(tree, options.appProjectRoot, 'tsconfig.app.json', {
         jsx: 'react-jsx',
         module: 'esnext',
         moduleResolution: 'bundler',
     }, options.linter === 'eslint'
         ? ['eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
         : undefined, options.useReactRouter ? 'app' : 'src');
-    (0, internal_3.sortPackageJsonFields)(tree, options.appProjectRoot);
+    (0, internal_2.sortPackageJsonFields)(tree, options.appProjectRoot);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

package/dist/src/generators/application/lib/add-linting.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addLinting = addLinting;
 const devkit_1 = require("@nx/devkit");
 const internal_1 = require("@nx/eslint/internal");
-const devkit_2 = require("@nx/devkit");
 const internal_2 = require("@nx/js/internal");
 const lint_1 = require("../../../utils/lint");
 const versions_1 = require("../../../utils/versions");
@@ -43,7 +42,7 @@ async function addLinting(host, options) {
             }
         }
         if (!options.skipPackageJson) {
-            const installTask = (0, devkit_2.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, lint_1.extraEslintDependencies.devDependencies, undefined, true);
+            const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, lint_1.extraEslintDependencies.devDependencies, undefined, true);
             const addSwcTask = (0, internal_2.addSwcDependencies)(host);
             tasks.push(installTask, addSwcTask);
         }
@@ -51,7 +50,7 @@ async function addLinting(host, options) {
             await ignoreReactRouterFilesInEslintConfig(host, options.appProjectRoot);
         }
     }
-    return (0, devkit_2.runTasksInSerial)(...tasks);
+    return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 async function ignoreReactRouterFilesInEslintConfig(tree, projectRoot) {
     if (!(0, internal_2.detectLinters)(tree).includes('eslint')) {

package/dist/src/generators/application/lib/create-application-files.d.ts

@@ -29,7 +29,7 @@ export declare function getDefaultTemplateVariables(host: Tree, options: Normali
     minimal?: boolean;
     nxCloudToken?: string;
     useTsSolution?: boolean;
-    formatter?: 'prettier' | 'none';
+    formatter?: 'prettier' | 'oxfmt' | 'none';
     useProjectJson?: boolean;
     linter: import("@nx/js").LinterType;
     projectName: string;

package/dist/src/generators/application/schema.d.ts

@@ -35,7 +35,7 @@ export interface Schema {
   addPlugin?: boolean;
   nxCloudToken?: string;
   useTsSolution?: boolean;
-  formatter?: 'prettier' | 'none';
+  formatter?: 'prettier' | 'oxfmt' | 'none';
   useProjectJson?: boolean;
   port?: number;
 }

package/dist/src/generators/application/schema.json

@@ -102,6 +102,11 @@
       "enum": ["eslint", "oxlint", "none"],
       "x-priority": "important"
     },
+    "formatter": {
+      "description": "The tool to use for code formatting.",
+      "type": "string",
+      "enum": ["none", "prettier", "oxfmt"]
+    },
     "unitTestRunner": {
       "type": "string",
       "enum": ["vitest", "jest", "none"],

package/dist/src/generators/host/files/rspack-module-federation/module-federation.config.js__tmpl__

@@ -17,7 +17,7 @@ module.exports = {
    */
   remotes: [
     <%_ if (static) { 
-      remotes.forEach(function(r) { %> 
+      remotes.forEach(function(r) { _%> 
     "<%= r.fileName %>", 
       <%_ }); } _%>
   ],

package/dist/src/generators/host/lib/setup-ssr-for-host.js

@@ -2,16 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupSsrForHost = setupSsrForHost;
 const devkit_1 = require("@nx/devkit");
-const devkit_2 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
 const create_application_files_1 = require("../../application/lib/create-application-files");
 async function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
     const tasks = [];
-    let project = (0, devkit_2.readProjectConfiguration)(tree, appName);
+    let project = (0, devkit_1.readProjectConfiguration)(tree, appName);
     if (options.bundler !== 'rspack') {
         project.targets.serve.executor =
             '@nx/react:module-federation-ssr-dev-server';
-        (0, devkit_2.updateProjectConfiguration)(tree, appName, project);
+        (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
     }
     const pathToModuleFederationSsrFiles = options.typescriptConfiguration
         ? `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr-ts`
@@ -28,7 +27,7 @@ async function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
             static: !options?.dynamic,
             remotes: defaultRemoteManifest.map(({ name, port }) => {
                 return {
-                    ...(0, devkit_2.names)(name),
+                    ...(0, devkit_1.names)(name),
                     port,
                 };
             }),
@@ -42,13 +41,13 @@ async function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
             browserBuildOutputPath: project.targets.build?.options?.outputPath,
             remotes: defaultRemoteManifest.map(({ name, port }) => {
                 return {
-                    ...(0, devkit_2.names)(name),
+                    ...(0, devkit_1.names)(name),
                     port,
                 };
             }),
         };
-    (0, devkit_2.generateFiles)(tree, (0, devkit_2.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, templateVariables);
-    const installTask = (0, devkit_2.addDependenciesToPackageJson)(tree, {
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, templateVariables);
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
         '@module-federation/node': versions_1.moduleFederationNodeVersion,
         cors: versions_1.corsVersion,
         isbot: versions_1.isbotVersion,
@@ -56,5 +55,5 @@ async function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
         '@types/express': versions_1.typesExpressVersion,
     }, {}, undefined, true);
     tasks.push(installTask);
-    return (0, devkit_2.runTasksInSerial)(...tasks);
+    return (0, devkit_1.runTasksInSerial)(...tasks);
 }

package/dist/src/generators/library/lib/update-app-routes.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateAppRoutes = updateAppRoutes;
 const devkit_1 = require("@nx/devkit");
 const ast_utils_1 = require("../../../utils/ast-utils");
-const ast_utils_2 = require("../../../utils/ast-utils");
 const maybe_js_1 = require("../../../utils/maybe-js");
 const versions_1 = require("../../../utils/versions");
 const internal_1 = require("@nx/js/internal");
@@ -32,7 +31,7 @@ function updateAppRoutes(host, options) {
         const { content: componentContent, source: componentSource } = readComponent(host, appComponentPath);
         const isComponentRouterPresent = componentContent.match(/react-router-dom/);
         if (!isComponentRouterPresent) {
-            const changes = (0, devkit_1.applyChangesToString)(componentContent, (0, ast_utils_2.addInitialRoutes)(appComponentPath, componentSource));
+            const changes = (0, devkit_1.applyChangesToString)(componentContent, (0, ast_utils_1.addInitialRoutes)(appComponentPath, componentSource));
             host.write(appComponentPath, changes);
         }
     }

package/dist/src/generators/remote/lib/setup-ssr-for-remote.js

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupSsrForRemote = setupSsrForRemote;
 const devkit_1 = require("@nx/devkit");
-const devkit_2 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
 const create_application_files_1 = require("../../application/lib/create-application-files");
 async function setupSsrForRemote(tree, options, appName) {
     const tasks = [];
-    const project = (0, devkit_2.readProjectConfiguration)(tree, appName);
+    const project = (0, devkit_1.readProjectConfiguration)(tree, appName);
     const pathToModuleFederationSsrFiles = options.typescriptConfiguration
         ? `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr-ts`
         : `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr`;
@@ -29,28 +28,28 @@ async function setupSsrForRemote(tree, options, appName) {
             browserBuildOutputPath: project.targets.build?.options?.outputPath,
             serverBuildOutputPath: project.targets.server?.options?.outputPath,
         };
-    (0, devkit_2.generateFiles)(tree, (0, devkit_2.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, templateVariables);
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, templateVariables);
     // For hosts to use when running remotes in static mode.
     const originalOutputPath = (project.targets.build?.options?.outputPath ??
         options.isUsingTsSolutionConfig)
         ? 'dist'
-        : (0, devkit_2.joinPathFragments)((0, devkit_1.offsetFromRoot)(options.appProjectRoot), 'dist', options.appProjectRoot != '.'
+        : (0, devkit_1.joinPathFragments)((0, devkit_1.offsetFromRoot)(options.appProjectRoot), 'dist', options.appProjectRoot != '.'
             ? options.appProjectRoot
             : options.projectName);
     const serverOptions = project.targets.server?.options;
     const serverOutputPath = serverOptions?.outputPath ??
-        (0, devkit_2.joinPathFragments)(originalOutputPath, 'server');
+        (0, devkit_1.joinPathFragments)(originalOutputPath, 'server');
     const serverOutputName = serverOptions?.outputFileName ?? 'main.js';
     project.targets['serve-static'] = {
         dependsOn: ['build', 'server'],
         executor: 'nx:run-commands',
         defaultConfiguration: 'development',
         options: {
-            command: `PORT=${options.devServerPort ?? 4200} node ${(0, devkit_2.joinPathFragments)(serverOutputPath, serverOutputName)}`,
+            command: `PORT=${options.devServerPort ?? 4200} node ${(0, devkit_1.joinPathFragments)(serverOutputPath, serverOutputName)}`,
         },
     };
-    (0, devkit_2.updateProjectConfiguration)(tree, appName, project);
-    const installTask = (0, devkit_2.addDependenciesToPackageJson)(tree, {
+    (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
         '@module-federation/node': versions_1.moduleFederationNodeVersion,
         cors: versions_1.corsVersion,
         isbot: versions_1.isbotVersion,
@@ -58,5 +57,5 @@ async function setupSsrForRemote(tree, options, appName) {
         '@types/express': versions_1.typesExpressVersion,
     }, {}, undefined, true);
     tasks.push(installTask);
-    return (0, devkit_2.runTasksInSerial)(...tasks);
+    return (0, devkit_1.runTasksInSerial)(...tasks);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "23.2.0-beta.7",
+  "version": "23.2.0-beta.9",
   "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": {
@@ -96,7 +96,7 @@
     "react-dom": ">=18.0.0 <20.0.0",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.7",
-    "@nx/module-federation": "23.2.0-beta.7"
+    "@nx/module-federation": "23.2.0-beta.9"
   },
   "peerDependenciesMeta": {
     "babel-plugin-react-compiler": {
@@ -118,27 +118,27 @@
     "minimatch": "10.2.5",
     "tslib": "^2.3.0",
     "semver": "^7.6.3",
-    "@nx/devkit": "23.2.0-beta.7",
-    "@nx/js": "23.2.0-beta.7",
-    "@nx/eslint": "23.2.0-beta.7",
-    "@nx/web": "23.2.0-beta.7"
+    "@nx/devkit": "23.2.0-beta.9",
+    "@nx/js": "23.2.0-beta.9",
+    "@nx/eslint": "23.2.0-beta.9",
+    "@nx/web": "23.2.0-beta.9"
   },
   "devDependencies": {
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.7",
-    "@nx/cypress": "23.2.0-beta.7",
-    "@nx/module-federation": "23.2.0-beta.7",
-    "@nx/playwright": "23.2.0-beta.7",
-    "@nx/rollup": "23.2.0-beta.7",
-    "@nx/rsbuild": "23.2.0-beta.7",
-    "@nx/vite": "23.2.0-beta.7",
-    "@nx/vitest": "23.2.0-beta.7",
-    "@nx/webpack": "23.2.0-beta.7",
-    "@nx/storybook": "23.2.0-beta.7",
-    "nx": "23.2.0-beta.7"
+    "@nx/cypress": "23.2.0-beta.9",
+    "@nx/module-federation": "23.2.0-beta.9",
+    "@nx/playwright": "23.2.0-beta.9",
+    "@nx/rollup": "23.2.0-beta.9",
+    "@nx/rsbuild": "23.2.0-beta.9",
+    "@nx/vite": "23.2.0-beta.9",
+    "@nx/vitest": "23.2.0-beta.9",
+    "@nx/webpack": "23.2.0-beta.9",
+    "@nx/storybook": "23.2.0-beta.9",
+    "nx": "23.2.0-beta.9"
   },
   "optionalDependencies": {
-    "@nx/vite": "23.2.0-beta.7"
+    "@nx/vite": "23.2.0-beta.9"
   },
   "publishConfig": {
     "access": "public"