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>