feat(no-navigation-without-base): added support for urls defined in variables

Author: marekdedic

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

@@ -102,7 +102,7 @@ export default createRule('no-navigation-without-base', {
 					return;
 				}
 				if (
-					!urlStartsWithBase(hrefValue.expression, basePathNames) &&
+					!urlStartsWithBase(context, hrefValue.expression, basePathNames) &&
 					!urlIsAbsolute(hrefValue.expression)
 				) {
 					context.report({ loc: hrefValue.loc, messageId: 'linkNotPrefixed' });
@@ -183,7 +183,7 @@ function checkGotoCall(
 		return;
 	}
 	const url = call.arguments[0];
-	if (!urlStartsWithBase(url, basePathNames)) {
+	if (!urlStartsWithBase(context, url, basePathNames)) {
 		context.report({ loc: url.loc, messageId: 'gotoNotPrefixed' });
 	}
 }
@@ -198,20 +198,23 @@ function checkShallowNavigationCall(
 		return;
 	}
 	const url = call.arguments[0];
-	if (!urlIsEmpty(url) && !urlStartsWithBase(url, basePathNames)) {
+	if (!urlIsEmpty(url) && !urlStartsWithBase(context, url, basePathNames)) {
 		context.report({ loc: url.loc, messageId });
 	}
 }
 
 // Helper functions
 
 function urlStartsWithBase(
+	context: RuleContext,
 	url: TSESTree.CallExpressionArgument,
 	basePathNames: Set<TSESTree.Identifier>
 ): boolean {
 	switch (url.type) {
 		case 'BinaryExpression':
 			return binaryExpressionStartsWithBase(url, basePathNames);
+		case 'Identifier':
+			return variableStartsWithBase(context, url, basePathNames);
 		case 'TemplateLiteral':
 			return templateLiteralStartsWithBase(url, basePathNames);
 		default:
@@ -253,6 +256,23 @@ function extractLiteralStartingIdentifier(
 	return undefined;
 }
 
+function variableStartsWithBase(
+	context: RuleContext,
+	url: TSESTree.Identifier,
+	basePathNames: Set<TSESTree.Identifier>
+): boolean {
+	const variable = findVariable(context, url);
+	if (
+		variable === null ||
+		variable.identifiers.length !== 1 ||
+		variable.identifiers[0].parent.type !== 'VariableDeclarator' ||
+		variable.identifiers[0].parent.init === null
+	) {
+		return false;
+	}
+	return urlStartsWithBase(context, variable.identifiers[0].parent.init, basePathNames);
+}
+
 function urlIsEmpty(url: TSESTree.CallExpressionArgument): boolean {
 	return (
 		(url.type === 'Literal' && url.value === '') ||

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-base/invalid/goto-no-base01-errors.yaml

@@ -1,4 +1,8 @@
 - message: Found a goto() call with a url that isn't prefixed with the base path.
-  line: 4
+  line: 6
+  column: 7
+  suggestions: null
+- message: Found a goto() call with a url that isn't prefixed with the base path.
+  line: 7
   column: 7
   suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-base/invalid/goto-no-base01-input.svelte

@@ -1,5 +1,8 @@
 <script>
 	import { goto } from '$app/navigation';
 
+	const value = "/foo";
+
 	goto('/foo');
+	goto(value);
 </script>

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

@@ -1,12 +1,16 @@
 - message: Found a link with a url that isn't prefixed with the base path.
-  line: 1
+  line: 4
   column: 10
   suggestions: null
 - message: Found a link with a url that isn't prefixed with the base path.
-  line: 2
+  line: 5
   column: 9
   suggestions: null
 - message: Found a link with a url that isn't prefixed with the base path.
-  line: 3
+  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-no-base01-input.svelte

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

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-base/invalid/pushState-no-base01-errors.yaml

@@ -1,4 +1,8 @@
 - message: Found a pushState() call with a url that isn't prefixed with the base path.
-  line: 4
+  line: 6
+  column: 12
+  suggestions: null
+- message: Found a pushState() call with a url that isn't prefixed with the base path.
+  line: 7
   column: 12
   suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-base/invalid/pushState-no-base01-input.svelte

@@ -1,5 +1,8 @@
 <script>
 	import { pushState } from '$app/navigation';
 
+	const value = "/foo";
+
 	pushState('/foo');
+	pushState(value);
 </script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-base/invalid/replaceState-no-base01-errors.yaml

@@ -1,5 +1,10 @@
 - message: Found a replaceState() call with a url that isn't prefixed with the
     base path.
-  line: 4
+  line: 6
+  column: 15
+  suggestions: null
+- message: Found a replaceState() call with a url that isn't prefixed with the
+    base path.
+  line: 7
   column: 15
   suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-base/invalid/replaceState-no-base01-input.svelte

@@ -1,5 +1,8 @@
 <script>
 	import { replaceState } from '$app/navigation';
 
+	const value = "/foo";
+
 	replaceState('/foo');
+	replaceState(value);
 </script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-base/valid/goto-base-prefixed01-input.svelte

@@ -2,7 +2,12 @@
 	import { base } from '$app/paths';
 	import { goto } from '$app/navigation';
 
+	const value1 = base + '/foo/';
+	const value2 = `${base}/foo/`;
+
 	// eslint-disable-next-line prefer-template -- Testing both variants
 	goto(base + '/foo/');
 	goto(`${base}/foo/`);
+	goto(value1);
+	goto(value2);
 </script>

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

@@ -1,6 +1,11 @@
 <script>
 	import { base } from '$app/paths';
+
+	const value1 = base + '/foo/';
+	const value2 = `${base}/foo/`;
 </script>
 
 <a href={base + '/foo/'}>Click me!</a>
 <a href={`${base}/foo/`}>Click me!</a>
+<a href={value1}>Click me!</a>
+<a href={value2}>Click me!</a>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-base/valid/pushState-base-prefixed01-input.svelte

@@ -2,7 +2,12 @@
 	import { base } from '$app/paths';
 	import { pushState } from '$app/navigation';
 
+	const value1 = base + '/foo/';
+	const value2 = `${base}/foo/`;
+
 	// eslint-disable-next-line prefer-template -- Testing both variants
 	pushState(base + '/foo/');
 	pushState(`${base}/foo/`);
+	pushState(value1);
+	pushState(value2);
 </script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-navigation-without-base/valid/replaceState-base-prefixed01-input.svelte

@@ -2,7 +2,12 @@
 	import { base } from '$app/paths';
 	import { replaceState } from '$app/navigation';
 
+	const value1 = base + '/foo/';
+	const value2 = `${base}/foo/`;
+
 	// eslint-disable-next-line prefer-template -- Testing both variants
 	replaceState(base + '/foo/');
 	replaceState(`${base}/foo/`);
+	replaceState(value1);
+	replaceState(value2);
 </script>