@nx/react 0.0.0-pr-28808-eac89e6 → 0.0.0-pr-29122-4727ac1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "0.0.0-pr-28808-eac89e6",
+  "version": "0.0.0-pr-29122-4727ac1",
   "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": "0.0.0-pr-28808-eac89e6",
-    "@nx/js": "0.0.0-pr-28808-eac89e6",
-    "@nx/eslint": "0.0.0-pr-28808-eac89e6",
-    "@nx/web": "0.0.0-pr-28808-eac89e6",
-    "@nx/module-federation": "0.0.0-pr-28808-eac89e6",
+    "@nx/devkit": "0.0.0-pr-29122-4727ac1",
+    "@nx/js": "0.0.0-pr-29122-4727ac1",
+    "@nx/eslint": "0.0.0-pr-29122-4727ac1",
+    "@nx/web": "0.0.0-pr-29122-4727ac1",
+    "@nx/module-federation": "0.0.0-pr-29122-4727ac1",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3"
   },

package/src/generators/application/schema.json

@@ -110,7 +110,7 @@
       "description": "The tool to use for running lint checks.",
       "type": "string",
       "enum": ["eslint", "none"],
-      "default": "eslint",
+      "default": "none",
       "x-prompt": "Which linter would you like to use?",
       "x-priority": "important"
     },
@@ -118,7 +118,7 @@
       "type": "string",
       "enum": ["vitest", "jest", "none"],
       "description": "Test runner to use for unit tests.",
-      "default": "vitest",
+      "default": "none",
       "x-prompt": "What unit test runner should be used?",
       "x-priority": "important"
     },

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

