Merge pull request #2260 from sveltejs/gh-2254

implement bind:online

src/compile/render-dom/wrappers/Window.ts

@@ -160,25 +160,30 @@ export default class WindowWrapper extends Wrapper {
 		// another special case. (I'm starting to think these are all special cases.)
 		if (bindings.online) {
 			const handler_name = block.get_unique_name(`onlinestatuschanged`);
-			block.builders.init.add_block(deindent`
+			const name = bindings.online;
-				function ${handler_name}(event) {
+
-					${component.compile_options.dev && `component._updatingReadonlyProperty = true;`}
+			component.add_var({
-					#component.set({ ${bindings.online}: navigator.onLine });
+				name: handler_name,
-					${component.compile_options.dev && `component._updatingReadonlyProperty = false;`}
+				internal: true,
+				referenced: true
+			});
+
+			component.partly_hoisted.push(deindent`
+				function ${handler_name}() {
+					${name} = navigator.onLine; $$invalidate('${name}', ${name});
 				}
-				window.addEventListener("online", ${handler_name});
-				window.addEventListener("offline", ${handler_name});
 			`);
 
-			// add initial value
+			block.builders.init.add_block(deindent`
-			renderer.meta_bindings.add_line(
+				@add_render_callback(ctx.${handler_name});
-				`this._state.${bindings.online} = navigator.onLine;`
+			`);
+
+			block.event_listeners.push(
+				`@listen(window, "online", ctx.${handler_name})`,
+				`@listen(window, "offline", ctx.${handler_name})`
 			);
 
-			block.builders.destroy.add_block(deindent`
+			component.has_reactive_assignments = true;
-				window.removeEventListener("online", ${handler_name});
-				window.removeEventListener("offline", ${handler_name});
-			`);
 		}
 	}
 }

test/js/samples/bind-online/expected.js

@@ -0,0 +1,53 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent as SvelteComponent_1,
+	add_render_callback,
+	init,
+	listen,
+	noop,
+	run_all,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	var dispose;
+
+	add_render_callback(ctx.onlinestatuschanged);
+
+	return {
+		c() {
+			dispose = [
+				listen(window, "online", ctx.onlinestatuschanged),
+				listen(window, "offline", ctx.onlinestatuschanged)
+			];
+		},
+
+		m: noop,
+		p: noop,
+		i: noop,
+		o: noop,
+
+		d(detaching) {
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let online;
+
+	function onlinestatuschanged() {
+		online = navigator.onLine; $$invalidate('online', online);
+	}
+
+	return { online, onlinestatuschanged };
+}
+
+class SvelteComponent extends SvelteComponent_1 {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, []);
+	}
+}
+
+export default SvelteComponent;

test/js/samples/bind-online/input.svelte

@@ -0,0 +1,5 @@
+<script>
+	let online;
+</script>
+
+<svelte:window bind:online/>