@nx/react 17.0.0-beta.5 → 17.0.0-beta.8

package/generators.json

@@ -25,13 +25,13 @@
       "description": "Create a React library."
     },
     "component": {
-      "factory": "./src/generators/component/component#componentGenerator",
+      "factory": "./src/generators/component/component#componentGeneratorInternal",
       "schema": "./src/generators/component/schema.json",
       "description": "Create a React component.",
       "aliases": ["c"]
     },
     "redux": {
-      "factory": "./src/generators/redux/redux#reduxGenerator",
+      "factory": "./src/generators/redux/redux#reduxGeneratorInternal",
       "schema": "./src/generators/redux/schema.json",
       "description": "Create a Redux slice for a project.",
       "aliases": ["slice"]
@@ -61,7 +61,7 @@
       "hidden": false
     },
     "hook": {
-      "factory": "./src/generators/hook/hook#hookGenerator",
+      "factory": "./src/generators/hook/hook#hookGeneratorInternal",
       "schema": "./src/generators/hook/schema.json",
       "description": "Create a hook.",
       "aliases": ["c"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "17.0.0-beta.5",
+  "version": "17.0.0-beta.8",
   "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.0-beta.5",
-    "@nx/js": "17.0.0-beta.5",
-    "@nx/linter": "17.0.0-beta.5",
-    "@nx/web": "17.0.0-beta.5",
-    "@nrwl/react": "17.0.0-beta.5"
+    "@nx/devkit": "17.0.0-beta.8",
+    "@nx/js": "17.0.0-beta.8",
+    "@nx/eslint": "17.0.0-beta.8",
+    "@nx/web": "17.0.0-beta.8",
+    "@nrwl/react": "17.0.0-beta.8"
   },
   "publishConfig": {
     "access": "public"

package/plugins/storybook/index.js

@@ -119,7 +119,11 @@ const webpack = async (storybookWebpackConfig = {}, options) => {
     }
     const { withNx, withWeb } = require('@nx/webpack');
     const projectData = await getProjectData(options);
-    const tsconfigPath = (0, path_1.join)(projectData.projectRoot, 'tsconfig.storybook.json');
+    const tsconfigPath = (0, fs_1.existsSync)((0, path_1.join)(projectData.projectRoot, 'tsconfig.storybook.json'))
+        ? (0, path_1.join)(projectData.projectRoot, 'tsconfig.storybook.json')
+        : (0, path_1.join)(projectData.projectRoot, 'tsconfig.json');
+    // The 'tsconfig.json' is mainly for the cypress test to be able to run
+    // because it will look into the cypress project dir and it will not find tsconfig.storybook.json
     fixBabelConfigurationIfNeeded(storybookWebpackConfig, projectData);
     const builderOptions = {
         ...options,

package/src/generators/application/application.js

@@ -12,8 +12,8 @@ const set_defaults_1 = require("./lib/set-defaults");
 const add_styled_dependencies_1 = require("../../rules/add-styled-dependencies");
 const devkit_1 = require("@nx/devkit");
 const init_1 = require("../init/init");
-const linter_1 = require("@nx/linter");
-const lint_project_1 = require("@nx/linter/src/generators/lint-project/lint-project");
+const eslint_1 = require("@nx/eslint");
+const lint_project_1 = require("@nx/eslint/src/generators/lint-project/lint-project");
 const versions_1 = require("../../utils/versions");
 const install_common_dependencies_1 = require("./lib/install-common-dependencies");
 const create_ts_config_1 = require("../../utils/create-ts-config");
@@ -21,11 +21,11 @@ const add_swc_dependencies_1 = require("@nx/js/src/utils/swc/add-swc-dependencie
 const chalk = require("chalk");
 const show_possible_warnings_1 = require("./lib/show-possible-warnings");
 const add_e2e_1 = require("./lib/add-e2e");
-const eslint_file_1 = require("@nx/linter/src/generators/utils/eslint-file");
+const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
 async function addLinting(host, options) {
     const tasks = [];
-    if (options.linter === linter_1.Linter.EsLint) {
-        const lintTask = await (0, linter_1.lintProjectGenerator)(host, {
+    if (options.linter === eslint_1.Linter.EsLint) {
+        const lintTask = await (0, eslint_1.lintProjectGenerator)(host, {
             linter: options.linter,
             project: options.projectName,
             tsConfigPaths: [
@@ -96,11 +96,10 @@ async function applicationGeneratorInternal(host, schema) {
             includeVitest: options.unitTestRunner === 'vitest',
             inSourceTests: options.inSourceTests,
             rollupOptionsExternal: [
-                `'react'`,
-                `'react-dom'`,
-                `'react/jsx-runtime'`,
+                "'react'",
+                "'react-dom'",
+                "'react/jsx-runtime'",
             ],
-            rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`,
             imports: [
                 options.compiler === 'swc'
                     ? `import react from '@vitejs/plugin-react-swc'`
@@ -145,11 +144,10 @@ async function applicationGeneratorInternal(host, schema) {
             includeVitest: true,
             inSourceTests: options.inSourceTests,
             rollupOptionsExternal: [
-                `'react'`,
-                `'react-dom'`,
-                `'react/jsx-runtime'`,
+                "'react'",
+                "'react-dom'",
+                "'react/jsx-runtime'",
             ],
-            rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`,
             imports: [
                 options.compiler === 'swc'
                     ? `import react from '@vitejs/plugin-react-swc'`

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

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/linter';
+import type { Linter } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {

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

@@ -1,4 +1,5 @@
 import { GeneratorCallback, Tree } from '@nx/devkit';
 import { Schema } from './schema';
 export declare function componentGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
+export declare function componentGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
 export default componentGenerator;

package/src/generators/component/component.js

@@ -1,17 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentGenerator = void 0;
+exports.componentGeneratorInternal = exports.componentGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const path_1 = require("path");
 const add_styled_dependencies_1 = require("../../rules/add-styled-dependencies");
-const assertion_1 = require("../../utils/assertion");
 const ast_utils_1 = require("../../utils/ast-utils");
 const get_in_source_vitest_tests_template_1 = require("../../utils/get-in-source-vitest-tests-template");
 const versions_1 = require("../../utils/versions");
-const get_component_tests_1 = require("./get-component-tests");
-const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
-const path_1 = require("path");
+const get_component_tests_1 = require("./lib/get-component-tests");
+const normalize_options_1 = require("./lib/normalize-options");
 async function componentGenerator(host, schema) {
-    const options = await normalizeOptions(host, schema);
+    return componentGeneratorInternal(host, {
+        nameAndDirectoryFormat: 'derived',
+        ...schema,
+    });
+}
+exports.componentGenerator = componentGenerator;
+async function componentGeneratorInternal(host, schema) {
+    const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
     createComponentFiles(host, options);
     const tasks = [];
     const styledTask = (0, add_styled_dependencies_1.addStyledModuleDependencies)(host, options);
@@ -26,11 +33,10 @@ async function componentGenerator(host, schema) {
     }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
-exports.componentGenerator = componentGenerator;
+exports.componentGeneratorInternal = componentGeneratorInternal;
 function createComponentFiles(host, options) {
-    const componentDir = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.directory);
     const componentTests = (0, get_component_tests_1.getComponentTests)(options);
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), componentDir, {
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), options.directory, {
         ...options,
         componentTests,
         inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(componentTests),
@@ -73,72 +79,15 @@ function addExportsToBarrel(host, options) {
         const indexSource = host.read(indexFilePath, 'utf-8');
         if (indexSource !== null) {
             const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
-            const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from './${options.directory}/${options.fileName}';`));
+            const relativePathFromIndex = getRelativeImportToFile(indexFilePath, options.filePath);
+            const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from '${relativePathFromIndex}';`));
             host.write(indexFilePath, changes);
         }
     }
 }
-async function normalizeOptions(host, options) {
-    assertValidOptions(options);
-    const { className, fileName } = (0, devkit_1.names)(options.name);
-    const componentFileName = options.fileName ?? (options.pascalCaseFiles ? className : fileName);
-    const project = (0, devkit_1.getProjects)(host).get(options.project);
-    if (!project) {
-        devkit_1.logger.error(`Cannot find the ${options.project} project. Please double check the project name.`);
-        throw new Error();
-    }
-    const { sourceRoot: projectSourceRoot, projectType } = project;
-    const directory = await getDirectory(host, options);
-    const styledModule = /^(css|scss|less|none)$/.test(options.style)
-        ? null
-        : options.style;
-    if (options.export && projectType === 'application') {
-        devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
-    }
-    options.classComponent = options.classComponent ?? false;
-    options.routing = options.routing ?? false;
-    options.globalCss = options.globalCss ?? false;
-    options.inSourceTests = options.inSourceTests ?? false;
-    return {
-        ...options,
-        directory,
-        styledModule,
-        hasStyles: options.style !== 'none',
-        className,
-        fileName: componentFileName,
-        projectSourceRoot,
-    };
-}
-async function getDirectory(host, options) {
-    const genNames = (0, devkit_1.names)(options.name);
-    const fileName = options.pascalCaseDirectory === true
-        ? genNames.className
-        : genNames.fileName;
-    const workspace = (0, devkit_1.getProjects)(host);
-    let baseDir;
-    if (options.directory) {
-        baseDir = options.directory;
-    }
-    else {
-        baseDir =
-            workspace.get(options.project).projectType === 'application'
-                ? 'app'
-                : 'lib';
-    }
-    return options.flat ? baseDir : (0, devkit_1.joinPathFragments)(baseDir, fileName);
-}
-function assertValidOptions(options) {
-    (0, assertion_1.assertValidStyle)(options.style);
-    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 component name. Did you mean to use the --directory option (e.g. \`nx g c ${name} --directory ${suggestion}\`)?`);
-        }
-    });
+function getRelativeImportToFile(indexPath, filePath) {
+    const { name, dir } = (0, path_1.parse)(filePath);
+    const relativeDirToTarget = (0, path_1.relative)((0, path_1.dirname)(indexPath), dir);
+    return `./${(0, devkit_1.joinPathFragments)(relativeDirToTarget, name)}`;
 }
 exports.default = componentGenerator;

package/src/generators/component/{get-component-tests.d.ts → lib/get-component-tests.d.ts}

@@ -1,2 +1,2 @@
-import { NormalizedSchema } from './noramlized-schema';
+import { NormalizedSchema } from '../schema';
 export declare function getComponentTests(schema: NormalizedSchema): string;

package/src/generators/component/lib/normalize-options.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema, Schema } from '../schema';
+export declare function normalizeOptions(tree: Tree, options: Schema): Promise<NormalizedSchema>;

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = void 0;
+const devkit_1 = require("@nx/devkit");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const assertion_1 = require("../../../utils/assertion");
+async function normalizeOptions(tree, options) {
+    (0, assertion_1.assertValidStyle)(options.style);
+    const { artifactName: name, directory, fileName, filePath, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
+        artifactType: 'component',
+        callingGenerator: '@nx/react:component',
+        name: options.name,
+        directory: options.directory,
+        derivedDirectory: options.derivedDirectory ?? options.directory,
+        flat: options.flat,
+        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
+        project: options.project,
+        fileExtension: 'tsx',
+        fileName: options.fileName,
+        pascalCaseFile: options.pascalCaseFiles,
+        pascalCaseDirectory: options.pascalCaseDirectory,
+    });
+    const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+    const { className } = (0, devkit_1.names)(name);
+    const { sourceRoot: projectSourceRoot, projectType } = project;
+    const styledModule = /^(css|scss|less|none)$/.test(options.style)
+        ? null
+        : options.style;
+    if (options.export && projectType === 'application') {
+        devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
+    }
+    options.classComponent = options.classComponent ?? false;
+    options.routing = options.routing ?? false;
+    options.globalCss = options.globalCss ?? false;
+    options.inSourceTests = options.inSourceTests ?? false;
+    return {
+        ...options,
+        project: projectName,
+        directory,
+        styledModule,
+        hasStyles: options.style !== 'none',
+        className,
+        fileName,
+        filePath,
+        projectSourceRoot,
+    };
+}
+exports.normalizeOptions = normalizeOptions;

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

@@ -2,19 +2,44 @@ import { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
   name: string;
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18.
+   */
   project: string;
   style: SupportedStyles;
   skipTests?: boolean;
   directory?: string;
   export?: boolean;
+  /**
+   * @deprecated Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18.
+   */
   pascalCaseFiles?: boolean;
+  /**
+   * @deprecated Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18.
+   */
   pascalCaseDirectory?: boolean;
   classComponent?: boolean;
   routing?: boolean;
   js?: boolean;
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   */
   flat?: boolean;
   globalCss?: boolean;
   fileName?: string;
   inSourceTests?: boolean;
   skipFormat?: boolean;
+  nameAndDirectoryFormat?: 'as-provided' | 'derived';
+  // Used by other wrapping generators to preserve previous behavior
+  // e.g. @nx/next:component
+  derivedDirectory?: string;
+}
+
+export interface NormalizedSchema extends Schema {
+  projectSourceRoot: string;
+  fileName: string;
+  filePath: string;
+  className: string;
+  styledModule: null | string;
+  hasStyles: boolean;
 }

package/src/generators/component/schema.json

@@ -5,16 +5,6 @@
   "title": "Create a React Component",
   "description": "Create a React Component for Nx.",
   "type": "object",
-  "examples": [
-    {
-      "command": "nx g component my-component --project=mylib",
-      "description": "Generate a component in the `mylib` library"
-    },
-    {
-      "command": "nx g component my-component --project=mylib --classComponent",
-      "description": "Generate a class component in the `mylib` library"
-    }
-  ],
   "properties": {
     "project": {
       "type": "string",
@@ -23,8 +13,7 @@
       "$default": {
         "$source": "projectName"
       },
-      "x-prompt": "What is the name of the project for this component?",
-      "x-priority": "important"
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
     },
     "name": {
       "type": "string",
@@ -45,7 +34,10 @@
         "message": "Which stylesheet format would you like to use?",
         "type": "list",
         "items": [
-          { "value": "css", "label": "CSS" },
+          {
+            "value": "css",
+            "label": "CSS"
+          },
           {
             "value": "scss",
             "label": "SASS(.scss)       [ http://sass-lang.com          ]"
@@ -86,14 +78,20 @@
     },
     "directory": {
       "type": "string",
-      "description": "Create the component under this directory (can be nested).",
+      "description": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
       "alias": "dir",
       "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"]
+    },
     "flat": {
       "type": "boolean",
       "description": "Create component at the source root rather than its own directory.",
-      "default": false
+      "default": false,
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18."
     },
     "export": {
       "type": "boolean",
@@ -106,13 +104,15 @@
       "type": "boolean",
       "description": "Use pascal case component file name (e.g. `App.tsx`).",
       "alias": "P",
-      "default": false
+      "default": false,
+      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
     },
     "pascalCaseDirectory": {
       "type": "boolean",
       "description": "Use pascal case directory name (e.g. `App/App.tsx`).",
       "alias": "R",
-      "default": false
+      "default": false,
+      "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
     },
     "classComponent": {
       "type": "boolean",
@@ -145,5 +145,6 @@
       "x-priority": "internal"
     }
   },
-  "required": ["name", "project"]
+  "required": ["name"],
+  "examplesFile": "../../../docs/component-examples.md"
 }

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

@@ -1,4 +1,5 @@
 import { Tree } from '@nx/devkit';
 import { Schema } from './schema';
 export declare function hookGenerator(host: Tree, schema: Schema): Promise<void>;
+export declare function hookGeneratorInternal(host: Tree, schema: Schema): Promise<void>;
 export default hookGenerator;

package/src/generators/hook/hook.js

@@ -1,21 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hookGenerator = void 0;
+exports.hookGeneratorInternal = exports.hookGenerator = void 0;
 // TODO(jack): Remove inline renderHook function when RTL releases with its own version
 const devkit_1 = require("@nx/devkit");
 const ast_utils_1 = require("../../utils/ast-utils");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const path_1 = require("path");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 async function hookGenerator(host, schema) {
+    return hookGeneratorInternal(host, {
+        nameAndDirectoryFormat: 'derived',
+        ...schema,
+    });
+}
+exports.hookGenerator = hookGenerator;
+async function hookGeneratorInternal(host, schema) {
     const options = await normalizeOptions(host, schema);
     createFiles(host, options);
     addExportsToBarrel(host, options);
     return await (0, devkit_1.formatFiles)(host);
 }
-exports.hookGenerator = hookGenerator;
+exports.hookGeneratorInternal = hookGeneratorInternal;
 function createFiles(host, options) {
-    const hookDir = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.directory);
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), hookDir, {
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), options.directory, {
         ...options,
         tmpl: '',
     });
@@ -51,7 +58,20 @@ function addExportsToBarrel(host, options) {
 }
 async function normalizeOptions(host, options) {
     assertValidOptions(options);
-    let base = options.name;
+    const { artifactName: name, directory: _directory, fileName: _fileName, nameAndDirectoryFormat, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+        artifactType: 'hook',
+        callingGenerator: '@nx/react:hook',
+        name: options.name,
+        directory: options.directory,
+        derivedDirectory: options.directory,
+        flat: options.flat,
+        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
+        project: options.project,
+        fileExtension: 'tsx',
+        pascalCaseFile: options.pascalCaseFiles,
+        pascalCaseDirectory: options.pascalCaseDirectory,
+    });
+    let base = _fileName;
     if (base.startsWith('use-')) {
         base = base.substring(4);
     }
@@ -59,21 +79,32 @@ async function normalizeOptions(host, options) {
         base = base.substring(3);
     }
     const { className, fileName } = (0, devkit_1.names)(base);
-    const hookFilename = options.pascalCaseFiles
-        ? 'use'.concat(className)
-        : 'use-'.concat(fileName);
+    // If using `as-provided` file and directory, then don't normalize.
+    // Otherwise, support legacy behavior of prefixing filename with `use-`.
+    const hookFilename = nameAndDirectoryFormat === 'as-provided'
+        ? fileName
+        : options.pascalCaseFiles
+            ? 'use'.concat(className)
+            : 'use-'.concat(fileName);
     const hookName = 'use'.concat(className);
     const hookTypeName = 'Use'.concat(className);
     const project = (0, devkit_1.getProjects)(host).get(options.project);
-    if (!project) {
-        devkit_1.logger.error(`Cannot find the ${options.project} project. Please double check the project name.`);
-        throw new Error();
-    }
     const { sourceRoot: projectSourceRoot, projectType } = project;
-    const directory = await getDirectory(host, options, base);
     if (options.export && projectType === 'application') {
         devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
     }
+    // Support legacy behavior of derived directory to prefix with `use-`.
+    let directory = _directory;
+    if (nameAndDirectoryFormat === 'derived') {
+        const parts = directory.split('/');
+        parts.pop();
+        if (!options.flat) {
+            parts.push(options.pascalCaseDirectory
+                ? 'use'.concat(className)
+                : 'use-'.concat(fileName));
+        }
+        directory = parts.join('/');
+    }
     return {
         ...options,
         directory,
@@ -83,24 +114,6 @@ async function normalizeOptions(host, options) {
         projectSourceRoot,
     };
 }
-async function getDirectory(host, options, baseHookName) {
-    const { className, fileName } = (0, devkit_1.names)(baseHookName);
-    const hookFileName = options.pascalCaseDirectory === true
-        ? 'use'.concat(className)
-        : 'use-'.concat(fileName);
-    const workspace = (0, devkit_1.getProjects)(host);
-    let baseDir;
-    if (options.directory) {
-        baseDir = options.directory;
-    }
-    else {
-        baseDir =
-            workspace.get(options.project).projectType === 'application'
-                ? 'app'
-                : 'lib';
-    }
-    return options.flat ? baseDir : (0, devkit_1.joinPathFragments)(baseDir, hookFileName);
-}
 function assertValidOptions(options) {
     const slashes = ['/', '\\'];
     slashes.forEach((s) => {

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

@@ -1,11 +1,24 @@
 export interface Schema {
   name: string;
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18.
+   */
   project: string;
   skipTests?: boolean;
   directory?: string;
   export?: boolean;
+  /**
+   * @deprecated Provide the `name` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   */
   pascalCaseFiles?: boolean;
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   */
   pascalCaseDirectory?: boolean;
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   */
   flat?: boolean;
   js?: boolean;
+  nameAndDirectoryFormat?: 'as-provided' | 'derived';
 }

package/src/generators/hook/schema.json

@@ -19,8 +19,7 @@
       "$default": {
         "$source": "projectName"
       },
-      "x-prompt": "What is the name of the project for this hook?",
-      "x-priority": "important"
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
     },
     "name": {
       "type": "string",
@@ -45,13 +44,19 @@
     },
     "directory": {
       "type": "string",
-      "description": "Create the hook under this directory (can be nested).",
+      "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"]
+    },
     "flat": {
       "type": "boolean",
       "description": "Create hook at the source root rather than its own directory.",
-      "default": false
+      "default": false,
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v18."
     },
     "export": {
       "type": "boolean",
@@ -64,14 +69,16 @@
       "type": "boolean",
       "description": "Use pascal case hook file name (e.g. `useHook.ts`).",
       "alias": "P",
-      "default": false
+      "default": false,
+      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
     },
     "pascalCaseDirectory": {
       "type": "boolean",
       "description": "Use pascal case directory name (e.g. `useHook/useHook.ts`).",
       "alias": "R",
-      "default": false
+      "default": false,
+      "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
     }
   },
-  "required": ["name", "project"]
+  "required": ["name"]
 }

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

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/linter';
+import type { Linter } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings';
 
 export interface Schema {

package/src/generators/library/lib/add-linting.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addLinting = void 0;
-const linter_1 = require("@nx/linter");
+const eslint_1 = require("@nx/eslint");
 const path_1 = require("nx/src/utils/path");
 const devkit_1 = require("@nx/devkit");
 const lint_1 = require("../../../utils/lint");
-const eslint_file_1 = require("@nx/linter/src/generators/utils/eslint-file");
+const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
 async function addLinting(host, options) {
-    if (options.linter === linter_1.Linter.EsLint) {
-        const lintTask = await (0, linter_1.lintProjectGenerator)(host, {
+    if (options.linter === eslint_1.Linter.EsLint) {
+        const lintTask = await (0, eslint_1.lintProjectGenerator)(host, {
             linter: options.linter,
             project: options.name,
             tsConfigPaths: [

package/src/generators/library/library.js

@@ -69,11 +69,10 @@ async function libraryGeneratorInternal(host, schema) {
             includeVitest: options.unitTestRunner === 'vitest',
             inSourceTests: options.inSourceTests,
             rollupOptionsExternal: [
-                `'react'`,
-                `'react-dom'`,
-                `'react/jsx-runtime'`,
+                "'react'",
+                "'react-dom'",
+                "'react/jsx-runtime'",
             ],
-            rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`,
             imports: [
                 options.compiler === 'swc'
                     ? `import react from '@vitejs/plugin-react-swc'`
@@ -124,18 +123,18 @@ async function libraryGeneratorInternal(host, schema) {
             includeVitest: true,
             inSourceTests: options.inSourceTests,
             rollupOptionsExternal: [
-                `'react'`,
-                `'react-dom'`,
-                `'react/jsx-runtime'`,
+                "'react'",
+                "'react-dom'",
+                "'react/jsx-runtime'",
             ],
-            rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`,
             imports: [`import react from '@vitejs/plugin-react'`],
             plugins: ['react()'],
         }, true);
     }
     if (options.component) {
         const componentTask = await (0, component_1.default)(host, {
-            name: options.fileName,
+            nameAndDirectoryFormat: 'as-provided',
+            name: (0, devkit_1.joinPathFragments)(options.projectRoot, 'src/lib', options.fileName),
             project: options.name,
             flat: true,
             style: options.style,

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

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/linter';
+import type { Linter } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {

package/src/generators/redux/redux.d.ts

@@ -1,4 +1,5 @@
 import { Schema } from './schema';
 import { Tree } from '@nx/devkit';
 export declare function reduxGenerator(host: Tree, schema: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function reduxGeneratorInternal(host: Tree, schema: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default reduxGenerator;

package/src/generators/redux/redux.js

@@ -1,15 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reduxGenerator = void 0;
+exports.reduxGeneratorInternal = exports.reduxGenerator = void 0;
 const path = require("path");
 const ast_utils_1 = require("../../utils/ast-utils");
 const versions_1 = require("../../utils/versions");
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 let tsModule;
 async function reduxGenerator(host, schema) {
-    const options = normalizeOptions(host, schema);
+    return reduxGeneratorInternal(host, {
+        nameAndDirectoryFormat: 'derived',
+        ...schema,
+    });
+}
+exports.reduxGenerator = reduxGenerator;
+async function reduxGeneratorInternal(host, schema) {
+    const options = await normalizeOptions(host, schema);
     generateReduxFiles(host, options);
     addExportsToBarrel(host, options);
     const installTask = addReduxPackageDependencies(host);
@@ -18,9 +26,9 @@ async function reduxGenerator(host, schema) {
     await (0, devkit_1.formatFiles)(host);
     return installTask;
 }
-exports.reduxGenerator = reduxGenerator;
+exports.reduxGeneratorInternal = reduxGeneratorInternal;
 function generateReduxFiles(host, options) {
-    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, './files'), options.filesPath, {
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, './files'), options.directory, {
         ...options,
         tmpl: '',
     });
@@ -76,12 +84,23 @@ function updateReducerConfiguration(host, options) {
     }));
     host.write(options.appMainFilePath, changes);
 }
-function normalizeOptions(host, options) {
+async function normalizeOptions(host, options) {
+    const { artifactName: name, directory, fileName, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+        artifactType: 'slice',
+        callingGenerator: '@nx/react:redux',
+        name: options.name,
+        directory: options.directory,
+        derivedDirectory: options.directory,
+        flat: true,
+        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
+        project: options.project,
+        fileExtension: 'tsx',
+    });
     let appProjectSourcePath;
     let appMainFilePath;
-    const extraNames = (0, devkit_1.names)(options.name);
+    const extraNames = (0, devkit_1.names)(name);
     const projects = (0, devkit_1.getProjects)(host);
-    const project = projects.get(options.project);
+    const project = projects.get(projectName);
     const { sourceRoot, projectType } = project;
     const tsConfigJson = (0, devkit_1.readJson)(host, (0, js_1.getRootTsConfigPathInTree)(host));
     const tsPaths = tsConfigJson.compilerOptions
@@ -111,14 +130,14 @@ function normalizeOptions(host, options) {
     return {
         ...options,
         ...extraNames,
+        fileName,
         constantName: (0, devkit_1.names)(options.name).constantName.toUpperCase(),
-        directory: (0, devkit_1.names)(options.directory ?? '').fileName,
+        directory,
         projectType,
         projectSourcePath: sourceRoot,
         projectModulePath: modulePath,
         appProjectSourcePath,
         appMainFilePath,
-        filesPath: (0, devkit_1.joinPathFragments)(sourceRoot, projectType === 'application' ? 'app' : 'lib'),
     };
 }
 exports.default = reduxGenerator;

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

@@ -4,6 +4,7 @@ export interface Schema {
   directory?: string;
   appProject?: string;
   js?: string;
+  nameAndDirectoryFormat?: 'as-provided' | 'derived';
 }
 
 interface NormalizedSchema extends Schema {
@@ -12,7 +13,6 @@ interface NormalizedSchema extends Schema {
   projectModulePath: string;
   appProjectSourcePath: string;
   appMainFilePath: string;
-  filesPath: string;
   className: string;
   constantName: string;
   propertyName: string;

package/src/generators/redux/schema.json

@@ -22,16 +22,20 @@
       "$default": {
         "$source": "projectName"
       },
-      "x-prompt": "What is the name of the project for this slice?",
-      "x-priority": "important"
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
     },
     "directory": {
       "type": "string",
       "alias": "dir",
       "default": "",
-      "description": "The name of the folder used to contain/group the generated Redux files.",
+      "description": "The directory at which to create the Redux files. 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"]
+    },
     "appProject": {
       "type": "string",
       "description": "The application project to add the slice to.",

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

@@ -1,5 +1,5 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import type { Linter } from '@nx/linter';
+import type { Linter } from '@nx/eslint';
 import type { SupportedStyles } from '../../../typings';
 import type { NormalizedSchema as ApplicationNormalizedSchema } from '../application/schema';
 

package/src/generators/storybook-configuration/schema.d.ts

@@ -1,4 +1,4 @@
-import { Linter } from '@nx/linter';
+import { Linter } from '@nx/eslint';
 
 export interface StorybookConfigureSchema {
   name: string;

package/src/generators/storybook-configuration/schema.json

@@ -28,7 +28,8 @@
     },
     "configureCypress": {
       "type": "boolean",
-      "description": "Run the cypress-configure generator."
+      "description": "Run the cypress-configure generator.",
+      "x-deprecated": "Use interactionTests instead. This option will be removed in v18."
     },
     "generateStories": {
       "type": "boolean",
@@ -39,7 +40,8 @@
     },
     "generateCypressSpecs": {
       "type": "boolean",
-      "description": "Automatically generate test files in the Cypress E2E app generated by the `cypress-configure` generator."
+      "description": "Automatically generate test files in the Cypress E2E app generated by the `cypress-configure` generator.",
+      "x-deprecated": "Use interactionTests instead. This option will be removed in v18."
     },
     "configureStaticServe": {
       "type": "boolean",
@@ -50,7 +52,8 @@
     },
     "cypressDirectory": {
       "type": "string",
-      "description": "A directory where the Cypress project will be placed. Placed at the root by default."
+      "description": "A directory where the Cypress project will be placed. Placed at the root by default.",
+      "x-deprecated": "Use interactionTests instead. This option will be removed in v18."
     },
     "js": {
       "type": "boolean",

package/src/utils/lint.d.ts

@@ -9,7 +9,7 @@ export declare const extraEslintDependencies: {
     };
 };
 /**
- * @deprecated Use `addExtendsToLintConfig` from `@nx/linter` instead.
+ * @deprecated Use `addExtendsToLintConfig` from `@nx/eslint` instead.
  */
 export declare const extendReactEslintJson: (json: Linter.Config) => {
     ignorePatterns?: string | string[];

package/src/utils/lint.js

@@ -12,7 +12,7 @@ exports.extraEslintDependencies = {
     },
 };
 /**
- * @deprecated Use `addExtendsToLintConfig` from `@nx/linter` instead.
+ * @deprecated Use `addExtendsToLintConfig` from `@nx/eslint` instead.
  */
 const extendReactEslintJson = (json) => {
     const { extends: pluginExtends, ...config } = json;

package/src/utils/testing-generators.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createLib = exports.createApp = void 0;
 const devkit_1 = require("@nx/devkit");
 const application_1 = require("../generators/application/application");
-const linter_1 = require("@nx/linter");
+const eslint_1 = require("@nx/eslint");
 async function createApp(tree, appName) {
     await (0, application_1.default)(tree, {
         e2eTestRunner: 'none',
-        linter: linter_1.Linter.EsLint,
+        linter: eslint_1.Linter.EsLint,
         skipFormat: true,
         style: 'css',
         unitTestRunner: 'none',

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

@@ -1,8 +0,0 @@
-import { Schema } from './schema';
-export interface NormalizedSchema extends Schema {
-    projectSourceRoot: string;
-    fileName: string;
-    className: string;
-    styledModule: null | string;
-    hasStyles: boolean;
-}

package/src/generators/component/noramlized-schema.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });