chore: add build step to eslint-plugin-next (#38647)

Follow-up on #38534 (review) This lets us use modern JS/TS syntax in ESLint rules and avoid issues like #38530 and #36693 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
vercel · Sep 30, 2022 · 73b4739 · 73b4739
1 parent 05c2fe0
commit 73b4739
Show file tree

Hide file tree

Showing 50 changed files with 81 additions and 70 deletions.
diff --git a/packages/eslint-plugin-next/.swcrc b/packages/eslint-plugin-next/.swcrc
@@ -0,0 +1,11 @@
+{
+    "$schema": "https://json.schemastore.org/swcrc",
+    "jsc": {
+        "parser": {
+            "syntax": "typescript"
+        }
+    },
+    "module": {
+        "type": "commonjs"
+    }
+}
diff --git a/packages/eslint-plugin-next/lib/rules/no-img-element.js b/packages/eslint-plugin-next/lib/rules/no-img-element.js
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
@@ -2,19 +2,23 @@
   "name": "@next/eslint-plugin-next",
   "version": "12.3.2-canary.15",
   "description": "ESLint plugin for NextJS.",
-  "main": "lib/index.js",
+  "main": "dist/index.js",
   "license": "MIT",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/eslint-plugin-next"
   },
   "files": [
-    "lib"
+    "dist"
   ],
   "dependencies": {
     "glob": "7.1.7"
   },
   "devDependencies": {
-    "@types/eslint": "7.28.0"
+    "eslint": "7.24.0"
+  },
+  "scripts": {
+    "build": "swc -d dist src",
+    "prepublishOnly": "cd ../../ && turbo run build"
   }
 }
