use hoisting mechanism for components

src/compile/render-dom/wrappers/Element/index.ts

@@ -633,35 +633,10 @@ export default class ElementWrapper extends Wrapper {
 		const { component } = renderer;
 
 		this.node.handlers.forEach(handler => {
-			const { isCustomEvent } = handler;
-
-			// get a name for the event handler that is globally unique
-			const handler_name = component.getUniqueName(
-				`${handler.name.replace(/[^a-zA-Z0-9_$]/g, '_')}_handler`
-			);
-
-			const component_name = block.alias('component'); // can't use #component, might be hoisted
-
-			if (isCustomEvent) {
-				throw new Error(`TODO figure out custom events`);
-				block.addVariable(handler_name);
-
-				block.builders.hydrate.addBlock(deindent`
-					${handler_name} = ctx.${handler.name}.call(${component_name}, ${this.var}, function(event) {
-						${handler.snippet}
-					});
-				`);
-
-				block.builders.destroy.addLine(deindent`
-					${handler_name}.destroy();
-				`);
-			} else {
 			const modifiers = [];
 			if (handler.modifiers.has('preventDefault')) modifiers.push('event.preventDefault();');
 			if (handler.modifiers.has('stopPropagation')) modifiers.push('event.stopPropagation();');
 
-				let name = handler.expression.snippet;
-
 			const opts = ['passive', 'once', 'capture'].filter(mod => handler.modifiers.has(mod));
 			if (opts.length) {
 				const optString = (opts.length === 1 && opts[0] === 'capture')
@@ -669,26 +644,27 @@ export default class ElementWrapper extends Wrapper {
 					: `{ ${opts.map(opt => `${opt}: true`).join(', ')} }`;
 
 				block.builders.hydrate.addLine(
-						`@addListener(${this.var}, "${handler.name}", ${name}, ${optString});`
+					`@addListener(${this.var}, "${handler.name}", ${handler.snippet}, ${optString});`
 				);
 
 				block.builders.destroy.addLine(
-						`@removeListener(${this.var}, "${handler.name}", ${name}, ${optString});`
+					`@removeListener(${this.var}, "${handler.name}", ${handler.snippet}, ${optString});`
 				);
 			} else {
 				block.builders.hydrate.addLine(
-						`@addListener(${this.var}, "${handler.name}", ${name});`
+					`@addListener(${this.var}, "${handler.name}", ${handler.snippet});`
 				);
 
 				block.builders.destroy.addLine(
-						`@removeListener(${this.var}, "${handler.name}", ${name});`
+					`@removeListener(${this.var}, "${handler.name}", ${handler.snippet});`
 				);
 			}
-			}
 
+			if (handler.expression) {
 				handler.expression.declarations.forEach(declaration => {
 					block.builders.init.addBlock(declaration);
 				});
+			}
 		});
 	}
 

src/compile/render-dom/wrappers/InlineComponent/index.ts

@@ -256,41 +256,7 @@ export default class InlineComponentWrapper extends Wrapper {
 		}
 
 		const munged_handlers = this.node.handlers.map(handler => {
-			let { snippet } = handler;
+			return `${name}.$on("${handler.name}", ${handler.snippet})`;
-
-			// get a name for the event handler that is globally unique
-			const handler_name = component.getUniqueName(
-				`${handler.name.replace(/[^a-zA-Z0-9_$]/g, '_')}_handler`
-			);
-			component.declarations.push(handler_name);
-
-			if (handler.expression && handler.expression.contextual_dependencies.size > 0) {
-				block.maintainContext = true; // TODO is there a better place to put this?
-
-				const deps = Array.from(handler.expression.contextual_dependencies);
-
-				component.partly_hoisted.push(deindent`
-					function ${handler_name}(event, { ${deps.join(', ')} }) {
-						(${snippet})(event);
-					}
-				`);
-
-				block.builders.init.addBlock(deindent`
-					function ${handler.name}(event) {
-						ctx.${handler_name}.call(this, event, ctx);
-					}
-				`);
-
-				return `${name}.$on("${handler.name}", ${handler_name})`;
-			}
-
-			component.partly_hoisted.push(deindent`
-				function ${handler_name}(event) {
-					(${snippet})(event);
-				}
-			`);
-
-			return `${name}.$on("${handler.name}", ctx.${handler_name})`;
 		});
 
 		if (this.node.name === 'svelte:component') {