From 0c8cb44d01d3908e4471ceb94dd9c79dccf8f725 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Sun, 3 Nov 2019 20:50:57 +0800
Subject: [PATCH] fix window bindings to store (#3835)

Fixes #3832
---
 .../compile/render_dom/wrappers/Window.ts     |  4 +--
 test/helpers.js                               |  1 +
 .../samples/window-binding-scroll/expected.js |  2 +-
 .../window-binding-scroll-store/_config.js    | 31 +++++++++++++++++++
 .../window-binding-scroll-store/main.svelte   | 15 +++++++++
 5 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 test/runtime/samples/window-binding-scroll-store/_config.js
 create mode 100644 test/runtime/samples/window-binding-scroll-store/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Window.ts b/src/compiler/compile/render_dom/wrappers/Window.ts
index 90846f8a7c..b9a32c03fd 100644
--- a/src/compiler/compile/render_dom/wrappers/Window.ts
+++ b/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`)}
 				}
 			`);
 
diff --git a/test/helpers.js b/test/helpers.js
index 6ac20eed8b..5a2d1403f0 100644
--- a/test/helpers.js
+++ b/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)) {
diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js
index 87f31505d7..4cd784e2bf 100644
--- a/test/js/samples/window-binding-scroll/expected.js
+++ b/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 => {
diff --git a/test/runtime/samples/window-binding-scroll-store/_config.js b/test/runtime/samples/window-binding-scroll-store/_config.js
new file mode 100644
index 0000000000..abddb86765
--- /dev/null
+++ b/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,
+			},
+		});
+	},
+};
diff --git a/test/runtime/samples/window-binding-scroll-store/main.svelte b/test/runtime/samples/window-binding-scroll-store/main.svelte
new file mode 100644
index 0000000000..fe225520d7
--- /dev/null
+++ b/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>
\ No newline at end of file