diff --git a/src/compile/Component.ts b/src/compile/Component.ts index 8a9169a564..0f3602fa13 100644 --- a/src/compile/Component.ts +++ b/src/compile/Component.ts @@ -124,12 +124,6 @@ export default class Component { throw new Error(`No tag name specified`); // TODO better error } - this.fragment = new Fragment(this, ast.html); - // this.walkTemplate(); - if (!this.customElement) this.stylesheet.reify(); - - this.stylesheet.warnOnUnusedSelectors(options.onwarn); - if (!this.ast.js) { this.declarations = Array.from(this.expectedProperties); addToSet(this.writable_declarations, this.expectedProperties); @@ -139,6 +133,12 @@ export default class Component { as: name })); } + + this.fragment = new Fragment(this, ast.html); + // this.walkTemplate(); + if (!this.customElement) this.stylesheet.reify(); + + this.stylesheet.warnOnUnusedSelectors(options.onwarn); } addSourcemapLocations(node: Node) { diff --git a/src/compile/nodes/EventHandler.ts b/src/compile/nodes/EventHandler.ts index 46f8f7ab5d..04163d8d28 100644 --- a/src/compile/nodes/EventHandler.ts +++ b/src/compile/nodes/EventHandler.ts @@ -4,6 +4,7 @@ import flattenReference from '../../utils/flattenReference'; import { createScopes } from '../../utils/annotateWithScopes'; import { walk } from 'estree-walker'; import Component from '../Component'; +import deindent from '../../utils/deindent'; export default class EventHandler extends Node { name: string; @@ -33,7 +34,17 @@ export default class EventHandler extends Node { this.usesContext = this.expression.usesContext; } else { component.init_uses_self = true; - this.snippet = `e => @bubble($$self, e)` + + const name = component.getUniqueName(`${this.name}_handler`); + component.declarations.push(name); + + component.partly_hoisted.push(deindent` + function ${name}(event) { + @bubble($$self, event); + } + `); + + this.snippet = `ctx.${name}`; } // TODO figure out what to do about custom events diff --git a/src/compile/render-dom/wrappers/InlineComponent/index.ts b/src/compile/render-dom/wrappers/InlineComponent/index.ts index abbf3143b9..8e34346351 100644 --- a/src/compile/render-dom/wrappers/InlineComponent/index.ts +++ b/src/compile/render-dom/wrappers/InlineComponent/index.ts @@ -256,7 +256,7 @@ export default class InlineComponentWrapper extends Wrapper { } const munged_handlers = this.node.handlers.map(handler => { - return `${name}.$on("${handler.name}", ${handler.snippet})`; + return `${name}.$on("${handler.name}", ${handler.snippet});`; }); if (this.node.name === 'svelte:component') {