@nx/react 17.0.1 → 17.1.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "17.0.1",
+  "version": "17.1.0-beta.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, 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,11 +37,11 @@
     "file-loader": "^6.2.0",
     "minimatch": "3.0.5",
     "tslib": "^2.3.0",
-    "@nx/devkit": "17.0.1",
-    "@nx/js": "17.0.1",
-    "@nx/eslint": "17.0.1",
-    "@nx/web": "17.0.1",
-    "@nrwl/react": "17.0.1"
+    "@nx/devkit": "17.1.0-beta.0",
+    "@nx/js": "17.1.0-beta.0",
+    "@nx/eslint": "17.1.0-beta.0",
+    "@nx/web": "17.1.0-beta.0",
+    "@nrwl/react": "17.1.0-beta.0"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -15,7 +15,8 @@ function getBuildOptions(buildTarget, context) {
     };
 }
 async function* moduleFederationDevServer(options, context) {
-    const nxBin = require.resolve('nx');
+    // Force Node to resolve to look for the nx binary that is inside node_modules
+    const nxBin = require.resolve('nx/bin/nx');
     const currIter = options.static
         ? (0, file_server_impl_1.default)({
             ...options,

package/src/generators/application/files/nx-welcome/src/app/nx-welcome.tsx

@@ -274,12 +274,21 @@ export function NxWelcome({ title }: { title: string }) {
     .button-pill:hover {
       color: rgba(255, 255, 255, 1) !important;
     }
-    .nx-console:hover {
+    #nx-console:hover {
       background-color: rgba(0, 122, 204, 1);
     }
-    .nx-console svg {
+    #nx-console svg {
       color: rgba(0, 122, 204, 1);
     }
+    #nx-console-jetbrains {
+      margin-top: 2rem;
+    }
+    #nx-console-jetbrains:hover {
+      background-color: rgba(255, 49, 140, 1);
+    }
+    #nx-console-jetbrains svg {
+      color: rgba(255, 49, 140, 1);
+    }
     #nx-repo:hover {
       background-color: rgba(24, 23, 23, 1);
     }
