Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Also create head when creating root layout #42571

Merged
merged 7 commits into from Nov 8, 2022
Merged

Also create head when creating root layout #42571

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f42a91d
Create head file when creating root layout, also cover more cases
Nov 7, 2022
a2fba47
fix tests
Nov 7, 2022
601792e
Fix
Nov 7, 2022
702d500
Fix test
Nov 7, 2022
2b738c4
Add empty <head /> when creating root layout
Nov 8, 2022
451cc15
Merge branch 'canary' into create-root-layout-head
Nov 8, 2022
d1966a9
Merge branch 'canary' into create-root-layout-head
kodiakhq[bot] Nov 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
76 changes: 63 additions & 13 deletions packages/next/lib/verifyRootLayout.ts
View file
Open in desktop
Expand Up @@ -26,7 +26,6 @@ function getRootLayout(isTs: boolean) {
}) {
return (
<html>
<head></head>
<body>{children}</body>
hanneslund marked this conversation as resolved.
Show resolved Hide resolved
</html>
)
Expand All @@ -37,14 +36,26 @@ function getRootLayout(isTs: boolean) {
return `export default function RootLayout({ children }) {
return (
<html>
<head></head>
<body>{children}</body>
</html>
)
}
`
}

function getHead() {
return `export default function Head() {
return (
<>
<title></title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="icon" href="/favicon.ico" />
</>
)
}
`
}

export async function verifyRootLayout({
dir,
appDir,
Expand All @@ -63,15 +74,38 @@ export async function verifyRootLayout({
appDir,
`**/layout.{${pageExtensions.join(',')}}`
)
const hasLayout = layoutFiles.length !== 0

const normalizedPagePath = pagePath.replace(`${APP_DIR_ALIAS}/`, '')
const firstSegmentValue = normalizedPagePath.split('/')[0]
const pageRouteGroup = firstSegmentValue.startsWith('(')
? firstSegmentValue
: undefined
const pagePathSegments = normalizedPagePath.split('/')

// Find an available dir to place the layout file in, the layout file can't affect any other layout.
// Place the layout as close to app/ as possible.
let availableDir: string | undefined

if (layoutFiles.length === 0) {
// If there's no other layout file we can place the layout file in the app dir.
// However, if the page is within a route group directly under app (e.g. app/(routegroup)/page.js)
// prefer creating the root layout in that route group.
const firstSegmentValue = pagePathSegments[0]
availableDir = firstSegmentValue.startsWith('(') ? firstSegmentValue : ''
} else {
pagePathSegments.pop() // remove the page from segments

let currentSegments: string[] = []
for (const segment of pagePathSegments) {
currentSegments.push(segment)
// Find the dir closest to app/ where a layout can be created without affecting other layouts.
if (
!layoutFiles.some((file) =>
file.startsWith(currentSegments.join('/'))
)
) {
availableDir = currentSegments.join('/')
break
}
}
}

if (pageRouteGroup || !hasLayout) {
if (typeof availableDir === 'string') {
const resolvedTsConfigPath = path.join(dir, tsconfigPath)
const hasTsConfig = await fs.access(resolvedTsConfigPath).then(
() => true,
Expand All @@ -80,19 +114,35 @@ export async function verifyRootLayout({

const rootLayoutPath = path.join(
appDir,
// If the page is within a route group directly under app (e.g. app/(routegroup)/page.js)
// prefer creating the root layout in that route group. Otherwise create the root layout in the app root.
pageRouteGroup ? pageRouteGroup : '',
availableDir,
`layout.${hasTsConfig ? 'tsx' : 'js'}`
)
await fs.writeFile(rootLayoutPath, getRootLayout(hasTsConfig))
const headPath = path.join(
appDir,
availableDir,
`head.${hasTsConfig ? 'tsx' : 'js'}`
)
const hasHead = await fs.access(headPath).then(
() => true,
() => false
)

if (!hasHead) {
await fs.writeFile(headPath, getHead())
}

console.log(
chalk.green(
`\nYour page ${chalk.bold(
`app/${normalizedPagePath}`
)} did not have a root layout, we created ${chalk.bold(
`app${rootLayoutPath.replace(appDir, '')}`
)} for you.`
)}${
!hasHead
? ` and ${chalk.bold(`app${headPath.replace(appDir, '')}`)}`
: ''
} for you.`
) + '\n'
)

Expand Down
202 changes: 156 additions & 46 deletions test/e2e/app-dir/create-root-layout.test.ts
View file
Open in desktop
Expand Up @@ -2,6 +2,7 @@ import path from 'path'
import { createNext, FileRef } from 'e2e-utils'
import { NextInstance } from 'test/lib/next-modes/base'
import webdriver from 'next-webdriver'
import { check } from 'next-test-utils'

describe('app-dir create root layout', () => {
const isDev = (global as any).isNextDev
Expand All @@ -23,9 +24,7 @@ describe('app-dir create root layout', () => {
beforeAll(async () => {
next = await createNext({
files: {
'app/page.js': new FileRef(
path.join(__dirname, 'create-root-layout/app/page.js')
),
app: new FileRef(path.join(__dirname, 'create-root-layout/app')),
'next.config.js': new FileRef(
path.join(__dirname, 'create-root-layout/next.config.js')
),
Expand All @@ -40,27 +39,43 @@ describe('app-dir create root layout', () => {

it('create root layout', async () => {
const outputIndex = next.cliOutput.length
const browser = await webdriver(next.url, '/')
const browser = await webdriver(next.url, '/route')

expect(await browser.elementById('page-text').text()).toBe(
'Hello world!'
)

expect(next.cliOutput.slice(outputIndex)).toInclude(
'Your page app/page.js did not have a root layout, we created app/layout.js for you.'
await check(
() => next.cliOutput.slice(outputIndex),
/did not have a root layout/
)
expect(next.cliOutput.slice(outputIndex)).toMatch(
'Your page app/route/page.js did not have a root layout, we created app/layout.js and app/head.js for you.'
)

expect(await next.readFile('app/layout.js')).toMatchInlineSnapshot(`
"export default function RootLayout({ children }) {
return (
<html>
<head></head>
<body>{children}</body>
</html>
)
}
"
`)
"export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
)
}
"
`)

expect(await next.readFile('app/head.js')).toMatchInlineSnapshot(`
"export default function Head() {
return (
<>
<title></title>
<meta content=\\"width=device-width, initial-scale=1\\" name=\\"viewport\\" />
<link rel=\\"icon\\" href=\\"/favicon.ico\\" />
</>
)
}
"
`)
})
})

Expand All @@ -85,28 +100,107 @@ describe('app-dir create root layout', () => {

it('create root layout', async () => {
const outputIndex = next.cliOutput.length
const browser = await webdriver(next.url, '/path2')
const browser = await webdriver(next.url, '/')

expect(await browser.elementById('page-text').text()).toBe(
'Hello world 2'
'Hello world'
)

await check(
() => next.cliOutput.slice(outputIndex),
/did not have a root layout/
)
expect(next.cliOutput.slice(outputIndex)).toInclude(
'Your page app/(group2)/path2/page.js did not have a root layout, we created app/(group2)/layout.js for you.'
'Your page app/(group)/page.js did not have a root layout, we created app/(group)/layout.js and app/(group)/head.js for you.'
)

expect(await next.readFile('app/(group2)/layout.js'))
expect(await next.readFile('app/(group)/layout.js'))
.toMatchInlineSnapshot(`
"export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
)
}
"
`)

expect(await next.readFile('app/(group)/layout.js'))
.toMatchInlineSnapshot(`
"export default function RootLayout({ children }) {
return (
<html>
<head></head>
<body>{children}</body>
</html>
"export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
)
}
"
`)
})
})

describe('find available dir', () => {
beforeAll(async () => {
next = await createNext({
files: {
app: new FileRef(
path.join(
__dirname,
'create-root-layout/app-find-available-dir'
)
),
'next.config.js': new FileRef(
path.join(__dirname, 'create-root-layout/next.config.js')
),
},
dependencies: {
react: 'experimental',
'react-dom': 'experimental',
},
})
})
afterAll(() => next.destroy())

it('create root layout', async () => {
const outputIndex = next.cliOutput.length
const browser = await webdriver(next.url, '/route/second/inner')

expect(await browser.elementById('page-text').text()).toBe(
'Hello world'
)
}
"
`)

await check(
() => next.cliOutput.slice(outputIndex),
/did not have a root layout/
)
expect(next.cliOutput.slice(outputIndex)).toInclude(
'Your page app/(group)/route/second/inner/page.js did not have a root layout, we created app/(group)/route/second/layout.js and app/(group)/route/second/head.js for you.'
)

expect(await next.readFile('app/(group)/route/second/layout.js'))
.toMatchInlineSnapshot(`
"export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
)
}
"
`)

expect(await next.readFile('app/(group)/route/second/layout.js'))
.toMatchInlineSnapshot(`
"export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
)
}
"
`)
})
})
})
Expand All @@ -116,7 +210,7 @@ describe('app-dir create root layout', () => {
next = await createNext({
files: {
'app/page.tsx': new FileRef(
path.join(__dirname, 'create-root-layout/app/page.js')
path.join(__dirname, 'create-root-layout/app/route/page.js')
),
'next.config.js': new FileRef(
path.join(__dirname, 'create-root-layout/next.config.js')
Expand All @@ -141,25 +235,41 @@ describe('app-dir create root layout', () => {
'Hello world!'
)

await check(
() => next.cliOutput.slice(outputIndex),
/did not have a root layout/
)
expect(next.cliOutput.slice(outputIndex)).toInclude(
'Your page app/page.tsx did not have a root layout, we created app/layout.tsx for you.'
'Your page app/page.tsx did not have a root layout, we created app/layout.tsx and app/head.tsx for you.'
)

expect(await next.readFile('app/layout.tsx')).toMatchInlineSnapshot(`
"export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<head></head>
<body>{children}</body>
</html>
)
}
"
`)
"export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>{children}</body>
</html>
)
}
"
`)

expect(await next.readFile('app/head.tsx')).toMatchInlineSnapshot(`
"export default function Head() {
return (
<>
<title></title>
<meta content=\\"width=device-width, initial-scale=1\\" name=\\"viewport\\" />
<link rel=\\"icon\\" href=\\"/favicon.ico\\" />
</>
)
}
"
`)
})
})
} else {
Expand All @@ -169,7 +279,7 @@ describe('app-dir create root layout', () => {
skipStart: true,
files: {
'app/page.js': new FileRef(
path.join(__dirname, 'create-root-layout/app/page.js')
path.join(__dirname, 'create-root-layout/app/route/page.js')
),
'next.config.js': new FileRef(
path.join(__dirname, 'create-root-layout/next.config.js')
Expand Down