feat(no-navigation-without-resolve): checking link shorthand attributes (#1323)

Author: marekdedic

.changeset/icy-planets-know.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat(no-navigation-without-resolve): checking link shorthand attributes

packages/eslint-plugin-svelte/src/rules/no-navigation-without-resolve.ts

@@ -49,6 +49,12 @@ export default createRule('no-navigation-without-resolve', {
 	},
 	create(context) {
 		let resolveReferences: Set<TSESTree.Identifier> = new Set<TSESTree.Identifier>();
+
+		const ignoreGoto = context.options[0]?.ignoreGoto ?? false;
+		const ignorePushState = context.options[0]?.ignorePushState ?? false;
+		const ignoreReplaceState = context.options[0]?.ignoreReplaceState ?? false;
+		const ignoreLinks = context.options[0]?.ignoreLinks ?? false;
+
 		return {
 			Program() {
 				const referenceTracker = new ReferenceTracker(context.sourceCode.scopeManager.globalScope!);
@@ -58,12 +64,12 @@ export default createRule('no-navigation-without-resolve', {
 					pushState: pushStateCalls,
 					replaceState: replaceStateCalls
 				} = extractFunctionCallReferences(referenceTracker);
-				if (context.options[0]?.ignoreGoto !== true) {
+				if (!ignoreGoto) {
 					for (const gotoCall of gotoCalls) {
 						checkGotoCall(context, gotoCall, resolveReferences);
 					}
 				}
-				if (context.options[0]?.ignorePushState !== true) {
+				if (!ignorePushState) {
 					for (const pushStateCall of pushStateCalls) {
 						checkShallowNavigationCall(
 							context,
@@ -73,7 +79,7 @@ export default createRule('no-navigation-without-resolve', {
 						);
 					}
 				}
-				if (context.options[0]?.ignoreReplaceState !== true) {
+				if (!ignoreReplaceState) {
 					for (const replaceStateCall of replaceStateCalls) {
 						checkShallowNavigationCall(
 							context,
@@ -84,9 +90,29 @@ export default createRule('no-navigation-without-resolve', {
 					}
 				}
 			},
+			SvelteShorthandAttribute(node) {
+				if (
+					ignoreLinks ||
+					node.parent.parent.type !== 'SvelteElement' ||
+					node.parent.parent.kind !== 'html' ||
+					node.parent.parent.name.type !== 'SvelteName' ||
+					node.parent.parent.name.name !== 'a' ||
+					node.key.name !== 'href' ||
+					node.value.type !== 'Identifier'
+				) {
+					return;
+				}
+				if (
+					!expressionIsAbsolute(new FindVariableContext(context), node.value) &&
+					!expressionIsFragment(new FindVariableContext(context), node.value) &&
+					!isResolveCall(new FindVariableContext(context), node.value, resolveReferences)
+				) {
+					context.report({ loc: node.loc, messageId: 'linkWithoutResolve' });
+				}
+			},
 			SvelteAttribute(node) {
 				if (
-					context.options[0]?.ignoreLinks === true ||
+					ignoreLinks ||
 					node.parent.parent.type !== 'SvelteElement' ||
 					node.parent.parent.kind !== 'html' ||
 					node.parent.parent.name.type !== 'SvelteName' ||

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-resolve/invalid/link-partial-resolve01-errors.yaml

@@ -1,12 +1,16 @@
 - message: Unexpected href link without resolve().
-  line: 7
+  line: 8
   column: 9
   suggestions: null
 - message: Unexpected href link without resolve().
-  line: 8
+  line: 9
   column: 9
   suggestions: null
 - message: Unexpected href link without resolve().
-  line: 9
+  line: 10
   column: 9
   suggestions: null
+- message: Unexpected href link without resolve().
+  line: 11
+  column: 4
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-resolve/invalid/link-partial-resolve01-input.svelte

@@ -2,8 +2,10 @@
 	import { resolve } from '$app/paths';
 
 	const value = resolve('/foo') + '/bar';
+	const href = resolve('/foo') + '/bar';
 </script>
 
 <a href={resolve('/foo') + '/bar'}>Click me!</a>
 <a href={'/foo' + resolve('/bar')}>Click me!</a>
 <a href={value}>Click me!</a>
+<a {href}>Click me!</a>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-resolve/invalid/link-with-fragment01-errors.yaml

@@ -1,10 +1,6 @@
-- message: Unexpected href link without resolve().
-  line: 5
-  column: 10
-  suggestions: null
 - message: Unexpected href link without resolve().
   line: 6
-  column: 9
+  column: 10
   suggestions: null
 - message: Unexpected href link without resolve().
   line: 7
@@ -18,3 +14,11 @@
   line: 9
   column: 9
   suggestions: null
+- message: Unexpected href link without resolve().
+  line: 10
+  column: 4
+  suggestions: null
+- message: Unexpected href link without resolve().
+  line: 11
+  column: 9
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-resolve/invalid/link-with-fragment01-input.svelte

@@ -1,9 +1,11 @@
 <script>
 	const value = "/foo#section";
+	const href = "/foo#section";
 </script>
 
 <a href="/foo#section">Click me!</a>
 <a href={'/foo#section'}>Click me!</a>
 <a href={'/' + 'foo#section'}>Click me!</a>
 <a href={value}>Click me!</a>
+<a {href}>Click me!</a>
 <a href={'/foo#section:42'}>Click me!</a>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-resolve/invalid/link-without-resolve01-errors.yaml

@@ -1,10 +1,6 @@
-- message: Unexpected href link without resolve().
-  line: 5
-  column: 10
-  suggestions: null
 - message: Unexpected href link without resolve().
   line: 6
-  column: 9
+  column: 10
   suggestions: null
 - message: Unexpected href link without resolve().
   line: 7
@@ -18,3 +14,11 @@
   line: 9
   column: 9
   suggestions: null
+- message: Unexpected href link without resolve().
+  line: 10
+  column: 4
+  suggestions: null
+- message: Unexpected href link without resolve().
+  line: 11
+  column: 9
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-resolve/invalid/link-without-resolve01-input.svelte

@@ -1,9 +1,11 @@
 <script>
 	const value = "/foo";
+	const href = "/foo";
 </script>
 
 <a href="/foo">Click me!</a>
 <a href={'/foo'}>Click me!</a>
 <a href={'/' + 'foo'}>Click me!</a>
 <a href={value}>Click me!</a>
+<a {href}>Click me!</a>
 <a href={'/user:42'}>Click me!</a>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-resolve/valid/link-absolute-url01-input.svelte

@@ -2,6 +2,7 @@
 	const protocol = 'https';
 
 	const value = "https://svelte.dev";
+	const href = "https://svelte.dev";
 </script>
 
 <a href="http://svelte.dev">Click me!</a>
@@ -16,3 +17,4 @@
 <a href="mailto:[email protected]">Click me!</a>
 <a href="tel:+123456789">Click me!</a>
 <a href={value}>Click me!</a>
+<a {href}>Click me!</a>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-resolve/valid/link-fragment-url01-input.svelte

@@ -2,6 +2,7 @@
 	const section = 'sectionName';
 
 	const value = '#section';
+	const href = '#section';
 </script>
 
 <a href="#">Click me!</a>
@@ -12,3 +13,4 @@
 <a href={`#${section}`}>Click me!</a>
 <a href={'#user:42'}>Click me!</a>
 <a href={value}>Click me!</a>
+<a {href}>Click me!</a>