diff --git a/src/generators/nodes/Component.ts b/src/generators/nodes/Component.ts index b7d0d54c54..f34be1afd7 100644 --- a/src/generators/nodes/Component.ts +++ b/src/generators/nodes/Component.ts @@ -338,7 +338,7 @@ export default class Component extends Node { this.handlers.forEach(handler => { handler.var = block.getUniqueName(`${this.var}_${handler.name}`); // TODO this is hacky - handler.render(compiler, block); + handler.render(compiler, block, false); // TODO hoist when possible if (handler.usesContext) block.maintainContext = true; // TODO is there a better place to put this? }); diff --git a/src/generators/nodes/Element.ts b/src/generators/nodes/Element.ts index 110bfef190..b47ecf54b4 100644 --- a/src/generators/nodes/Element.ts +++ b/src/generators/nodes/Element.ts @@ -577,19 +577,16 @@ export default class Element extends Node { this.handlers.forEach(handler => { const isCustomEvent = compiler.events.has(handler.name); - const shouldHoist = !isCustomEvent && this.hasAncestor('EachBlock'); - - const context = shouldHoist ? null : this.var; if (handler.callee) { - handler.render(this.compiler, block); + handler.render(this.compiler, block, handler.shouldHoist); } - const target = context || 'this'; + const target = handler.shouldHoist ? 'this' : this.var; // get a name for the event handler that is globally unique // if hoisted, locally unique otherwise - const handlerName = (shouldHoist ? compiler : block).getUniqueName( + const handlerName = (handler.shouldHoist ? compiler : block).getUniqueName( `${handler.name.replace(/[^a-zA-Z0-9_$]/g, '_')}_handler` ); @@ -627,7 +624,7 @@ export default class Element extends Node { } `; - if (shouldHoist) { + if (handler.shouldHoist) { compiler.blocks.push(handlerFunction); } else { block.builders.init.addBlock(handlerFunction); diff --git a/src/generators/nodes/EventHandler.ts b/src/generators/nodes/EventHandler.ts index 162c4c21a1..a733b65540 100644 --- a/src/generators/nodes/EventHandler.ts +++ b/src/generators/nodes/EventHandler.ts @@ -39,7 +39,7 @@ export default class EventHandler extends Node { return expression; }); - this.snippet = `[✂${info.expression.start}-${info.expression.end}✂]`; + this.snippet = `[✂${info.expression.start}-${info.expression.end}✂];`; } else { this.callee = null; this.insertionPoint = null; @@ -55,11 +55,11 @@ export default class EventHandler extends Node { this.shouldHoist = !this.isCustomEvent && parent.hasAncestor('EachBlock'); } - render(compiler, block) { + render(compiler, block, hoisted) { // TODO hoist more event handlers if (this.insertionPoint === null) return; // TODO handle shorthand events here? if (!validCalleeObjects.has(this.callee.name)) { - const component = this.shouldHoist ? `component` : block.alias(`component`); + const component = hoisted ? `component` : block.alias(`component`); // allow event.stopPropagation(), this.select() etc // TODO verify that it's a valid callee (i.e. built-in or declared method) diff --git a/src/generators/nodes/Window.ts b/src/generators/nodes/Window.ts index f57c8405b0..ff3358a5aa 100644 --- a/src/generators/nodes/Window.ts +++ b/src/generators/nodes/Window.ts @@ -71,7 +71,7 @@ export default class Window extends Node { let usesState = handler.dependencies.size > 0; - handler.render(compiler, block); + handler.render(compiler, block, false); // TODO hoist? const handlerName = block.getUniqueName(`onwindow${handler.name}`); const handlerBody = deindent`