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

fix(eslint): next/script beforeInteractive gives warning on appDir #51148

Merged
merged 13 commits into from
Nov 12, 2023
Merged

fix(eslint): next/script beforeInteractive gives warning on appDir #51148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b1ebcca
fix: eslint beforeinteractive not ignore appDir
devjiwonchoi Jun 12, 2023
551bed3
Merge branch 'canary' into feat/fix-appdir-eslint-beforeinteractive
devjiwonchoi Jun 12, 2023
33a43f8
chore: modify test
devjiwonchoi Jun 14, 2023
141d4aa
Merge branch 'canary' into feat/fix-appdir-eslint-beforeinteractive
shuding Jun 28, 2023
d481a7d
improve getting root dir path
devjiwonchoi Jul 5, 2023
b90d397
refactor managing pathname
devjiwonchoi Jul 5, 2023
9dad1e3
refactor: simplified checking file in app dir
devjiwonchoi Jul 5, 2023
f43ee38
test: add test to validate separators and src/
devjiwonchoi Jul 5, 2023
e24e71e
test: remove unnecessary test cases
devjiwonchoi Jul 5, 2023
f43d2b7
chore: add type to `str` param
devjiwonchoi Jul 6, 2023
7db3c43
fix: add path.sep in front of `app/`
devjiwonchoi Jul 6, 2023
d0a7b9d
Merge branch 'canary' into feat/fix-appdir-eslint-beforeinteractive
devjiwonchoi Nov 4, 2023
22a9e20
Merge branch 'canary' into feat/fix-appdir-eslint-beforeinteractive
timneutkens Nov 12, 2023
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
21 changes: 6 additions & 15 deletions packages/eslint-plugin-next/src/rules/no-before-interactive-script-outside-document.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,8 @@ import * as path from 'path'
const url =
'https://nextjs.org/docs/messages/no-before-interactive-script-outside-document'

