fix(no-navigation-without-base): ignoring fragment links (#1107)

Author: marekdedic

.changeset/warm-plums-smile.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': patch
+---
+
+fix(no-navigation-without-base): ignoring fragment links

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

@@ -96,14 +96,15 @@ export default createRule('no-navigation-without-base', {
 				}
 				const hrefValue = node.value[0];
 				if (hrefValue.type === 'SvelteLiteral') {
-					if (!expressionIsAbsolute(hrefValue)) {
+					if (!expressionIsAbsolute(hrefValue) && !expressionIsFragment(hrefValue)) {
 						context.report({ loc: hrefValue.loc, messageId: 'linkNotPrefixed' });
 					}
 					return;
 				}
 				if (
 					!expressionStartsWithBase(context, hrefValue.expression, basePathNames) &&
-					!expressionIsAbsolute(hrefValue.expression)
+					!expressionIsAbsolute(hrefValue.expression) &&
+					!expressionIsFragment(hrefValue.expression)
 				) {
 					context.report({ loc: hrefValue.loc, messageId: 'linkNotPrefixed' });
 				}
@@ -348,3 +349,33 @@ function templateLiteralIsAbsolute(url: TSESTree.TemplateLiteral): boolean {
 function urlValueIsAbsolute(url: string): boolean {
 	return url.includes('://');
 }
+
+function expressionIsFragment(url: SvelteLiteral | TSESTree.Expression): boolean {
+	switch (url.type) {
+		case 'BinaryExpression':
+			return binaryExpressionIsFragment(url);
+		case 'Literal':
+			return typeof url.value === 'string' && urlValueIsFragment(url.value);
+		case 'SvelteLiteral':
+			return urlValueIsFragment(url.value);
+		case 'TemplateLiteral':
+			return templateLiteralIsFragment(url);
+		default:
+			return false;
+	}
+}
+
+function binaryExpressionIsFragment(url: TSESTree.BinaryExpression): boolean {
+	return url.left.type !== 'PrivateIdentifier' && expressionIsFragment(url.left);
+}
+
+function templateLiteralIsFragment(url: TSESTree.TemplateLiteral): boolean {
+	return (
+		(url.expressions.length >= 1 && expressionIsFragment(url.expressions[0])) ||
+		(url.quasis.length >= 1 && urlValueIsFragment(url.quasis[0].value.raw))
+	);
+}
+
+function urlValueIsFragment(url: string): boolean {
+	return url.startsWith('#');
+}

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

@@ -0,0 +1,16 @@
+- message: Found a link with a url that isn't prefixed with the base path.
+  line: 4
+  column: 10
+  suggestions: null
+- message: Found a link with a url that isn't prefixed with the base path.
+  line: 5
+  column: 9
+  suggestions: null
+- message: Found a link with a url that isn't prefixed with the base path.
+  line: 6
+  column: 9
+  suggestions: null
+- message: Found a link with a url that isn't prefixed with the base path.
+  line: 7
+  column: 9
+  suggestions: null

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

@@ -0,0 +1,7 @@
+<script>
+	const value = "/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>

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

@@ -0,0 +1,10 @@
+<script>
+	const section = 'sectionName';
+</script>
+
+<a href="#">Click me!</a>
+<a href="#section">Click me!</a>
+<a href={'#section'}>Click me!</a>
+<a href={'#' + 'section'}>Click me!</a>
+<a href={'#' + section}>Click me!</a>
+<a href={`#${section}`}>Click me!</a>