diff --git a/packages/eslint-plugin-next/lib/index.js → packages/eslint-plugin-next/src/index.ts b/packages/eslint-plugin-next/lib/index.js → packages/eslint-plugin-next/src/index.ts
diff --git a/...gin-next/lib/rules/google-font-display.js → ...gin-next/src/rules/google-font-display.js b/...gin-next/lib/rules/google-font-display.js → ...gin-next/src/rules/google-font-display.js
diff --git a/...-next/lib/rules/google-font-preconnect.js → ...-next/src/rules/google-font-preconnect.js b/...-next/lib/rules/google-font-preconnect.js → ...-next/src/rules/google-font-preconnect.js
diff --git a/...plugin-next/lib/rules/inline-script-id.js → ...plugin-next/src/rules/inline-script-id.js b/...plugin-next/lib/rules/inline-script-id.js → ...plugin-next/src/rules/inline-script-id.js
diff --git a/...ugin-next/lib/rules/next-script-for-ga.js → ...ugin-next/src/rules/next-script-for-ga.js b/...ugin-next/lib/rules/next-script-for-ga.js → ...ugin-next/src/rules/next-script-for-ga.js
diff --git a/...xt/lib/rules/no-assign-module-variable.js → ...xt/src/rules/no-assign-module-variable.js b/...xt/lib/rules/no-assign-module-variable.js → ...xt/src/rules/no-assign-module-variable.js
diff --git a/...re-interactive-script-outside-document.js → ...re-interactive-script-outside-document.js b/...re-interactive-script-outside-document.js → ...re-interactive-script-outside-document.js
diff --git a/...lint-plugin-next/lib/rules/no-css-tags.js → ...lint-plugin-next/src/rules/no-css-tags.js b/...lint-plugin-next/lib/rules/no-css-tags.js → ...lint-plugin-next/src/rules/no-css-tags.js
diff --git a/...t/lib/rules/no-document-import-in-page.js → ...t/src/rules/no-document-import-in-page.js b/...t/lib/rules/no-document-import-in-page.js → ...t/src/rules/no-document-import-in-page.js
diff --git a/...lugin-next/lib/rules/no-duplicate-head.js → ...lugin-next/src/rules/no-duplicate-head.js b/...lugin-next/lib/rules/no-duplicate-head.js → ...lugin-next/src/rules/no-duplicate-head.js
diff --git a/...-plugin-next/lib/rules/no-head-element.js → ...-plugin-next/src/rules/no-head-element.js b/...-plugin-next/lib/rules/no-head-element.js → ...-plugin-next/src/rules/no-head-element.js
diff --git a/...t/lib/rules/no-head-import-in-document.js → ...t/src/rules/no-head-import-in-document.js b/...t/lib/rules/no-head-import-in-document.js → ...t/src/rules/no-head-import-in-document.js
diff --git a/...-next/lib/rules/no-html-link-for-pages.js → ...-next/src/rules/no-html-link-for-pages.js b/...-next/lib/rules/no-html-link-for-pages.js → ...-next/src/rules/no-html-link-for-pages.js
diff --git a/packages/eslint-plugin-next/src/rules/no-img-element.ts b/packages/eslint-plugin-next/src/rules/no-img-element.ts
@@ -0,0 +1,37 @@
+import type { Rule } from 'eslint'
+
+const url = 'https://nextjs.org/docs/messages/no-img-element'
+
+export const meta: Rule.RuleMetaData = {
+  docs: {
+    description: 'Prevent usage of `<img>` element to prevent layout shift.',
+    category: 'HTML',
+    recommended: true,
+    url,
+  },
+  type: 'problem',
+  schema: [],
+}
+
+export const create: Rule.RuleModule['create'] = (context) => {
+  return {
+    JSXOpeningElement(node) {
+      if (node.name.name !== 'img') {
+        return
+      }
+
+      if (node.attributes.length === 0) {
+        return
+      }
+
+      if (node.parent?.parent?.openingElement?.name?.name === 'picture') {
+        return
+      }
+
+      context.report({
+        node,
+        message: `Do not use \`<img>\` element. Use \`<Image />\` from \`next/image\` instead. See: ${url}`,
+      })
+    },
+  }
+}
diff --git a/...gin-next/lib/rules/no-page-custom-font.js → ...gin-next/src/rules/no-page-custom-font.js b/...gin-next/lib/rules/no-page-custom-font.js → ...gin-next/src/rules/no-page-custom-font.js
diff --git a/.../lib/rules/no-script-component-in-head.js → .../src/rules/no-script-component-in-head.js b/.../lib/rules/no-script-component-in-head.js → .../src/rules/no-script-component-in-head.js
diff --git a/...xt/lib/rules/no-styled-jsx-in-document.js → ...xt/src/rules/no-styled-jsx-in-document.js b/...xt/lib/rules/no-styled-jsx-in-document.js → ...xt/src/rules/no-styled-jsx-in-document.js
diff --git a/...-plugin-next/lib/rules/no-sync-scripts.js → ...-plugin-next/src/rules/no-sync-scripts.js b/...-plugin-next/lib/rules/no-sync-scripts.js → ...-plugin-next/src/rules/no-sync-scripts.js
diff --git a/...xt/lib/rules/no-title-in-document-head.js → ...xt/src/rules/no-title-in-document-head.js b/...xt/lib/rules/no-title-in-document-head.js → ...xt/src/rules/no-title-in-document-head.js
diff --git a/.../eslint-plugin-next/lib/rules/no-typos.js → .../eslint-plugin-next/src/rules/no-typos.js b/.../eslint-plugin-next/lib/rules/no-typos.js → .../eslint-plugin-next/src/rules/no-typos.js
diff --git a/...-next/lib/rules/no-unwanted-polyfillio.js → ...-next/src/rules/no-unwanted-polyfillio.js b/...-next/lib/rules/no-unwanted-polyfillio.js → ...-next/src/rules/no-unwanted-polyfillio.js
diff --git a/...nt-plugin-next/lib/utils/get-root-dirs.js → ...nt-plugin-next/src/utils/get-root-dirs.js b/...nt-plugin-next/lib/utils/get-root-dirs.js → ...nt-plugin-next/src/utils/get-root-dirs.js
diff --git a/...-plugin-next/lib/utils/node-attributes.js → ...-plugin-next/src/utils/node-attributes.js b/...-plugin-next/lib/utils/node-attributes.js → ...-plugin-next/src/utils/node-attributes.js
diff --git a/packages/eslint-plugin-next/lib/utils/url.js → packages/eslint-plugin-next/src/utils/url.js b/packages/eslint-plugin-next/lib/utils/url.js → packages/eslint-plugin-next/src/utils/url.js
diff --git a/packages/eslint-plugin-next/jsconfig.json → packages/eslint-plugin-next/tsconfig.json b/packages/eslint-plugin-next/jsconfig.json → packages/eslint-plugin-next/tsconfig.json
@@ -3,5 +3,6 @@
     "module": "commonjs",
     "target": "es2019"
   },
