From 47661e2bbdb9fb879a75c9b5defd6ade4b1626bd Mon Sep 17 00:00:00 2001
From: MoonLyss <shaitan.lyssm@gmail.com>
Date: Wed, 4 Sep 2024 19:23:02 +0200
Subject: [PATCH] Fix window state

---
 package.json                 |  2 +-
 src/lib/utils/html.svelte.ts | 42 +++++++++++++-----------------------
 src/lib/utils/html.test.ts   |  6 ++++--
 3 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 9c886c0..1210c13 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@selenite/commons",
-	"version": "0.24.3",
+	"version": "0.24.4",
 	"repository": "github:ShaitanLyss/selenite-commons",
 	"license": "MIT",
 	"keywords": [
diff --git a/src/lib/utils/html.svelte.ts b/src/lib/utils/html.svelte.ts
index 6b4771b..ea60687 100644
--- a/src/lib/utils/html.svelte.ts
+++ b/src/lib/utils/html.svelte.ts
@@ -1,38 +1,25 @@
-import { readable, type Readable, type Subscriber } from 'svelte/store';
 import type { Position } from './math';
-import { untrack } from 'svelte';
+
+const _windowState = $state({ width: NaN, height: NaN });
+let _isWindowStateSetup = false;
 /**
  * Reactive window state for use in svelte 5.
  *
- * At the moment, it exposes with and height.
+ * At the moment, it exposes width and height.
  */
 export class WindowState {
-	width = $state<number>(NaN);
-	height = $state<number>(NaN);
+	width = $derived(_windowState.width);
+	height = $derived(_windowState.height);
 
-	static #instance: WindowState | undefined = undefined;
-	private static get instance() {
-		if (!this.#instance) this.#instance = new WindowState();
-		return this.#instance;
-	}
-
-	static get width() {
-		return this.instance.width;
-	}
-
-	static get height() {
-		return this.instance.height;
-	}
-
-	private constructor() {
+	constructor() {
 		if (typeof window === 'undefined') return;
-		untrack(() => {
+		if (_isWindowStateSetup) return;
+		_isWindowStateSetup = true;
+		_windowState.width = window.innerWidth;
+		_windowState.height = window.innerHeight;
+		window.addEventListener('resize', (e) => {
 			this.width = window.innerWidth;
 			this.height = window.innerHeight;
-			window.addEventListener('resize', (e) => {
-				this.width = window.innerWidth;
-				this.height = window.innerHeight;
-			});
 		});
 	}
 }
@@ -186,11 +173,12 @@ export type WindowBounds = {
 export function getBounds(element?: Element): WindowBounds {
 	if (!element) return { top: 0, left: 0, right: 0, bottom: 0 };
 	const { x, y, width, height } = element.getBoundingClientRect();
+	const windowState = new WindowState();
 	return {
 		left: x,
 		top: y,
-		right: WindowState.width - x - width,
-		bottom: WindowState.height - y - height
+		right: windowState.width - x - width,
+		bottom: windowState.height - y - height
 	};
 }
 
diff --git a/src/lib/utils/html.test.ts b/src/lib/utils/html.test.ts
index e3aaaaf..115ed37 100644
--- a/src/lib/utils/html.test.ts
+++ b/src/lib/utils/html.test.ts
@@ -5,11 +5,13 @@ import { Window } from 'happy-dom';
 describe('WindowState', () => {
 	it('should return the window width', () => {
 		window.innerWidth = 2;
-		expect(WindowState.width).toBe(2);
+		const windowState = new WindowState();
+		expect(windowState.width).toBe(2);
 	});
 	it('should return the window height', () => {
 		window.innerHeight = 2;
-		expect(WindowState.width).toBe(2);
+		const windowState = new WindowState();
+		expect(windowState.width).toBe(2);
 	});
 });