fix(no-navigation-without-resolve): allowing undefined and null in link hrefs (#1388)

Author: marekdedic

.changeset/public-groups-prove.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': patch
+---
+
+fix(no-navigation-without-resolve): allowing undefined and null in link hrefs

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

@@ -123,9 +123,11 @@ export default createRule('no-navigation-without-resolve', {
 				}
 				if (
 					(node.value[0].type === 'SvelteLiteral' &&
+						!expressionIsNullish(new FindVariableContext(context), node.value[0]) &&
 						!expressionIsAbsolute(new FindVariableContext(context), node.value[0]) &&
 						!expressionIsFragment(new FindVariableContext(context), node.value[0])) ||
 					(node.value[0].type === 'SvelteMustacheTag' &&
+						!expressionIsNullish(new FindVariableContext(context), node.value[0].expression) &&
 						!expressionIsAbsolute(new FindVariableContext(context), node.value[0].expression) &&
 						!expressionIsFragment(new FindVariableContext(context), node.value[0].expression) &&
 						!isResolveCall(
@@ -289,6 +291,36 @@ function expressionIsEmpty(url: TSESTree.CallExpressionArgument): boolean {
 	);
 }
 
+function expressionIsNullish(
+	ctx: FindVariableContext,
+	url: AST.SvelteLiteral | TSESTree.Expression
+): boolean {
+	switch (url.type) {
+		case 'Identifier':
+			return identifierIsNullish(ctx, url);
+		case 'Literal':
+			return url.value === null; // Undefined is an Identifier in ESTree, null is a Literal
+		default:
+			return false;
+	}
+}
+
+function identifierIsNullish(ctx: FindVariableContext, url: TSESTree.Identifier): boolean {
+	if (url.name === 'undefined') {
+		return true;
+	}
+	const variable = ctx.findVariable(url);
+	if (
+		variable === null ||
+		variable.identifiers.length === 0 ||
+		variable.identifiers[0].parent.type !== 'VariableDeclarator' ||
+		variable.identifiers[0].parent.init === null
+	) {
+		return false;
+	}
+	return expressionIsNullish(ctx, variable.identifiers[0].parent.init);
+}
+
 function expressionIsAbsolute(
 	ctx: FindVariableContext,
 	url: AST.SvelteLiteral | TSESTree.Expression

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

@@ -0,0 +1,40 @@
+- message: Unexpected href link without resolve().
+  line: 6
+  column: 10
+  suggestions: null
+- message: Unexpected href link without resolve().
+  line: 7
+  column: 10
+  suggestions: null
+- message: Unexpected href link without resolve().
+  line: 8
+  column: 9
+  suggestions: null
+- message: Unexpected href link without resolve().
+  line: 9
+  column: 9
+  suggestions: null
+- message: Unexpected href link without resolve().
+  line: 10
+  column: 9
+  suggestions: null
+- message: Unexpected href link without resolve().
+  line: 11
+  column: 9
+  suggestions: null
+- message: Unexpected href link without resolve().
+  line: 12
+  column: 9
+  suggestions: null
+- message: Unexpected href link without resolve().
+  line: 13
+  column: 9
+  suggestions: null
+- message: Unexpected href link without resolve().
+  line: 14
+  column: 9
+  suggestions: null
+- message: Unexpected href link without resolve().
+  line: 15
+  column: 9
+  suggestions: null

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

@@ -0,0 +1,15 @@
+<script>
+	const one = "undefined";
+	const two = "null";
+</script>
+
+<a href="undefined">Click me!</a>
+<a href="null">Click me!</a>
+<a href={one}>Click me!</a>
+<a href={two}>Click me!</a>
+<a href={`undefined`}>Click me!</a>
+<a href={`null`}>Click me!</a>
+<a href={`${undefined}`}>Click me!</a>
+<a href={`${null}`}>Click me!</a>
+<a href={`${one}`}>Click me!</a>
+<a href={`${two}`}>Click me!</a>

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

@@ -0,0 +1,9 @@
+<script>
+	const one = undefined;
+	const two = null;
+</script>
+
+<a href={undefined}>Click me!</a>
+<a href={null}>Click me!</a>
+<a href={one}>Click me!</a>
+<a href={two}>Click me!</a>