+  "include": ["src/**/*"],
   "exclude": ["node_modules"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/unit/eslint-plugin-next/google-font-display.test.ts b/test/unit/eslint-plugin-next/google-font-display.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/google-font-display'
+import rule from '@next/eslint-plugin-next/dist/rules/google-font-display'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/google-font-preconnect.test.ts b/test/unit/eslint-plugin-next/google-font-preconnect.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/google-font-preconnect'
+import rule from '@next/eslint-plugin-next/dist/rules/google-font-preconnect'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/index.test.ts b/test/unit/eslint-plugin-next/index.test.ts
@@ -3,7 +3,7 @@ import glob from 'glob'
 import index from '@next/eslint-plugin-next'
 
 const getRuleNameFromRulePath = (path) => basename(path, '.js')
-const rulePaths = glob.sync('packages/eslint-plugin-next/lib/rules/*js', {
+const rulePaths = glob.sync('packages/eslint-plugin-next/dist/rules/*js', {
   absolute: true,
 })
 
@@ -15,7 +15,8 @@ describe('@next/eslint-plugin-next index', () => {
   })
 
   rulePaths.forEach((rulePath) => {
-    const rule = require(rulePath)
+    let rule = require(rulePath)
+    rule = rule.default ?? rule
     const ruleName = getRuleNameFromRulePath(rulePath)
     const { recommended = false } = rule.meta.docs
 

diff --git a/test/unit/eslint-plugin-next/inline-script-id.test.ts b/test/unit/eslint-plugin-next/inline-script-id.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/inline-script-id'
+import rule from '@next/eslint-plugin-next/dist/rules/inline-script-id'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/next-script-for-ga.test.ts b/test/unit/eslint-plugin-next/next-script-for-ga.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/next-script-for-ga'
+import rule from '@next/eslint-plugin-next/dist/rules/next-script-for-ga'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-assign-module-variable.test.ts b/test/unit/eslint-plugin-next/no-assign-module-variable.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-assign-module-variable'
+import rule from '@next/eslint-plugin-next/dist/rules/no-assign-module-variable'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-before-interactive-script-outside-document.test.ts b/test/unit/eslint-plugin-next/no-before-interactive-script-outside-document.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-before-interactive-script-outside-document'
+import rule from '@next/eslint-plugin-next/dist/rules/no-before-interactive-script-outside-document'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-css-tags.test.ts b/test/unit/eslint-plugin-next/no-css-tags.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-css-tags'
+import rule from '@next/eslint-plugin-next/dist/rules/no-css-tags'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-document-import-in-page.test.ts b/test/unit/eslint-plugin-next/no-document-import-in-page.test.ts
@@ -1,6 +1,6 @@
 import path from 'path'
 
-import rule from '@next/eslint-plugin-next/lib/rules/no-document-import-in-page'
+import rule from '@next/eslint-plugin-next/dist/rules/no-document-import-in-page'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-duplicate-head.test.ts b/test/unit/eslint-plugin-next/no-duplicate-head.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-duplicate-head'
+import rule from '@next/eslint-plugin-next/dist/rules/no-duplicate-head'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-head-element.test.ts b/test/unit/eslint-plugin-next/no-head-element.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-head-element'
+import rule from '@next/eslint-plugin-next/dist/rules/no-head-element'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-head-import-in-document.test.ts b/test/unit/eslint-plugin-next/no-head-import-in-document.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-head-import-in-document'
+import rule from '@next/eslint-plugin-next/dist/rules/no-head-import-in-document'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-html-link-for-pages.test.ts b/test/unit/eslint-plugin-next/no-html-link-for-pages.test.ts
@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import rule from '@next/eslint-plugin-next/lib/rules/no-html-link-for-pages'
+import rule from '@next/eslint-plugin-next/dist/rules/no-html-link-for-pages'
 import { Linter } from 'eslint'
 import assert from 'assert'
 import path from 'path'

diff --git a/test/unit/eslint-plugin-next/no-img-element.test.ts b/test/unit/eslint-plugin-next/no-img-element.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-img-element'
+import * as rule from '@next/eslint-plugin-next/dist/rules/no-img-element'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-page-custom-font.test.ts b/test/unit/eslint-plugin-next/no-page-custom-font.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-page-custom-font'
+import rule from '@next/eslint-plugin-next/dist/rules/no-page-custom-font'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-script-component-in-head.test.ts b/test/unit/eslint-plugin-next/no-script-component-in-head.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-script-component-in-head'
+import rule from '@next/eslint-plugin-next/dist/rules/no-script-component-in-head'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-styled-jsx-in-document.test.ts b/test/unit/eslint-plugin-next/no-styled-jsx-in-document.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-styled-jsx-in-document'
+import rule from '@next/eslint-plugin-next/dist/rules/no-styled-jsx-in-document'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-sync-scripts.test.ts b/test/unit/eslint-plugin-next/no-sync-scripts.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-sync-scripts'
+import rule from '@next/eslint-plugin-next/dist/rules/no-sync-scripts'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-title-in-document-head.test.ts b/test/unit/eslint-plugin-next/no-title-in-document-head.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-title-in-document-head'
+import rule from '@next/eslint-plugin-next/dist/rules/no-title-in-document-head'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-typos.test.ts b/test/unit/eslint-plugin-next/no-typos.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-typos'
+import rule from '@next/eslint-plugin-next/dist/rules/no-typos'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {

diff --git a/test/unit/eslint-plugin-next/no-unwanted-polyfillio.test.ts b/test/unit/eslint-plugin-next/no-unwanted-polyfillio.test.ts
@@ -1,4 +1,4 @@
-import rule from '@next/eslint-plugin-next/lib/rules/no-unwanted-polyfillio'
+import rule from '@next/eslint-plugin-next/dist/rules/no-unwanted-polyfillio'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {