fix: add browser check in media query (#137)

.changeset/early-cameras-boil.md

@@ -0,0 +1,5 @@
+---
+"runed": patch
+---
+
+fix: add a browser check in `MediaQuery`

.nvmrc

@@ -1 +1 @@
-v18.18.0
+v20.15.1

package.json

@@ -46,12 +46,12 @@
 		"@huntabyte/eslint-config": "^0.3.2",
 		"@svitejs/changesets-changelog-github-compact": "^1.1.0",
 		"eslint": "^9.1.1",
-		"eslint-plugin-svelte": "2.38.0",
+		"eslint-plugin-svelte": "2.44.1",
 		"prettier": "^3.2.5",
-		"prettier-plugin-svelte": "^3.2.3",
+		"prettier-plugin-svelte": "^3.2.7",
 		"prettier-plugin-tailwindcss": "^0.5.14",
 		"readline-sync": "^1.4.10",
-		"svelte-eslint-parser": "^0.35.0",
+		"svelte-eslint-parser": "^0.41.1",
 		"wrangler": "^3.52.0"
 	},
 	"type": "module",
@@ -61,8 +61,8 @@
 		}
 	},
 	"engines": {
-		"pnpm": "^8.7.0",
+		"pnpm": ">=8.7.0",
 		"node": ">=18"
 	},
-	"packageManager": "pnpm@8.15.8"
+	"packageManager": "pnpm@9.6.0"
 }

packages/runed/package.json

@@ -50,7 +50,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "^2.5.3",
 		"@sveltejs/package": "^2.3.0",
-		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
 		"@testing-library/dom": "^10.2.0",
 		"@testing-library/jest-dom": "^6.4.6",
 		"@testing-library/svelte": "^5.2.0",

packages/runed/src/lib/utilities/MediaQuery/MediaQuery.svelte.ts

@@ -1,9 +1,10 @@
 import { extract } from "../extract/extract.svelte.js";
 import { useEventListener } from "../useEventListener/useEventListener.svelte.js";
 import type { MaybeGetter } from "$lib/internal/types.js";
+import { browser } from "$lib/internal/utils/browser.js";
 
 /**
- * Takes a media query as an input and listsens for changes to it,
+ * Takes a media query as an input and listens for changes to it,
  * holding a reactive property with its current state.
  *
  * @see {@link https://runed.dev/docs/utilities/media-query}
@@ -36,7 +37,7 @@ import type { MaybeGetter } from "$lib/internal/types.js";
 export class MediaQuery {
 	#propQuery: MaybeGetter<string>;
 	#query = $derived.by(() => extract(this.#propQuery));
-	#mediaQueryList: MediaQueryList = $derived(window.matchMedia(this.#query));
+	#mediaQueryList = $derived(browser ? window.matchMedia(this.#query) : null);
 	#effectRegistered = 0;
 	#matches: boolean | undefined = $state();
 
@@ -66,6 +67,6 @@ export class MediaQuery {
 			});
 		}
 
-		return this.#matches ?? this.#mediaQueryList.matches;
+		return this.#matches ?? this.#mediaQueryList?.matches;
 	}
 }