@nx/react 20.5.0-rc.4 → 20.6.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.5.0-rc.4",
+  "version": "20.6.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, 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": {
@@ -38,11 +38,11 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "20.5.0-rc.4",
-    "@nx/js": "20.5.0-rc.4",
-    "@nx/eslint": "20.5.0-rc.4",
-    "@nx/web": "20.5.0-rc.4",
-    "@nx/module-federation": "20.5.0-rc.4",
+    "@nx/devkit": "20.6.0-beta.0",
+    "@nx/js": "20.6.0-beta.0",
+    "@nx/eslint": "20.6.0-beta.0",
+    "@nx/web": "20.6.0-beta.0",
+    "@nx/module-federation": "20.6.0-beta.0",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

package/src/generators/application/application.js

@@ -29,6 +29,7 @@ const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
 async function applicationGenerator(tree, schema) {
     return await applicationGeneratorInternal(tree, {
         addPlugin: false,
+        useProjectJson: true,
         ...schema,
     });
 }
@@ -44,11 +45,6 @@ async function applicationGeneratorInternal(tree, schema) {
     });
     tasks.push(jsInitTask);
     const options = await (0, normalize_options_1.normalizeOptions)(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) {
-        (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
-    }
     (0, show_possible_warnings_1.showPossibleWarnings)(tree, options);
     const initTask = await (0, init_1.default)(tree, {
         ...options,
@@ -83,6 +79,11 @@ async function applicationGeneratorInternal(tree, schema) {
     }
     await (0, create_application_files_1.createApplicationFiles)(tree, options);
     (0, add_project_1.addProject)(tree, options);
+    // 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, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(tree, options.appProjectRoot);
+    }
     if (options.style === 'tailwind') {
         const twTask = await (0, setup_tailwind_1.setupTailwindGenerator)(tree, {
             project: options.projectName,

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

@@ -46,15 +46,15 @@ async function addE2e(tree, options) {
     switch (options.e2eTestRunner) {
         case 'cypress': {
             const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-            if (options.isUsingTsSolutionConfig) {
-                (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), {
-                    name: options.e2eProjectName,
-                    version: '0.0.1',
-                    private: true,
-                    nx: {
-                        implicitDependencies: [options.projectName],
-                    },
-                });
+            const packageJson = {
+                name: options.e2eProjectName,
+                version: '0.0.1',
+                private: true,
+            };
+            if (!options.useProjectJson) {
+                packageJson.nx = {
+                    implicitDependencies: [options.projectName],
+                };
             }
             else {
                 (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
@@ -66,6 +66,9 @@ async function addE2e(tree, options) {
                     tags: [],
                 });
             }
+            if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+                (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), packageJson);
+            }
             const e2eTask = await configurationGenerator(tree, {
                 ...options,
                 project: options.e2eProjectName,
@@ -114,15 +117,15 @@ async function addE2e(tree, options) {
         }
         case 'playwright': {
             const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_1.nxVersion);
-            if (options.isUsingTsSolutionConfig) {
-                (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), {
-                    name: options.e2eProjectName,
-                    version: '0.0.1',
-                    private: true,
-                    nx: {
-                        implicitDependencies: [options.projectName],
-                    },
-                });
+            const packageJson = {
+                name: options.e2eProjectName,
+                version: '0.0.1',
+                private: true,
+            };
+            if (!options.useProjectJson) {
+                packageJson.nx = {
+                    implicitDependencies: [options.projectName],
+                };
             }
             else {
                 (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
@@ -131,8 +134,12 @@ async function addE2e(tree, options) {
                     sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
                     targets: {},
                     implicitDependencies: [options.projectName],
+                    tags: [],
                 });
             }
+            if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+                (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), packageJson);
+            }
             const e2eTask = await configurationGenerator(tree, {
                 project: options.e2eProjectName,
                 skipFormat: true,

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

@@ -28,12 +28,12 @@ function addProject(host, options) {
             serve: createRspackServeTarget(options),
         };
     }
-    if (options.isUsingTsSolutionConfig) {
-        const packageJson = {
-            name: options.importPath,
-            version: '0.0.1',
-            private: true,
-        };
+    const packageJson = {
+        name: options.importPath,
+        version: '0.0.1',
+        private: true,
+    };
+    if (!options.useProjectJson) {
         if (options.projectName !== options.importPath) {
             packageJson.nx = { name: options.projectName };
         }
@@ -45,21 +45,14 @@ function addProject(host, options) {
             packageJson.nx ??= {};
             packageJson.nx.tags = options.parsedTags;
         }
-        (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), packageJson);
     }
-    if (!options.isUsingTsSolutionConfig || options.alwaysGenerateProjectJson) {
+    else {
         (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
             ...project,
         });
     }
-    else if (options.parsedTags?.length ||
-        Object.keys(project.targets).length) {
-        const updatedProject = {
-            root: options.appProjectRoot,
-            targets: project.targets,
-            tags: options.parsedTags?.length ? options.parsedTags : undefined,
-        };
-        (0, devkit_1.updateProjectConfiguration)(host, options.projectName, updatedProject);
+    if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+        (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), packageJson);
     }
 }
 function createRspackBuildTarget(options) {

package/src/generators/application/lib/normalize-options.js

@@ -44,6 +44,7 @@ async function normalizeOptions(host, options) {
         hasStyles: options.style !== 'none',
         names: (0, devkit_1.names)(projectNames.projectSimpleName),
         isUsingTsSolutionConfig,
+        useProjectJson: options.useProjectJson ?? !isUsingTsSolutionConfig,
     };
     normalized.routing = normalized.routing ?? false;
     normalized.strict = normalized.strict ?? true;

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

@@ -31,7 +31,7 @@ export interface Schema {
   nxCloudToken?: string;
   useTsSolution?: boolean;
   formatter?: 'prettier' | 'none';
-  alwaysGenerateProjectJson?: boolean; // this is needed for MF currently
+  useProjectJson?: boolean;
 }
 
 export interface NormalizedSchema<T extends Schema = Schema> extends T {

package/src/generators/application/schema.json

@@ -187,6 +187,10 @@
       "description": "Generate a React app with a minimal setup, no separate test files.",
       "type": "boolean",
       "default": false
+    },
+    "useProjectJson": {
+      "type": "boolean",
+      "description": "Use a `project.json` configuration file instead of inlining the Nx configuration in the `package.json` file."
     }
   },
   "required": ["directory"],

package/src/generators/host/host.js

@@ -21,7 +21,7 @@ async function hostGenerator(host, schema) {
     const options = {
         ...(await (0, normalize_options_1.normalizeOptions)(host, {
             ...schema,
-            alwaysGenerateProjectJson: true,
+            useProjectJson: true,
         })),
         js: schema.js ?? false,
         typescriptConfiguration: schema.js
@@ -50,7 +50,7 @@ async function hostGenerator(host, schema) {
         // The target use-case is loading remotes as child routes, thus always enable routing.
         routing: true,
         skipFormat: true,
-        alwaysGenerateProjectJson: true,
+        useProjectJson: true,
     });
     tasks.push(initTask);
     const remotesWithPorts = [];

package/src/generators/library/lib/create-files.js

@@ -43,7 +43,8 @@ function createFiles(host, options) {
         });
     }
     if ((options.publishable || options.buildable) &&
-        !options.isUsingTsSolutionConfig) {
+        !options.isUsingTsSolutionConfig &&
+        options.useProjectJson) {
         if (options.bundler === 'vite') {
             (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, {
                 name: options.importPath,

package/src/generators/library/lib/normalize-options.js

@@ -45,6 +45,7 @@ async function normalizeOptions(host, options) {
         projectRoot,
         parsedTags,
         importPath,
+        useProjectJson: options.useProjectJson ?? !isUsingTsSolutionConfig,
     };
     // Libraries with a bundler or is publishable must also be buildable.
     normalized.buildable = Boolean(normalized.bundler !== 'none' || options.buildable || options.publishable);

package/src/generators/library/library.js

@@ -27,6 +27,7 @@ const add_release_config_1 = require("@nx/js/src/generators/library/utils/add-re
 async function libraryGenerator(host, schema) {
     return await libraryGeneratorInternal(host, {
         addPlugin: false,
+        useProjectJson: true,
         ...schema,
     });
 }
@@ -39,7 +40,7 @@ async function libraryGeneratorInternal(host, schema) {
     tasks.push(jsInitTask);
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
     if (options.isUsingTsSolutionConfig) {
-        (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.projectRoot);
+        await (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.projectRoot);
     }
     if (options.publishable === true && !schema.importPath) {
         throw new Error(`For publishable libs you have to provide a proper "--importPath" which needs to be a valid npm package name (e.g. my-awesome-lib or @myorg/my-lib)`);
@@ -52,13 +53,13 @@ async function libraryGeneratorInternal(host, schema) {
         skipFormat: true,
     });
     tasks.push(initTask);
-    if (options.isUsingTsSolutionConfig) {
-        const packageJson = {
-            name: options.importPath,
-            version: '0.0.1',
-            ...(0, determine_entry_fields_1.determineEntryFields)(options),
-            files: options.publishable ? ['dist', '!**/*.tsbuildinfo'] : undefined,
-        };
+    const packageJson = {
+        name: options.importPath,
+        version: '0.0.1',
+        ...(0, determine_entry_fields_1.determineEntryFields)(options),
+        files: options.publishable ? ['dist', '!**/*.tsbuildinfo'] : undefined,
+    };
+    if (!options.useProjectJson) {
         if (options.name !== options.importPath) {
             packageJson.nx = { name: options.name };
         }
@@ -66,7 +67,6 @@ async function libraryGeneratorInternal(host, schema) {
             packageJson.nx ??= {};
             packageJson.nx.tags = options.parsedTags;
         }
-        (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, packageJson);
     }
     else {
         (0, devkit_1.addProjectConfiguration)(host, options.name, {
@@ -77,6 +77,9 @@ async function libraryGeneratorInternal(host, schema) {
             targets: {},
         });
     }
+    if (!options.useProjectJson || options.isUsingTsSolutionConfig) {
+        (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, packageJson);
+    }
     (0, create_files_1.createFiles)(host, options);
     const lintTask = await (0, add_linting_1.addLinting)(host, options);
     tasks.push(lintTask);

package/src/generators/library/schema.d.ts

@@ -27,6 +27,7 @@ export interface Schema {
   minimal?: boolean;
   simpleName?: boolean;
   addPlugin?: boolean;
+  useProjectJson?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {

package/src/generators/library/schema.json

@@ -190,6 +190,10 @@
       "description": "Don't include the directory in the name of the module of the library.",
       "type": "boolean",
       "default": false
+    },
+    "useProjectJson": {
+      "type": "boolean",
+      "description": "Use a `project.json` configuration file instead of inlining the Nx configuration in the `package.json` file."
     }
   },
   "required": ["directory"]

package/src/generators/remote/remote.js

@@ -50,7 +50,7 @@ async function remoteGenerator(host, schema) {
     const options = {
         ...(await (0, normalize_options_1.normalizeOptions)(host, {
             ...schema,
-            alwaysGenerateProjectJson: true,
+            useProjectJson: true,
         })),
         // when js is set to true, we want to use the js configuration
         js: schema.js ?? false,
@@ -83,7 +83,7 @@ async function remoteGenerator(host, schema) {
         ...options,
         name: options.projectName,
         skipFormat: true,
-        alwaysGenerateProjectJson: true,
+        useProjectJson: true,
     });
     tasks.push(initAppTask);
     if (options.host) {