Skip to content

Commit

Permalink
feat(nextjs): remove logic to determine app vs page directory when ge…
Browse files Browse the repository at this point in the history 
…nerating pages/components
  • Loading branch information
@jaysoo
jaysoo committed Apr 30, 2024
1 parent 89c90d0 commit c43397e
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 171 deletions.
52 changes: 4 additions & 48 deletions packages/next/src/generators/component/component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,9 @@ describe('component', () => {
it('should generate component in components directory for application', async () => {
await componentGenerator(tree, {
name: 'hello',
project: appName,
directory: 'my-app/components/hello',
style: 'css',
nameAndDirectoryFormat: 'as-provided',
});

expect(tree.exists('my-app/components/hello/hello.tsx')).toBeTruthy();
Expand All @@ -45,58 +46,13 @@ describe('component', () => {
it('should generate component in default directory for library', async () => {
await componentGenerator(tree, {
name: 'hello',
project: libName,
directory: 'my-lib/src/lib/hello',
style: 'css',
nameAndDirectoryFormat: 'as-provided',
});

expect(tree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
expect(tree.exists('my-lib/src/lib/hello/hello.spec.tsx')).toBeTruthy();
expect(tree.exists('my-lib/src/lib/hello/hello.module.css')).toBeTruthy();
});

it('should allow directory override', async () => {
await componentGenerator(tree, {
name: 'hello',
project: appName,
directory: 'foo',
style: 'css',
});
await componentGenerator(tree, {
name: 'world',
project: libName,
directory: 'bar',
style: 'css',
});

expect(tree.exists('my-app/foo/hello/hello.tsx')).toBeTruthy();
expect(tree.exists('my-app/foo/hello/hello.spec.tsx')).toBeTruthy();
expect(tree.exists('my-app/foo/hello/hello.module.css')).toBeTruthy();
expect(tree.exists('my-lib/src/bar/world/world.tsx')).toBeTruthy();
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();
});

it('should work with directory as a part of the component name', async () => {
await componentGenerator(tree, {
name: `${libName}/src/btn/btn`,
project: appName,
style: 'css',
nameAndDirectoryFormat: 'as-provided',
});

expect(tree.exists(`${libName}/src/btn/btn.tsx`)).toBeTruthy();
});
});
14 changes: 0 additions & 14 deletions packages/next/src/generators/component/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,19 +36,6 @@ interface Schema {
skipFormat?: boolean;
}

// TODO(v19): 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;

return options.directory
? options.directory
: projectType === 'application'
? 'components'
: undefined;
}

export async function componentGenerator(host: Tree, schema: Schema) {
return componentGeneratorInternal(host, {
nameAndDirectoryFormat: 'derived',
Expand All @@ -70,7 +57,6 @@ export async function componentGeneratorInternal(host: Tree, options: Schema) {
callingGenerator: '@nx/next:component',
name: options.name,
directory: options.directory,
derivedDirectory: maybeGetDerivedDirectory(host, options),
flat: options.flat,
nameAndDirectoryFormat: options.nameAndDirectoryFormat,
project: options.project,
Expand Down
102 changes: 25 additions & 77 deletions packages/next/src/generators/page/page.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,99 +5,47 @@ import { Tree } from '@nx/devkit';

describe('component', () => {
let tree: Tree;
let projectName: string;
let appRouterProjectName;
let appName: string;

beforeEach(async () => {
projectName = 'my-app';
appRouterProjectName = 'my-app-router';
appName = 'my-app';
tree = createTreeWithEmptyWorkspace();
await applicationGenerator(tree, {
name: projectName,
style: 'css',
appDir: false,
projectNameAndRootFormat: 'as-provided',
});

await applicationGenerator(tree, {
name: appRouterProjectName,
name: appName,
style: 'css',
projectNameAndRootFormat: 'as-provided',
});
});

describe('page router', () => {
it('should generate component in pages directory', async () => {
await pageGenerator(tree, {
name: 'hello',
project: projectName,
style: 'css',
});

expect(tree.exists('my-app/pages/hello/index.tsx')).toBeTruthy();
expect(tree.exists('my-app/pages/hello/index.module.css')).toBeTruthy();
it('should generate component in app directory', async () => {
await pageGenerator(tree, {
name: 'about',
directory: `${appName}/app/about`,
style: 'css',
nameAndDirectoryFormat: 'as-provided',
});

it('should support dynamic routes and directories', async () => {
await pageGenerator(tree, {
name: '[dynamic]',
directory: 'posts',
project: projectName,
style: 'css',
});

expect(
tree.exists('my-app/pages/posts/[dynamic]/index.tsx')
).toBeTruthy();
expect(
tree.exists('my-app/pages/posts/[dynamic]/index.module.css')
).toBeTruthy();

const content = tree
.read('my-app/pages/posts/[dynamic]/index.tsx')
.toString();
expect(content).toMatch(/DynamicProps/);
});
expect(tree.exists(`${appName}/app/about/page.tsx`)).toBeTruthy();
expect(tree.exists(`${appName}/app/about/page.module.css`)).toBeTruthy();
});

describe('app router', () => {
it('should generate component in app directory', async () => {
await pageGenerator(tree, {
name: 'about',
directory: `${appRouterProjectName}/app/about`,
style: 'css',
nameAndDirectoryFormat: 'as-provided',
});

expect(
tree.exists(`${appRouterProjectName}/app/about/page.tsx`)
).toBeTruthy();
expect(
tree.exists(`${appRouterProjectName}/app/about/page.module.css`)
).toBeTruthy();
it('should support dynamic routes and directories', async () => {
await pageGenerator(tree, {
name: '[dynamic]',
directory: `${appName}/app/posts/[dynamic]`,
style: 'css',
nameAndDirectoryFormat: 'as-provided',
});

it('should support dynamic routes and directories', async () => {
await pageGenerator(tree, {
name: '[dynamic]',
project: appRouterProjectName,
directory: 'posts',
style: 'css',
});

expect(
tree.exists(`${appRouterProjectName}/app/posts/[dynamic]/page.tsx`)
).toBeTruthy();
expect(
tree.exists(
`${appRouterProjectName}/app/posts/[dynamic]/page.module.css`
)
).toBeTruthy();
expect(tree.exists(`${appName}/app/posts/[dynamic]/page.tsx`)).toBeTruthy();
expect(
tree.exists(`${appName}/app/posts/[dynamic]/page.module.css`)
).toBeTruthy();

const content = tree
.read(`${appRouterProjectName}/app/posts/[dynamic]/page.tsx`)
.toString();
expect(content).toMatch(/DynamicProps/);
});
const content = tree
.read(`${appName}/app/posts/[dynamic]/page.tsx`)
.toString();
expect(content).toMatch(/DynamicProps/);
});
});
47 changes: 15 additions & 32 deletions packages/next/src/generators/page/page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,42 +52,25 @@ export async function pageGeneratorInternal(host: Tree, schema: Schema) {
async function normalizeOptions(host: Tree, options: Schema) {
let isAppRouter: boolean;
let derivedDirectory: string;
let routerDirectory: string;

if (options.project) {
// Legacy behavior, detect app vs page router from specified project.
// TODO(v19): 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`) ||
host.exists(`${project.root}/src/app`);
// Get the project name first so we can determine the router directory
const { project: determinedProjectName } =
await determineArtifactNameAndDirectoryOptions(host, {
artifactType: 'page',
callingGenerator: '@nx/next:page',
name: options.name,
directory: options.directory,
});

routerDirectory = isAppRouter ? 'app' : 'pages';
derivedDirectory = options.directory
? `${routerDirectory}/${options.directory}`
: `${routerDirectory}`;
} else {
// Get the project name first so we can determine the router directory
const { project: determinedProjectName } =
await determineArtifactNameAndDirectoryOptions(host, {
artifactType: 'page',
callingGenerator: '@nx/next:page',
name: options.name,
directory: options.directory,
});
const project = readProjectConfiguration(host, determinedProjectName);

const project = readProjectConfiguration(host, determinedProjectName);
// app/ is a reserved folder in nextjs so it is safe to check it's existence
isAppRouter =
host.exists(`${project.root}/app`) ||
host.exists(`${project.root}/src/app`);

// app/ is a reserved folder in nextjs so it is safe to check it's existence
isAppRouter =
host.exists(`${project.root}/app`) ||
host.exists(`${project.root}/src/app`);

routerDirectory = isAppRouter ? 'app' : 'pages';
// New behavior, use directory as is without detecting whether we're using app or pages router.
derivedDirectory = options.directory;
}
// New behavior, use directory as is without detecting whether we're using app or pages router.
derivedDirectory = options.directory;

const {
artifactName: name,
Expand Down

0 comments on commit c43397e

Please sign in to comment.