From b7359c8361e476d1a5aba96b79c1749fec94cb3a Mon Sep 17 00:00:00 2001
From: xxkl1 <84455605+xxkl1@users.noreply.github.com>
Date: Thu, 27 Apr 2023 22:17:42 +0800
Subject: [PATCH] feat: add window bind devicePixelRatio support (#8534)

closes: #8285

add window bind devicePixelRatio support, change devicePixelRatio on window resize.

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 elements/index.d.ts                                  |  1 +
 site/content/docs/03-template-syntax.md              |  1 +
 src/compiler/compile/nodes/Window.ts                 |  1 +
 src/compiler/compile/render_dom/wrappers/Window.ts   |  2 ++
 .../runtime/samples/window-binding-resize/_config.js | 12 ++++++++++--
 .../samples/window-binding-resize/main.svelte        |  6 ++++--
 .../samples/window-binding-invalid/errors.json       |  2 +-
 7 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/elements/index.d.ts b/elements/index.d.ts
index ac32ae94c3..dd91d14654 100644
--- a/elements/index.d.ts
+++ b/elements/index.d.ts
@@ -1083,6 +1083,7 @@ export interface SvelteWindowAttributes extends HTMLAttributes<Window> {
 	readonly 'bind:innerHeight'?: Window['innerHeight'] | undefined | null;
 	readonly 'bind:outerWidth'?: Window['outerWidth'] | undefined | null;
 	readonly 'bind:outerHeight'?: Window['outerHeight'] | undefined | null;
+	readonly 'bind:devicePixelRatio'?: Window['devicePixelRatio'] | undefined | null;
 	'bind:scrollX'?: Window['scrollX'] | undefined | null;
 	'bind:scrollY'?: Window['scrollY'] | undefined | null;
 	readonly 'bind:online'?: Window['navigator']['onLine'] | undefined | null;
diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md
index 170c303b85..27d3ca9987 100644
--- a/site/content/docs/03-template-syntax.md
+++ b/site/content/docs/03-template-syntax.md
@@ -1742,6 +1742,7 @@ You can also bind to the following properties:
 * `scrollX`
 * `scrollY`
 * `online` — an alias for `window.navigator.onLine`
+* `devicePixelRatio`
 
 All except `scrollX` and `scrollY` are readonly.
 
diff --git a/src/compiler/compile/nodes/Window.ts b/src/compiler/compile/nodes/Window.ts
index c5bec0acd3..2f8a015d8a 100644
--- a/src/compiler/compile/nodes/Window.ts
+++ b/src/compiler/compile/nodes/Window.ts
@@ -17,6 +17,7 @@ const valid_bindings = [
 	'outerHeight',
 	'scrollX',
 	'scrollY',
+	'devicePixelRatio',
 	'online'
 ];
 
diff --git a/src/compiler/compile/render_dom/wrappers/Window.ts b/src/compiler/compile/render_dom/wrappers/Window.ts
index c98af18268..9e58bbcaad 100644
--- a/src/compiler/compile/render_dom/wrappers/Window.ts
+++ b/src/compiler/compile/render_dom/wrappers/Window.ts
@@ -14,6 +14,7 @@ const associated_events = {
 	innerHeight: 'resize',
 	outerWidth: 'resize',
 	outerHeight: 'resize',
+	devicePixelRatio: 'resize',
 
 	scrollX: 'scroll',
 	scrollY: 'scroll'
@@ -29,6 +30,7 @@ const readonly = new Set([
 	'innerHeight',
 	'outerWidth',
 	'outerHeight',
+	'devicePixelRatio',
 	'online'
 ]);
 
diff --git a/test/runtime/samples/window-binding-resize/_config.js b/test/runtime/samples/window-binding-resize/_config.js
index c99e92a07b..d7f0282147 100644
--- a/test/runtime/samples/window-binding-resize/_config.js
+++ b/test/runtime/samples/window-binding-resize/_config.js
@@ -1,5 +1,5 @@
 export default {
-	html: '<div>1024x768</div>',
+	html: '<div>1024x768</div><div>1</div>',
 
 	before_test() {
 		Object.defineProperties(window, {
@@ -10,6 +10,10 @@ export default {
 			innerHeight: {
 				value: 768,
 				configurable: true
+			},
+			devicePixelRatio: {
+				value: 1,
+				configurable: true
 			}
 		});
 	},
@@ -27,13 +31,17 @@ export default {
 			innerHeight: {
 				value: 456,
 				configurable: true
+			},
+			devicePixelRatio: {
+				value: 2,
+				configurable: true
 			}
 		});
 
 		await window.dispatchEvent(event);
 
 		assert.htmlEqual(target.innerHTML, `
-			<div>567x456</div>
+			<div>567x456</div><div>2</div>
 		`);
 	}
 };
diff --git a/test/runtime/samples/window-binding-resize/main.svelte b/test/runtime/samples/window-binding-resize/main.svelte
index 405f4e6e23..8ece184416 100644
--- a/test/runtime/samples/window-binding-resize/main.svelte
+++ b/test/runtime/samples/window-binding-resize/main.svelte
@@ -1,8 +1,10 @@
 <script>
 	export let width;
 	export let height;
+	export let devicePixelRatio;
 </script>
 
-<svelte:window bind:innerWidth={width} bind:innerHeight={height}/>
+<svelte:window bind:innerWidth={width} bind:innerHeight={height} bind:devicePixelRatio={devicePixelRatio}/>
 
-<div>{width}x{height}</div>
\ No newline at end of file
+<div>{width}x{height}</div>
+<div>{devicePixelRatio}</div>
diff --git a/test/validator/samples/window-binding-invalid/errors.json b/test/validator/samples/window-binding-invalid/errors.json
index 1277984258..04ecbaafcd 100644
--- a/test/validator/samples/window-binding-invalid/errors.json
+++ b/test/validator/samples/window-binding-invalid/errors.json
@@ -1,6 +1,6 @@
 [{
 	"code": "invalid-binding",
-	"message": "'potato' is not a valid binding on <svelte:window> — valid bindings are innerWidth, innerHeight, outerWidth, outerHeight, scrollX, scrollY or online",
+	"message": "'potato' is not a valid binding on <svelte:window> — valid bindings are innerWidth, innerHeight, outerWidth, outerHeight, scrollX, scrollY, devicePixelRatio or online",
 	"start": {
 		"line": 1,
 		"column": 15