fix(react): update usage of deprecated "project" option in generators (…

…#19696)

packages/expo/src/generators/component/component.ts

@@ -59,7 +59,8 @@ function createComponentFiles(host: Tree, options: NormalizedSchema) {
 
 function addExportsToBarrel(host: Tree, options: NormalizedSchema) {
   const workspace = getProjects(host);
-  const isApp = workspace.get(options.project).projectType === 'application';
+  const isApp =
+    workspace.get(options.projectName).projectType === 'application';
 
   if (options.export && !isApp) {
     const indexFilePath = joinPathFragments(

packages/expo/src/generators/component/lib/normalize-options.ts

@@ -7,6 +7,7 @@ export interface NormalizedSchema extends Schema {
   fileName: string;
   className: string;
   filePath: string;
+  projectName: string;
 }
 
 export async function normalizeOptions(
@@ -55,6 +56,7 @@ export async function normalizeOptions(
     fileName,
     filePath,
     projectSourceRoot,
+    projectName,
   };
 }
 

packages/next/src/generators/component/component.spec.ts

@@ -75,4 +75,17 @@ describe('component', () => {
     expect(tree.exists('my-lib/src/bar/world/world.spec.tsx')).toBeTruthy();
     expect(tree.exists('my-lib/src/bar/world/world.module.css')).toBeTruthy();
   });
+
+  it('should work with path as-provided', async () => {
+    await componentGenerator(tree, {
+      name: 'hello',
+      directory: 'my-lib/src/foo',
+      nameAndDirectoryFormat: 'as-provided',
+      style: 'css',
+    });
+
+    expect(tree.exists('my-lib/src/foo/hello.tsx')).toBeTruthy();
+    expect(tree.exists('my-lib/src/foo/hello.spec.tsx')).toBeTruthy();
+    expect(tree.exists('my-lib/src/foo/hello.module.css')).toBeTruthy();
+  });
 });

packages/next/src/generators/component/component.ts

@@ -10,13 +10,14 @@ import type { SupportedStyles } from '@nx/react';
 import { componentGenerator as reactComponentGenerator } from '@nx/react';
 
 import { addStyleDependencies } from '../../utils/styles';
+import { determineArtifactNameAndDirectoryOptions } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
 
 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;
+  project?: string;
   style: SupportedStyles;
   directory?: string;
   /**
@@ -35,7 +36,9 @@ interface Schema {
   skipFormat?: boolean;
 }
 
-function getDirectory(host: Tree, options: Schema) {
+// TODO(v18): Remove this logic once we no longer derive directory.
+function maybeGetDerivedDirectory(host: Tree, options: Schema): string {
+  if (!options.project) return options.directory;
   const workspace = getProjects(host);
   const projectType = workspace.get(options.project).projectType;
 
@@ -58,16 +61,35 @@ export async function componentGenerator(host: Tree, schema: Schema) {
  * extra dependencies for css, sass, less style options.
  */
 export async function componentGeneratorInternal(host: Tree, options: Schema) {
-  const project = readProjectConfiguration(host, options.project);
+  const {
+    artifactName: name,
+    directory,
+    project: projectName,
+  } = await determineArtifactNameAndDirectoryOptions(host, {
+    artifactType: 'component',
+    callingGenerator: '@nx/next:component',
+    name: options.name,
+    directory: options.directory,
+    derivedDirectory: maybeGetDerivedDirectory(host, options),
+    flat: options.flat,
+    nameAndDirectoryFormat: options.nameAndDirectoryFormat,
+    project: options.project,
+    fileExtension: 'tsx',
+    pascalCaseFile: options.pascalCaseFiles,
+    pascalCaseDirectory: options.pascalCaseDirectory,
+  });
+
   const componentInstall = await reactComponentGenerator(host, {
     ...options,
-    directory: options.directory,
-    derivedDirectory: getDirectory(host, options),
+    nameAndDirectoryFormat: 'as-provided', // already determined the directory so use as is
+    project: undefined,
+    directory,
     classComponent: false,
     routing: false,
     skipFormat: true,
   });
 
+  const project = readProjectConfiguration(host, projectName);
   const styledInstall = addStyleDependencies(host, {
     style: options.style,
     swc: !host.exists(joinPathFragments(project.root, '.babelrc')),

packages/next/src/generators/page/page.ts

@@ -27,13 +27,11 @@ export async function pageGeneratorInternal(host: Tree, schema: Schema) {
   const options = await normalizeOptions(host, schema);
   const componentTask = await reactComponentGenerator(host, {
     ...options,
-    project: schema.project,
-    pascalCaseFiles: false,
+    nameAndDirectoryFormat: 'as-provided', // already determined the directory so use as is
     export: false,
     classComponent: false,
     routing: false,
     skipTests: !options.withTests,
-    flat: !!options.flat,
     skipFormat: true,
   });
 
@@ -52,58 +50,46 @@ export async function pageGeneratorInternal(host: Tree, schema: Schema) {
 
 async function normalizeOptions(host: Tree, options: Schema) {
   let isAppRouter: boolean;
+  let derivedDirectory: string;
 
   if (options.project) {
     // Legacy behavior, detect app vs page router from specified project.
+    // TODO(v18): remove this logic
     const project = 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`);
+
+    const routerDirectory = isAppRouter ? 'app' : 'pages';
+    derivedDirectory = options.directory
+      ? `${routerDirectory}/${options.directory}`
+      : `${routerDirectory}`;
   } 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 {
-    }
+    // New behavior, use directory as is without detecting whether we're using app or pages router.
+    derivedDirectory = options.directory;
   }
 
   const {
     artifactName: name,
     project: projectName,
-    filePath,
     fileName,
-    nameAndDirectoryFormat,
+    directory,
   } = await determineArtifactNameAndDirectoryOptions(host, {
-    artifactType: 'component',
-    callingGenerator: '@nx/react:component',
+    artifactType: 'page',
+    callingGenerator: '@nx/next:page',
     name: options.name,
     fileName: isAppRouter ? 'page' : 'index',
     directory: options.directory,
-    derivedDirectory: options.directory,
+    derivedDirectory,
     flat: options.flat,
     nameAndDirectoryFormat: options.nameAndDirectoryFormat,
     project: options.project,
     fileExtension: 'tsx',
   });
-
-  const routerDirectory = isAppRouter ? 'app' : 'pages';
-  const derivedDirectory = options.directory
-    ? `${routerDirectory}/${options.directory}`
-    : `${routerDirectory}`;
-
   return {
     ...options,
+    directory,
     fileName,
     projectName,
-    derivedDirectory,
-    filePath,
-    nameAndDirectoryFormat,
   };
 }
 

packages/react-native/src/generators/component/component.ts

@@ -65,7 +65,8 @@ function addExportsToBarrel(host: Tree, options: NormalizedSchema) {
     tsModule = ensureTypescript();
   }
   const workspace = getProjects(host);
-  const isApp = workspace.get(options.project).projectType === 'application';
+  const isApp =
+    workspace.get(options.projectName).projectType === 'application';
 
   if (options.export && !isApp) {
     const indexFilePath = joinPathFragments(

packages/react-native/src/generators/component/lib/normalize-options.ts

@@ -7,6 +7,7 @@ export interface NormalizedSchema extends Schema {
   fileName: string;
   className: string;
   filePath: string;
+  projectName: string;
 }
 
 export async function normalizeOptions(
@@ -55,6 +56,7 @@ export async function normalizeOptions(
     fileName,
     filePath,
     projectSourceRoot,
+    projectName,
   };
 }
 

packages/react/src/generators/component/component.ts

@@ -109,7 +109,8 @@ function addExportsToBarrel(host: Tree, options: NormalizedSchema) {
     tsModule = ensureTypescript();
   }
   const workspace = getProjects(host);
-  const isApp = workspace.get(options.project).projectType === 'application';
+  const isApp =
+    workspace.get(options.projectName).projectType === 'application';
 
   if (options.export && !isApp) {
     const indexFilePath = joinPathFragments(

packages/react/src/generators/component/lib/normalize-options.ts

@@ -55,7 +55,7 @@ export async function normalizeOptions(
 
   return {
     ...options,
-    project: projectName,
+    projectName,
     directory,
     styledModule,
     hasStyles: options.style !== 'none',

packages/react/src/generators/component/schema.d.ts

@@ -5,7 +5,7 @@ export interface Schema {
   /**
    * @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;
+  project?: string;
   style: SupportedStyles;
   skipTests?: boolean;
   directory?: string;
@@ -37,6 +37,7 @@ export interface Schema {
 
 export interface NormalizedSchema extends Schema {
   projectSourceRoot: string;
+  projectName: string;
   fileName: string;
   filePath: string;
   className: string;

packages/react/src/generators/hook/hook.ts

@@ -22,6 +22,7 @@ interface NormalizedSchema extends Schema {
   hookName: string;
   hookTypeName: string;
   fileName: string;
+  projectName: string;
 }
 
 export async function hookGenerator(host: Tree, schema: Schema) {
@@ -70,7 +71,8 @@ function addExportsToBarrel(host: Tree, options: NormalizedSchema) {
     tsModule = ensureTypescript();
   }
   const workspace = getProjects(host);
-  const isApp = workspace.get(options.project).projectType === 'application';
+  const isApp =
+    workspace.get(options.projectName).projectType === 'application';
 
   if (options.export && !isApp) {
     const indexFilePath = joinPathFragments(
@@ -141,7 +143,7 @@ async function normalizeOptions(
       : 'use-'.concat(fileName);
   const hookName = 'use'.concat(className);
   const hookTypeName = 'Use'.concat(className);
-  const project = getProjects(host).get(options.project);
+  const project = getProjects(host).get(projectName);
 
   const { sourceRoot: projectSourceRoot, projectType } = project;
 
@@ -173,6 +175,7 @@ async function normalizeOptions(
     hookTypeName,
     fileName: hookFilename,
     projectSourceRoot,
+    projectName,
   };
 }
 

packages/react/src/generators/redux/redux.ts

@@ -194,7 +194,7 @@ async function normalizeOptions(
   // for it without needing to specify --appProject.
   options.appProject =
     options.appProject ||
-    (projectType === 'application' ? options.project : undefined);
+    (projectType === 'application' ? projectName : undefined);
   if (options.appProject) {
     const appConfig = projects.get(options.appProject);
     if (appConfig.projectType !== 'application') {

packages/react/src/generators/redux/schema.d.ts

@@ -1,6 +1,9 @@
 export interface Schema {
   name: string;
-  project: 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;
   directory?: string;
   appProject?: string;
   js?: string;