fix window bindings to store (#3835)

Fixes #3832

Author: tanhauhau

src/compiler/compile/render_dom/wrappers/Window.ts

@@ -127,7 +127,7 @@ export default class WindowWrapper extends Wrapper {
 
 			component.partly_hoisted.push(b`
 				function ${id}() {
-					${props.map(prop => b`$$invalidate('${prop.name}', ${prop.name} = @_window.${prop.value});`)}
+					${props.map(prop => component.invalidate(prop.name, x`${prop.name} = @_window.${prop.value}`))}
 				}
 			`);
 
@@ -167,7 +167,7 @@ export default class WindowWrapper extends Wrapper {
 
 			component.partly_hoisted.push(b`
 				function ${id}() {
-					$$invalidate('${name}', ${name} = @_navigator.onLine);
+					${component.invalidate(name, x`${name} = @_navigator.onLine`)}
 				}
 			`);
 

test/helpers.js

@@ -52,6 +52,7 @@ global.document = window.document;
 global.navigator = window.navigator;
 global.getComputedStyle = window.getComputedStyle;
 global.requestAnimationFrame = null; // placeholder, filled in using set_raf
+global.window = window;
 
 // add missing ecmascript globals to window
 for (const key of Object.getOwnPropertyNames(global)) {

test/js/samples/window-binding-scroll/expected.js

@@ -68,7 +68,7 @@ function instance($$self, $$props, $$invalidate) {
 	let { y } = $$props;
 
 	function onwindowscroll() {
-		$$invalidate("y", y = window.pageYOffset);
+		$$invalidate("y", y = window.pageYOffset)
 	}
 
 	$$self.$set = $$props => {

test/runtime/samples/window-binding-scroll-store/_config.js

@@ -0,0 +1,31 @@
+export default {
+	skip_if_ssr: true,
+
+	async test({ assert, component, target, window }) {
+		assert.equal(window.pageYOffset, 0);
+
+		const event = new window.Event('scroll');
+		Object.defineProperties(window, {
+			pageYOffset: {
+				value: 234,
+				configurable: true,
+			},
+		});
+
+		await window.dispatchEvent(event);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<p style="position: fixed; top: 1em; left: 1em;">scroll\ny\nis\n234.\n234\n*\n234\n=\n54756</p><div style="height: 9999px;"></div>`
+		);
+	},
+
+	after_test() {
+		Object.defineProperties(window, {
+			pageYOffset: {
+				value: 0,
+				configurable: true,
+			},
+		});
+	},
+};

test/runtime/samples/window-binding-scroll-store/main.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { writable, derived } from 'svelte/store';
+	const y = writable(0);
+	const y_squared = derived(y, $y => $y * $y);
+</script>
+
+<svelte:window bind:scrollY={$y}/>
+
+<p style="position: fixed; top: 1em; left: 1em;">
+	scroll y is {$y}. {$y} * {$y} = {$y_squared}
+</p>
+
+<div style="height: 9999px">
+	
+</div>