chore: add build step to eslint-plugin-next

.eslintignore

@@ -34,3 +34,4 @@ packages/next-swc/crates/**
 bench/nested-deps/pages/**
 bench/nested-deps/components/**
 packages/next-bundle-analyzer/index.d.ts
+packages/eslint-plugin-next/lib/**/*

.gitignore

@@ -3,6 +3,7 @@ dist
 .next
 target
 packages/next/wasm/@next
+packages/eslint-plugin-next/lib
 
 # dependencies
 node_modules

.prettierignore

@@ -26,3 +26,4 @@ bench/nested-deps/pages/**/*
 bench/nested-deps/components/**/*
 pnpm-lock.yaml
 **/convex/_generated/**
+packages/eslint-plugin-next/lib/**/*

packages/eslint-plugin-next/.swcrc

@@ -0,0 +1,11 @@
+{
+    "$schema": "https://json.schemastore.org/swcrc",
+    "jsc": {
+        "parser": {
+            "syntax": "typescript"
+        }
+    },
+    "module": {
+        "type": "commonjs"
+    }
+}

packages/eslint-plugin-next/package.json

@@ -15,6 +15,10 @@
     "glob": "7.1.7"
   },
   "devDependencies": {
-    "@types/eslint": "7.28.0"
+    "eslint": "7.24.0"
+  },
+  "scripts": {
+    "build": "swc -d lib src",
+    "prepublishOnly": "cd ../../ && turbo run build"
   }
 }

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}`,
+      })
+    },
+  }
+}

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"]
 }

test/unit/eslint-plugin-next/index.test.ts

@@ -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
 

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/lib/rules/no-img-element'
 import { RuleTester } from 'eslint'
 ;(RuleTester as any).setDefaultConfig({
   parserOptions: {