@@ -644,7 +653,8 @@ export function NxWelcome({ title }: { title: string }) {
             </div>
             <div id="other-links">
               <a
-                className="button-pill nx-console rounded shadow"
+                id="nx-console"
+                className="button-pill rounded shadow"
                 href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
                 target="_blank"
                 rel="noreferrer"
@@ -660,23 +670,35 @@ export function NxWelcome({ title }: { title: string }) {
                 </svg>
                 <span>
                   Install Nx Console for VSCode
-                  <span>The official VSCode plugin for Nx.</span>
+                  <span>The official VSCode extension for Nx.</span>
                 </span>
               </a>
               <a
-                className="button-pill nx-console rounded shadow"
+                id="nx-console-jetbrains"
+                className="button-pill rounded shadow"
                 href="https://plugins.jetbrains.com/plugin/21060-nx-console"
                 target="_blank"
                 rel="noreferrer"
               >
                 <svg
-                  fill="currentColor"
-                  role="img"
-                  viewBox="0 0 24 24"
+                  height="48"
+                  width="48"
+                  viewBox="20 20 60 60"
                   xmlns="http://www.w3.org/2000/svg"
                 >
-                  <title>IntelliJ</title>
-                  <path d="M0 0v24h24V0zm3.723 3.111h5v1.834h-1.39v6.277h1.39v1.834h-5v-1.834h1.444V4.945H3.723zm11.055 0H17v6.5c0 .612-.055 1.111-.222 1.556-.167.444-.39.777-.723 1.11-.277.279-.666.557-1.11.668a3.933 3.933 0 0 1-1.445.278c-.778 0-1.444-.167-1.944-.445a4.81 4.81 0 0 1-1.279-1.056l1.39-1.555c.277.334.555.555.833.722.277.167.611.278.945.278.389 0 .721-.111 1-.389.221-.278.333-.667.333-1.278zM2.222 19.5h9V21h-9z"></path>
+                  <path d="m22.5 22.5h60v60h-60z" />
+                  <g fill="#fff">
+                    <path d="m29.03 71.25h22.5v3.75h-22.5z" />
+                    <path d="m28.09 38 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.44 1.06-1.31v-5.98h2.58v6a3.48 3.48 0 0 1 -.87 2.6 3.56 3.56 0 0 1 -2.57.95 3.84 3.84 0 0 1 -3.34-1.55z" />
+                    <path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
+                    <path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
+                    <path d="m29.13 43.08h4.42a3.53 3.53 0 0 1 2.55.83 2.09 2.09 0 0 1 .6 1.53 2.16 2.16 0 0 1 -1.44 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.61-1.31 2.59-3.55 2.59h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.24c.79 0 1.25-.26 1.25-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86 0-.5-.4-.87-1.27-.87z" />
+                    <path d="m38 43.08h4.1a4.19 4.19 0 0 1 3 1 2.93 2.93 0 0 1 .9 2.19 3 3 0 0 1 -1.93 2.89l2.24 3.27h-3l-1.88-2.84h-.87v2.84h-2.56zm4 4.5c.87 0 1.39-.43 1.39-1.11 0-.75-.54-1.12-1.4-1.12h-1.44v2.26z" />
+                    <path d="m49.59 43h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.69h-2.71zm2.27 5.73-1-2.65-1.06 2.65z" />
+                    <path d="m56.46 43.05h2.6v9.37h-2.6z" />
+                    <path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
+                    <path d="m68.86 51 1.45-1.73a4.84 4.84 0 0 0 3 1.13c.71 0 1.08-.24 1.08-.65 0-.4-.31-.6-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.37-3 3.62-3a5.89 5.89 0 0 1 3.86 1.25l-1.26 1.84a4.63 4.63 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .42.32.61 1.63.91 2.14.46 3.44 1.16 3.44 2.91 0 1.91-1.51 3-3.79 3a6.58 6.58 0 0 1 -4.35-1.5z" />
+                  </g>
                 </svg>
                 <span>
                   Install Nx Console for JetBrains

package/src/generators/application/lib/add-e2e.js

@@ -6,25 +6,36 @@ const web_1 = require("@nx/web");
 const versions_1 = require("../../../utils/versions");
 async function addE2e(tree, options) {
     switch (options.e2eTestRunner) {
-        case 'cypress':
+        case 'cypress': {
             (0, web_1.webStaticServeGenerator)(tree, {
                 buildTarget: `${options.projectName}:build`,
                 targetName: 'serve-static',
             });
-            const { cypressProjectGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-            return await cypressProjectGenerator(tree, {
+            const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
+            (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
+                projectType: 'application',
+                root: options.e2eProjectRoot,
+                sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+                targets: {},
+                implicitDependencies: [options.projectName],
+                tags: [],
+            });
+            return await configurationGenerator(tree, {
                 ...options,
-                name: options.e2eProjectName,
-                directory: options.e2eProjectRoot,
+                project: options.e2eProjectName,
+                directory: 'src',
                 // the name and root are already normalized, instruct the generator to use them as is
-                projectNameAndRootFormat: 'as-provided',
-                project: options.projectName,
                 bundler: options.bundler === 'rspack' ? 'webpack' : options.bundler,
                 skipFormat: true,
+                devServerTarget: `${options.projectName}:serve`,
+                jsx: true,
+                rootProject: options.rootProject,
             });
-        case 'playwright':
+        }
+        case 'playwright': {
             const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_1.nxVersion);
             (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
+                projectType: 'application',
                 root: options.e2eProjectRoot,
                 sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
                 targets: {},
@@ -40,7 +51,9 @@ async function addE2e(tree, options) {
                 setParserOptionsProject: options.setParserOptionsProject,
                 webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
                 webServerAddress: 'http://localhost:4200',
+                rootProject: options.rootProject,
             });
+        }
         case 'none':
         default:
             return () => { };

package/src/generators/cypress-component-configuration/cypress-component-configuration.js

@@ -16,6 +16,7 @@ async function cypressComponentConfigGenerator(tree, options) {
     const installTask = await baseCyCtConfig(tree, {
         project: options.project,
         skipFormat: true,
+        jsx: true,
     });
     const found = await (0, ct_utils_1.addCTTargetWithBuildTarget)(tree, {
         project: options.project,

package/src/module-federation/utils.js

@@ -8,7 +8,13 @@ function getFunctionDeterminateRemoteUrl(isServer = false) {
     const target = isServer ? 'serve-server' : 'serve';
     const remoteEntry = isServer ? 'server/remoteEntry.js' : 'remoteEntry.js';
     return function (remote) {
-        const remoteConfiguration = (0, project_graph_1.readCachedProjectConfiguration)(remote);
+        let remoteConfiguration = null;
+        try {
+            remoteConfiguration = (0, project_graph_1.readCachedProjectConfiguration)(remote);
+        }
+        catch (e) {
+            throw new Error(`Cannot find remote: "${remote}". Check that the remote name is correct in your module federation config file.\n`);
+        }
         const serveTarget = remoteConfiguration?.targets?.[target];
         if (!serveTarget) {
             throw new Error(`Cannot automatically determine URL of remote (${remote}). Looked for property "host" in the project's "${serveTarget}" target.\n

package/src/utils/versions.d.ts

@@ -5,8 +5,8 @@ export declare const reactDomVersion = "18.2.0";
 export declare const reactIsVersion = "18.2.0";
 export declare const swcLoaderVersion = "0.1.15";
 export declare const babelLoaderVersion = "^9.1.2";
-export declare const typesReactVersion = "18.2.24";
-export declare const typesReactDomVersion = "18.2.9";
+export declare const typesReactVersion = "18.2.33";
+export declare const typesReactDomVersion = "18.2.14";
 export declare const typesReactIsVersion = "18.2.2";
 export declare const typesNodeVersion = "18.14.2";
 export declare const babelPresetReactVersion = "^7.14.5";

package/src/utils/versions.js

@@ -9,8 +9,8 @@ exports.reactDomVersion = '18.2.0';
 exports.reactIsVersion = '18.2.0';
 exports.swcLoaderVersion = '0.1.15';
 exports.babelLoaderVersion = '^9.1.2';
-exports.typesReactVersion = '18.2.24';
-exports.typesReactDomVersion = '18.2.9';
+exports.typesReactVersion = '18.2.33';
+exports.typesReactDomVersion = '18.2.14';
 exports.typesReactIsVersion = '18.2.2';
 exports.typesNodeVersion = '18.14.2';
 exports.babelPresetReactVersion = '^7.14.5';