From 6c8d8526fdc15d63d1e8c17cda64befadb6b00dd Mon Sep 17 00:00:00 2001
From: Nathan Rajlich <n@n8.io>
Date: Sun, 25 Feb 2024 02:53:14 -0800
Subject: [PATCH] d more DOM compat to `screen` (`offsetWidth`, `offsetHeight`,
 `offsetTop`, `offsetLeft`)

---
 .changeset/smooth-ligers-dress.md |  5 ++++
 packages/runtime/src/screen.ts    | 50 +++++++++++++++++++------------
 2 files changed, 36 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/smooth-ligers-dress.md

diff --git a/.changeset/smooth-ligers-dress.md b/.changeset/smooth-ligers-dress.md
new file mode 100644
index 00000000..26cb508d
--- /dev/null
+++ b/.changeset/smooth-ligers-dress.md
@@ -0,0 +1,5 @@
+---
+'nxjs-runtime': patch
+---
+
+Add more DOM compat to `screen` (`offsetWidth`, `offsetHeight`, `offsetTop`, `offsetLeft`)
diff --git a/packages/runtime/src/screen.ts b/packages/runtime/src/screen.ts
index 6b805e88..a5ccb607 100644
--- a/packages/runtime/src/screen.ts
+++ b/packages/runtime/src/screen.ts
@@ -64,6 +64,25 @@ export class Screen extends EventTarget implements globalThis.Screen {
 	 */
 	declare readonly height: number;
 
+	getContext(contextId: '2d'): CanvasRenderingContext2D {
+		if (contextId !== '2d') {
+			throw new TypeError('Only "2d" rendering context is supported');
+		}
+
+		const i = _(this);
+		if (!i.context2d) {
+			i.context2d = new CanvasRenderingContext2D(
+				// @ts-expect-error Internal constructor
+				INTERNAL_SYMBOL,
+				this
+			);
+
+			$.framebufferInit(this);
+		}
+
+		return i.context2d;
+	}
+
 	// @ts-expect-error
 	addEventListener(
 		type: 'touchstart' | 'touchmove' | 'touchend',
@@ -145,31 +164,24 @@ export class Screen extends EventTarget implements globalThis.Screen {
 	get nodeName() {
 		return 'CANVAS';
 	}
+	get offsetWidth() {
+		return this.width;
+	}
+	get offsetHeight() {
+		return this.height;
+	}
+	get offsetTop() {
+		return 0;
+	}
+	get offsetLeft() {
+		return 0;
+	}
 	getAttribute(name: string): string | null {
 		if (name === 'width') return String(this.width);
 		if (name === 'height') return String(this.height);
 		return null;
 	}
 	setAttribute(name: string, value: string | number) {}
-
-	getContext(contextId: '2d'): CanvasRenderingContext2D {
-		if (contextId !== '2d') {
-			throw new TypeError('Only "2d" rendering context is supported');
-		}
-
-		const i = _(this);
-		if (!i.context2d) {
-			i.context2d = new CanvasRenderingContext2D(
-				// @ts-expect-error Internal constructor
-				INTERNAL_SYMBOL,
-				this
-			);
-
-			$.framebufferInit(this);
-		}
-
-		return i.context2d;
-	}
 }
 $.canvasInitClass(Screen);
 def(Screen);