fix <svelte:window> to use new APIs

src/generators/nodes/Window.ts

@@ -172,41 +172,23 @@ export default class Window extends Node {
 		});
 
 		// special case... might need to abstract this out if we add more special cases
-		if (bindings.scrollX && bindings.scrollY) {
-			const observerCallback = block.getUniqueName(`scrollobserver`);
-
+		if (bindings.scrollX || bindings.scrollY) {
 			block.builders.init.addBlock(deindent`
-				function ${observerCallback}() {
-					${lock} = true;
-					clearTimeout(${timeout});
-					var x = ${bindings.scrollX
-						? `#component.get("${bindings.scrollX}")`
-						: `window.pageXOffset`};
-					var y = ${bindings.scrollY
-						? `#component.get("${bindings.scrollY}")`
-						: `window.pageYOffset`};
-					window.scrollTo(x, y);
-					${timeout} = setTimeout(${clear}, 100);
-				}
-			`);
-
-			if (bindings.scrollX)
-				block.builders.init.addLine(
-					`#component.observe("${bindings.scrollX}", ${observerCallback});`
-				);
-			if (bindings.scrollY)
-				block.builders.init.addLine(
-					`#component.observe("${bindings.scrollY}", ${observerCallback});`
-				);
-		} else if (bindings.scrollX || bindings.scrollY) {
-			const isX = !!bindings.scrollX;
-
-			block.builders.init.addBlock(deindent`
-				#component.observe("${bindings.scrollX || bindings.scrollY}", function(${isX ? 'x' : 'y'}) {
-					${lock} = true;
-					clearTimeout(${timeout});
-					window.scrollTo(${isX ? 'x, window.pageYOffset' : 'window.pageXOffset, y'});
-					${timeout} = setTimeout(${clear}, 100);
+				#component.on("state", ({ changed, current }) => {
+					if (${
+						[bindings.scrollX, bindings.scrollY].map(
+							binding => binding && `changed["${binding}"]`
+						).filter(Boolean).join(' || ')
+					}) {
+						${lock} = true;
+						clearTimeout(${timeout});
+						window.scrollTo(${
+							bindings.scrollX ? `current["${bindings.scrollX}"]` : `window.pageXOffset`
+						}, ${
+							bindings.scrollY ? `current["${bindings.scrollY}"]` : `window.pageYOffset`
+						});
+						${timeout} = setTimeout(${clear}, 100);
+					}
 				});
 			`);
 		}

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

@@ -156,11 +156,13 @@ function create_main_fragment(component, state) {
 	}
 	window.addEventListener("scroll", onwindowscroll);
 
-	component.observe("y", function(y) {
-		window_updating = true;
-		clearTimeout(window_updating_timeout);
-		window.scrollTo(window.pageXOffset, y);
-		window_updating_timeout = setTimeout(clear_window_updating, 100);
+	component.on("state", ({ changed, current }) => {
+		if (changed["y"]) {
+			window_updating = true;
+			clearTimeout(window_updating_timeout);
+			window.scrollTo(window.pageXOffset, current["y"]);
+			window_updating_timeout = setTimeout(clear_window_updating, 100);
+		}
 	});
 
 	return {

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

@@ -15,11 +15,13 @@ function create_main_fragment(component, state) {
 	}
 	window.addEventListener("scroll", onwindowscroll);
 
-	component.observe("y", function(y) {
-		window_updating = true;
-		clearTimeout(window_updating_timeout);
-		window.scrollTo(window.pageXOffset, y);
-		window_updating_timeout = setTimeout(clear_window_updating, 100);
+	component.on("state", ({ changed, current }) => {
+		if (changed["y"]) {
+			window_updating = true;
+			clearTimeout(window_updating_timeout);
+			window.scrollTo(window.pageXOffset, current["y"]);
+			window_updating_timeout = setTimeout(clear_window_updating, 100);
+		}
 	});
 
 	return {