Fix linting of no-html-link in appDir

packages/eslint-plugin-next/src/rules/no-html-link-for-pages.ts

@@ -7,6 +7,7 @@ import {
   getUrlFromPagesDirectories,
   normalizeURL,
   execOnce,
+  getUrlFromAppDirectory,
 } from '../utils/url'
 
 const pagesDirWarning = execOnce((pagesDirs) => {
@@ -93,6 +94,8 @@ export = defineRule({
     }
 
     const pageUrls = getUrlFromPagesDirectories('/', foundPagesDirs)
+    const appDirUrls = getUrlFromAppDirectory('/', foundAppDirs)
+    const allUrls = [...pageUrls, ...appDirUrls]
     return {
       JSXOpeningElement(node) {
         if (node.name.name !== 'a') {
@@ -134,8 +137,8 @@ export = defineRule({
           return
         }
 
-        pageUrls.forEach((pageUrl) => {
-          if (pageUrl.test(normalizeURL(hrefPath))) {
+        allUrls.forEach((foundUrl) => {
+          if (foundUrl.test(normalizeURL(hrefPath))) {
             context.report({
               node,
               message: `Do not use an \`<a>\` element to navigate to \`${hrefPath}\`. Use \`<Link />\` from \`next/link\` instead. See: ${url}`,

packages/eslint-plugin-next/src/utils/url.ts

@@ -1,5 +1,6 @@
 import * as path from 'path'
 import * as fs from 'fs'
+import { normalizeAppPath } from '../../../next/src/shared/lib/router/utils/app-paths'
 
 // Cache for fs.readdirSync lookup.
 // Prevent multiple blocking IO requests that have already been calculated.
@@ -33,6 +34,33 @@ function parseUrlForPages(urlprefix: string, directory: string) {
   return res
 }
 
+/**
+ * Recursively parse app directory for URLs.
+ */
+function parseUrlForAppDir(urlprefix: string, directory: string) {
+  fsReadDirSyncCache[directory] ??= fs.readdirSync(directory, {
+    withFileTypes: true,
+  })
+  const res = []
+  fsReadDirSyncCache[directory].forEach((dirent) => {
+    // TODO: this should account for all page extensions
+    // not just js(x) and ts(x)
+    if (/(\.(j|t)sx?)$/.test(dirent.name)) {
+      if (/^page(\.(j|t)sx?)$/.test(dirent.name)) {
+        res.push(`${urlprefix}${dirent.name.replace(/^page(\.(j|t)sx?)$/, '')}`)
+      } else if (!/^layout(\.(j|t)sx?)$/.test(dirent.name)) {
+        res.push(`${urlprefix}${dirent.name.replace(/(\.(j|t)sx?)$/, '')}`)
+      }
+    } else {
+      const dirPath = path.join(directory, dirent.name)
+      if (dirent.isDirectory(dirPath) && !dirent.isSymbolicLink()) {
+        res.push(...parseUrlForPages(urlprefix + dirent.name + '/', dirPath))
+      }
+    }
+  })
+  return res
+}
+
 /**
  * Takes a URL and does the following things.
  *  - Replaces `index.html` with `/`
@@ -77,6 +105,27 @@ export function getUrlFromPagesDirectories(
   })
 }
 
+export function getUrlFromAppDirectory(
+  urlPrefix: string,
+  directories: string[]
+) {
+  return Array.from(
+    // De-duplicate similar pages across multiple directories.
+    new Set(
+      directories
+        .map((directory) => parseUrlForAppDir(urlPrefix, directory))
+        .flat()
+        .map(
+          // Since the URLs are normalized we add `^` and `$` to the RegExp to make sure they match exactly.
+          (url) => `^${normalizeAppPath(url)}$`
+        )
+    )
+  ).map((urlReg) => {
+    urlReg = urlReg.replace(/\[.*\]/g, '((?!.+?\\..+?).*?)')
+    return new RegExp(urlReg)
+  })
+}
+
 export function execOnce<TArgs extends any[], TResult>(
   fn: (...args: TArgs) => TResult
 ): (...args: TArgs) => TResult {

test/unit/eslint-plugin-next/no-html-link-for-pages.test.ts

@@ -211,6 +211,36 @@ export class Blah extends Head {
 }
 `
 
+const validInterceptedRouteCode = `
+import Link from 'next/link';
+
+export class Blah extends Head {
+  render() {
+    return (
+      <div>
+        <Link href='/photo/1/'>Photo</Link>
+        <h1>Hello title</h1>
+      </div>
+    );
+  }
+}
+`
+
+const invalidInterceptedRouteCode = `
+import Link from 'next/link';
+
+export class Blah extends Head {
+  render() {
+    return (
+      <div>
+        <a href='/photo/1/'>Photo</a>
+        <h1>Hello title</h1>
+      </div>
+    );
+  }
+}
+`
+
 describe('no-html-link-for-pages', function () {
   it('prints warning when there are no "pages" or "app" directories', function () {
     const consoleSpy = jest.spyOn(console, 'warn').mockImplementation()
@@ -370,4 +400,128 @@ describe('no-html-link-for-pages', function () {
       'Do not use an `<a>` element to navigate to `/list/lorem-ipsum/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages'
     )
   })
+  it('valid link element with appDir', function () {
+    const report = withAppLinter.verify(validCode, linterConfig, {
+      filename: 'foo.js',
+    })
+    assert.deepEqual(report, [])
+  })
+
+  it('valid link element with multiple directories with appDir', function () {
+    const report = withAppLinter.verify(validCode, linterConfig, {
+      filename: 'foo.js',
+    })
+    assert.deepEqual(report, [])
+  })
+
+  it('valid anchor element with appDir', function () {
+    const report = withAppLinter.verify(validAnchorCode, linterConfig, {
+      filename: 'foo.js',
+    })
+    assert.deepEqual(report, [])
+  })
+
+  it('valid external link element with appDir', function () {
+    const report = withAppLinter.verify(validExternalLinkCode, linterConfig, {
+      filename: 'foo.js',
+    })
+    assert.deepEqual(report, [])
+  })
+
+  it('valid download link element with appDir', function () {
+    const report = withAppLinter.verify(validDownloadLinkCode, linterConfig, {
+      filename: 'foo.js',
+    })
+    assert.deepEqual(report, [])
+  })
+
+  it('valid target="_blank" link element with appDir', function () {
+    const report = withAppLinter.verify(
+      validTargetBlankLinkCode,
+      linterConfig,
+      {
+        filename: 'foo.js',
+      }
+    )
+    assert.deepEqual(report, [])
+  })
+
+  it('valid public file link element with appDir', function () {
+    const report = withAppLinter.verify(validPublicFile, linterConfig, {
+      filename: 'foo.js',
+    })
+    assert.deepEqual(report, [])
+  })
+
+  it('invalid static route with appDir', function () {
+    const [report] = withAppLinter.verify(invalidStaticCode, linterConfig, {
+      filename: 'foo.js',
+    })
+    assert.notEqual(report, undefined, 'No lint errors found.')
+    assert.equal(
+      report.message,
+      'Do not use an `<a>` element to navigate to `/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages'
+    )
+  })
+
+  it('invalid dynamic route with appDir', function () {
+    const [report] = withAppLinter.verify(invalidDynamicCode, linterConfig, {
+      filename: 'foo.js',
+    })
+    assert.notEqual(report, undefined, 'No lint errors found.')
+    assert.equal(
+      report.message,
+      'Do not use an `<a>` element to navigate to `/list/foo/bar/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages'
+    )
+    const [secondReport] = withAppLinter.verify(
+      secondInvalidDynamicCode,
+      linterConfig,
+      {
+        filename: 'foo.js',
+      }
+    )
+    assert.notEqual(secondReport, undefined, 'No lint errors found.')
+    assert.equal(
+      secondReport.message,
+      'Do not use an `<a>` element to navigate to `/list/foo/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages'
+    )
+    const [thirdReport] = withAppLinter.verify(
+      thirdInvalidDynamicCode,
+      linterConfig,
+      {
+        filename: 'foo.js',
+      }
+    )
+    assert.notEqual(thirdReport, undefined, 'No lint errors found.')
+    assert.equal(
+      thirdReport.message,
+      'Do not use an `<a>` element to navigate to `/list/lorem-ipsum/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages'
+    )
+  })
+
+  it('valid intercepted route with appDir', function () {
+    const report = withAppLinter.verify(
+      validInterceptedRouteCode,
+      linterConfig,
+      {
+        filename: 'foo.js',
+      }
+    )
+    assert.deepEqual(report, [])
+  })
+
+  it('invalid intercepted route with appDir', function () {
+    const [report] = withAppLinter.verify(
+      invalidInterceptedRouteCode,
+      linterConfig,
+      {
+        filename: 'foo.js',
+      }
+    )
+    assert.notEqual(report, undefined, 'No lint errors found.')
+    assert.equal(
+      report.message,
+      'Do not use an `<a>` element to navigate to `/photo/1/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages'
+    )
+  })
 })

test/unit/eslint-plugin-next/with-app-dir/app/@modal/page.tsx

@@ -0,0 +1 @@
+export default () => {}

test/unit/eslint-plugin-next/with-app-dir/app/[profile]/page.tsx

@@ -0,0 +1 @@
+export default () => {}

test/unit/eslint-plugin-next/with-app-dir/app/list/[foo]/[id].jsx

@@ -0,0 +1 @@
+export default () => {}

test/unit/eslint-plugin-next/with-app-dir/app/page.jsx

@@ -0,0 +1 @@
+export default () => {}

test/unit/eslint-plugin-next/with-app-dir/app/photo/[id]/page.tsx

@@ -0,0 +1 @@
+export default () => {}