fix(no-top-level-browser-globals): false positive when browser globals appear inside TypeScript generic type parameters (#1477)

Author: ota-meshi

.changeset/fix-top-level-browser-globals-state.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": patch
+---
+
+fix(no-top-level-browser-globals): false positive when browser globals appear inside TypeScript generic type parameters (e.g. `$state<HTMLElement>(...)`).

packages/eslint-plugin-svelte/src/rules/no-top-level-browser-globals.ts

@@ -38,15 +38,19 @@ export default createRule('no-top-level-browser-globals', {
 		const maybeGuards: MaybeGuard[] = [];
 
 		const functions: (TSESTree.FunctionLike | AST.SvelteSnippetBlock)[] = [];
-		const typeAnnotations: (TSESTree.TypeNode | TSESTree.TSTypeAnnotation)[] = [];
+		const typeAnnotations: (
+			| TSESTree.TypeNode
+			| TSESTree.TSTypeAnnotation
+			| TSESTree.TSTypeParameterInstantiation
+		)[] = [];
 
 		function enterFunction(node: TSESTree.FunctionLike | AST.SvelteSnippetBlock) {
 			if (isTopLevelLocation(node)) {
 				functions.push(node);
 			}
 		}
 
-		function enterTypeAnnotation(node: TSESTree.TypeNode | TSESTree.TSTypeAnnotation) {
+		function enterTypeAnnotation(node: TSESTree.TypeNode | TSESTree.TSTypeParameterInstantiation) {
 			if (!isInTypeAnnotation(node)) {
 				typeAnnotations.push(node);
 			}
@@ -123,6 +127,7 @@ export default createRule('no-top-level-browser-globals', {
 			':function': enterFunction,
 			SvelteSnippetBlock: enterFunction,
 			'*.typeAnnotation': enterTypeAnnotation,
+			'*.typeArguments': enterTypeAnnotation,
 			MetaProperty: enterMetaProperty,
 			'Program:exit': verifyGlobalReferences
 		};

packages/eslint-plugin-svelte/tests/fixtures/rules/no-top-level-browser-globals/valid/state-generic-input.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+	const element: HTMLElement | null = null; // fine.
+	const stateElement = $state<HTMLElement | null>(null);
+</script>