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

Updates next/image eslint message to denote that costs may be incurred. #46640

Merged
merged 8 commits into from
Mar 1, 2023
Merged

Updates next/image eslint message to denote that costs may be incurred. #46640

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
43a7fc3
Updates `next/image` eslint message to denote that costs may be incur…
manovotny Mar 1, 2023
bc5cb0a
Removes rogue backtick.
manovotny Mar 1, 2023
430044e
Merge branch 'canary' into update-next-image-eslint-message
steven-tey Mar 1, 2023
1edba22
Updates message.
manovotny Mar 1, 2023
fdaaf5d
Adds better pricing notes to message page.
manovotny Mar 1, 2023
1c11163
Updates message.
manovotny Mar 1, 2023
5783b88
Fix typo in imgix link
styfle Mar 1, 2023
199a87e
Merge branch 'canary' into update-next-image-eslint-message
manovotny Mar 1, 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
2 changes: 1 addition & 1 deletion packages/eslint-plugin-next/src/rules/no-img-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export = defineRule({

context.report({
node,
message: `Using \`<img>\` could result in slower LCP and higher bandwidth. Use \`<Image />\` from \`next/image\` instead to utilize Image Optimization. See: ${url}`,
message: `Using \`<img>\` could result in slower LCP and higher bandwidth due to image sizes. Consider using \`<Image />\` from \`next/image\` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: ${url}`,
manovotny marked this conversation as resolved.
Show resolved Hide resolved
})
},
}
Expand Down
20 changes: 10 additions & 10 deletions test/integration/eslint/test/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ describe('ESLint', () => {
'Error: `next/head` should not be imported in `pages/_document.js`. Use `<Head />` from `next/document` instead'
)
expect(output).toContain(
'Warning: Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization.'
'Warning: Using `<img>` could result in slower LCP and higher bandwidth due to image sizes. Consider using `<Image />` from `next/image` to automatically optimize images.'
)
expect(output).toContain('Warning: Do not include stylesheets manually')
expect(output).toContain(
Expand Down Expand Up @@ -143,7 +143,7 @@ describe('ESLint', () => {
'Error: `next/head` should not be imported in `pages/_document.js`. Use `<Head />` from `next/document` instead'
)
expect(output).toContain(
'Warning: Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization.'
'Warning: Using `<img>` could result in slower LCP and higher bandwidth due to image sizes. Consider using `<Image />` from `next/image` to automatically optimize images.'
)
expect(output).toContain('Warning: Do not include stylesheets manually')
expect(output).toContain(
Expand Down Expand Up @@ -417,7 +417,7 @@ describe('ESLint', () => {
'Error: `next/head` should not be imported in `pages/_document.js`. Use `<Head />` from `next/document` instead'
)
expect(output).toContain(
'Warning: Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization.'
'Warning: Using `<img>` could result in slower LCP and higher bandwidth due to image sizes. Consider using `<Image />` from `next/image` to automatically optimize images.'
)
expect(output).toContain('Warning: Do not include stylesheets manually')
expect(output).toContain(
Expand Down Expand Up @@ -453,7 +453,7 @@ describe('ESLint', () => {
'Error: `next/head` should not be imported in `pages/_document.js`. Use `<Head />` from `next/document` instead'
)
expect(output).toContain(
'Warning: Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization.'
'Warning: Using `<img>` could result in slower LCP and higher bandwidth due to image sizes. Consider using `<Image />` from `next/image` to automatically optimize images.'
)
expect(output).toContain('Warning: Do not include stylesheets manually')
expect(output).toContain(
Expand All @@ -479,7 +479,7 @@ describe('ESLint', () => {

const output = stdout + stderr
expect(output).toContain(
'Warning: Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization.'
'Warning: Using `<img>` could result in slower LCP and higher bandwidth due to image sizes. Consider using `<Image />` from `next/image` to automatically optimize images.'
)
expect(output).toContain('Error: Synchronous scripts should not be used.')
})
Expand Down Expand Up @@ -515,7 +515,7 @@ describe('ESLint', () => {

const output = stdout + stderr
expect(output).toContain(
'Warning: Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization.'
'Warning: Using `<img>` could result in slower LCP and higher bandwidth due to image sizes. Consider using `<Image />` from `next/image` to automatically optimize images.'
)
expect(output).toContain('Error: Synchronous scripts should not be used.')
})
Expand Down Expand Up @@ -788,7 +788,7 @@ describe('ESLint', () => {

expect(output).toContain('pages/bar.js')
expect(output).toContain(
'Warning: Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization.'
'Warning: Using `<img>` could result in slower LCP and higher bandwidth due to image sizes. Consider using `<Image />` from `next/image` to automatically optimize images.'
)

expect(output).not.toContain('pages/index.js')
Expand Down Expand Up @@ -833,7 +833,7 @@ describe('ESLint', () => {
}),
expect.objectContaining({
message:
'Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-element',
'Using `<img>` could result in slower LCP and higher bandwidth due to image sizes. Consider using `<Image />` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element',
}),
])
)
Expand Down Expand Up @@ -872,7 +872,7 @@ describe('ESLint', () => {
'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.'
)
expect(fileOutput).toContain(
'Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-element'
'Using `<img>` could result in slower LCP and higher bandwidth due to image sizes. Consider using `<Image />` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element'
)

expect(fileOutput).toContain('file-linting/pages/index.js')
Expand Down Expand Up @@ -912,7 +912,7 @@ describe('ESLint', () => {
'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.'
)
expect(output).toContain(
'Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-element'
'Using `<img>` could result in slower LCP and higher bandwidth due to image sizes. Consider using `<Image />` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element'
)

expect(output).toContain('pages/index.cjs')
Expand Down
8 changes: 3 additions & 5 deletions test/unit/eslint-plugin-next/no-img-element.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,7 @@ ruleTester.run('no-img-element', rule, {
errors: [
{
message:
'Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization. ' +
'See: https://nextjs.org/docs/messages/no-img-element',
'Using `<img>` could result in slower LCP and higher bandwidth due to image sizes. Consider using `<Image />` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element',
type: 'JSXOpeningElement',
},
],
Expand All @@ -92,7 +91,7 @@ ruleTester.run('no-img-element', rule, {
export class MyComponent {
render() {
return (
<img
<img
src="/test.png"
alt="Test picture"
width={500}
Expand All @@ -104,8 +103,7 @@ ruleTester.run('no-img-element', rule, {
errors: [
{
message:
'Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization. ' +
'See: https://nextjs.org/docs/messages/no-img-element',
'Using `<img>` could result in slower LCP and higher bandwidth due to image sizes. Consider using `<Image />` from `next/image` to automatically optimize images. Note: when self-hosting, Image Optimization runs on your Next.js server. If using an external loader, additional usage or cost could be incurred, depending on your provider. See: https://nextjs.org/docs/messages/no-img-element',
type: 'JSXOpeningElement',
},
],
Expand Down