@nx/react 20.0.0-canary.20241002-1d10a19 → 20.0.0-rc.0

package/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupTailwindGenerator = exports.componentTestGenerator = exports.cypressComponentConfigGenerator = exports.remoteGenerator = exports.hostGenerator = exports.storybookConfigurationGenerator = exports.storiesGenerator = exports.reduxGenerator = exports.reactInitGenerator = exports.libraryGenerator = exports.componentStoryGenerator = exports.hookGenerator = exports.componentGenerator = exports.applicationGenerator = exports.reactVersion = exports.reactDomVersion = exports.assertValidStyle = exports.cssInJsDependenciesBabel = exports.extendReactEslintJson = exports.extraEslintDependencies = exports.NxReactWebpackPlugin = void 0;
 const tslib_1 = require("tslib");
 const nx_react_webpack_plugin_1 = require("./plugins/nx-react-webpack-plugin/nx-react-webpack-plugin");
-// TODO(v20): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
+// TODO(v21): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
 /** @deprecated Use '@nx/react/webpack-plugin' instead. */
 exports.NxReactWebpackPlugin = nx_react_webpack_plugin_1.NxReactWebpackPlugin;
 var lint_1 = require("./src/utils/lint");

package/migrations.json

@@ -1,35 +1,5 @@
 {
   "generators": {
-    "update-16-0-0-add-nx-packages": {
-      "cli": "nx",
-      "version": "16.0.0-beta.1",
-      "description": "Replace @nrwl/react with @nx/react",
-      "implementation": "./src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages"
-    },
-    "update-16-2-0-remove-package": {
-      "cli": "nx",
-      "version": "16.2.0-beta.0",
-      "description": "Remove react-test-renderer from package.json",
-      "implementation": "./src/migrations/update-16-2-0-remove-package/update-16-2-0-remove-package"
-    },
-    "remove-types-react-router-dom": {
-      "cli": "nx",
-      "version": "16.3.0-beta.2",
-      "description": "Remove @types/react-router-dom from package.json",
-      "implementation": "./src/migrations/update-16-3-0/remove-types-react-router-dom-package"
-    },
-    "add-babel-core": {
-      "cli": "nx",
-      "version": "16.7.0-beta.2",
-      "description": "Add @babel/core to package.json if @babel/preset-react is present",
-      "implementation": "./src/migrations/update-16-7-0/add-babel-core"
-    },
-    "update-16-7-0-add-typings": {
-      "cli": "nx",
-      "version": "16.7.0-beta.2",
-      "description": "Add @nx/react types to tsconfig types array",
-      "implementation": "./src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings"
-    },
     "add-module-federation-env-var-to-target-defaults": {
       "cli": "nx",
       "version": "18.0.0-beta.0",
@@ -62,88 +32,6 @@
     }
   },
   "packageJsonUpdates": {
-    "16.3.0": {
-      "version": "16.3.0-beta.2",
-      "packages": {
-        "react-router-dom": {
-          "version": "6.11.2",
-          "alwaysAddToPackageJson": false
-        },
-        "@svgr/rollup": {
-          "version": "^8.0.1",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
-    "16.4.0-beta.4": {
-      "version": "16.4.0-beta.4",
-      "packages": {
-        "stylus": {
-          "version": "^0.59.0",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
-    "16.4.0-beta.7": {
-      "version": "16.4.0-beta.7",
-      "packages": {
-        "@types/react": {
-          "version": "18.2.12",
-          "alwaysAddToPackageJson": false
-        },
-        "@types/react-dom": {
-          "version": "18.2.5",
-          "alwaysAddToPackageJson": false
-        },
-        "@types/react-is": {
-          "version": "18.2.0",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
-    "16.4.0-beta.8": {
-      "version": "16.4.0-beta.8",
-      "packages": {
-        "@emotion/styled": {
-          "version": "11.11.0",
-          "alwaysAddToPackageJson": false
-        },
-        "@emotion/react": {
-          "version": "11.11.1",
-          "alwaysAddToPackageJson": false
-        },
-        "@emotion/babel-plugin": {
-          "version": "11.11.0",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
-    "16.4.0-beta.11": {
-      "version": "16.4.0-beta.11",
-      "packages": {
-        "@types/react": {
-          "version": "18.2.13",
-          "alwaysAddToPackageJson": false
-        },
-        "@types/react-dom": {
-          "version": "18.2.6",
-          "alwaysAddToPackageJson": false
-        },
-        "@types/react-is": {
-          "version": "18.2.1",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
-    "16.5.0-beta.4": {
-      "version": "16.5.0-beta.4",
-      "packages": {
-        "@types/react": {
-          "version": "18.2.14",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
     "17.0.0-beta.0": {
       "version": "17.0.0-beta.0",
       "packages": {
@@ -242,6 +130,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "20.0.0": {
+      "version": "20.0.0-beta.8",
+      "packages": {
+        "eslint-plugin-import": {
+          "version": "2.31.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.0.0-canary.20241002-1d10a19",
+  "version": "20.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, 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,10 +39,10 @@
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
     "@module-federation/enhanced": "0.6.6",
-    "@nx/devkit": "20.0.0-canary.20241002-1d10a19",
-    "@nx/js": "20.0.0-canary.20241002-1d10a19",
-    "@nx/eslint": "20.0.0-canary.20241002-1d10a19",
-    "@nx/web": "20.0.0-canary.20241002-1d10a19",
+    "@nx/devkit": "20.0.0-rc.0",
+    "@nx/js": "20.0.0-rc.0",
+    "@nx/eslint": "20.0.0-rc.0",
+    "@nx/web": "20.0.0-rc.0",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.0"
   },

package/plugins/bundle-rollup.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// TODO(v20): This should be deprecated and removed in v22.
+// TODO(v22): Remove this in Nx 22 and migrate to explicit rollup.config.js files.
+/**
+ * @deprecated Use `withNx` function from `@nx/rollup/with-nx` in your rollup.config.js file instead. Use `nx g @nx/rollup:convert-to-inferred` to generate the rollup.config.js file if it does not exist.
+ */
 function getRollupOptions(options) {
     const extraGlobals = {
         react: 'React',

package/plugins/component-testing/index.js

@@ -167,7 +167,7 @@ function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
     }
     return async () => {
         customWebpack = await customWebpack;
-        // TODO(v20): Component testing need to be agnostic of the underlying executor. With Crystal, we're not using `@nx/webpack:webpack` by default.
+        // TODO(v21): Component testing need to be agnostic of the underlying executor. With Crystal, we're not using `@nx/webpack:webpack` by default.
         // We need to decouple CT from the build target of the app, we just care about bundler config (e.g. webpack.config.js).
         // The generated setup should support both Webpack and Vite as documented here: https://docs.cypress.io/guides/component-testing/react/overview
         // Related issue: https://github.com/nrwl/nx/issues/21546

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.js

@@ -13,7 +13,7 @@ function applyReactConfig(options, config = {}) {
             ref: true,
         };
         const svgrOptions = typeof options.svgr === 'object' ? options.svgr : defaultSvgrOptions;
-        // TODO(v20): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
+        // TODO(v21): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
         // It should be:
         // use: [{
         //   test: /\.svg$/i,

package/src/generators/application/application.js

@@ -27,6 +27,7 @@ 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");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function addLinting(host, options) {
     const tasks = [];
     if (options.linter === eslint_1.Linter.EsLint) {
@@ -72,6 +73,7 @@ async function applicationGenerator(host, schema) {
     });
 }
 async function applicationGeneratorInternal(host, schema) {
+    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(host, 'react', 'application');
     const tasks = [];
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
     (0, show_possible_warnings_1.showPossibleWarnings)(host, options);

package/src/generators/host/host.js

@@ -15,7 +15,9 @@ const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 const js_1 = require("@nx/js");
 const versions_1 = require("../../utils/versions");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function hostGenerator(host, schema) {
+    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(host, 'react', 'host');
     const tasks = [];
     const options = {
         ...(await (0, normalize_options_1.normalizeOptions)(host, schema)),
@@ -41,6 +43,7 @@ async function hostGenerator(host, schema) {
     await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
     const initTask = await (0, application_1.default)(host, {
         ...options,
+        directory: options.appProjectRoot,
         name: options.projectName,
         // The target use-case is loading remotes as child routes, thus always enable routing.
         routing: true,
@@ -66,7 +69,7 @@ async function hostGenerator(host, schema) {
                 typescriptConfiguration: options.typescriptConfiguration,
                 js: options.js,
                 dynamic: options.dynamic,
-                host: options.name,
+                host: options.projectName,
                 skipPackageJson: options.skipPackageJson,
                 bundler: options.bundler,
             });

package/src/generators/init/init.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.reactInitGenerator = reactInitGenerator;
 const devkit_1 = require("@nx/devkit");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const versions_1 = require("../../utils/versions");
 async function reactInitGenerator(host, schema) {
+    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(host, 'react', 'init');
     const tasks = [];
     if (!schema.skipPackageJson) {
         tasks.push((0, devkit_1.removeDependenciesFromPackageJson)(host, ['@nx/react'], []));

package/src/generators/library/library.js

@@ -7,6 +7,7 @@ const devkit_1 = require("@nx/devkit");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 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 maybe_js_1 = require("../../utils/maybe-js");
 const component_1 = require("../component/component");
@@ -27,6 +28,7 @@ async function libraryGenerator(host, schema) {
     });
 }
 async function libraryGeneratorInternal(host, schema) {
+    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(host, 'react', 'library');
     const tasks = [];
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
     if (options.publishable === true && !schema.importPath) {

package/src/generators/remote/remote.js

@@ -17,6 +17,7 @@ const maybe_js_1 = require("../../utils/maybe-js");
 const js_1 = require("@nx/js");
 const versions_1 = require("../../utils/versions");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 function addModuleFederationFiles(host, options) {
     const templateVariables = {
         ...(0, devkit_1.names)(options.projectName),
@@ -46,6 +47,7 @@ function addModuleFederationFiles(host, options) {
     }
 }
 async function remoteGenerator(host, schema) {
+    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(host, 'react', 'remote');
     const tasks = [];
     const options = {
         ...(await (0, normalize_options_1.normalizeOptions)(host, schema)),

package/src/module-federation/with-module-federation-ssr.js

@@ -17,7 +17,7 @@ async function withModuleFederationForSSR(options, configOverride) {
             runtimeChunk: false,
         };
         config.plugins.push(new (require('@module-federation/enhanced').ModuleFederationPlugin)({
-            name: options.name,
+            name: options.name.replace(/-/g, '_'),
             filename: 'remoteEntry.js',
             exposes: options.exposes,
             remotes: mappedRemotes,

package/src/module-federation/with-module-federation.js

@@ -26,7 +26,7 @@ async function withModuleFederation(options, configOverride) {
             config.optimization.runtimeChunk = 'single';
         }
         config.plugins.push(new webpack_1.ModuleFederationPlugin({
-            name: options.name,
+            name: options.name.replace(/-/g, '_'),
             filename: 'remoteEntry.js',
             exposes: options.exposes,
             remotes: mappedRemotes,

package/src/utils/versions.d.ts

@@ -22,7 +22,7 @@ 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 eslintPluginImportVersion = "2.30.0";
+export declare const eslintPluginImportVersion = "2.31.0";
 export declare const eslintPluginJsxA11yVersion = "6.7.1";
 export declare const eslintPluginReactVersion = "7.35.0";
 export declare const eslintPluginReactHooksVersion = "4.6.0";

package/src/utils/versions.js

@@ -27,7 +27,7 @@ exports.reactRouterDomVersion = '6.11.2';
 exports.testingLibraryReactVersion = '15.0.6';
 exports.reduxjsToolkitVersion = '1.9.3';
 exports.reactReduxVersion = '8.0.5';
-exports.eslintPluginImportVersion = '2.30.0';
+exports.eslintPluginImportVersion = '2.31.0';
 exports.eslintPluginJsxA11yVersion = '6.7.1';
 exports.eslintPluginReactVersion = '7.35.0';
 exports.eslintPluginReactHooksVersion = '4.6.0';

package/src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from '@nx/devkit';
-export default function replacePackage(tree: Tree): Promise<void>;

package/src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = replacePackage;
-const devkit_1 = require("@nx/devkit");
-const replace_package_1 = require("@nx/devkit/src/utils/replace-package");
-async function replacePackage(tree) {
-    await (0, replace_package_1.replaceNrwlPackageWithNxPackage)(tree, '@nrwl/react', '@nx/react');
-    await (0, devkit_1.formatFiles)(tree);
-}

package/src/migrations/update-16-2-0-remove-package/update-16-2-0-remove-package.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from '@nx/devkit';
-export default function removePackage(tree: Tree): Promise<void>;

package/src/migrations/update-16-2-0-remove-package/update-16-2-0-remove-package.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = removePackage;
-const devkit_1 = require("@nx/devkit");
-async function removePackage(tree) {
-    (0, devkit_1.removeDependenciesFromPackageJson)(tree, [], ['react-test-renderer']);
-    await (0, devkit_1.formatFiles)(tree);
-}

package/src/migrations/update-16-3-0/remove-types-react-router-dom-package.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from '@nx/devkit';
-export default function removePackage(tree: Tree): Promise<void>;

package/src/migrations/update-16-3-0/remove-types-react-router-dom-package.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = removePackage;
-const devkit_1 = require("@nx/devkit");
-async function removePackage(tree) {
-    (0, devkit_1.removeDependenciesFromPackageJson)(tree, [], ['react-test-renderer']);
-    await (0, devkit_1.formatFiles)(tree);
-}

package/src/migrations/update-16-7-0/add-babel-core.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from '@nx/devkit';
-export default function addBabelCore(tree: Tree): Promise<void>;

package/src/migrations/update-16-7-0/add-babel-core.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = addBabelCore;
-const devkit_1 = require("@nx/devkit");
-const versions_1 = require("../../utils/versions");
-async function addBabelCore(tree) {
-    const packageJson = (0, devkit_1.readJson)(tree, 'package.json');
-    if (packageJson?.devDependencies['@babel/preset-react']) {
-        (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
-            '@babel/core': versions_1.babelCoreVersion,
-        });
-        await (0, devkit_1.formatFiles)(tree);
-    }
-}

package/src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from '@nx/devkit';
-export default function addTypings(tree: Tree): Promise<void>;

package/src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings.js

@@ -1,57 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = addTypings;
-const devkit_1 = require("@nx/devkit");
-async function addTypings(tree) {
-    const projects = (0, devkit_1.getProjects)(tree);
-    const buildExecutors = [
-        '@nx/webpack:webpack',
-        '@nx/vite:build',
-        '@nx/rspack:rspack',
-    ];
-    const serveExecutors = [
-        '@nx/webpack:dev-server',
-        '@nx/vite:dev-server',
-        '@nx/rspack:dev-server',
-    ];
-    const relatedTsConfigs = [
-        'tsconfig.app.json',
-        'tsconfig.lib.json',
-        'tsconfig.spec.json',
-    ];
-    const typesToAdd = [
-        '@nx/react/typings/cssmodule.d.ts',
-        '@nx/react/typings/image.d.ts',
-    ];
-    for (const [, config] of projects) {
-        if (!buildExecutors.includes(config?.targets?.build?.executor)) {
-            continue;
-        }
-        if (config?.targets?.serve?.executor &&
-            !serveExecutors.includes(config?.targets?.serve?.executor)) {
-            continue;
-        }
-        const rootPath = config.root;
-        const projectTsConfigPath = (0, devkit_1.joinPathFragments)(rootPath, 'tsconfig.json');
-        const projectTsConfig = (0, devkit_1.readJson)(tree, projectTsConfigPath);
-        if (projectTsConfig.compilerOptions?.jsx !== 'react-jsx') {
-            continue;
-        }
-        relatedTsConfigs.forEach((tsConfig) => {
-            const tsConfigPath = (0, devkit_1.joinPathFragments)(rootPath, tsConfig);
-            if (tree.exists(tsConfigPath)) {
-                (0, devkit_1.updateJson)(tree, tsConfigPath, (json) => {
-                    const compilerOptions = json.compilerOptions || {};
-                    compilerOptions.types = [
-                        ...new Set([...(compilerOptions.types || []), ...typesToAdd]),
-                    ];
-                    if (json.files?.length > 0) {
-                        json.files = json.files.filter((file) => !['cssmodule.d.ts', 'image.d.ts'].includes(file));
-                    }
-                    return { ...json, compilerOptions };
-                });
-            }
-        });
-    }
-    await (0, devkit_1.formatFiles)(tree);
-}