diff --git a/src/compile/render-dom/wrappers/Window.ts b/src/compile/render-dom/wrappers/Window.ts
index cd5e27d750..2b58153d95 100644
--- a/src/compile/render-dom/wrappers/Window.ts
+++ b/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`
- function ${handler_name}(event) {
- ${component.compile_options.dev && `component._updatingReadonlyProperty = true;`}
- #component.set({ ${bindings.online}: navigator.onLine });
- ${component.compile_options.dev && `component._updatingReadonlyProperty = false;`}
+ const name = bindings.online;
+
+ component.add_var({
+ name: handler_name,
+ 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
- renderer.meta_bindings.add_line(
- `this._state.${bindings.online} = navigator.onLine;`
+ block.builders.init.add_block(deindent`
+ @add_render_callback(ctx.${handler_name});
+ `);
+
+ block.event_listeners.push(
+ `@listen(window, "online", ctx.${handler_name})`,
+ `@listen(window, "offline", ctx.${handler_name})`
);
- block.builders.destroy.add_block(deindent`
- window.removeEventListener("online", ${handler_name});
- window.removeEventListener("offline", ${handler_name});
- `);
+ component.has_reactive_assignments = true;
}
}
}
diff --git a/test/js/samples/bind-online/expected.js b/test/js/samples/bind-online/expected.js
new file mode 100644
index 0000000000..fa38562412
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/test/js/samples/bind-online/input.svelte b/test/js/samples/bind-online/input.svelte
new file mode 100644
index 0000000000..99aa93b12d
--- /dev/null
+++ b/test/js/samples/bind-online/input.svelte
@@ -0,0 +1,5 @@
+
+
+
\ No newline at end of file