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

@@ -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;

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.
 

src/compiler/compile/nodes/Window.ts

@@ -17,6 +17,7 @@ const valid_bindings = [
 	'outerHeight',
 	'scrollX',
 	'scrollY',
+	'devicePixelRatio',
 	'online'
 ];
 

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'
 ]);
 

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>
 		`);
 	}
 };

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>
+<div>{width}x{height}</div>
+<div>{devicePixelRatio}</div>

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