@nx/react 0.0.0-pr-22179-271588f → 0.0.0-pr-26515-856ef7f

package/LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2017-2023 Narwhal Technologies Inc.
+Copyright (c) 2017-2024 Narwhal Technologies Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/README.md

@@ -24,7 +24,7 @@
 
 Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.
 
-This package is a [React plugin for Nx](https://nx.dev/packages/react).
+This package is a [React plugin for Nx](https://nx.dev/nx-api/react).
 
 ## Getting Started
 

package/index.d.ts

@@ -1,3 +1,6 @@
+import { NxReactWebpackPlugin as _NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';
+/** @deprecated Use '@nx/react/webpack-plugin' instead. */
+export declare const NxReactWebpackPlugin: typeof _NxReactWebpackPlugin;
 export { extraEslintDependencies, extendReactEslintJson, } from './src/utils/lint';
 export { cssInJsDependenciesBabel } from './src/utils/styled';
 export { assertValidStyle } from './src/utils/assertion';
@@ -19,4 +22,3 @@ export { componentTestGenerator } from './src/generators/component-test/componen
 export { setupTailwindGenerator } from './src/generators/setup-tailwind/setup-tailwind';
 export type { SupportedStyles } from './typings/style';
 export * from './plugins/with-react';
-export { NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';

package/index.js

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NxReactWebpackPlugin = exports.setupTailwindGenerator = exports.componentTestGenerator = exports.cypressComponentConfigGenerator = exports.remoteGenerator = exports.hostGenerator = exports.storybookConfigurationGenerator = exports.storiesGenerator = exports.reduxGenerator = exports.reactInitGenerator = exports.libraryGenerator = exports.componentStoryGenerator = exports.componentCypressGenerator = exports.hookGenerator = exports.componentGenerator = exports.applicationGenerator = exports.reactVersion = exports.reactDomVersion = exports.assertValidStyle = exports.cssInJsDependenciesBabel = exports.extendReactEslintJson = exports.extraEslintDependencies = void 0;
+exports.setupTailwindGenerator = exports.componentTestGenerator = exports.cypressComponentConfigGenerator = exports.remoteGenerator = exports.hostGenerator = exports.storybookConfigurationGenerator = exports.storiesGenerator = exports.reduxGenerator = exports.reactInitGenerator = exports.libraryGenerator = exports.componentStoryGenerator = exports.componentCypressGenerator = 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).
+/** @deprecated Use '@nx/react/webpack-plugin' instead. */
+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; } });
@@ -43,5 +47,3 @@ Object.defineProperty(exports, "componentTestGenerator", { enumerable: true, get
 var setup_tailwind_1 = require("./src/generators/setup-tailwind/setup-tailwind");
 Object.defineProperty(exports, "setupTailwindGenerator", { enumerable: true, get: function () { return setup_tailwind_1.setupTailwindGenerator; } });
 tslib_1.__exportStar(require("./plugins/with-react"), exports);
-var nx_react_webpack_plugin_1 = require("./plugins/nx-react-webpack-plugin/nx-react-webpack-plugin");
-Object.defineProperty(exports, "NxReactWebpackPlugin", { enumerable: true, get: function () { return nx_react_webpack_plugin_1.NxReactWebpackPlugin; } });

package/migrations.json

@@ -1,23 +1,5 @@
 {
   "generators": {
-    "update-rollup-executor": {
-      "cli": "nx",
-      "version": "15.3.0-beta.0",
-      "description": "Update projects using @nrwl/web:rollup to @nrwl/rollup:rollup for build.",
-      "factory": "./src/migrations/update-15-3-0/update-rollup-executor"
-    },
-    "install-webpack-rollup-dependencies": {
-      "cli": "nx",
-      "version": "15.3.0-beta.0",
-      "description": "Install new dependencies for React projects using Webpack or Rollup.",
-      "factory": "./src/migrations/update-15-3-0/install-webpack-rollup-dependencies"
-    },
-    "react-webpack-config-setup": {
-      "cli": "nx",
-      "version": "15.6.3-beta.0",
-      "description": "Creates or updates webpack.config.js file with the new options for webpack.",
-      "factory": "./src/migrations/update-15-6-3/webpack-config-setup"
-    },
     "update-16-0-0-add-nx-packages": {
       "cli": "nx",
       "version": "16.0.0-beta.1",
@@ -53,151 +35,15 @@
       "version": "18.0.0-beta.0",
       "description": "Add NX_MF_DEV_SERVER_STATIC_REMOTES to inputs for task hashing when '@nx/webpack:webpack' is used for Module Federation.",
       "factory": "./src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults"
+    },
+    "fix-target-defaults-for-webpack": {
+      "cli": "nx",
+      "version": "18.1.1-beta.0",
+      "description": "Ensure targetDefaults inputs for task hashing when '@nx/webpack:webpack' is used are correct for Module Federation.",
+      "factory": "./src/migrations/update-18-1-1/fix-target-defaults-inputs"
     }
   },
   "packageJsonUpdates": {
-    "15.2.2-beta.0": {
-      "version": "15.2.2-beta.0",
-      "packages": {
-        "@types/react": {
-          "version": "18.0.25",
-          "alwaysAddToPackageJson": false
-        },
-        "@types/react-dom": {
-          "version": "18.0.9",
-          "alwaysAddToPackageJson": false
-        },
-        "@types/node": {
-          "version": "18.11.9",
-          "alwaysAddToPackageJson": false
-        },
-        "styled-components": {
-          "version": "5.3.6",
-          "alwaysAddToPackageJson": false
-        },
-        "@emotion/styled": {
-          "version": "11.10.5",
-          "alwaysAddToPackageJson": false
-        },
-        "@emotion/react": {
-          "version": "11.10.5",
-          "alwaysAddToPackageJson": false
-        },
-        "@emotion/babel-plugin": {
-          "version": "11.10.5",
-          "alwaysAddToPackageJson": false
-        },
-        "styled-jsx": {
-          "version": "5.1.0",
-          "alwaysAddToPackageJson": false
-        },
-        "react-router-dom": {
-          "version": "6.4.3",
-          "alwaysAddToPackageJson": false
-        },
-        "@reduxjs/toolkit": {
-          "version": "1.9.0",
-          "alwaysAddToPackageJson": false
-        },
-        "react-redux": {
-          "version": "8.0.5",
-          "alwaysAddToPackageJson": false
-        },
-        "eslint-plugin-react": {
-          "version": "7.31.11",
-          "alwaysAddToPackageJson": false
-        },
-        "postcss": {
-          "version": "8.4.19",
-          "alwaysAddToPackageJson": false
-        },
-        "tailwindcss": {
-          "version": "3.2.4",
-          "alwaysAddToPackageJson": false
-        },
-        "autoprefixer": {
-          "version": "10.4.13",
-          "alwaysAddToPackageJson": false
-        },
-        "@types/express": {
-          "version": "4.17.14",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
-    "15.8.0": {
-      "version": "15.8.0-beta.0",
-      "packages": {
-        "@types/react": {
-          "version": "18.0.28",
-          "alwaysAddToPackageJson": false
-        },
-        "@types/react-dom": {
-          "version": "18.0.11",
-          "alwaysAddToPackageJson": false
-        },
-        "@types/node": {
-          "version": "18.14.2",
-          "alwaysAddToPackageJson": false
-        },
-        "@emotion/styled": {
-          "version": "11.10.6",
-          "alwaysAddToPackageJson": false
-        },
-        "@emotion/react": {
-          "version": "11.10.6",
-          "alwaysAddToPackageJson": false
-        },
-        "@emotion/babel-plugin": {
-          "version": "11.10.6",
-          "alwaysAddToPackageJson": false
-        },
-        "styled-jsx": {
-          "version": "5.1.2",
-          "alwaysAddToPackageJson": false
-        },
-        "react-router-dom": {
-          "version": "6.8.1",
-          "alwaysAddToPackageJson": false
-        },
-        "@testing-library/react": {
-          "version": "14.0.0",
-          "alwaysAddToPackageJson": false
-        },
-        "@reduxjs/toolkit": {
-          "version": "1.9.3",
-          "alwaysAddToPackageJson": false
-        },
-        "eslint-plugin-import": {
-          "version": "2.27.5",
-          "alwaysAddToPackageJson": false
-        },
-        "eslint-plugin-jsx-a11y": {
-          "version": "6.7.1",
-          "alwaysAddToPackageJson": false
-        },
-        "eslint-plugin-react": {
-          "version": "7.32.2",
-          "alwaysAddToPackageJson": false
-        },
-        "postcss": {
-          "version": "8.4.21",
-          "alwaysAddToPackageJson": false
-        },
-        "tailwindcss": {
-          "version": "3.2.7",
-          "alwaysAddToPackageJson": false
-        },
-        "@types/express": {
-          "version": "4.17.17",
-          "alwaysAddToPackageJson": false
-        },
-        "less": {
-          "version": "4.1.3",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
     "16.3.0": {
       "version": "16.3.0-beta.2",
       "packages": {
@@ -305,6 +151,57 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "19.0.0": {
+      "version": "19.0.0-beta.12",
+      "packages": {
+        "react": {
+          "version": "18.3.1",
+          "alwaysAddToPackageJson": false
+        },
+        "react-dom": {
+          "version": "18.3.1",
+          "alwaysAddToPackageJson": false
+        },
+        "react-is": {
+          "version": "18.3.1",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/react": {
+          "version": "18.3.1",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/react-dom": {
+          "version": "18.3.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/react-is": {
+          "version": "18.3.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@testing-library/react": {
+          "version": "15.0.6",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "19.0.3": {
+      "version": "19.0.3-beta.0",
+      "packages": {
+        "tailwindcss": {
+          "version": "3.4.3",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "19.2.0": {
+      "version": "19.2.0-beta.8",
+      "packages": {
+        "postcss": {
+          "version": "8.4.38",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nx/react",
-  "version": "0.0.0-pr-22179-271588f",
+  "version": "0.0.0-pr-26515-856ef7f",
   "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.",
+  "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": {
     "type": "git",
     "url": "https://github.com/nrwl/nx.git",
@@ -14,9 +14,10 @@
     "Web",
     "Jest",
     "Cypress",
-    "CLI"
+    "CLI",
+    "Front-end"
   ],
-  "main": "./index.js",
+  "main": "./index",
   "typings": "./index.d.ts",
   "author": "Victor Savkin",
   "license": "MIT",
@@ -34,13 +35,14 @@
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
+    "file-loader": "^6.2.0",
     "minimatch": "9.0.3",
     "tslib": "^2.3.0",
-    "@nx/devkit": "0.0.0-pr-22179-271588f",
-    "@nx/js": "0.0.0-pr-22179-271588f",
-    "@nx/eslint": "0.0.0-pr-22179-271588f",
-    "@nx/web": "0.0.0-pr-22179-271588f",
-    "@nrwl/react": "0.0.0-pr-22179-271588f"
+    "@nx/devkit": "0.0.0-pr-26515-856ef7f",
+    "@nx/js": "0.0.0-pr-26515-856ef7f",
+    "@nx/eslint": "0.0.0-pr-26515-856ef7f",
+    "@nx/web": "0.0.0-pr-26515-856ef7f",
+    "@nrwl/react": "0.0.0-pr-26515-856ef7f"
   },
   "publishConfig": {
     "access": "public"

package/plugins/bundle-rollup.js

@@ -36,7 +36,7 @@ function getRollupOptions(options) {
             url({
                 limit: 10000, // 10kB
             }),
-            ...options.plugins,
+            ...(Array.isArray(options.plugins) ? options.plugins : []),
         ];
     }
     catch {

package/plugins/component-testing/index.js

@@ -28,7 +28,7 @@ function nxComponentTestingPreset(pathToConfig, options) {
     const basePresetSettings = (0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig, {
         testingType: 'component',
     });
-    if (global.NX_GRAPH_CREATION || global.NX_CYPRESS_INIT_GENERATOR_RUNNING) {
+    if (global.NX_GRAPH_CREATION) {
         // this is only used by plugins, so we don't need the component testing
         // options, cast to any to avoid type errors
         return basePresetSettings;
@@ -168,7 +168,10 @@ function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
     }
     return async () => {
         customWebpack = await customWebpack;
-        // TODO(v19): Once webpackConfig is always set in @nx/webpack:webpack and isolatedConfig is removed, we no longer need this default.
+        // TODO(v20): 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
         const configure = composePluginsSync(withNx(), withWeb());
         const defaultWebpack = configure({}, {
             options: {

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

@@ -29,7 +29,7 @@ function buildBaseWebpackConfig({ tsConfigPath = 'tsconfig.cy.json', compiler =
                     type: 'asset',
                     parser: {
                         dataUrlCondition: {
-                            maxSize: 10000, // 10 kB
+                            maxSize: 10_000, // 10 kB
                         },
                     },
                 },

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

@@ -1,4 +1,5 @@
 import { Configuration, WebpackOptionsNormalized } from 'webpack';
+import { SvgrOptions } from '../../with-react';
 export declare function applyReactConfig(options: {
-    svgr?: boolean;
+    svgr?: boolean | SvgrOptions;
 }, config?: Partial<WebpackOptionsNormalized | Configuration>): void;

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

@@ -5,18 +5,46 @@ function applyReactConfig(options, config = {}) {
     if (!process.env['NX_TASK_TARGET_PROJECT'])
         return;
     addHotReload(config);
-    if (options.svgr !== false) {
+    if (options.svgr !== false || typeof options.svgr === 'object') {
         removeSvgLoaderIfPresent(config);
+        const defaultSvgrOptions = {
+            svgo: false,
+            titleProp: true,
+            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.
+        // It should be:
+        // use: [{
+        //   test: /\.svg$/i,
+        //   type: 'asset',
+        //   resourceQuery: /react/, // *.svg?react
+        // },
+        // {
+        //   test: /\.svg$/i,
+        //   issuer: /\.[jt]sx?$/,
+        //   resourceQuery: { not: [/react/] }, // exclude react component if *.svg?react
+        //   use: ['@svgr/webpack'],
+        // }],
+        // See:
+        // - SVGR: https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
+        // - Vite: https://www.npmjs.com/package/vite-plugin-svgr
+        // - Rsbuild: https://github.com/web-infra-dev/rsbuild/pull/1783
+        // Note: We also need a migration for any projects that are using SVGR to convert
+        //       `import { ReactComponent as X } from './x.svg` to
+        //       `import X from './x.svg?react';
         config.module.rules.push({
             test: /\.svg$/,
             issuer: /\.(js|ts|md)x?$/,
             use: [
                 {
                     loader: require.resolve('@svgr/webpack'),
+                    options: svgrOptions,
+                },
+                {
+                    loader: require.resolve('file-loader'),
                     options: {
-                        svgo: false,
-                        titleProp: true,
-                        ref: true,
+                        name: '[name].[hash].[ext]',
                     },
                 },
             ],
@@ -47,7 +75,7 @@ function addHotReload(config) {
             ];
         }
         const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-        config.plugins.push(new ReactRefreshPlugin());
+        config.plugins.push(new ReactRefreshPlugin({ overlay: false }));
     }
 }
 // We remove potentially conflicting rules that target SVGs because we use @svgr/webpack loader

package/plugins/storybook/index.js

@@ -13,7 +13,7 @@ const fs_1 = require("fs");
 function getClientEnvironment(mode) {
     // Grab NODE_ENV and NX_* and STORYBOOK_* environment variables and prepare them to be
     // injected into the application via DefinePlugin in webpack configuration.
-    const NX_PREFIX = /^NX_/i;
+    const NX_PREFIX = /^NX_PUBLIC_/i;
     const STORYBOOK_PREFIX = /^STORYBOOK_/i;
     const raw = Object.keys(process.env)
         .filter((key) => NX_PREFIX.test(key) || STORYBOOK_PREFIX.test(key))

package/plugins/with-react.d.ts

@@ -1,7 +1,12 @@
 import type { Configuration } from 'webpack';
 import type { NxWebpackExecutionContext, WithWebOptions } from '@nx/webpack';
+export interface SvgrOptions {
+    svgo?: boolean;
+    titleProp?: boolean;
+    ref?: boolean;
+}
 export interface WithReactOptions extends WithWebOptions {
-    svgr?: false;
+    svgr?: boolean | SvgrOptions;
 }
 /**
  * @param {WithReactOptions} pluginOptions

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.d.ts

@@ -1,12 +1,16 @@
 import { ExecutorContext } from '@nx/devkit';
 import { WebDevServerOptions } from '@nx/webpack/src/executors/dev-server/schema';
 type ModuleFederationDevServerOptions = WebDevServerOptions & {
-    devRemotes?: string[];
+    devRemotes?: (string | {
+        remoteName: string;
+        configuration: string;
+    })[];
     skipRemotes?: string[];
     static?: boolean;
     isInitialHost?: boolean;
     parallel?: number;
     staticRemotesPort?: number;
+    pathToManifestFile?: string;
 };
 type StaticRemoteConfig = {
     basePath: string;