ESLint Plugin: passHref is not assigned #24670

housseindjirdeh · 2021-04-30T19:20:51Z

Adds a lint rule warning to the Next.js ESLint plugin if passHref=true is not assigned for <Link> wrapping a custom component.

Fixes #23713

alii · 2021-05-01T08:25:12Z

I might be missing something here as I've not written an ESLint config so please forgive me if this is a very silly question, but would this not also throw warnings/errors for somebody using a component they've written called Link. Or a monorepo and with another app that uses react-router-dom (whose Link component has no passHref prop). There could be a few false positives, right?

housseindjirdeh · 2021-05-03T14:56:41Z

@alii Not a silly question at all, that's great feedback and you're right :)

I just added a check for the import itself (import Link from next/link). If that's not included and a custom <Link> component was created or imported from another lib, the warning won't show.

alii · 2021-05-03T14:57:17Z

Awesome! 🚀

ijjk · 2021-05-10T18:19:04Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
buildDuration	15.4s	15s	-392ms
buildDurationCached	5.1s	4.7s	-389ms
nodeModulesSize	46.5 MB	46.5 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.719	2.629	-0.09
/ avg req/sec	919.5	951.05	+31.55
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.547	1.548	0
/error-in-render avg req/sec	1616.04	1615.29	⚠️ -0.75

Client Bundles (main, webpack, commons)

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	19.3 kB	19.3 kB	✓
webpack-HASH.js gzip	994 B	994 B	✓
Overall change	59.6 kB	59.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
_app-HASH.js gzip	1.02 kB	1.02 kB	✓
_error-HASH.js gzip	3.05 kB	3.05 kB	✓
amp-HASH.js gzip	526 B	526 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	262 B	262 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	331 B	331 B	✓
withRouter-HASH.js gzip	329 B	329 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	8.52 kB	8.52 kB	✓

Client Build Manifests

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
_buildManifest.js gzip	394 B	394 B	✓
Overall change	394 B	394 B	✓

Rendered Page Sizes

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
index.html gzip	561 B	561 B	✓
link.html gzip	569 B	569 B	✓
withRouter.html gzip	557 B	557 B	✓
Overall change	1.69 kB	1.69 kB	✓

Serverless Mode (Decrease detected ✓)

General

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
buildDuration	19.2s	18.8s	-470ms
buildDurationCached	6.9s	6.8s	-23ms
nodeModulesSize	46.5 MB	46.5 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	19.3 kB	19.3 kB	✓
webpack-HASH.js gzip	994 B	994 B	✓
Overall change	59.6 kB	59.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
_app-HASH.js gzip	1.02 kB	1.02 kB	✓
_error-HASH.js gzip	3.05 kB	3.05 kB	✓
amp-HASH.js gzip	526 B	526 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	262 B	262 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	331 B	331 B	✓
withRouter-HASH.js gzip	329 B	329 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	8.52 kB	8.52 kB	✓

Client Build Manifests

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
_buildManifest.js gzip	394 B	394 B	✓
Overall change	394 B	394 B	✓

Serverless bundles Overall decrease ✓

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
_error.js	1.34 MB	1.34 MB	✓
404.html	2.42 kB	2.42 kB	✓
500.html	2.41 kB	2.41 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.61 kB	1.61 kB	✓
css.html	1.79 kB	1.79 kB	✓
hooks.html	1.67 kB	1.67 kB	✓
index.js	1.34 MB	1.34 MB	✓
link.js	1.4 MB	1.4 MB	-2 B
routerDirect.js	1.39 MB	1.39 MB	✓
withRouter.js	1.39 MB	1.39 MB	✓
Overall change	6.9 MB	6.9 MB	-2 B

Webpack 4 Mode (Increase detected ⚠️)

General

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
buildDuration	13s	13.1s	⚠️ +60ms
buildDurationCached	5.4s	5.3s	-89ms
nodeModulesSize	46.5 MB	46.5 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.626	2.633	⚠️ +0.01
/ avg req/sec	951.93	949.36	⚠️ -2.57
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.562	1.53	-0.03
/error-in-render avg req/sec	1600.28	1633.45	+33.17

Client Bundles (main, webpack, commons)

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
677f882d2ed8..HASH.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.19 kB	7.19 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.72 kB	3.72 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
21c68fa65a48..217.css gzip	125 B	125 B	✓
Overall change	9.37 kB	9.37 kB	✓

Client Build Manifests

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	housseindjirdeh/next.js link-eslint-rule	Change
index.html gzip	614 B	614 B	✓
link.html gzip	619 B	619 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: d547fe3

alii · 2021-05-10T20:09:51Z

🎉

Adds a lint rule warning to the Next.js ESLint plugin if `passHref=true` is not assigned for `<Link>` wrapping a custom component. Fixes vercel#23713

karlhorky · 2021-06-20T10:45:48Z

@housseindjirdeh @timneutkens @leerob would it make sense to have a rule that would verify that the directly-nested HTML element used inside of the <Link> is an <a> element?

This would not apply to components being used inside of the <Link>.

housseindjirdeh added 3 commits April 30, 2021 14:40

adds lint rule for missing passHref

b75cc8e

adds unit test

401dd04

adds doc page

39db4d3

housseindjirdeh requested review from divmain, ijjk, lfades, shuding and timneutkens as code owners April 30, 2021 19:20

ijjk added the type: documentation label Apr 30, 2021

housseindjirdeh changed the title ~~Link eslint rule~~ ESLint Plugin Rule: passHref is not assigned Apr 30, 2021

This comment has been minimized.

Sign in to view

housseindjirdeh added 2 commits May 3, 2021 10:52

add check for link import

8b98b3c

Merge branch 'canary' into link-eslint-rule

70f2011

This comment has been minimized.

Sign in to view

housseindjirdeh changed the title ~~ESLint Plugin Rule: passHref is not assigned~~ ESLint Plugin: passHref is not assigned May 4, 2021

housseindjirdeh added the type: chrome label May 4, 2021

Merge branch 'canary' into link-eslint-rule

3d07850

This comment has been minimized.

Sign in to view

Merge branch 'canary' into link-eslint-rule

3ff3c34

timneutkens approved these changes May 10, 2021

View reviewed changes

Merge branch 'canary' into link-eslint-rule

d547fe3

kodiakhq bot merged commit 569da9d into vercel:canary May 10, 2021

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ESLint Plugin: passHref is not assigned #24670

ESLint Plugin: passHref is not assigned #24670

housseindjirdeh commented Apr 30, 2021 •

edited

Loading

This comment has been minimized.

alii commented May 1, 2021

housseindjirdeh commented May 3, 2021

alii commented May 3, 2021

This comment has been minimized.

This comment has been minimized.

ijjk commented May 10, 2021

alii commented May 10, 2021

karlhorky commented Jun 20, 2021 •

edited

Loading

ESLint Plugin: passHref is not assigned #24670

ESLint Plugin: passHref is not assigned #24670

Conversation

housseindjirdeh commented Apr 30, 2021 • edited Loading

This comment has been minimized.

alii commented May 1, 2021

housseindjirdeh commented May 3, 2021

alii commented May 3, 2021

This comment has been minimized.

This comment has been minimized.

ijjk commented May 10, 2021

Stats from current PR

alii commented May 10, 2021

karlhorky commented Jun 20, 2021 • edited Loading

housseindjirdeh commented Apr 30, 2021 •

edited

Loading

karlhorky commented Jun 20, 2021 •

edited

Loading