feat: add svelte/no-top-level-browser-globals rule (#1210)

Author: ota-meshi

.changeset/popular-jokes-tell.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-svelte": minor
+---
+
+feat: add `svelte/no-top-level-browser-globals` rule

README.md

@@ -271,6 +271,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [svelte/no-reactive-reassign](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-reassign/) | disallow reassigning reactive values | :star: |
 | [svelte/no-shorthand-style-property-overrides](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-shorthand-style-property-overrides/) | disallow shorthand style properties that override related longhand properties | :star: |
 | [svelte/no-store-async](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-store-async/) | disallow using async/await inside svelte stores because it causes issues with the auto-unsubscribing features | :star: |
+| [svelte/no-top-level-browser-globals](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-top-level-browser-globals/) | disallow using top-level browser global variables |  |
 | [svelte/no-unknown-style-directive-property](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unknown-style-directive-property/) | disallow unknown `style:property` | :star: |
 | [svelte/require-store-callbacks-use-set-param](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-store-callbacks-use-set-param/) | store callbacks must use `set` param | :bulb: |
 | [svelte/require-store-reactive-access](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-store-reactive-access/) | disallow to use of the store itself as an operand. Need to use $ prefix or get function. | :star::wrench: |

docs/rules.md

@@ -28,6 +28,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [svelte/no-reactive-reassign](./rules/no-reactive-reassign.md)                                   | disallow reassigning reactive values                                                                                                   | :star:         |
 | [svelte/no-shorthand-style-property-overrides](./rules/no-shorthand-style-property-overrides.md) | disallow shorthand style properties that override related longhand properties                                                          | :star:         |
 | [svelte/no-store-async](./rules/no-store-async.md)                                               | disallow using async/await inside svelte stores because it causes issues with the auto-unsubscribing features                          | :star:         |
+| [svelte/no-top-level-browser-globals](./rules/no-top-level-browser-globals.md)                   | disallow using top-level browser global variables                                                                                      |                |
 | [svelte/no-unknown-style-directive-property](./rules/no-unknown-style-directive-property.md)     | disallow unknown `style:property`                                                                                                      | :star:         |
 | [svelte/require-store-callbacks-use-set-param](./rules/require-store-callbacks-use-set-param.md) | store callbacks must use `set` param                                                                                                   | :bulb:         |
 | [svelte/require-store-reactive-access](./rules/require-store-reactive-access.md)                 | disallow to use of the store itself as an operand. Need to use $ prefix or get function.                                               | :star::wrench: |

docs/rules/no-top-level-browser-globals.md

@@ -0,0 +1,62 @@
+---
+pageClass: 'rule-details'
+sidebarDepth: 0
+title: 'svelte/no-top-level-browser-globals'
+description: 'disallow using top-level browser global variables'
+---
+
+# svelte/no-top-level-browser-globals
+
+> disallow using top-level browser global variables
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+
+## :book: Rule Details
+
+This rule reports top-level browser global variables in Svelte components.
+This rule helps prevent the use of browser global variables that can cause errors in SSR (Server Side Rendering).
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint svelte/no-top-level-browser-globals: "error" */
+  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+
+  /* ✓ GOOD */
+  onMount(() => {
+    const a = localStorage.getItem('myCat');
+    console.log(a);
+  });
+
+  /* ✓ GOOD */
+  if (browser) {
+    const a = localStorage.getItem('myCat');
+    console.log(a);
+  }
+
+  /* ✓ GOOD */
+  if (typeof localStorage !== 'undefined') {
+    const a = localStorage.getItem('myCat');
+    console.log(a);
+  }
+
+  /* ✗ BAD */
+  const a = localStorage.getItem('myCat');
+  console.log(a);
+</script>
+```
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [`$app/environment` documentation > browser](https://svelte.dev/docs/kit/$app-environment#browser)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/no-top-level-browser-globals.ts)
+- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/tests/src/rules/no-top-level-browser-globals.ts)

packages/eslint-plugin-svelte/package.json

@@ -56,9 +56,10 @@
     }
   },
   "dependencies": {
-    "@eslint-community/eslint-utils": "^4.4.1",
+    "@eslint-community/eslint-utils": "^4.6.1",
     "@jridgewell/sourcemap-codec": "^1.5.0",
     "esutils": "^2.0.3",
+    "globals": "^16.0.0",
     "known-css-properties": "^0.36.0",
     "postcss": "^8.4.49",
     "postcss-load-config": "^3.1.4",

packages/eslint-plugin-svelte/src/rule-types.ts

@@ -251,6 +251,11 @@ export interface RuleOptions {
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-target-blank/
    */
   'svelte/no-target-blank'?: Linter.RuleEntry<SvelteNoTargetBlank>
+  /**
+   * disallow using top-level browser global variables
+   * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-top-level-browser-globals/
+   */
+  'svelte/no-top-level-browser-globals'?: Linter.RuleEntry<[]>
   /**
    * disallow trailing whitespace at the end of lines
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-trailing-spaces/

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

@@ -106,7 +106,7 @@ function extractGotoReferences(referenceTracker: ReferenceTracker): TSESTree.Cal
 				}
 			}
 		}),
-		({ node }) => node
+		({ node }) => node as TSESTree.CallExpression
 	);
 }
 

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

@@ -171,13 +171,13 @@ function extractFunctionCallReferences(referenceTracker: ReferenceTracker): {
 	return {
 		goto: rawReferences
 			.filter(({ path }) => path[path.length - 1] === 'goto')
-			.map(({ node }) => node),
+			.map(({ node }) => node as TSESTree.CallExpression),
 		pushState: rawReferences
 			.filter(({ path }) => path[path.length - 1] === 'pushState')
-			.map(({ node }) => node),
+			.map(({ node }) => node as TSESTree.CallExpression),
 		replaceState: rawReferences
 			.filter(({ path }) => path[path.length - 1] === 'replaceState')
-			.map(({ node }) => node)
+			.map(({ node }) => node as TSESTree.CallExpression)
 	};
 }