use listen helper for <svelte:body> events (#4278)

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

@@ -1,26 +1,23 @@
 import Block from '../Block';
 import Wrapper from './shared/Wrapper';
-import { b } from 'code-red';
+import { x } from 'code-red';
 import Body from '../../nodes/Body';
 import { Identifier } from 'estree';
 import EventHandler from './Element/EventHandler';
+import add_event_handlers from './shared/add_event_handlers';
+import { TemplateNode } from '../../../interfaces';
+import Renderer from '../Renderer';
 
 export default class BodyWrapper extends Wrapper {
 	node: Body;
+	handlers: EventHandler[];
 
-	render(block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
-		this.node.handlers
-			.map(handler => new EventHandler(handler, this))
-			.forEach(handler => {
-				const snippet = handler.get_snippet(block);
-
-				block.chunks.init.push(b`
-					@_document.body.addEventListener("${handler.node.name}", ${snippet});
-				`);
+	constructor(renderer: Renderer, block: Block, parent: Wrapper, node: TemplateNode) {
+		super(renderer, block, parent, node);
+		this.handlers = this.node.handlers.map(handler => new EventHandler(handler, this));
+	}
 
-				block.chunks.destroy.push(b`
-					@_document.body.removeEventListener("${handler.node.name}", ${snippet});
-				`);
-			});
+	render(block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
+		add_event_handlers(block, x`@_document.body`, this.handlers);
 	}
 }

src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts

@@ -2,6 +2,7 @@ import EventHandler from '../../../nodes/EventHandler';
 import Wrapper from '../shared/Wrapper';
 import Block from '../../Block';
 import { b, x, p } from 'code-red';
+import { Expression } from 'estree';
 
 const TRUE = x`true`;
 const FALSE = x`false`;
@@ -35,7 +36,7 @@ export default class EventHandlerWrapper {
 		return snippet;
 	}
 
-	render(block: Block, target: string) {
+	render(block: Block, target: string | Expression) {
 		let snippet = this.get_snippet(block);
 
 		if (this.node.modifiers.has('preventDefault')) snippet = x`@prevent_default(${snippet})`;

src/compiler/compile/render_dom/wrappers/shared/add_event_handlers.ts

@@ -1,9 +1,10 @@
 import Block from '../../Block';
 import EventHandler from '../Element/EventHandler';
+import { Expression } from 'estree';
 
 export default function add_event_handlers(
 	block: Block,
-	target: string,
+	target: string | Expression,
 	handlers: EventHandler[]
 ) {
 	handlers.forEach(handler => add_event_handler(block, target, handler));
@@ -11,7 +12,7 @@ export default function add_event_handlers(
 
 export function add_event_handler(
 	block: Block,
-	target: string,
+	target: string | Expression,
 	handler: EventHandler
 ) {
 	handler.render(block, target);