@nx/next 17.0.0-beta.6 → 17.0.0-beta.8

package/generators.json

@@ -17,12 +17,12 @@
       "description": "Create an application."
     },
     "page": {
-      "factory": "./src/generators/page/page#pageGenerator",
+      "factory": "./src/generators/page/page#pageGeneratorInternal",
       "schema": "./src/generators/page/schema.json",
       "description": "Create a page."
     },
     "component": {
-      "factory": "./src/generators/component/component#componentGenerator",
+      "factory": "./src/generators/component/component#componentGeneratorInternal",
       "schema": "./src/generators/component/schema.json",
       "description": "Create a component."
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/next",
-  "version": "17.0.0-beta.6",
+  "version": "17.0.0-beta.8",
   "private": false,
   "description": "The Next.js plugin for Nx contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides:\n\n\n- Scaffolding for creating, building, serving, linting, and testing Next.js applications.\n\n- Integration with building, serving, and exporting a Next.js application.\n\n- Integration with React libraries within the workspace. \n\nWhen using Next.js in Nx, you get the out-of-the-box support for TypeScript, Cypress, and Jest. No need to configure anything: watch mode, source maps, and typings just work.",
   "repository": {
@@ -44,13 +44,13 @@
     "url-loader": "^4.1.1",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "17.0.0-beta.6",
-    "@nx/js": "17.0.0-beta.6",
-    "@nx/linter": "17.0.0-beta.6",
-    "@nx/react": "17.0.0-beta.6",
-    "@nx/web": "17.0.0-beta.6",
-    "@nx/workspace": "17.0.0-beta.6",
-    "@nrwl/next": "17.0.0-beta.6"
+    "@nx/devkit": "17.0.0-beta.8",
+    "@nx/js": "17.0.0-beta.8",
+    "@nx/eslint": "17.0.0-beta.8",
+    "@nx/react": "17.0.0-beta.8",
+    "@nx/web": "17.0.0-beta.8",
+    "@nx/workspace": "17.0.0-beta.8",
+    "@nrwl/next": "17.0.0-beta.8"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addE2e = void 0;
 const devkit_1 = require("@nx/devkit");
-const linter_1 = require("@nx/linter");
+const eslint_1 = require("@nx/eslint");
 const versions_1 = require("../../../utils/versions");
 async function addE2e(host, options) {
     if (options.e2eTestRunner === 'cypress') {
         const { cypressProjectGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
         return cypressProjectGenerator(host, {
             ...options,
-            linter: linter_1.Linter.EsLint,
+            linter: eslint_1.Linter.EsLint,
             name: options.e2eProjectName,
             directory: options.e2eProjectRoot,
             // the name and root are already normalized, instruct the generator to use them as is

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

@@ -1,13 +1,13 @@
 "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 devkit_1 = require("@nx/devkit");
 const lint_1 = require("@nx/react/src/utils/lint");
-const eslint_file_1 = require("@nx/linter/src/generators/utils/eslint-file");
-const lint_project_1 = require("@nx/linter/src/generators/lint-project/lint-project");
+const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
+const lint_project_1 = require("@nx/eslint/src/generators/lint-project/lint-project");
 async function addLinting(host, options) {
-    const lintTask = await (0, linter_1.lintProjectGenerator)(host, {
+    const lintTask = await (0, eslint_1.lintProjectGenerator)(host, {
         linter: options.linter,
         project: options.projectName,
         tsConfigPaths: [
@@ -20,7 +20,7 @@ async function addLinting(host, options) {
         skipFormat: true,
         rootProject: options.rootProject,
     });
-    if (options.linter === linter_1.Linter.EsLint && (0, eslint_file_1.isEslintConfigSupported)(host)) {
+    if (options.linter === eslint_1.Linter.EsLint && (0, eslint_file_1.isEslintConfigSupported)(host)) {
         (0, eslint_file_1.addExtendsToLintConfig)(host, options.appProjectRoot, [
             'plugin:@nx/react-typescript',
             'next',

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = void 0;
 const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
-const linter_1 = require("@nx/linter");
+const eslint_1 = require("@nx/eslint");
 const assertion_1 = require("@nx/react/src/utils/assertion");
 async function normalizeOptions(host, options) {
     const { projectName: appProjectName, projectRoot: appProjectRoot, projectNameAndRootFormat, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
@@ -37,7 +37,7 @@ async function normalizeOptions(host, options) {
         e2eProjectRoot,
         e2eTestRunner: options.e2eTestRunner || 'cypress',
         fileName,
-        linter: options.linter || linter_1.Linter.EsLint,
+        linter: options.linter || eslint_1.Linter.EsLint,
         name,
         outputPath,
         parsedTags,

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 '@nx/react';
 
 export interface Schema {

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

@@ -2,13 +2,27 @@ import { Tree } from '@nx/devkit';
 import type { SupportedStyles } from '@nx/react';
 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;
     directory?: string;
+    /**
+     * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+     */
     flat?: 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;
+    nameAndDirectoryFormat?: 'as-provided' | 'derived';
     skipFormat?: boolean;
 }
-export declare function componentGenerator(host: Tree, options: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function componentGenerator(host: Tree, schema: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function componentGeneratorInternal(host: Tree, options: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default componentGenerator;

package/src/generators/component/component.js

@@ -1,6 +1,6 @@
 "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 react_1 = require("@nx/react");
 const styles_1 = require("../../utils/styles");
@@ -13,15 +13,23 @@ function getDirectory(host, options) {
             ? 'components'
             : undefined;
 }
+async function componentGenerator(host, schema) {
+    return componentGeneratorInternal(host, {
+        nameAndDirectoryFormat: 'derived',
+        ...schema,
+    });
+}
+exports.componentGenerator = componentGenerator;
 /*
  * This schematic is basically the React one, but for Next we need
  * extra dependencies for css, sass, less style options.
  */
-async function componentGenerator(host, options) {
+async function componentGeneratorInternal(host, options) {
     const project = (0, devkit_1.readProjectConfiguration)(host, options.project);
     const componentInstall = await (0, react_1.componentGenerator)(host, {
         ...options,
-        directory: getDirectory(host, options),
+        directory: options.directory,
+        derivedDirectory: getDirectory(host, options),
         classComponent: false,
         routing: false,
         skipFormat: true,
@@ -35,5 +43,5 @@ async function componentGenerator(host, options) {
     }
     return (0, devkit_1.runTasksInSerial)(styledInstall, componentInstall);
 }
-exports.componentGenerator = componentGenerator;
+exports.componentGeneratorInternal = componentGeneratorInternal;
 exports.default = componentGenerator;

package/src/generators/component/schema.json

@@ -13,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",
@@ -35,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          ]"
@@ -71,10 +73,15 @@
     },
     "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"]
+    },
     "export": {
       "type": "boolean",
       "description": "When true, the component is exported from the project index.ts (if it exists).",
@@ -89,19 +96,22 @@
     "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."
     },
     "pascalCaseFiles": {
       "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."
     },
     "skipFormat": {
       "description": "Skip formatting files.",
@@ -110,6 +120,6 @@
       "x-priority": "internal"
     }
   },
-  "required": ["name", "project"],
+  "required": ["name"],
   "examplesFile": "../../../docs/component-examples.md"
 }

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

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

package/src/generators/page/page.d.ts

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

package/src/generators/page/page.js

@@ -1,16 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pageGenerator = void 0;
+exports.pageGeneratorInternal = exports.pageGenerator = void 0;
 const react_1 = require("@nx/react");
 const devkit_1 = require("@nx/devkit");
 const styles_1 = require("../../utils/styles");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+async function pageGenerator(host, schema) {
+    return pageGeneratorInternal(host, {
+        nameAndDirectoryFormat: 'derived',
+        ...schema,
+    });
+}
+exports.pageGenerator = pageGenerator;
 /*
  * This schematic is basically the React component one, but for Next we need
  * extra dependencies for css, sass, less style options, and make sure
  * it is under `pages` folder.
  */
-async function pageGenerator(host, schema) {
-    const options = normalizeOptions(host, schema);
+async function pageGeneratorInternal(host, schema) {
+    const options = await normalizeOptions(host, schema);
     const componentTask = await (0, react_1.componentGenerator)(host, {
         ...options,
         project: schema.project,
@@ -22,25 +30,63 @@ async function pageGenerator(host, schema) {
         flat: !!options.flat,
         skipFormat: true,
     });
+    const project = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
     const styledTask = (0, styles_1.addStyleDependencies)(host, {
         style: options.style,
-        swc: !host.exists((0, devkit_1.joinPathFragments)(options.project.root, '.babelrc')),
+        swc: !host.exists((0, devkit_1.joinPathFragments)(project.root, '.babelrc')),
     });
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }
     return (0, devkit_1.runTasksInSerial)(componentTask, styledTask);
 }
-exports.pageGenerator = pageGenerator;
-function normalizeOptions(host, options) {
-    const project = (0, devkit_1.readProjectConfiguration)(host, options.project);
-    // app/ is a reserved folder in nextjs so it is safe to check it's existence
-    const isAppRouter = host.exists(`${project.root}/app`);
+exports.pageGeneratorInternal = pageGeneratorInternal;
+async function normalizeOptions(host, options) {
+    let isAppRouter;
+    if (options.project) {
+        // Legacy behavior, detect app vs page router from specified project.
+        const project = (0, devkit_1.readProjectConfiguration)(host, options.project);
+        // app/ is a reserved folder in nextjs so it is safe to check it's existence
+        isAppRouter = host.exists(`${project.root}/app`);
+    }
+    else {
+        // New behavior, detect app vs page router from the positional arg or directory path
+        const parts = options.name.includes('/') || // mac, linux
+            options.name.includes('\\') // windows
+            ? options.name.split(/[\/\\]/)
+            : options.directory.split(/[\/\\]/);
+        if (parts.includes('pages')) {
+            isAppRouter = false;
+        }
+        else if (parts.includes('app')) {
+            isAppRouter = true;
+        }
+        else {
+        }
+    }
+    const { artifactName: name, project: projectName, filePath, fileName, nameAndDirectoryFormat, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+        artifactType: 'component',
+        callingGenerator: '@nx/react:component',
+        name: options.name,
+        fileName: isAppRouter ? 'page' : 'index',
+        directory: options.directory,
+        derivedDirectory: options.directory,
+        flat: options.flat,
+        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
+        project: options.project,
+        fileExtension: 'tsx',
+    });
     const routerDirectory = isAppRouter ? 'app' : 'pages';
-    const directory = options.directory
+    const derivedDirectory = options.directory
         ? `${routerDirectory}/${options.directory}`
         : `${routerDirectory}`;
-    const fileName = isAppRouter ? 'page' : !options.flat ? 'index' : undefined;
-    return { ...options, project, directory, fileName };
+    return {
+        ...options,
+        fileName,
+        projectName,
+        derivedDirectory,
+        filePath,
+        nameAndDirectoryFormat,
+    };
 }
 exports.default = pageGenerator;

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

@@ -2,12 +2,19 @@ import { SupportedStyles } from '@nx/react';
 
 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;
   directory?: string;
   fileName?: string;
   withTests?: 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;
   skipFormat?: boolean;
+  nameAndDirectoryFormat?: 'as-provided' | 'derived';
 }

package/src/generators/page/schema.json

@@ -13,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",
@@ -28,10 +27,15 @@
     },
     "directory": {
       "type": "string",
-      "description": "Create the page under this directory (can be nested). Will be created under `pages/`.",
+      "description": "The directory at which to create the page 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"]
+    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",
@@ -41,7 +45,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          ]"
@@ -89,7 +96,8 @@
     "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. It will be removed in Nx v18."
     },
     "skipFormat": {
       "description": "Skip formatting files.",
@@ -98,6 +106,6 @@
       "x-priority": "internal"
     }
   },
-  "required": ["name", "project"],
+  "required": ["name"],
   "examplesFile": "../../../docs/page-examples.md"
 }