@@ -1,4 +1,3 @@
-import type { NameAndDirectoryFormat } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
 import { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {

package/src/generators/component/schema.json

@@ -8,19 +8,17 @@
   "properties": {
     "path": {
       "type": "string",
-      "description": "Path where the component will be generated.",
+      "description": "The file path to the component without the file extension. Relative to the current working directory.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "Where should the component be generated?",
+      "x-prompt": "What is the component file path?",
       "x-priority": "important"
     },
     "name": {
       "type": "string",
-      "description": "The name of the component.",
-      "x-prompt": "What name would you like to use for the component?",
-      "x-priority": "important"
+      "description": "The component symbol name. Defaults to the last segment of the file path."
     },
     "style": {
       "description": "The file extension to be used for style files.",

package/src/generators/hook/hook.js

@@ -49,22 +49,20 @@ function addExportsToBarrel(host, options) {
     }
 }
 async function normalizeOptions(host, options) {
-    assertValidOptions(options);
-    const { directory, fileName: _fileName, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+    const { artifactName, directory, fileName: hookFilename, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
         path: options.path,
         name: options.name,
         fileExtension: 'tsx',
     });
-    const { className, fileName } = (0, devkit_1.names)(_fileName);
-    // If using `as-provided` file and directory, then don't normalize.
-    // Otherwise, support legacy behavior of prefixing filename with `use-`.
-    const hookFilename = fileName;
-    const hookName = className.toLocaleLowerCase().startsWith('use')
-        ? className
-        : 'use'.concat(className);
-    const hookTypeName = className.toLocaleLowerCase().startsWith('use')
-        ? className
-        : 'Use'.concat(className);
+    const { className } = (0, devkit_1.names)(hookFilename);
+    // if name is provided, use it as is for the hook name, otherwise prepend
+    // `use` to the pascal-cased file name if it doesn't already start with `use`
+    const hookName = options.name
+        ? artifactName
+        : className.toLocaleLowerCase().startsWith('use')
+            ? className
+            : `use${className}`;
+    const hookTypeName = (0, devkit_1.names)(hookName).className;
     const project = (0, devkit_1.getProjects)(host).get(projectName);
     const { sourceRoot: projectSourceRoot, projectType } = project;
     if (options.export && projectType === 'application') {
@@ -80,17 +78,4 @@ async function normalizeOptions(host, options) {
         projectName,
     };
 }
-function assertValidOptions(options) {
-    const slashes = ['/', '\\'];
-    slashes.forEach((s) => {
-        if (options.name.indexOf(s) !== -1) {
-            const [name, ...rest] = options.name.split(s).reverse();
-            let suggestion = rest.map((x) => x.toLowerCase()).join(s);
-            if (options.directory) {
-                suggestion = `${options.directory}${s}${suggestion}`;
-            }
-            throw new Error(`Found "${s}" in the hook name. Did you mean to use the --directory option (e.g. \`nx g c ${name} --directory ${suggestion}\`)?`);
-        }
-    });
-}
 exports.default = hookGenerator;

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

@@ -2,8 +2,6 @@ export interface Schema {
   path: string;
   name?: string;
   skipTests?: boolean;
-  directory?: string;
   export?: boolean;
   js?: boolean;
-  nameAndDirectoryFormat?: NameAndDirectoryFormat;
 }

package/src/generators/hook/schema.json

@@ -7,26 +7,28 @@
   "type": "object",
   "examples": [
     {
-      "command": "nx g hook mylib/my-hook",
-      "description": "Generate a hook `my-hook` in the `mylib` library"
+      "description": "Generate a hook with the exported symbol matching the file name. It results in the hook `useFoo` at `mylib/src/lib/foo.ts`",
+      "command": "nx g @nx/react:hook mylib/src/lib/foo"
+    },
+    {
+      "description": "Generate a hook with the exported symbol different from the file name. It results in the hook `useCustom` at `mylib/src/lib/foo.ts`",
+      "command": "nx g @nx/react:hook mylib/src/lib/foo --name=useCustom"
     }
   ],
   "properties": {
     "path": {
       "type": "string",
-      "description": "Path where the hook will be generated.",
+      "description": "The file path to the hook without the file extension. Relative to the current working directory.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "Where should the hook be generated?",
+      "x-prompt": "What is the hook file path?",
       "x-priority": "important"
     },
     "name": {
       "type": "string",
-      "description": "The name of the hook.",
-      "x-prompt": "What name would you like to use for the hook?",
-      "x-priority": "important"
+      "description": "The hook symbol name. Defaults to the last segment of the file path."
     },
     "js": {
       "type": "boolean",
@@ -39,16 +41,6 @@
       "default": false,
       "x-priority": "internal"
     },
-    "directory": {
-      "type": "string",
-      "description": "The directory at which to create the hook file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
-      "x-priority": "important"
-    },
-    "nameAndDirectoryFormat": {
-      "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
-      "type": "string",
-      "enum": ["as-provided", "derived"]
-    },
     "export": {
       "type": "boolean",
       "description": "When true, the hook is exported from the project `index.ts` (if it exists).",
@@ -57,5 +49,5 @@
       "x-prompt": "Should this hook be exported in the project?"
     }
   },
-  "required": ["name"]
+  "required": ["path"]
 }

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

@@ -5,27 +5,8 @@ const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const assertion_1 = require("../../../utils/assertion");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-const prompt_1 = require("@nx/devkit/src/generators/prompt");
 async function normalizeOptions(host, options) {
     const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
-    if (isUsingTsSolutionConfig) {
-        options.bundler ??= await (0, prompt_1.promptWhenInteractive)({
-            type: 'autocomplete',
-            name: 'bundler',
-            message: `Which bundler would you like to use to build the library? Choose 'none' to skip build setup.`,
-            choices: [{ name: 'vite' }, { name: 'rollup' }, { name: 'none' }],
-            initial: 0,
-        }, { bundler: 'none' }).then(({ bundler }) => bundler);
-    }
-    else {
-        options.bundler ??= await (0, prompt_1.promptWhenInteractive)({
-            type: 'autocomplete',
-            name: 'bundler',
-            message: `Which bundler would you like to use to build the library? Choose 'none' to skip build setup.`,
-            choices: [{ name: 'none' }, { name: 'vite' }, { name: 'rollup' }],
-            initial: 0,
-        }, { bundler: undefined }).then(({ bundler }) => bundler);
-    }
     await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'library');
     const { projectName, names: projectNames, projectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
         name: options.name,

package/src/generators/library/library.js

@@ -47,8 +47,15 @@ async function libraryGeneratorInternal(host, schema) {
     });
     tasks.push(initTask);
     if (options.isUsingTsSolutionConfig) {
+        const sourceEntry = options.bundler === 'none'
+            ? options.js
+                ? './src/index.js'
+                : './src/index.ts'
+            : undefined;
         (0, devkit_1.writeJson)(host, `${options.projectRoot}/package.json`, {
             name: options.importPath,
+            main: sourceEntry,
+            types: sourceEntry,
             nx: {
                 name: options.importPath === options.name ? undefined : options.name,
                 projectType: 'library',
@@ -205,6 +212,10 @@ async function libraryGeneratorInternal(host, schema) {
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }
+    // Always run install to link packages.
+    if (options.isUsingTsSolutionConfig) {
+        tasks.push(() => (0, devkit_1.installPackagesTask)(host));
+    }
     tasks.push(() => {
         (0, log_show_project_command_1.logShowProjectCommand)(options.name);
     });

package/src/generators/library/schema.json

@@ -71,18 +71,26 @@
         ]
       }
     },
+    "bundler": {
+      "type": "string",
+      "description": "The bundler to use. Choosing 'none' means this library is not buildable.",
+      "enum": ["none", "vite", "rollup"],
+      "default": "none",
+      "x-prompt": "Which bundler would you like to use to build the library? Choose 'none' to skip build setup.",
+      "x-priority": "important"
+    },
     "linter": {
       "description": "The tool to use for running lint checks.",
       "type": "string",
       "enum": ["eslint", "none"],
-      "default": "eslint",
+      "default": "none",
       "x-prompt": "Which linter would you like to use?",
       "x-priority": "important"
     },
     "unitTestRunner": {
       "type": "string",
       "enum": ["vitest", "jest", "none"],
-      "default": "vitest",
+      "default": "none",
       "description": "Test runner to use for unit tests.",
       "x-prompt": "What unit test runner should be used?",
       "x-priority": "important"
@@ -157,11 +165,6 @@
       "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
       "default": false
     },
-    "bundler": {
-      "type": "string",
-      "description": "The bundler to use. Choosing 'none' means this library is not buildable.",
-      "enum": ["none", "vite", "rollup"]
-    },
     "compiler": {
       "type": "string",
       "enum": ["babel", "swc"],

package/src/generators/redux/schema.json

@@ -5,21 +5,30 @@
   "title": "Create Redux state",
   "description": "Create a Redux state slice for a React project.",
   "type": "object",
+  "examples": [
+    {
+      "description": "Generate a Redux state slice with the exported symbol matching the file name. It results in the slice `fooSlice` at `mylib/src/lib/foo.slice.ts`",
+      "command": "nx g @nx/react:redux mylib/src/lib/foo"
+    },
+    {
+      "description": "Generate a Redux state slice with the exported symbol different from the file name. It results in the slice `customSlice` at `mylib/src/lib/foo.slice.ts`",
+      "command": "nx g @nx/react:redux mylib/src/lib/foo --name=custom"
+    }
+  ],
   "properties": {
     "path": {
       "type": "string",
-      "description": "Path where the Redux slice will be generated.",
+      "description": "The file path to the Redux state slice without the file extension. Relative to the current working directory.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "Where should the Redux slice be generated?",
+      "x-prompt": "What is the Redux stateslice file path?",
       "x-priority": "important"
     },
     "name": {
       "type": "string",
-      "description": "Redux slice name.",
-      "x-priority": "important"
+      "description": "The Redux state slice symbol name. Defaults to the last segment of the file path."
     },
     "appProject": {
       "type": "string",

package/src/migrations/update-20-2-0/migrate-mf-imports-to-new-package.js

@@ -14,6 +14,9 @@ async function migrateMfImportsToNewPackage(tree) {
     const rootsToCheck = new Set();
     const graph = await (0, devkit_1.createProjectGraphAsync)();
     for (const [project, dependencies] of Object.entries(graph.dependencies)) {
+        if (!graph.nodes[project]) {
+            continue;
+        }
         const usesNxWebpackOrRspack = dependencies.some((dep) => dep.target === 'npm:@nx/webpack' || dep.target === 'npm:@nx/rspack');
         if (usesNxWebpackOrRspack) {
             const root = graph.nodes[project].data.root;