diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts index 2e2568d156..55951c961f 100644 --- a/src/compiler/compile/render_dom/Block.ts +++ b/src/compiler/compile/render_dom/Block.ts @@ -59,7 +59,7 @@ export default class Block { destroy: Array; }; - event_updaters: ({condition:Expression, snippet:Node, index:number})[] = []; + event_updaters: ({condition:Expression, index:number})[] = []; event_listeners: Node[] = []; maintain_context: boolean; @@ -484,12 +484,9 @@ export default class Block { ); if (this.event_updaters.length === 1) { - const {condition, snippet} = this.event_updaters[0]; + const {condition} = this.event_updaters[0]; this.chunks.update.push(b` - if (${condition}) { - ${dispose}.swap(${snippet}) - }` - ); + if (${condition}) ${dispose}.p()`); } this.chunks.destroy.push( @@ -505,12 +502,8 @@ export default class Block { } `); - for (const {condition, snippet, index} of this.event_updaters) { - this.chunks.update.push(b` - if (${condition}) { - ${dispose}[${index}].swap(${snippet}) - }` - ); + for (const {condition, index} of this.event_updaters) { + this.chunks.update.push(b` if (${condition}) ${dispose}[${index}].p()`); } this.chunks.destroy.push( diff --git a/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts index 99488ad850..cd313e4c1a 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts @@ -69,9 +69,9 @@ export default class EventHandlerWrapper { const index = block.event_listeners.length; const condition = block.renderer.dirty(this.node.expression.dynamic_dependencies()); - block.event_updaters.push({condition, snippet, index}); + block.event_updaters.push({condition, index}); block.event_listeners.push( - x`@listen_swap(${snippet}, (h)=> ${listen}(${target}, "${this.node.name}", h, ${args}))` + x`@listen_and_update( () => (${snippet}), (h) => ${listen}(${target}, "${this.node.name}", h, ${args}))` ); } else { block.event_listeners.push( diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index abdc28d8ec..5172221f8b 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -273,16 +273,19 @@ export function listen(node: EventTarget, event: string, handler: EventListenerO return noop; } -export function listen_swap(handler: EventListenerOrEventListenerObject|null|undefined|false, factory: (handler:EventListenerOrEventListenerObject|null|undefined|false) => Function) { - let disposeHandle: Function = factory(handler); +export function listen_and_update(get_handler: ()=>EventListenerOrEventListenerObject|null|undefined|false, factory: (handler:EventListenerOrEventListenerObject|null|undefined|false) => Function) { + let handler = get_handler(); + let dispose_handle: Function = factory(handler); const dispose = () => { - disposeHandle(); + dispose_handle(); } - dispose.swap = (new_handler:EventListenerOrEventListenerObject) => { + // update : + dispose.p = () => { + const new_handler = get_handler(); if (new_handler !== handler) { - disposeHandle(); + dispose_handle(); handler = new_handler; - disposeHandle = factory(handler); + dispose_handle = factory(handler); } } return dispose;