@nx/react 23.0.0-beta.17 → 23.0.0-beta.18

package/index.d.ts

@@ -1,6 +1,3 @@
-import { NxReactWebpackPlugin as _NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';
-/** @deprecated Use '@nx/react/webpack-plugin' instead, which can improve graph creation by 150-200ms per file. */
-export declare const NxReactWebpackPlugin: typeof _NxReactWebpackPlugin;
 export { extraEslintDependencies, extendReactEslintJson, } from './src/utils/lint';
 export { assertValidStyle } from './src/utils/assertion';
 export { reactDomVersion, reactVersion } from './src/utils/versions';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,IAAI,qBAAqB,EAAE,MAAM,2DAA2D,CAAC;AAE1H,kHAAkH;AAClH,eAAO,MAAM,oBAAoB,8BAAwB,CAAC;AAE1D,OAAO,EACL,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,+BAA+B,EAAE,MAAM,wDAAwD,CAAC;AACzG,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,+BAA+B,EAAE,MAAM,kFAAkF,CAAC;AACnI,OAAO,EAAE,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AACxF,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,+BAA+B,EAAE,MAAM,wDAAwD,CAAC;AACzG,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,+BAA+B,EAAE,MAAM,kFAAkF,CAAC;AACnI,OAAO,EAAE,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AACxF,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,cAAc,sBAAsB,CAAC"}

package/index.js

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.extendReactEslintJson = exports.extraEslintDependencies = exports.NxReactWebpackPlugin = void 0;
+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.extendReactEslintJson = exports.extraEslintDependencies = void 0;
 const tslib_1 = require("tslib");
-const nx_react_webpack_plugin_1 = require("./plugins/nx-react-webpack-plugin/nx-react-webpack-plugin");
-/** @deprecated Use '@nx/react/webpack-plugin' instead, which can improve graph creation by 150-200ms per file. */
-exports.NxReactWebpackPlugin = nx_react_webpack_plugin_1.NxReactWebpackPlugin;
 var lint_1 = require("./src/utils/lint");
 Object.defineProperty(exports, "extraEslintDependencies", { enumerable: true, get: function () { return lint_1.extraEslintDependencies; } });
 Object.defineProperty(exports, "extendReactEslintJson", { enumerable: true, get: function () { return lint_1.extendReactEslintJson; } });

package/migrations.json

@@ -35,6 +35,12 @@
       "version": "22.0.0-beta.0",
       "description": "Updates webpack configs using React to use the new withSvgr composable function instead of the svgr option in withReact or NxReactWebpackPlugin.",
       "factory": "./src/migrations/update-22-0-0/add-svgr-to-webpack-config"
+    },
+    "update-23-0-0-remove-nx-react-webpack-plugin-import": {
+      "cli": "nx",
+      "version": "23.0.0-beta.10",
+      "description": "Rewrites imports of NxReactWebpackPlugin from '@nx/react' to the sub-path '@nx/react/webpack-plugin'.",
+      "factory": "./src/migrations/update-23-0-0/remove-nx-react-webpack-plugin-import"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "23.0.0-beta.17",
+  "version": "23.0.0-beta.18",
   "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": {
@@ -37,28 +37,28 @@
     "@svgr/webpack": "^8.0.1",
     "minimatch": "10.2.5",
     "tslib": "^2.3.0",
-    "@nx/devkit": "23.0.0-beta.17",
-    "@nx/js": "23.0.0-beta.17",
-    "@nx/eslint": "23.0.0-beta.17",
-    "@nx/web": "23.0.0-beta.17",
-    "@nx/module-federation": "23.0.0-beta.17",
-    "@nx/rollup": "23.0.0-beta.17",
+    "@nx/devkit": "23.0.0-beta.18",
+    "@nx/js": "23.0.0-beta.18",
+    "@nx/eslint": "23.0.0-beta.18",
+    "@nx/web": "23.0.0-beta.18",
+    "@nx/module-federation": "23.0.0-beta.18",
+    "@nx/rollup": "23.0.0-beta.18",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.5",
     "semver": "^7.6.3"
   },
   "devDependencies": {
-    "@nx/cypress": "23.0.0-beta.17",
-    "@nx/playwright": "23.0.0-beta.17",
-    "@nx/rsbuild": "23.0.0-beta.17",
-    "@nx/vite": "23.0.0-beta.17",
-    "@nx/vitest": "23.0.0-beta.17",
-    "@nx/webpack": "23.0.0-beta.17",
-    "@nx/storybook": "23.0.0-beta.17",
-    "nx": "23.0.0-beta.17"
+    "@nx/cypress": "23.0.0-beta.18",
+    "@nx/playwright": "23.0.0-beta.18",
+    "@nx/rsbuild": "23.0.0-beta.18",
+    "@nx/vite": "23.0.0-beta.18",
+    "@nx/vitest": "23.0.0-beta.18",
+    "@nx/webpack": "23.0.0-beta.18",
+    "@nx/storybook": "23.0.0-beta.18",
+    "nx": "23.0.0-beta.18"
   },
   "optionalDependencies": {
-    "@nx/vite": "23.0.0-beta.17"
+    "@nx/vite": "23.0.0-beta.18"
   },
   "publishConfig": {
     "access": "public"

package/src/generators/application/lib/bundlers/add-vite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add-vite.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/react/src/generators/application/lib/bundlers/add-vite.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAoC,MAAM,YAAY,CAAC;AAGzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAExD,wBAAsB,sBAAsB,CAC1C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,EACjC,KAAK,EAAE,GAAG,EAAE,iBA8Db;AAED,wBAAsB,wBAAwB,CAC5C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,EACjC,KAAK,EAAE,GAAG,EAAE,iBA0Cb"}
+{"version":3,"file":"add-vite.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/react/src/generators/application/lib/bundlers/add-vite.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAoC,MAAM,YAAY,CAAC;AAGzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAExD,wBAAsB,sBAAsB,CAC1C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,EACjC,KAAK,EAAE,GAAG,EAAE,iBAkEb;AAED,wBAAsB,wBAAwB,CAC5C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,EACjC,KAAK,EAAE,GAAG,EAAE,iBA8Cb"}

package/src/generators/application/lib/bundlers/add-vite.js

@@ -79,7 +79,11 @@ async function setupViteConfiguration(tree, options, tasks) {
         includeLib: false,
         includeVitest: options.unitTestRunner === 'vitest',
         inSourceTests: options.inSourceTests,
-        rollupOptionsExternal: ["'react'", "'react-dom'", "'react/jsx-runtime'"],
+        rolldownOptionsExternal: [
+            "'react'",
+            "'react-dom'",
+            "'react/jsx-runtime'",
+        ],
         port: options.port,
         previewPort: options.port,
         useEsmExtension: true,
@@ -106,7 +110,11 @@ async function setupVitestConfiguration(tree, options, tasks) {
         includeLib: false,
         includeVitest: true,
         inSourceTests: options.inSourceTests,
-        rollupOptionsExternal: ["'react'", "'react-dom'", "'react/jsx-runtime'"],
+        rolldownOptionsExternal: [
+            "'react'",
+            "'react-dom'",
+            "'react/jsx-runtime'",
+        ],
         imports: [
             options.compiler === 'swc'
                 ? `import react from '@vitejs/plugin-react-swc'`

package/src/generators/library/library.js

@@ -107,7 +107,7 @@ async function libraryGeneratorInternal(host, schema) {
             includeLib: true,
             includeVitest: options.unitTestRunner === 'vitest',
             inSourceTests: options.inSourceTests,
-            rollupOptionsExternal: [
+            rolldownOptionsExternal: [
                 "'react'",
                 "'react-dom'",
                 "'react/jsx-runtime'",
@@ -166,7 +166,7 @@ async function libraryGeneratorInternal(host, schema) {
             includeLib: true,
             includeVitest: true,
             inSourceTests: options.inSourceTests,
-            rollupOptionsExternal: [
+            rolldownOptionsExternal: [
                 "'react'",
                 "'react-dom'",
                 "'react/jsx-runtime'",

package/src/migrations/update-23-0-0/remove-nx-react-webpack-plugin-import.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+export default function removeNxReactWebpackPluginImport(tree: Tree): Promise<void>;
+//# sourceMappingURL=remove-nx-react-webpack-plugin-import.d.ts.map

package/src/migrations/update-23-0-0/remove-nx-react-webpack-plugin-import.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remove-nx-react-webpack-plugin-import.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/migrations/update-23-0-0/remove-nx-react-webpack-plugin-import.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,IAAI,EAAwB,MAAM,YAAY,CAAC;AA8BrE,wBAA8B,gCAAgC,CAAC,IAAI,EAAE,IAAI,iBAuHxE"}

package/src/migrations/update-23-0-0/remove-nx-react-webpack-plugin-import.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = removeNxReactWebpackPluginImport;
+const devkit_1 = require("@nx/devkit");
+const tsquery_1 = require("@phenomnomnominal/tsquery");
+const DEPRECATED_SYMBOL = 'NxReactWebpackPlugin';
+const DEPRECATED_PACKAGE = '@nx/react';
+const NEW_PACKAGE = '@nx/react/webpack-plugin';
+// ES module import: import { NxReactWebpackPlugin[, ...] } from '@nx/react'
+const ES_IMPORT_SELECTOR = `ImportDeclaration:has(StringLiteral[value=${DEPRECATED_PACKAGE}]):has(ImportClause ImportSpecifier > Identifier[name=${DEPRECATED_SYMBOL}])`;
+const IMPORT_SPECIFIERS_SELECTOR = `ImportClause ImportSpecifier`;
+const TARGET_IMPORT_SPECIFIER_SELECTOR = `ImportClause ImportSpecifier > Identifier[name=${DEPRECATED_SYMBOL}]`;
+const ES_MODULE_PATH_SELECTOR = `StringLiteral[value=${DEPRECATED_PACKAGE}]`;
+// CJS require: const { NxReactWebpackPlugin[, ...] } = require('@nx/react')
+const CJS_REQUIRE_STMT_SELECTOR = `VariableStatement:has(ObjectBindingPattern > BindingElement > Identifier[name=${DEPRECATED_SYMBOL}]):has(CallExpression:has(Identifier[name=require]) > StringLiteral[value=${DEPRECATED_PACKAGE}])`;
+const CJS_BINDING_ELEMENTS_SELECTOR = `ObjectBindingPattern > BindingElement`;
+const CJS_TARGET_BINDING_SELECTOR = `ObjectBindingPattern > BindingElement > Identifier[name=${DEPRECATED_SYMBOL}]`;
+const CJS_REQUIRE_PATH_SELECTOR = `CallExpression:has(Identifier[name=require]) > StringLiteral[value=${DEPRECATED_PACKAGE}]`;
+// Walk past whitespace from `fromIndex` to find a trailing comma. Returns the
+// position AFTER the comma if found, otherwise the original index. Handles
+// the `Foo , withReact` shape where the user wrote whitespace before the
+// comma — `node.getEnd()` stops at the identifier and the comma sits one
+// character past the whitespace.
+function endAfterTrailingComma(text, fromIndex) {
+    let i = fromIndex;
+    while (i < text.length && /\s/.test(text.charAt(i)))
+        i++;
+    return text.charAt(i) === ',' ? i + 1 : fromIndex;
+}
+async function removeNxReactWebpackPluginImport(tree) {
+    (0, devkit_1.visitNotIgnoredFiles)(tree, '', (filePath) => {
+        if (!filePath.endsWith('.ts') &&
+            !filePath.endsWith('.tsx') &&
+            !filePath.endsWith('.js') &&
+            !filePath.endsWith('.jsx') &&
+            !filePath.endsWith('.cjs') &&
+            !filePath.endsWith('.mjs')) {
+            return;
+        }
+        let contents = tree.read(filePath, 'utf-8');
+        if (!contents)
+            return;
+        // Quick check: must contain the deprecated symbol and the deprecated package path
+        if (!contents.includes(DEPRECATED_SYMBOL) ||
+            (!contents.includes(`'${DEPRECATED_PACKAGE}'`) &&
+                !contents.includes(`"${DEPRECATED_PACKAGE}"`))) {
+            return;
+        }
+        let changed = false;
+        // Re-parse on every iteration so multiple matches in the same file work
+        // correctly. The multi-specifier branch prepends a new declaration which
+        // shifts every offset; collected AST positions go stale after one rewrite,
+        // so process one match at a time.
+        let didRewrite = true;
+        while (didRewrite) {
+            didRewrite = false;
+            const sourceFile = (0, tsquery_1.ast)(contents);
+            const importNode = (0, tsquery_1.query)(sourceFile, ES_IMPORT_SELECTOR)[0];
+            if (importNode) {
+                const specifiers = (0, tsquery_1.query)(importNode, IMPORT_SPECIFIERS_SELECTOR);
+                const targetIdentifier = (0, tsquery_1.query)(importNode, TARGET_IMPORT_SPECIFIER_SELECTOR)[0];
+                if (targetIdentifier) {
+                    // Walk to the ImportSpecifier to cover `Foo` and `Foo as Bar`.
+                    const targetSpec = targetIdentifier.parent;
+                    if (specifiers.length === 1) {
+                        const modulePathNode = (0, tsquery_1.query)(importNode, ES_MODULE_PATH_SELECTOR)[0];
+                        if (modulePathNode) {
+                            contents =
+                                contents.slice(0, modulePathNode.getStart()) +
+                                    `'${NEW_PACKAGE}'` +
+                                    contents.slice(modulePathNode.getEnd());
+                            changed = true;
+                            didRewrite = true;
+                            continue;
+                        }
+                    }
+                    else {
+                        // Extract target spec verbatim (preserves alias)
+                        const end = endAfterTrailingComma(contents, targetSpec.getEnd());
+                        contents =
+                            `import { ${targetSpec.getText()} } from '${NEW_PACKAGE}';\n` +
+                                contents.slice(0, targetSpec.getStart()) +
+                                contents.slice(end);
+                        changed = true;
+                        didRewrite = true;
+                        continue;
+                    }
+                }
+            }
+            const stmtNode = (0, tsquery_1.query)(sourceFile, CJS_REQUIRE_STMT_SELECTOR)[0];
+            if (stmtNode) {
+                const bindingElements = (0, tsquery_1.query)(stmtNode, CJS_BINDING_ELEMENTS_SELECTOR);
+                const targetIdentifier = (0, tsquery_1.query)(stmtNode, CJS_TARGET_BINDING_SELECTOR)[0];
+                if (targetIdentifier) {
+                    // Walk to the BindingElement to cover `Foo` and `Foo: Bar`.
+                    const targetBinding = targetIdentifier.parent;
+                    if (bindingElements.length === 1) {
+                        const requirePathNode = (0, tsquery_1.query)(stmtNode, CJS_REQUIRE_PATH_SELECTOR)[0];
+                        if (requirePathNode) {
+                            contents =
+                                contents.slice(0, requirePathNode.getStart()) +
+                                    `'${NEW_PACKAGE}'` +
+                                    contents.slice(requirePathNode.getEnd());
+                            changed = true;
+                            didRewrite = true;
+                            continue;
+                        }
+                    }
+                    else {
+                        // Extract target binding verbatim (preserves alias)
+                        const end = endAfterTrailingComma(contents, targetBinding.getEnd());
+                        contents =
+                            `const { ${targetBinding.getText()} } = require('${NEW_PACKAGE}');\n` +
+                                contents.slice(0, targetBinding.getStart()) +
+                                contents.slice(end);
+                        changed = true;
+                        didRewrite = true;
+                        continue;
+                    }
+                }
+            }
+        }
+        if (changed) {
+            tree.write(filePath, contents);
+        }
+    });
+    await (0, devkit_1.formatFiles)(tree);
+}