const startsWithUsingCorrectSeparators = (str: string, start: string) =>
[path.sep, path.posix.sep].some((sep) =>
str.startsWith(start.replace(/\//g, sep))
)
const convertToCorrectSeparator = (str: string) =>
str.replace(/[\\/]/g, path.sep)

export = defineRule({
meta: {
Expand All @@ -25,24 +23,17 @@ export = defineRule({

return {
'ImportDeclaration[source.value="next/script"] > ImportDefaultSpecifier'(
node
node: any
) {
scriptImportName = node.local.name
},
JSXOpeningElement(node) {
let pathname = context.getFilename()
const pathname = convertToCorrectSeparator(context.getFilename())

if (startsWithUsingCorrectSeparators(pathname, 'src/')) {
pathname = pathname.slice(4)
} else if (startsWithUsingCorrectSeparators(pathname, '/src/')) {
pathname = pathname.slice(5)
}
const isInAppDir = pathname.includes(`${path.sep}app${path.sep}`)

// This rule shouldn't fire in `app/`
if (
startsWithUsingCorrectSeparators(pathname, 'app/') ||
startsWithUsingCorrectSeparators(pathname, '/app/')
) {
if (isInAppDir) {
return
}

Expand Down
147 changes: 108 additions & 39 deletions test/unit/eslint-plugin-next/no-before-interactive-script-outside-document.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,32 +109,80 @@ ruleTester.run('no-before-interactive-script-outside-document', rule, {

export default function Index() {
return (
<Script
id="scriptBeforeInteractive"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteractive"
strategy="beforeInteractive"
></Script>
<html lang="en">
<body className={inter.className}>{children}</body>
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteractive"
strategy='beforeInteractive'
/>
</html>
);
}`,
filename: '/Users/user_name/projects/project-name/app/layout.tsx',
},
{
code: `
import Script from "next/script";

export default function test() {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteractive"
strategy='beforeInteractive'
/>
</html>
);
}`,
filename: 'app/deep/root/layout.tsx',
filename: 'C:\\Users\\username\\projects\\project-name\\app\\layout.tsx',
},
{
code: `
import Script from "next/script";

export default function Index() {
return (
<Script
id="scriptBeforeInteractive"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteractive"
strategy="beforeInteractive"
></Script>
<html lang="en">
<body className={inter.className}>{children}</body>
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteractive"
strategy='beforeInteractive'
/>
</html>
);
}`,
filename: '/Users/user_name/projects/project-name/src/app/layout.tsx',
},
{
code: `
import Script from "next/script";

export default function test() {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteractive"
strategy='beforeInteractive'
/>
</html>
);
}`,
filename: 'app/deep/page.tsx',
filename:
'C:\\Users\\username\\projects\\project-name\\src\\app\\layout.tsx',
},
].map((obj, idx) => ({
...obj,
code: `// valid-${idx}
${obj.code}
`,
})),

invalid: [
{
code: `
import Head from "next/head";
import Script from "next/script";

export default function Index() {
Expand All @@ -146,10 +194,17 @@ ruleTester.run('no-before-interactive-script-outside-document', rule, {
></Script>
);
}`,
filename: 'app/deep/randomFile.tsx',
filename: 'pages/index.js',
errors: [
{
message:
"`next/script`'s `beforeInteractive` strategy should not be used outside of `pages/_document.js`. See: https://nextjs.org/docs/messages/no-before-interactive-script-outside-document",
},
],
},
{
code: `
import Head from "next/head";
import Script from "next/script";

export default function Index() {
Expand All @@ -161,7 +216,13 @@ ruleTester.run('no-before-interactive-script-outside-document', rule, {
></Script>
);
}`,
filename: 'src/app/deep/randomFile.tsx',
filename: 'components/outside-known-dirs.js',
errors: [
{
message:
"`next/script`'s `beforeInteractive` strategy should not be used outside of `pages/_document.js`. See: https://nextjs.org/docs/messages/no-before-interactive-script-outside-document",
},
],
},
{
code: `
Expand All @@ -178,7 +239,13 @@ ruleTester.run('no-before-interactive-script-outside-document', rule, {
</html>
);
}`,
filename: '/src/app/layout.tsx',
filename: '/Users/user_name/projects/project-name/pages/layout.tsx',
errors: [
{
message:
"`next/script`'s `beforeInteractive` strategy should not be used outside of `pages/_document.js`. See: https://nextjs.org/docs/messages/no-before-interactive-script-outside-document",
},
],
},
{
code: `
Expand All @@ -195,31 +262,31 @@ ruleTester.run('no-before-interactive-script-outside-document', rule, {
</html>
);
}`,
filename: '/app/layout.tsx',
filename:
'C:\\Users\\username\\projects\\project-name\\pages\\layout.tsx',
errors: [
{
message:
"`next/script`'s `beforeInteractive` strategy should not be used outside of `pages/_document.js`. See: https://nextjs.org/docs/messages/no-before-interactive-script-outside-document",
},
],
},
].map((obj, idx) => ({
...obj,
code: `// valid-${idx}
${obj.code}
`,
})),

invalid: [
{
code: `
import Head from "next/head";
import Script from "next/script";

export default function Index() {
return (
<Script
id="scriptBeforeInteractive"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteractive"
strategy="beforeInteractive"
></Script>
<html lang="en">
<body className={inter.className}>{children}</body>
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteractive"
strategy='beforeInteractive'
/>
</html>
);
}`,
filename: 'pages/index.js',
filename: '/Users/user_name/projects/project-name/src/pages/layout.tsx',
errors: [
{
message:
Expand All @@ -229,19 +296,21 @@ ruleTester.run('no-before-interactive-script-outside-document', rule, {
},
{
code: `
import Head from "next/head";
import Script from "next/script";

export default function Index() {
export default function test() {
return (
<Script
id="scriptBeforeInteractive"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteractive"
strategy="beforeInteractive"
></Script>
<html lang="en">
<body className={inter.className}>{children}</body>
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteractive"
strategy='beforeInteractive'
/>
</html>
);
}`,
filename: 'components/outside-known-dirs.js',
filename:
'C:\\Users\\username\\projects\\project-name\\src\\pages\\layout.tsx',
errors: [
{
message:
Expand Down