diff --git a/doc/learning/tutorial_todoapp.md b/doc/learning/tutorial_todoapp.md index 4e33fcc6..fa87cf32 100644 --- a/doc/learning/tutorial_todoapp.md +++ b/doc/learning/tutorial_todoapp.md @@ -663,7 +663,7 @@ function makeStore() { function setup() { owl.config.mode = "dev"; - const env = {store: makeStore()}; + const env = { store: makeStore() }; mount(App, { target: document.body, env }); } ``` @@ -939,7 +939,7 @@ For reference, here is the final code: function setup() { owl.config.mode = "dev"; - const env = {store: makeStore()}; + const env = { store: makeStore() }; mount(App, { target: document.body, env }); } diff --git a/src/qweb/extensions.ts b/src/qweb/extensions.ts index f771e34f..cea02edb 100644 --- a/src/qweb/extensions.ts +++ b/src/qweb/extensions.ts @@ -76,7 +76,7 @@ export function makeHandlerCode( code = ctx.captureExpression(value); } const modCode = mods.map((mod) => modcodes[mod]).join(""); - let handler = `function (e) {if (!context.__owl__.isMounted){return}${modCode}${code}}`; + let handler = `function (e) {if (context.__owl__.isDestroyed){return}${modCode}${code}}`; if (putInCache) { const key = ctx.generateTemplateKey(event); ctx.addLine(`extra.handlers[${key}] = extra.handlers[${key}] || ${handler};`); diff --git a/tests/component/__snapshots__/component.test.ts.snap b/tests/component/__snapshots__/component.test.ts.snap index 005fc67b..7eee873e 100644 --- a/tests/component/__snapshots__/component.test.ts.snap +++ b/tests/component/__snapshots__/component.test.ts.snap @@ -444,7 +444,7 @@ exports[`composition t-ref on a node, and t-on-click 2`] = ` if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); parent.__owl__.cmap['__3__'] = w2.__owl__.id; - let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('click', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);});}});}); + let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('click', function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['doSomething'](e);});}});}); let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; @@ -579,7 +579,7 @@ exports[`other directives with t-component t-on expression captured in t-foreach c6.push(vn7); const otherState_8 = scope['otherState']; const iter_8 = scope.iter; - p7.on['click'] = function (e) {if (!context.__owl__.isMounted){return}otherState_8.vals.push(iter_8+'_'+iter_8)}; + p7.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}otherState_8.vals.push(iter_8+'_'+iter_8)}; c7.push({text: \`expr\`}); utils.getScope(scope, 'iter').iter = scope.iter+1; } @@ -630,7 +630,7 @@ exports[`other directives with t-component t-on expression in t-foreach 1`] = ` c6.push(vn9); const otherState_10 = scope['otherState']; const val_10 = scope['val']; - p9.on['click'] = function (e) {if (!context.__owl__.isMounted){return}otherState_10.vals.push(val_10)}; + p9.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}otherState_10.vals.push(val_10)}; c9.push({text: \`Expr\`}); } scope = _origScope5; @@ -684,7 +684,7 @@ exports[`other directives with t-component t-on expression in t-foreach with t-s const otherState_10 = scope['otherState']; const val_10 = scope['val']; const bossa_10 = scope.bossa; - p9.on['click'] = function (e) {if (!context.__owl__.isMounted){return}otherState_10.vals.push(val_10+'_'+bossa_10)}; + p9.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}otherState_10.vals.push(val_10+'_'+bossa_10)}; c9.push({text: \`Expr\`}); } scope = _origScope5; @@ -734,7 +734,7 @@ exports[`other directives with t-component t-on method call in t-foreach 1`] = ` let vn9 = h('button', p9, c9); c6.push(vn9); let args10 = [scope['val']]; - p9.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['addVal'](...args10, e);}; + p9.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['addVal'](...args10, e);}; c9.push({text: \`meth call\`}); } scope = _origScope5; @@ -770,7 +770,7 @@ exports[`other directives with t-component t-on with .capture modifier 1`] = ` if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); parent.__owl__.cmap['__3__'] = w2.__owl__.id; - let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('click', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['capture'](e);}, true);}});}); + let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('click', function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['capture'](e);}, true);}});}); let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; @@ -812,7 +812,7 @@ exports[`other directives with t-component t-on with getter as handler 1`] = ` if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')} w3 = new W3(parent, props3); parent.__owl__.cmap['__4__'] = w3.__owl__.id; - let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['handler'](e);});}});}); + let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['handler'](e);});}});}); let pvnode = h('dummy', {key: '__4__', hook: {remove() {},destroy(vn) {w3.destroy();}}}); c1.push(pvnode); w3.__owl__.pvnode = pvnode; @@ -851,7 +851,7 @@ exports[`other directives with t-component t-on with handler bound to argument 1 if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); parent.__owl__.cmap['__3__'] = w2.__owl__.id; - let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv'](...args4, e);});}});}); + let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['onEv'](...args4, e);});}});}); let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; @@ -890,7 +890,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); parent.__owl__.cmap['__3__'] = w2.__owl__.id; - let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv'](...args4, e);});}});}); + let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['onEv'](...args4, e);});}});}); let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; @@ -929,7 +929,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); parent.__owl__.cmap['__3__'] = w2.__owl__.id; - let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv'](...args4, e);});}});}); + let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['onEv'](...args4, e);});}});}); let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; @@ -968,7 +968,7 @@ exports[`other directives with t-component t-on with handler bound to object 1`] if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); parent.__owl__.cmap['__3__'] = w2.__owl__.id; - let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv'](...args4, e);});}});}); + let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['onEv'](...args4, e);});}});}); let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; @@ -1011,7 +1011,7 @@ exports[`other directives with t-component t-on with inline statement 1`] = ` if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')} w3 = new W3(parent, props3); parent.__owl__.cmap['__4__'] = w3.__owl__.id; - let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}state_5.counter++});}});}); + let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (context.__owl__.isDestroyed){return}state_5.counter++});}});}); let pvnode = h('dummy', {key: '__4__', hook: {remove() {},destroy(vn) {w3.destroy();}}}); c1.push(pvnode); w3.__owl__.pvnode = pvnode; @@ -1049,7 +1049,7 @@ exports[`other directives with t-component t-on with no handler (only modifiers) if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); parent.__owl__.cmap['__3__'] = w2.__owl__.id; - let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv'](e);});}});}); + let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['onEv'](e);});}});}); let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; @@ -1087,7 +1087,7 @@ exports[`other directives with t-component t-on with prevent and self modifiers if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); parent.__owl__.cmap['__3__'] = w2.__owl__.id; - let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();if (e.target !== vn.elm) {return}utils.getComponent(context)['onEv'](e);});}});}); + let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (context.__owl__.isDestroyed){return}e.preventDefault();if (e.target !== vn.elm) {return}utils.getComponent(context)['onEv'](e);});}});}); let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; @@ -1125,7 +1125,7 @@ exports[`other directives with t-component t-on with self and prevent modifiers if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); parent.__owl__.cmap['__3__'] = w2.__owl__.id; - let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}if (e.target !== vn.elm) {return}e.preventDefault();utils.getComponent(context)['onEv'](e);});}});}); + let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (context.__owl__.isDestroyed){return}if (e.target !== vn.elm) {return}e.preventDefault();utils.getComponent(context)['onEv'](e);});}});}); let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; @@ -1163,7 +1163,7 @@ exports[`other directives with t-component t-on with self modifier 1`] = ` if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); parent.__owl__.cmap['__3__'] = w2.__owl__.id; - let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv1'](e);});vn.elm.addEventListener('ev-2', function (e) {if (!context.__owl__.isMounted){return}if (e.target !== vn.elm) {return}utils.getComponent(context)['onEv2'](e);});}});}); + let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['onEv1'](e);});vn.elm.addEventListener('ev-2', function (e) {if (context.__owl__.isDestroyed){return}if (e.target !== vn.elm) {return}utils.getComponent(context)['onEv2'](e);});}});}); let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; @@ -1201,7 +1201,7 @@ exports[`other directives with t-component t-on with stop and/or prevent modifie if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); parent.__owl__.cmap['__3__'] = w2.__owl__.id; - let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if (!context.__owl__.isMounted){return}e.stopPropagation();utils.getComponent(context)['onEv1'](e);});vn.elm.addEventListener('ev-2', function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();utils.getComponent(context)['onEv2'](e);});vn.elm.addEventListener('ev-3', function (e) {if (!context.__owl__.isMounted){return}e.stopPropagation();e.preventDefault();utils.getComponent(context)['onEv3'](e);});}});}); + let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if (context.__owl__.isDestroyed){return}e.stopPropagation();utils.getComponent(context)['onEv1'](e);});vn.elm.addEventListener('ev-2', function (e) {if (context.__owl__.isDestroyed){return}e.preventDefault();utils.getComponent(context)['onEv2'](e);});vn.elm.addEventListener('ev-3', function (e) {if (context.__owl__.isDestroyed){return}e.stopPropagation();e.preventDefault();utils.getComponent(context)['onEv3'](e);});}});}); let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; @@ -1555,7 +1555,7 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument if (!W6) {throw new Error('Cannot find the definition of component \\"' + componentKey6 + '\\"')} w6 = new W6(parent, props6); parent.__owl__.cmap[k7] = w6.__owl__.id; - let fiber = w6.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onEv'](...args8, e);});}});}); + let fiber = w6.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.addEventListener('ev', function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['onEv'](...args8, e);});}});}); let pvnode = h('dummy', {key: k7, hook: {remove() {},destroy(vn) {w6.destroy();}}}); c1.push(pvnode); w6.__owl__.pvnode = pvnode; @@ -1580,7 +1580,7 @@ exports[`t-call handlers are properly bound through a t-call 1`] = ` let vn3 = h('p', p3, c3); c2.push(vn3); let k4 = \`click__4__\${key0}__\`; - extra.handlers[k4] = extra.handlers[k4] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](e);}; + extra.handlers[k4] = extra.handlers[k4] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['update'](e);}; p3.on['click'] = extra.handlers[k4]; c3.push({text: \`lucas\`}); }" @@ -1599,7 +1599,7 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`] let vn3 = h('p', p3, c3); c2.push(vn3); let args4 = [scope['a']]; - p3.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](...args4, e);}; + p3.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['update'](...args4, e);}; c3.push({text: \`lucas\`}); }" `; diff --git a/tests/component/__snapshots__/slots.test.ts.snap b/tests/component/__snapshots__/slots.test.ts.snap index 932eb179..118ac0f2 100644 --- a/tests/component/__snapshots__/slots.test.ts.snap +++ b/tests/component/__snapshots__/slots.test.ts.snap @@ -229,7 +229,7 @@ exports[`t-slot directive dynamic t-slot call 1`] = ` let h = this.h; let c10 = [], p10 = {key:10,on:{}}; let vn10 = h('button', p10, c10); - extra.handlers['click__11__'] = extra.handlers['click__11__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['toggle'](e);}; + extra.handlers['click__11__'] = extra.handlers['click__11__'] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['toggle'](e);}; p10.on['click'] = extra.handlers['click__11__']; const slot12 = this.constructor.slots[context.__owl__.slotId + '_' + (scope['current'].slot)]; if (slot12) { @@ -301,7 +301,7 @@ exports[`t-slot directive refs are properly bound in slots 1`] = ` let c9 = [], p9 = {key:9,on:{}}; let vn9 = h('button', p9, c9); c8.push(vn9); - extra.handlers['click__10__'] = extra.handlers['click__10__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);}; + extra.handlers['click__10__'] = extra.handlers['click__10__'] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['doSomething'](e);}; p9.on['click'] = extra.handlers['click__10__']; const ref11 = \`myButton\`; p9.hook = { @@ -326,7 +326,7 @@ exports[`t-slot directive slots are rendered with proper context 1`] = ` let c9 = [], p9 = {key:9,on:{}}; let vn9 = h('button', p9, c9); c8.push(vn9); - extra.handlers['click__10__'] = extra.handlers['click__10__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);}; + extra.handlers['click__10__'] = extra.handlers['click__10__'] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['doSomething'](e);}; p9.on['click'] = extra.handlers['click__10__']; c9.push({text: \`do something\`}); }" diff --git a/tests/component/component.test.ts b/tests/component/component.test.ts index f7cdf8af..33a03420 100644 --- a/tests/component/component.test.ts +++ b/tests/component/component.test.ts @@ -163,7 +163,7 @@ describe("basic widget properties", () => { expect(fixture.innerHTML).toBe("
"); }); - test("cannot be clicked on and updated if not in DOM", async () => { + test("can be clicked on and updated if not in DOM", async () => { class Counter extends Component { static template = xml`
`; @@ -178,8 +178,8 @@ describe("basic widget properties", () => { const button = (counter.el).getElementsByTagName("button")[0]; button.click(); await nextTick(); - expect(target.innerHTML).toBe("
0
"); - expect(counter.state.counter).toBe(0); + expect(target.innerHTML).toBe("
1
"); + expect(counter.state.counter).toBe(1); }); test("widget style and classname", async () => { @@ -2292,7 +2292,27 @@ describe("other directives with t-component", () => { parent.unmount(); expect(child.__owl__.isMounted).toBe(false); el.click(); - expect(steps).toEqual(["click"]); + expect(steps).toEqual(["click", "click"]); + }); + + test("triggering custom event on mounted components", async () => { + let value = false; + class Child extends Component { + static template = xml`
`; + mounted() { + this.trigger("coucou"); + } + } + class Parent extends Component { + static template = xml``; + static components = { Child }; + doSomething() { + value = true; + } + } + const parent = new Parent(); + await parent.mount(fixture); + expect(value).toBe(true); }); test("t-on with .capture modifier", async () => { diff --git a/tests/qweb/__snapshots__/qweb.test.ts.snap b/tests/qweb/__snapshots__/qweb.test.ts.snap index 8016dd76..7616d16c 100644 --- a/tests/qweb/__snapshots__/qweb.test.ts.snap +++ b/tests/qweb/__snapshots__/qweb.test.ts.snap @@ -2727,7 +2727,7 @@ exports[`t-on can bind event handler 1`] = ` let h = this.h; let c1 = [], p1 = {key:1,on:{}}; let vn1 = h('button', p1, c1); - extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['add'](e);}; + extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['add'](e);}; p1.on['click'] = extra.handlers['click__2__']; c1.push({text: \`Click\`}); return vn1; @@ -2744,7 +2744,7 @@ exports[`t-on can bind handlers with arguments 1`] = ` let c1 = [], p1 = {key:1,on:{}}; let vn1 = h('button', p1, c1); let args2 = [5]; - p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['add'](...args2, e);}; + p1.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['add'](...args2, e);}; c1.push({text: \`Click\`}); return vn1; }" @@ -2760,7 +2760,7 @@ exports[`t-on can bind handlers with empty object (with non empty inner string) let c1 = [], p1 = {key:1,on:{}}; let vn1 = h('button', p1, c1); let args2 = [{}]; - p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](...args2, e);}; + p1.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['doSomething'](...args2, e);}; c1.push({text: \`Click\`}); return vn1; }" @@ -2776,7 +2776,7 @@ exports[`t-on can bind handlers with empty object 1`] = ` let c1 = [], p1 = {key:1,on:{}}; let vn1 = h('button', p1, c1); let args2 = [{}]; - p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](...args2, e);}; + p1.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['doSomething'](...args2, e);}; c1.push({text: \`Click\`}); return vn1; }" @@ -2815,7 +2815,7 @@ exports[`t-on can bind handlers with loop variable as argument 1`] = ` let vn7 = h('a', p7, c7); c6.push(vn7); let args8 = [scope['action']]; - p7.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['activate'](...args8, e);}; + p7.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['activate'](...args8, e);}; c7.push({text: \`link\`}); } scope = _origScope5; @@ -2833,7 +2833,7 @@ exports[`t-on can bind handlers with object arguments 1`] = ` let c1 = [], p1 = {key:1,on:{}}; let vn1 = h('button', p1, c1); let args2 = [{val:5}]; - p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['add'](...args2, e);}; + p1.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['add'](...args2, e);}; c1.push({text: \`Click\`}); return vn1; }" @@ -2847,9 +2847,9 @@ exports[`t-on can bind two event handlers 1`] = ` let h = this.h; let c1 = [], p1 = {key:1,on:{}}; let vn1 = h('button', p1, c1); - extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['handleClick'](e);}; + extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['handleClick'](e);}; p1.on['click'] = extra.handlers['click__2__']; - extra.handlers['dblclick__3__'] = extra.handlers['dblclick__3__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['handleDblClick'](e);}; + extra.handlers['dblclick__3__'] = extra.handlers['dblclick__3__'] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['handleDblClick'](e);}; p1.on['dblclick'] = extra.handlers['dblclick__3__']; c1.push({text: \`Click\`}); return vn1; @@ -2864,7 +2864,7 @@ exports[`t-on handler is bound to proper owner 1`] = ` let h = this.h; let c1 = [], p1 = {key:1,on:{}}; let vn1 = h('button', p1, c1); - extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['add'](e);}; + extra.handlers['click__2__'] = extra.handlers['click__2__'] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['add'](e);}; p1.on['click'] = extra.handlers['click__2__']; c1.push({text: \`Click\`}); return vn1; @@ -2883,7 +2883,7 @@ exports[`t-on t-on combined with t-esc 1`] = ` let c2 = [], p2 = {key:2,on:{}}; let vn2 = h('button', p2, c2); c1.push(vn2); - extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onClick'](e);}; + extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['onClick'](e);}; p2.on['click'] = extra.handlers['click__3__']; let _4 = scope['text']; if (_4 != null) { @@ -2905,7 +2905,7 @@ exports[`t-on t-on combined with t-raw 1`] = ` let c2 = [], p2 = {key:2,on:{}}; let vn2 = h('button', p2, c2); c1.push(vn2); - extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onClick'](e);}; + extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['onClick'](e);}; p2.on['click'] = extra.handlers['click__3__']; let _4 = scope['html']; if (_4 != null) { @@ -2923,12 +2923,12 @@ exports[`t-on t-on with .capture modifier 1`] = ` let h = this.h; let c1 = [], p1 = {key:1,on:{}}; let vn1 = h('div', p1, c1); - extra.handlers['!click__2__'] = extra.handlers['!click__2__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onCapture'](e);}; + extra.handlers['!click__2__'] = extra.handlers['!click__2__'] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['onCapture'](e);}; p1.on['!click'] = extra.handlers['!click__2__']; let c3 = [], p3 = {key:3,on:{}}; let vn3 = h('button', p3, c3); c1.push(vn3); - extra.handlers['click__4__'] = extra.handlers['click__4__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);}; + extra.handlers['click__4__'] = extra.handlers['click__4__'] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['doSomething'](e);}; p3.on['click'] = extra.handlers['click__4__']; c3.push({text: \`Button\`}); return vn1; @@ -2946,7 +2946,7 @@ exports[`t-on t-on with empty handler (only modifiers) 1`] = ` let c2 = [], p2 = {key:2,on:{}}; let vn2 = h('button', p2, c2); c1.push(vn2); - p2.on['click'] = function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();}; + p2.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}e.preventDefault();}; c2.push({text: \`Button\`}); return vn1; }" @@ -2961,7 +2961,7 @@ exports[`t-on t-on with inline statement (function call) 1`] = ` let c1 = [], p1 = {key:1,on:{}}; let vn1 = h('button', p1, c1); const state_2 = scope['state']; - p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}state_2.incrementCounter(2)}; + p1.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}state_2.incrementCounter(2)}; c1.push({text: \`Click\`}); return vn1; }" @@ -2976,7 +2976,7 @@ exports[`t-on t-on with inline statement 1`] = ` let c1 = [], p1 = {key:1,on:{}}; let vn1 = h('button', p1, c1); const state_2 = scope['state']; - p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}state_2.counter++}; + p1.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}state_2.counter++}; c1.push({text: \`Click\`}); return vn1; }" @@ -2991,7 +2991,7 @@ exports[`t-on t-on with inline statement, part 2 1`] = ` let c1 = [], p1 = {key:1,on:{}}; let vn1 = h('button', p1, c1); const state_2 = scope['state']; - p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}state_2.flag=!state_2.flag}; + p1.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}state_2.flag=!state_2.flag}; c1.push({text: \`Toggle\`}); return vn1; }" @@ -3007,7 +3007,7 @@ exports[`t-on t-on with inline statement, part 3 1`] = ` let vn1 = h('button', p1, c1); const state_2 = scope['state']; const someFunction_2 = scope['someFunction']; - p1.on['click'] = function (e) {if (!context.__owl__.isMounted){return}state_2.n=someFunction_2(3)}; + p1.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}state_2.n=someFunction_2(3)}; c1.push({text: \`Toggle\`}); return vn1; }" @@ -3024,7 +3024,7 @@ exports[`t-on t-on with prevent and self modifiers (order matters) 1`] = ` let c2 = [], p2 = {key:2,on:{}}; let vn2 = h('button', p2, c2); c1.push(vn2); - extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();if (e.target !== this.elm) {return}utils.getComponent(context)['onClick'](e);}; + extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (context.__owl__.isDestroyed){return}e.preventDefault();if (e.target !== this.elm) {return}utils.getComponent(context)['onClick'](e);}; p2.on['click'] = extra.handlers['click__3__']; let c4 = [], p4 = {key:4}; let vn4 = h('span', p4, c4); @@ -3045,19 +3045,19 @@ exports[`t-on t-on with prevent and/or stop modifiers 1`] = ` let c2 = [], p2 = {key:2,on:{}}; let vn2 = h('button', p2, c2); c1.push(vn2); - extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();utils.getComponent(context)['onClickPrevented'](e);}; + extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (context.__owl__.isDestroyed){return}e.preventDefault();utils.getComponent(context)['onClickPrevented'](e);}; p2.on['click'] = extra.handlers['click__3__']; c2.push({text: \`Button 1\`}); let c4 = [], p4 = {key:4,on:{}}; let vn4 = h('button', p4, c4); c1.push(vn4); - extra.handlers['click__5__'] = extra.handlers['click__5__'] || function (e) {if (!context.__owl__.isMounted){return}e.stopPropagation();utils.getComponent(context)['onClickStopped'](e);}; + extra.handlers['click__5__'] = extra.handlers['click__5__'] || function (e) {if (context.__owl__.isDestroyed){return}e.stopPropagation();utils.getComponent(context)['onClickStopped'](e);}; p4.on['click'] = extra.handlers['click__5__']; c4.push({text: \`Button 2\`}); let c6 = [], p6 = {key:6,on:{}}; let vn6 = h('button', p6, c6); c1.push(vn6); - extra.handlers['click__7__'] = extra.handlers['click__7__'] || function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();e.stopPropagation();utils.getComponent(context)['onClickPreventedAndStopped'](e);}; + extra.handlers['click__7__'] = extra.handlers['click__7__'] || function (e) {if (context.__owl__.isDestroyed){return}e.preventDefault();e.stopPropagation();utils.getComponent(context)['onClickPreventedAndStopped'](e);}; p6.on['click'] = extra.handlers['click__7__']; c6.push({text: \`Button 3\`}); return vn1; @@ -3097,7 +3097,7 @@ exports[`t-on t-on with prevent modifier in t-foreach 1`] = ` let vn7 = h('a', p7, c7); c1.push(vn7); let args8 = [scope['project'].id]; - p7.on['click'] = function (e) {if (!context.__owl__.isMounted){return}e.preventDefault();utils.getComponent(context)['onEdit'](...args8, e);}; + p7.on['click'] = function (e) {if (context.__owl__.isDestroyed){return}e.preventDefault();utils.getComponent(context)['onEdit'](...args8, e);}; c7.push({text: \` Edit \`}); let _9 = scope['project'].name; if (_9 != null) { @@ -3121,7 +3121,7 @@ exports[`t-on t-on with self and prevent modifiers (order matters) 1`] = ` let c2 = [], p2 = {key:2,on:{}}; let vn2 = h('button', p2, c2); c1.push(vn2); - extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}if (e.target !== this.elm) {return}e.preventDefault();utils.getComponent(context)['onClick'](e);}; + extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (context.__owl__.isDestroyed){return}if (e.target !== this.elm) {return}e.preventDefault();utils.getComponent(context)['onClick'](e);}; p2.on['click'] = extra.handlers['click__3__']; let c4 = [], p4 = {key:4}; let vn4 = h('span', p4, c4); @@ -3142,7 +3142,7 @@ exports[`t-on t-on with self modifier 1`] = ` let c2 = [], p2 = {key:2,on:{}}; let vn2 = h('button', p2, c2); c1.push(vn2); - extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['onClick'](e);}; + extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['onClick'](e);}; p2.on['click'] = extra.handlers['click__3__']; let c4 = [], p4 = {key:4}; let vn4 = h('span', p4, c4); @@ -3151,7 +3151,7 @@ exports[`t-on t-on with self modifier 1`] = ` let c5 = [], p5 = {key:5,on:{}}; let vn5 = h('button', p5, c5); c1.push(vn5); - extra.handlers['click__6__'] = extra.handlers['click__6__'] || function (e) {if (!context.__owl__.isMounted){return}if (e.target !== this.elm) {return}utils.getComponent(context)['onClickSelf'](e);}; + extra.handlers['click__6__'] = extra.handlers['click__6__'] || function (e) {if (context.__owl__.isDestroyed){return}if (e.target !== this.elm) {return}utils.getComponent(context)['onClickSelf'](e);}; p5.on['click'] = extra.handlers['click__6__']; let c7 = [], p7 = {key:7}; let vn7 = h('span', p7, c7); diff --git a/tests/router/__snapshots__/link.test.ts.snap b/tests/router/__snapshots__/link.test.ts.snap index dd4e21cd..e395f51d 100644 --- a/tests/router/__snapshots__/link.test.ts.snap +++ b/tests/router/__snapshots__/link.test.ts.snap @@ -11,7 +11,7 @@ exports[`Link component can render simple cases 1`] = ` let _6 = scope['href']; let c7 = [], p7 = {key:7,attrs:{href: _6},class:_5,on:{}}; let vn7 = h('a', p7, c7); - extra.handlers['click__8__'] = extra.handlers['click__8__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['navigate'](e);}; + extra.handlers['click__8__'] = extra.handlers['click__8__'] || function (e) {if (context.__owl__.isDestroyed){return}utils.getComponent(context)['navigate'](e);}; p7.on['click'] = extra.handlers['click__8__']; const slot9 = this.constructor.slots[context.__owl__.slotId + '_' + 'default']; if (slot9) {