diff --git a/src/component/directive.ts b/src/component/directive.ts index 1cb0744b..94a85484 100644 --- a/src/component/directive.ts +++ b/src/component/directive.ts @@ -189,7 +189,7 @@ QWeb.addDirective({ extraNames: ["props"], priority: 100, atNodeEncounter({ ctx, value, node, qweb }): boolean { - ctx.addLine("//COMPONENT"); + ctx.addLine(`// Component '${value}'`); ctx.rootContext.shouldDefineQWeb = true; ctx.rootContext.shouldDefineParent = true; ctx.rootContext.shouldDefineUtils = true; diff --git a/src/qweb/compilation_context.ts b/src/qweb/compilation_context.ts index 19cd1551..00c6f463 100644 --- a/src/qweb/compilation_context.ts +++ b/src/qweb/compilation_context.ts @@ -48,7 +48,10 @@ export class CompilationContext { */ generateTemplateKey(): string { const id = this.generateID(); - let locationExpr = `\`__${this.generateID()}__`; + if (this.loopNumber === 0 && !this.currentKey) { + return `'__${id}__'`; + } + let locationExpr = `\`__${id}__`; for (let i = 0; i < this.loopNumber - 1; i++) { locationExpr += `\${i${i + 1}}__`; } diff --git a/tests/__snapshots__/animations.test.ts.snap b/tests/__snapshots__/animations.test.ts.snap index 78fc50ce..8ecd7a13 100644 --- a/tests/__snapshots__/animations.test.ts.snap +++ b/tests/__snapshots__/animations.test.ts.snap @@ -11,9 +11,8 @@ exports[`animations t-transition combined with component 1`] = ` var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'Child' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -30,9 +29,9 @@ exports[`animations t-transition combined with component 1`] = ` w2 = new W2(parent, props2); const __patch2 = w2.__patch; w2.__patch = fiber => {__patch2.call(w2, fiber); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}}; - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {let finalize = () => { + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {let finalize = () => { w2.destroy(); }; delete w2.__owl__.transitionInserted; @@ -57,9 +56,8 @@ exports[`animations t-transition combined with t-component and t-if 1`] = ` let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); if (scope['state'].display) { - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'Child' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -76,9 +74,9 @@ exports[`animations t-transition combined with t-component and t-if 1`] = ` w2 = new W2(parent, props2); const __patch2 = w2.__patch; w2.__patch = fiber => {__patch2.call(w2, fiber); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}}; - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {let finalize = () => { + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {let finalize = () => { w2.destroy(); }; delete w2.__owl__.transitionInserted; @@ -104,9 +102,8 @@ exports[`animations t-transition combined with t-component, remove and re-add be let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); if (scope['state'].flag) { - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'Child' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -123,9 +120,9 @@ exports[`animations t-transition combined with t-component, remove and re-add be w2 = new W2(parent, props2); const __patch2 = w2.__patch; w2.__patch = fiber => {__patch2.call(w2, fiber); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}}; - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {let finalize = () => { + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {let finalize = () => { w2.destroy(); }; delete w2.__owl__.transitionInserted; diff --git a/tests/animations.test.ts b/tests/animations.test.ts index 5ae0e9ec..d8b4574c 100644 --- a/tests/animations.test.ts +++ b/tests/animations.test.ts @@ -254,11 +254,11 @@ describe("animations", () => { widget.state.display = false; patchNextFrame(cb => { expect(fixture.innerHTML).toBe( - '
blue
' + '
blue
' ); cb(); expect(fixture.innerHTML).toBe( - '
blue
' + '
blue
' ); def.resolve(); }); @@ -371,7 +371,7 @@ describe("animations", () => { await def; // wait for the mocked repaint to be done widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition - expect(fixture.innerHTML).toBe('
blue
'); + expect(fixture.innerHTML).toBe('
blue
'); }); test("transitionInsert is called the correct amount of times", async () => { @@ -405,14 +405,14 @@ describe("animations", () => { widget.state.flag = false; await nextTick(); expect(fixture.innerHTML).toBe( - '
blue
' + '
blue
' ); expect(QWeb.utils.transitionInsert).toBeCalledTimes(1); widget.state.flag = true; await nextTick(); expect(fixture.innerHTML).toBe( - '
blue
' + '
blue
' ); expect(QWeb.utils.transitionInsert).toBeCalledTimes(2); @@ -423,7 +423,7 @@ describe("animations", () => { expect(QWeb.utils.transitionInsert).toBeCalledTimes(3); widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); - expect(fixture.innerHTML).toBe('
blue
'); + expect(fixture.innerHTML).toBe('
blue
'); QWeb.utils.transitionInsert = oldTransitionInsert; }); }); diff --git a/tests/component/__snapshots__/component.test.ts.snap b/tests/component/__snapshots__/component.test.ts.snap index ab1484b8..3d3ccb3f 100644 --- a/tests/component/__snapshots__/component.test.ts.snap +++ b/tests/component/__snapshots__/component.test.ts.snap @@ -43,8 +43,8 @@ exports[`basic widget properties reconciliation alg works for t-foreach in t-for scope.blip_index = i2 scope.blip = _7[i2] scope.blip_value = _8[i2] - //COMPONENT - let k11 = \`__12__\${i1}__\${i2}__\`; + // Component 'Child' + let k11 = \`__11__\${i1}__\${i2}__\`; let w10 = k11 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k11]] : false; let props10 = {blip:scope['blip']}; if (w10 && w10.__owl__.currentFiber && !w10.__owl__.vnode) { @@ -88,8 +88,8 @@ exports[`basic widget properties t-key on a component with t-if, and a sibling c var vn1 = h('div', p1, c1); if (false) { const nodeKey2 = 'str'; - //COMPONENT - let k4 = \`__5__\` + nodeKey2; + // Component 'Child' + let k4 = \`__4__\` + nodeKey2; let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false; let props3 = {}; if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) { @@ -113,30 +113,29 @@ exports[`basic widget properties t-key on a component with t-if, and a sibling c } w3.__owl__.parentLastFiberId = extra.fiber.id; } - //COMPONENT - let k7 = \`__8__\`; - let w6 = k7 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k7]] : false; - let props6 = {}; - if (w6 && w6.__owl__.currentFiber && !w6.__owl__.vnode) { - w6.destroy(); - w6 = false; + // Component 'Child' + let w5 = '__6__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__6__']] : false; + let props5 = {}; + if (w5 && w5.__owl__.currentFiber && !w5.__owl__.vnode) { + w5.destroy(); + w5 = false; } - if (w6) { - w6.__updateProps(props6, extra.fiber, undefined); - let pvnode = w6.__owl__.pvnode; + if (w5) { + w5.__updateProps(props5, extra.fiber, undefined); + let pvnode = w5.__owl__.pvnode; c1.push(pvnode); } else { - let componentKey6 = \`Child\`; - let W6 = context.constructor.components[componentKey6] || QWeb.components[componentKey6]|| scope['Child']; - 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; }); - let pvnode = h('dummy', {key: k7, hook: {remove() {},destroy(vn) {w6.destroy();}}}); + let componentKey5 = \`Child\`; + let W5 = context.constructor.components[componentKey5] || QWeb.components[componentKey5]|| scope['Child']; + if (!W5) {throw new Error('Cannot find the definition of component \\"' + componentKey5 + '\\"')} + w5 = new W5(parent, props5); + parent.__owl__.cmap['__6__'] = w5.__owl__.id; + let fiber = w5.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); + let pvnode = h('dummy', {key: '__6__', hook: {remove() {},destroy(vn) {w5.destroy();}}}); c1.push(pvnode); - w6.__owl__.pvnode = pvnode; + w5.__owl__.pvnode = pvnode; } - w6.__owl__.parentLastFiberId = extra.fiber.id; + w5.__owl__.parentLastFiberId = extra.fiber.id; return vn1; }" `; @@ -152,17 +151,16 @@ exports[`class and style attributes with t-component dynamic t-att-style is prop var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - const _5 = scope['state'].style; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'child' + const _4 = scope['state'].style; + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); w2 = false; } if (w2) { - w2.__updateProps(props2, extra.fiber, undefined).then(()=>{if (w2.__owl__.isDestroyed) {return};w2.el.style=_5;});; + w2.__updateProps(props2, extra.fiber, undefined).then(()=>{if (w2.__owl__.isDestroyed) {return};w2.el.style=_4;});; let pvnode = w2.__owl__.pvnode; c1.push(pvnode); } else { @@ -170,9 +168,9 @@ exports[`class and style attributes with t-component dynamic t-att-style is prop let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['child']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; - let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.style = _5;}};}); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + parent.__owl__.cmap['__3__'] = w2.__owl__.id; + let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.style = _4;}};}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -193,12 +191,11 @@ exports[`class and style attributes with t-component t-att-class is properly add var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - const ref5 = \`child\`; - let _6 = {'a':true}; - Object.assign(_6, {b:scope['state'].b}) - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'Child' + const ref4 = \`child\`; + let _5 = {'a':true}; + Object.assign(_5, {b:scope['state'].b}) + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -213,13 +210,13 @@ exports[`class and style attributes with t-component t-att-class is properly add let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){}};}); - let pvnode = h('dummy', {key: k3, hook: {insert(vn) {context.__owl__.refs[ref5] = w2;},remove() {},destroy(vn) {w2.destroy();delete context.__owl__.refs[ref5];}}}); + let pvnode = h('dummy', {key: '__3__', hook: {insert(vn) {context.__owl__.refs[ref4] = w2;},remove() {},destroy(vn) {w2.destroy();delete context.__owl__.refs[ref4];}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } - w2.__owl__.classObj=_6; + w2.__owl__.classObj=_5; w2.__owl__.parentLastFiberId = extra.fiber.id; return vn1; }" @@ -232,11 +229,11 @@ exports[`class and style attributes with t-component t-att-class is properly add let utils = this.constructor.utils; let scope = Object.create(context); var h = this.h; - let _8 = {'c':true}; - Object.assign(_8, utils.toObj({d:scope['state'].d})) - let c9 = [], p9 = {key:9,class:_8}; - var vn9 = h('span', p9, c9); - return vn9; + let _7 = {'c':true}; + Object.assign(_7, utils.toObj({d:scope['state'].d})) + let c8 = [], p8 = {key:8,class:_7}; + var vn8 = h('span', p8, c8); + return vn8; }" `; @@ -252,12 +249,11 @@ exports[`class and style attributes with t-component t-att-class is properly add var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - const ref5 = \`child\`; - let _6 = {'a':true}; - Object.assign(_6, utils.toObj(scope['state'].b?'b':'')) - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'Child' + const ref4 = \`child\`; + let _5 = {'a':true}; + Object.assign(_5, utils.toObj(scope['state'].b?'b':'')) + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -272,13 +268,13 @@ exports[`class and style attributes with t-component t-att-class is properly add let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){}};}); - let pvnode = h('dummy', {key: k3, hook: {insert(vn) {context.__owl__.refs[ref5] = w2;},remove() {},destroy(vn) {w2.destroy();delete context.__owl__.refs[ref5];}}}); + let pvnode = h('dummy', {key: '__3__', hook: {insert(vn) {context.__owl__.refs[ref4] = w2;},remove() {},destroy(vn) {w2.destroy();delete context.__owl__.refs[ref4];}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } - w2.__owl__.classObj=_6; + w2.__owl__.classObj=_5; w2.__owl__.parentLastFiberId = extra.fiber.id; return vn1; }" @@ -291,11 +287,11 @@ exports[`class and style attributes with t-component t-att-class is properly add let utils = this.constructor.utils; let scope = Object.create(context); var h = this.h; - let _8 = {'c':true}; - Object.assign(_8, utils.toObj(scope['state'].d?'d':'')) - let c9 = [], p9 = {key:9,class:_8}; - var vn9 = h('span', p9, c9); - return vn9; + let _7 = {'c':true}; + Object.assign(_7, utils.toObj(scope['state'].d?'d':'')) + let c8 = [], p8 = {key:8,class:_7}; + var vn8 = h('span', p8, c8); + return vn8; }" `; @@ -327,8 +323,8 @@ exports[`composition sub components with some state rendered in a loop 1`] = ` scope.number = _3[i1] scope.number_value = _4[i1] const nodeKey6 = scope['number']; - //COMPONENT - let k8 = \`__9__\` + nodeKey6; + // Component 'ChildWidget' + let k8 = \`__8__\` + nodeKey6; let w7 = k8 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k8]] : false; let props7 = {}; if (w7 && w7.__owl__.currentFiber && !w7.__owl__.vnode) { @@ -368,9 +364,8 @@ exports[`composition t-component with dynamic value 1`] = ` var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component '{{state.widget}}' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -385,9 +380,9 @@ exports[`composition t-component with dynamic value 1`] = ` let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -407,9 +402,8 @@ exports[`composition t-component with dynamic value 2 1`] = ` var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'Widget{{state.widget}}' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -424,9 +418,9 @@ exports[`composition t-component with dynamic value 2 1`] = ` let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -446,9 +440,8 @@ exports[`dynamic t-props basic use 1`] = ` var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'Child' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = Object.assign({}, scope['some'].obj); if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -463,9 +456,9 @@ exports[`dynamic t-props basic use 1`] = ` let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -489,9 +482,8 @@ exports[`other directives with t-component t-on with getter as handler 1`] = ` if (_2 || _2 === 0) { c1.push({text: _2}); } - //COMPONENT - let k4 = \`__5__\`; - let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false; + // Component 'Child' + let w3 = '__4__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__4__']] : false; let props3 = {}; if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) { w3.destroy(); @@ -506,9 +498,9 @@ exports[`other directives with t-component t-on with getter as handler 1`] = ` let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| scope['Child']; if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')} w3 = new W3(parent, props3); - parent.__owl__.cmap[k4] = w3.__owl__.id; + parent.__owl__.cmap['__4__'] = w3.__owl__.id; let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['handler'];if (fn) { fn.call(context, e); } else { context.handler; }});}};}); - let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {w3.destroy();}}}); + let pvnode = h('dummy', {key: '__4__', hook: {remove() {},destroy(vn) {w3.destroy();}}}); c1.push(pvnode); w3.__owl__.pvnode = pvnode; } @@ -528,9 +520,8 @@ exports[`other directives with t-component t-on with handler bound to argument 1 var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'child' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -545,9 +536,9 @@ exports[`other directives with t-component t-on with handler bound to argument 1 let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['child']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv'];if (fn) { fn.call(context, 3, e); } else { context.onEv; }});}};}); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -567,9 +558,8 @@ exports[`other directives with t-component t-on with handler bound to empty obje var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'child' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -584,9 +574,9 @@ exports[`other directives with t-component t-on with handler bound to empty obje let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['child']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv'];if (fn) { fn.call(context, {}, e); } else { context.onEv; }});}};}); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -606,9 +596,8 @@ exports[`other directives with t-component t-on with handler bound to empty obje var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'child' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -623,9 +612,9 @@ exports[`other directives with t-component t-on with handler bound to empty obje let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['child']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv'];if (fn) { fn.call(context, {}, e); } else { context.onEv; }});}};}); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -645,9 +634,8 @@ exports[`other directives with t-component t-on with handler bound to object 1`] var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'child' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -662,9 +650,9 @@ exports[`other directives with t-component t-on with handler bound to object 1`] let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['child']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv'];if (fn) { fn.call(context, {val:3}, e); } else { context.onEv; }});}};}); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -688,9 +676,8 @@ exports[`other directives with t-component t-on with inline statement 1`] = ` if (_2 || _2 === 0) { c1.push({text: _2}); } - //COMPONENT - let k4 = \`__5__\`; - let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false; + // Component 'Child' + let w3 = '__4__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__4__']] : false; let props3 = {}; if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) { w3.destroy(); @@ -705,9 +692,9 @@ exports[`other directives with t-component t-on with inline statement 1`] = ` let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| scope['Child']; if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')} w3 = new W3(parent, props3); - parent.__owl__.cmap[k4] = w3.__owl__.id; + parent.__owl__.cmap['__4__'] = w3.__owl__.id; let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['state.counter++'];if (fn) { fn.call(context, e); } else { context.state.counter++; }});}};}); - let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {w3.destroy();}}}); + let pvnode = h('dummy', {key: '__4__', hook: {remove() {},destroy(vn) {w3.destroy();}}}); c1.push(pvnode); w3.__owl__.pvnode = pvnode; } @@ -727,9 +714,8 @@ exports[`other directives with t-component t-on with no handler (only modifiers) var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'ComponentA' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -744,9 +730,9 @@ exports[`other directives with t-component t-on with no handler (only modifiers) let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['ComponentA']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv'];if (fn) { fn.call(context, e); } else { context.onEv; }});}};}); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -766,9 +752,8 @@ exports[`other directives with t-component t-on with prevent and self modifiers var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'Child' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -783,9 +768,9 @@ exports[`other directives with t-component t-on with prevent and self modifiers let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}e.preventDefault();if (e.target !== vn.elm) {return}const fn = context['onEv'];if (fn) { fn.call(context, e); } else { context.onEv; }});}};}); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -805,9 +790,8 @@ exports[`other directives with t-component t-on with self and prevent modifiers var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'child' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -822,9 +806,9 @@ exports[`other directives with t-component t-on with self and prevent modifiers let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['child']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}if (e.target !== vn.elm) {return}e.preventDefault();const fn = context['onEv'];if (fn) { fn.call(context, e); } else { context.onEv; }});}};}); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -844,9 +828,8 @@ exports[`other directives with t-component t-on with self modifier 1`] = ` var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'child' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -861,9 +844,9 @@ exports[`other directives with t-component t-on with self modifier 1`] = ` let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['child']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv1'];if (fn) { fn.call(context, e); } else { context.onEv1; }});vn.elm.addEventListener('ev-2', function (e) {if(!context.__owl__.isMounted){return}if (e.target !== vn.elm) {return}const fn = context['onEv2'];if (fn) { fn.call(context, e); } else { context.onEv2; }});}};}); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -883,9 +866,8 @@ exports[`other directives with t-component t-on with stop and/or prevent modifie var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'child' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -900,9 +882,9 @@ exports[`other directives with t-component t-on with stop and/or prevent modifie let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['child']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev-1', function (e) {if(!context.__owl__.isMounted){return}e.stopPropagation();const fn = context['onEv1'];if (fn) { fn.call(context, e); } else { context.onEv1; }});vn.elm.addEventListener('ev-2', function (e) {if(!context.__owl__.isMounted){return}e.preventDefault();const fn = context['onEv2'];if (fn) { fn.call(context, e); } else { context.onEv2; }});vn.elm.addEventListener('ev-3', function (e) {if(!context.__owl__.isMounted){return}e.stopPropagation();e.preventDefault();const fn = context['onEv3'];if (fn) { fn.call(context, e); } else { context.onEv3; }});}};}); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -936,8 +918,8 @@ exports[`random stuff/miscellaneous snapshotting compiled code 1`] = ` let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); const nodeKey2 = 'somestring'; - //COMPONENT - let k4 = \`__5__\` + nodeKey2; + // Component 'child' + let k4 = \`__4__\` + nodeKey2; let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false; let props3 = {flag:scope['state'].flag}; if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) { @@ -992,9 +974,9 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument scope.item = _3[i1] scope.item_value = _4[i1] const nodeKey6 = scope['item']; - //COMPONENT - let k8 = \`__9__\` + nodeKey6; - let arg10 = scope['item']; + // Component 'Child' + let k8 = \`__8__\` + nodeKey6; + let arg9 = scope['item']; let w7 = k8 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k8]] : false; let props7 = {}; if (w7 && w7.__owl__.currentFiber && !w7.__owl__.vnode) { @@ -1011,7 +993,7 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')} w7 = new W7(parent, props7); parent.__owl__.cmap[k8] = w7.__owl__.id; - let fiber = w7.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv'];if (fn) { fn.call(context, arg10, e); } else { context.onEv; }});}};}); + let fiber = w7.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; vnode.data.hook = {create(_, vn){vn.elm.addEventListener('ev', function (e) {if(!context.__owl__.isMounted){return}const fn = context['onEv'];if (fn) { fn.call(context, arg9, e); } else { context.onEv; }});}};}); let pvnode = h('dummy', {key: k8, hook: {remove() {},destroy(vn) {w7.destroy();}}}); c1.push(pvnode); w7.__owl__.pvnode = pvnode; @@ -1035,16 +1017,15 @@ exports[`t-model directive .lazy modifier 1`] = ` var vn2 = h('input', p2, c2); c1.push(vn2); let expr2 = scope['state']; - let k3 = \`__4__\`; p2.props = {value: expr2.text}; - extra.handlers[k3] = extra.handlers[k3] || ((ev) => {expr2.text = ev.target.value}); - p2.on['change'] = extra.handlers[k3]; - let c5 = [], p5 = {key:5}; - var vn5 = h('span', p5, c5); - c1.push(vn5); - var _6 = scope['state'].text; - if (_6 || _6 === 0) { - c5.push({text: _6}); + extra.handlers['__3__'] = extra.handlers['__3__'] || ((ev) => {expr2.text = ev.target.value}); + p2.on['change'] = extra.handlers['__3__']; + let c4 = [], p4 = {key:4}; + var vn4 = h('span', p4, c4); + c1.push(vn4); + var _5 = scope['state'].text; + if (_5 || _5 === 0) { + c4.push({text: _5}); } return vn1; }" @@ -1062,16 +1043,15 @@ exports[`t-model directive basic use, on an input 1`] = ` var vn2 = h('input', p2, c2); c1.push(vn2); let expr2 = scope['state']; - let k3 = \`__4__\`; p2.props = {value: expr2.text}; - extra.handlers[k3] = extra.handlers[k3] || ((ev) => {expr2.text = ev.target.value}); - p2.on['input'] = extra.handlers[k3]; - let c5 = [], p5 = {key:5}; - var vn5 = h('span', p5, c5); - c1.push(vn5); - var _6 = scope['state'].text; - if (_6 || _6 === 0) { - c5.push({text: _6}); + extra.handlers['__3__'] = extra.handlers['__3__'] || ((ev) => {expr2.text = ev.target.value}); + p2.on['input'] = extra.handlers['__3__']; + let c4 = [], p4 = {key:4}; + var vn4 = h('span', p4, c4); + c1.push(vn4); + var _5 = scope['state'].text; + if (_5 || _5 === 0) { + c4.push({text: _5}); } return vn1; }" @@ -1089,16 +1069,15 @@ exports[`t-model directive basic use, on another key in component 1`] = ` var vn2 = h('input', p2, c2); c1.push(vn2); let expr2 = scope['some']; - let k3 = \`__4__\`; p2.props = {value: expr2.text}; - extra.handlers[k3] = extra.handlers[k3] || ((ev) => {expr2.text = ev.target.value}); - p2.on['input'] = extra.handlers[k3]; - let c5 = [], p5 = {key:5}; - var vn5 = h('span', p5, c5); - c1.push(vn5); - var _6 = scope['some'].text; - if (_6 || _6 === 0) { - c5.push({text: _6}); + extra.handlers['__3__'] = extra.handlers['__3__'] || ((ev) => {expr2.text = ev.target.value}); + p2.on['input'] = extra.handlers['__3__']; + let c4 = [], p4 = {key:4}; + var vn4 = h('span', p4, c4); + c1.push(vn4); + var _5 = scope['some'].text; + if (_5 || _5 === 0) { + c4.push({text: _5}); } return vn1; }" @@ -1134,7 +1113,7 @@ exports[`t-model directive in a t-foreach 1`] = ` var vn8 = h('input', p8, c8); c1.push(vn8); let expr8 = scope['thing']; - let k9 = \`__10__\` + nodeKey6; + let k9 = \`__9__\` + nodeKey6; p8.props = {checked: expr8.f}; extra.handlers[k9] = extra.handlers[k9] || ((ev) => {expr8.f = ev.target.checked}); p8.on['input'] = extra.handlers[k9]; @@ -1156,37 +1135,36 @@ exports[`t-model directive on a select 1`] = ` var vn2 = h('select', p2, c2); c1.push(vn2); let expr2 = scope['state']; - let k3 = \`__4__\`; p2.props = {value: expr2.color}; - extra.handlers[k3] = extra.handlers[k3] || ((ev) => {expr2.color = ev.target.value}); - p2.on['change'] = extra.handlers[k3]; + extra.handlers['__3__'] = extra.handlers['__3__'] || ((ev) => {expr2.color = ev.target.value}); + p2.on['change'] = extra.handlers['__3__']; p2.hook = { create: (_, n) => { n.elm.value=expr2.color; }, }; - var _5 = ''; - let c6 = [], p6 = {key:6,attrs:{value: _5}}; - var vn6 = h('option', p6, c6); - c2.push(vn6); - c6.push({text: \`Please select one\`}); - var _7 = 'red'; - let c8 = [], p8 = {key:8,attrs:{value: _7}}; - var vn8 = h('option', p8, c8); - c2.push(vn8); - c8.push({text: \`Red\`}); - var _9 = 'blue'; - let c10 = [], p10 = {key:10,attrs:{value: _9}}; - var vn10 = h('option', p10, c10); - c2.push(vn10); - c10.push({text: \`Blue\`}); - let c11 = [], p11 = {key:11}; - var vn11 = h('span', p11, c11); - c1.push(vn11); - c11.push({text: \`Choice: \`}); - var _12 = scope['state'].color; - if (_12 || _12 === 0) { - c11.push({text: _12}); + var _4 = ''; + let c5 = [], p5 = {key:5,attrs:{value: _4}}; + var vn5 = h('option', p5, c5); + c2.push(vn5); + c5.push({text: \`Please select one\`}); + var _6 = 'red'; + let c7 = [], p7 = {key:7,attrs:{value: _6}}; + var vn7 = h('option', p7, c7); + c2.push(vn7); + c7.push({text: \`Red\`}); + var _8 = 'blue'; + let c9 = [], p9 = {key:9,attrs:{value: _8}}; + var vn9 = h('option', p9, c9); + c2.push(vn9); + c9.push({text: \`Blue\`}); + let c10 = [], p10 = {key:10}; + var vn10 = h('span', p10, c10); + c1.push(vn10); + c10.push({text: \`Choice: \`}); + var _11 = scope['state'].color; + if (_11 || _11 === 0) { + c10.push({text: _11}); } return vn1; }" @@ -1204,16 +1182,15 @@ exports[`t-model directive on a sub state key 1`] = ` var vn2 = h('input', p2, c2); c1.push(vn2); let expr2 = scope['state'].something; - let k3 = \`__4__\`; p2.props = {value: expr2.text}; - extra.handlers[k3] = extra.handlers[k3] || ((ev) => {expr2.text = ev.target.value}); - p2.on['input'] = extra.handlers[k3]; - let c5 = [], p5 = {key:5}; - var vn5 = h('span', p5, c5); - c1.push(vn5); - var _6 = scope['state'].something.text; - if (_6 || _6 === 0) { - c5.push({text: _6}); + extra.handlers['__3__'] = extra.handlers['__3__'] || ((ev) => {expr2.text = ev.target.value}); + p2.on['input'] = extra.handlers['__3__']; + let c4 = [], p4 = {key:4}; + var vn4 = h('span', p4, c4); + c1.push(vn4); + var _5 = scope['state'].something.text; + if (_5 || _5 === 0) { + c4.push({text: _5}); } return vn1; }" @@ -1234,28 +1211,26 @@ exports[`t-model directive on an input type=radio 1`] = ` var vn5 = h('input', p5, c5); c1.push(vn5); let expr5 = scope['state']; - let k6 = \`__7__\`; p5.props = {checked:expr5.choice === 'One'}; - extra.handlers[k6] = extra.handlers[k6] || ((ev) => {expr5.choice = ev.target.value}); - p5.on['click'] = extra.handlers[k6]; - var _8 = 'radio'; - var _9 = 'two'; - var _10 = 'Two'; - let c11 = [], p11 = {key:11,attrs:{type: _8,id: _9,value: _10},on:{}}; - var vn11 = h('input', p11, c11); - c1.push(vn11); - let expr11 = scope['state']; - let k12 = \`__13__\`; - p11.props = {checked:expr11.choice === 'Two'}; - extra.handlers[k12] = extra.handlers[k12] || ((ev) => {expr11.choice = ev.target.value}); - p11.on['click'] = extra.handlers[k12]; - let c14 = [], p14 = {key:14}; - var vn14 = h('span', p14, c14); - c1.push(vn14); - c14.push({text: \`Choice: \`}); - var _15 = scope['state'].choice; - if (_15 || _15 === 0) { - c14.push({text: _15}); + extra.handlers['__6__'] = extra.handlers['__6__'] || ((ev) => {expr5.choice = ev.target.value}); + p5.on['click'] = extra.handlers['__6__']; + var _7 = 'radio'; + var _8 = 'two'; + var _9 = 'Two'; + let c10 = [], p10 = {key:10,attrs:{type: _7,id: _8,value: _9},on:{}}; + var vn10 = h('input', p10, c10); + c1.push(vn10); + let expr10 = scope['state']; + p10.props = {checked:expr10.choice === 'Two'}; + extra.handlers['__11__'] = extra.handlers['__11__'] || ((ev) => {expr10.choice = ev.target.value}); + p10.on['click'] = extra.handlers['__11__']; + let c12 = [], p12 = {key:12}; + var vn12 = h('span', p12, c12); + c1.push(vn12); + c12.push({text: \`Choice: \`}); + var _13 = scope['state'].choice; + if (_13 || _13 === 0) { + c12.push({text: _13}); } return vn1; }" @@ -1274,18 +1249,17 @@ exports[`t-model directive on an input, type=checkbox 1`] = ` var vn3 = h('input', p3, c3); c1.push(vn3); let expr3 = scope['state']; - let k4 = \`__5__\`; p3.props = {checked: expr3.flag}; - extra.handlers[k4] = extra.handlers[k4] || ((ev) => {expr3.flag = ev.target.checked}); - p3.on['input'] = extra.handlers[k4]; - let c6 = [], p6 = {key:6}; - var vn6 = h('span', p6, c6); - c1.push(vn6); + extra.handlers['__4__'] = extra.handlers['__4__'] || ((ev) => {expr3.flag = ev.target.checked}); + p3.on['input'] = extra.handlers['__4__']; + let c5 = [], p5 = {key:5}; + var vn5 = h('span', p5, c5); + c1.push(vn5); if (scope['state'].flag) { - c6.push({text: \`yes\`}); + c5.push({text: \`yes\`}); } else { - c6.push({text: \`no\`}); + c5.push({text: \`no\`}); } return vn1; }" @@ -1301,11 +1275,10 @@ exports[`top level sub widgets basic use 1`] = ` let scope = Object.create(context); let result; var h = this.h; - //COMPONENT - let k2 = \`__3__\`; - let w1 = k2 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k2]] : false; - let vn4 = {}; - result = vn4; + // Component 'Child' + let w1 = '__2__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__2__']] : false; + let vn3 = {}; + result = vn3; let props1 = {p:1}; if (w1 && w1.__owl__.currentFiber && !w1.__owl__.vnode) { w1.destroy(); @@ -1314,16 +1287,16 @@ exports[`top level sub widgets basic use 1`] = ` if (w1) { w1.__updateProps(props1, extra.fiber, undefined); let pvnode = w1.__owl__.pvnode; - utils.defineProxy(vn4, pvnode); + utils.defineProxy(vn3, pvnode); } else { let componentKey1 = \`Child\`; let W1 = context.constructor.components[componentKey1] || QWeb.components[componentKey1]|| scope['Child']; if (!W1) {throw new Error('Cannot find the definition of component \\"' + componentKey1 + '\\"')} w1 = new W1(parent, props1); - parent.__owl__.cmap[k2] = w1.__owl__.id; + parent.__owl__.cmap['__2__'] = w1.__owl__.id; let fiber = w1.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); - let pvnode = h('dummy', {key: k2, hook: {remove() {},destroy(vn) {w1.destroy();}}}); - utils.defineProxy(vn4, pvnode); + let pvnode = h('dummy', {key: '__2__', hook: {remove() {},destroy(vn) {w1.destroy();}}}); + utils.defineProxy(vn3, pvnode); w1.__owl__.pvnode = pvnode; } w1.__owl__.parentLastFiberId = extra.fiber.id; @@ -1342,11 +1315,10 @@ exports[`top level sub widgets can select a sub widget 1`] = ` let result; var h = this.h; if (scope['env'].flag) { - //COMPONENT - let k2 = \`__3__\`; - let w1 = k2 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k2]] : false; - let vn4 = {}; - result = vn4; + // Component 'Child' + let w1 = '__2__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__2__']] : false; + let vn3 = {}; + result = vn3; let props1 = {}; if (w1 && w1.__owl__.currentFiber && !w1.__owl__.vnode) { w1.destroy(); @@ -1355,47 +1327,46 @@ exports[`top level sub widgets can select a sub widget 1`] = ` if (w1) { w1.__updateProps(props1, extra.fiber, undefined); let pvnode = w1.__owl__.pvnode; - utils.defineProxy(vn4, pvnode); + utils.defineProxy(vn3, pvnode); } else { let componentKey1 = \`Child\`; let W1 = context.constructor.components[componentKey1] || QWeb.components[componentKey1]|| scope['Child']; if (!W1) {throw new Error('Cannot find the definition of component \\"' + componentKey1 + '\\"')} w1 = new W1(parent, props1); - parent.__owl__.cmap[k2] = w1.__owl__.id; + parent.__owl__.cmap['__2__'] = w1.__owl__.id; let fiber = w1.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); - let pvnode = h('dummy', {key: k2, hook: {remove() {},destroy(vn) {w1.destroy();}}}); - utils.defineProxy(vn4, pvnode); + let pvnode = h('dummy', {key: '__2__', hook: {remove() {},destroy(vn) {w1.destroy();}}}); + utils.defineProxy(vn3, pvnode); w1.__owl__.pvnode = pvnode; } w1.__owl__.parentLastFiberId = extra.fiber.id; } if (!scope['env'].flag) { - //COMPONENT - let k6 = \`__7__\`; - let w5 = k6 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k6]] : false; - let vn8 = {}; - result = vn8; - let props5 = {}; - if (w5 && w5.__owl__.currentFiber && !w5.__owl__.vnode) { - w5.destroy(); - w5 = false; + // Component 'OtherChild' + let w4 = '__5__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__5__']] : false; + let vn6 = {}; + result = vn6; + let props4 = {}; + if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) { + w4.destroy(); + w4 = false; } - if (w5) { - w5.__updateProps(props5, extra.fiber, undefined); - let pvnode = w5.__owl__.pvnode; - utils.defineProxy(vn8, pvnode); + if (w4) { + w4.__updateProps(props4, extra.fiber, undefined); + let pvnode = w4.__owl__.pvnode; + utils.defineProxy(vn6, pvnode); } else { - let componentKey5 = \`OtherChild\`; - let W5 = context.constructor.components[componentKey5] || QWeb.components[componentKey5]|| scope['OtherChild']; - if (!W5) {throw new Error('Cannot find the definition of component \\"' + componentKey5 + '\\"')} - w5 = new W5(parent, props5); - parent.__owl__.cmap[k6] = w5.__owl__.id; - let fiber = w5.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); - let pvnode = h('dummy', {key: k6, hook: {remove() {},destroy(vn) {w5.destroy();}}}); - utils.defineProxy(vn8, pvnode); - w5.__owl__.pvnode = pvnode; + let componentKey4 = \`OtherChild\`; + let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| scope['OtherChild']; + if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')} + w4 = new W4(parent, props4); + parent.__owl__.cmap['__5__'] = w4.__owl__.id; + let fiber = w4.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); + let pvnode = h('dummy', {key: '__5__', hook: {remove() {},destroy(vn) {w4.destroy();}}}); + utils.defineProxy(vn6, pvnode); + w4.__owl__.pvnode = pvnode; } - w5.__owl__.parentLastFiberId = extra.fiber.id; + w4.__owl__.parentLastFiberId = extra.fiber.id; } return result; }" diff --git a/tests/component/__snapshots__/props_validation.test.ts.snap b/tests/component/__snapshots__/props_validation.test.ts.snap index 708e4a0a..af05e499 100644 --- a/tests/component/__snapshots__/props_validation.test.ts.snap +++ b/tests/component/__snapshots__/props_validation.test.ts.snap @@ -11,9 +11,8 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] = var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'Child' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {message:1}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -28,9 +27,9 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] = let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } diff --git a/tests/component/__snapshots__/slots.test.ts.snap b/tests/component/__snapshots__/slots.test.ts.snap index 8a14014d..aa355eb3 100644 --- a/tests/component/__snapshots__/slots.test.ts.snap +++ b/tests/component/__snapshots__/slots.test.ts.snap @@ -11,9 +11,8 @@ exports[`t-slot directive can define and call slots 1`] = ` var h = this.h; let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'Dialog' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -28,10 +27,10 @@ exports[`t-slot directive can define and call slots 1`] = ` let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Dialog']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; w2.__owl__.slotId = 1; let fiber = w2.__prepare(extra.fiber, Object.assign(Object.create(context), scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -45,23 +44,23 @@ exports[`t-slot directive can define and call slots 2`] = ` ) { // Template name: \\"Dialog\\" var h = this.h; + let c6 = [], p6 = {key:6}; + var vn6 = h('div', p6, c6); let c7 = [], p7 = {key:7}; var vn7 = h('div', p7, c7); - let c8 = [], p8 = {key:8}; - var vn8 = h('div', p8, c8); - c7.push(vn8); - const slot9 = this.constructor.slots[context.__owl__.slotId + '_' + 'header']; - if (slot9) { - slot9.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c8, parent: extra.parent || context})); + c6.push(vn7); + const slot8 = this.constructor.slots[context.__owl__.slotId + '_' + 'header']; + if (slot8) { + slot8.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c7, parent: extra.parent || context})); } - let c10 = [], p10 = {key:10}; - var vn10 = h('div', p10, c10); - c7.push(vn10); - const slot11 = this.constructor.slots[context.__owl__.slotId + '_' + 'footer']; - if (slot11) { - slot11.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c10, parent: extra.parent || context})); + let c9 = [], p9 = {key:9}; + var vn9 = h('div', p9, c9); + c6.push(vn9); + const slot10 = this.constructor.slots[context.__owl__.slotId + '_' + 'footer']; + if (slot10) { + slot10.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c9, parent: extra.parent || context})); } - return vn7; + return vn6; }" `; @@ -71,10 +70,10 @@ exports[`t-slot directive can define and call slots 3`] = ` // Template name: \\"slot_header_template\\" var h = this.h; let c1 = extra.parentNode; - let c5 = [], p5 = {key:5}; - var vn5 = h('span', p5, c5); - c1.push(vn5); - c5.push({text: \`header\`}); + let c4 = [], p4 = {key:4}; + var vn4 = h('span', p4, c4); + c1.push(vn4); + c4.push({text: \`header\`}); }" `; @@ -84,10 +83,10 @@ exports[`t-slot directive can define and call slots 4`] = ` // Template name: \\"slot_footer_template\\" var h = this.h; let c1 = extra.parentNode; - let c6 = [], p6 = {key:6}; - var vn6 = h('span', p6, c6); - c1.push(vn6); - c6.push({text: \`footer\`}); + let c5 = [], p5 = {key:5}; + var vn5 = h('span', p5, c5); + c1.push(vn5); + c5.push({text: \`footer\`}); }" `; @@ -97,10 +96,10 @@ exports[`t-slot directive content is the default slot 1`] = ` // Template name: \\"slot_default_template\\" var h = this.h; let c1 = extra.parentNode; - let c5 = [], p5 = {key:5}; - var vn5 = h('span', p5, c5); - c1.push(vn5); - c5.push({text: \`sts rocks\`}); + let c4 = [], p4 = {key:4}; + var vn4 = h('span', p4, c4); + c1.push(vn4); + c4.push({text: \`sts rocks\`}); }" `; @@ -109,15 +108,15 @@ exports[`t-slot directive dafault slots can define a default content 1`] = ` ) { // Template name: \\"__template__1\\" var h = this.h; - let c5 = [], p5 = {key:5}; - var vn5 = h('span', p5, c5); - const slot6 = this.constructor.slots[context.__owl__.slotId + '_' + 'default']; - if (slot6) { - slot6.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c5, parent: extra.parent || context})); + let c4 = [], p4 = {key:4}; + var vn4 = h('span', p4, c4); + const slot5 = this.constructor.slots[context.__owl__.slotId + '_' + 'default']; + if (slot5) { + slot5.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c4, parent: extra.parent || context})); } else { - c5.push({text: \`default content\`}); + c4.push({text: \`default content\`}); } - return vn5; + return vn4; }" `; @@ -137,14 +136,14 @@ exports[`t-slot directive multiple roots are allowed in a default slot 1`] = ` // Template name: \\"slot_default_template\\" var h = this.h; let c1 = extra.parentNode; + let c4 = [], p4 = {key:4}; + var vn4 = h('span', p4, c4); + c1.push(vn4); + c4.push({text: \`sts\`}); let c5 = [], p5 = {key:5}; var vn5 = h('span', p5, c5); c1.push(vn5); - c5.push({text: \`sts\`}); - let c6 = [], p6 = {key:6}; - var vn6 = h('span', p6, c6); - c1.push(vn6); - c6.push({text: \`rocks\`}); + c5.push({text: \`rocks\`}); }" `; @@ -154,14 +153,14 @@ exports[`t-slot directive multiple roots are allowed in a named slot 1`] = ` // Template name: \\"slot_content_template\\" var h = this.h; let c1 = extra.parentNode; + let c4 = [], p4 = {key:4}; + var vn4 = h('span', p4, c4); + c1.push(vn4); + c4.push({text: \`sts\`}); let c5 = [], p5 = {key:5}; var vn5 = h('span', p5, c5); c1.push(vn5); - c5.push({text: \`sts\`}); - let c6 = [], p6 = {key:6}; - var vn6 = h('span', p6, c6); - c1.push(vn6); - c6.push({text: \`rocks\`}); + c5.push({text: \`rocks\`}); }" `; @@ -170,15 +169,15 @@ exports[`t-slot directive named slots can define a default content 1`] = ` ) { // Template name: \\"__template__1\\" var h = this.h; - let c5 = [], p5 = {key:5}; - var vn5 = h('span', p5, c5); - const slot6 = this.constructor.slots[context.__owl__.slotId + '_' + 'header']; - if (slot6) { - slot6.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c5, parent: extra.parent || context})); + let c4 = [], p4 = {key:4}; + var vn4 = h('span', p4, c4); + const slot5 = this.constructor.slots[context.__owl__.slotId + '_' + 'header']; + if (slot5) { + slot5.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c4, parent: extra.parent || context})); } else { - c5.push({text: \`default content\`}); + c4.push({text: \`default content\`}); } - return vn5; + return vn4; }" `; @@ -189,21 +188,21 @@ exports[`t-slot directive refs are properly bound in slots 1`] = ` context.__owl__.refs = context.__owl__.refs || {}; var h = this.h; let c1 = extra.parentNode; - let c9 = [], p9 = {key:9,on:{}}; - var vn9 = h('button', p9, c9); - c1.push(vn9); - extra.handlers['click' + 9] = extra.handlers['click' + 9] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['doSomething'];if (fn) { fn.call(context, e); } else { context.doSomething; }}; - p9.on['click'] = extra.handlers['click' + 9]; - const ref10 = \`myButton\`; - p9.hook = { + let c8 = [], p8 = {key:8,on:{}}; + var vn8 = h('button', p8, c8); + c1.push(vn8); + extra.handlers['click' + 8] = extra.handlers['click' + 8] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['doSomething'];if (fn) { fn.call(context, e); } else { context.doSomething; }}; + p8.on['click'] = extra.handlers['click' + 8]; + const ref9 = \`myButton\`; + p8.hook = { create: (_, n) => { - context.__owl__.refs[ref10] = n.elm; + context.__owl__.refs[ref9] = n.elm; }, destroy: () => { - delete context.__owl__.refs[ref10]; + delete context.__owl__.refs[ref9]; }, }; - c9.push({text: \`do something\`}); + c8.push({text: \`do something\`}); }" `; @@ -213,12 +212,12 @@ exports[`t-slot directive slots are rendered with proper context 1`] = ` // Template name: \\"slot_footer_template\\" var h = this.h; let c1 = extra.parentNode; - let c9 = [], p9 = {key:9,on:{}}; - var vn9 = h('button', p9, c9); - c1.push(vn9); - extra.handlers['click' + 9] = extra.handlers['click' + 9] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['doSomething'];if (fn) { fn.call(context, e); } else { context.doSomething; }}; - p9.on['click'] = extra.handlers['click' + 9]; - c9.push({text: \`do something\`}); + let c8 = [], p8 = {key:8,on:{}}; + var vn8 = h('button', p8, c8); + c1.push(vn8); + extra.handlers['click' + 8] = extra.handlers['click' + 8] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['doSomething'];if (fn) { fn.call(context, e); } else { context.doSomething; }}; + p8.on['click'] = extra.handlers['click' + 8]; + c8.push({text: \`do something\`}); }" `; @@ -228,14 +227,14 @@ exports[`t-slot directive slots are rendered with proper context, part 2 1`] = ` // Template name: \\"Link\\" let scope = Object.create(context); var h = this.h; - var _13 = scope['props'].to; - let c14 = [], p14 = {key:14,attrs:{href: _13}}; - var vn14 = h('a', p14, c14); - const slot15 = this.constructor.slots[context.__owl__.slotId + '_' + 'default']; - if (slot15) { - slot15.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c14, parent: extra.parent || context})); + var _12 = scope['props'].to; + let c13 = [], p13 = {key:13,attrs:{href: _12}}; + var vn13 = h('a', p13, c13); + const slot14 = this.constructor.slots[context.__owl__.slotId + '_' + 'default']; + if (slot14) { + slot14.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c13, parent: extra.parent || context})); } - return vn14; + return vn13; }" `; @@ -273,8 +272,8 @@ exports[`t-slot directive slots are rendered with proper context, part 2 2`] = ` let c8 = [], p8 = {key:nodeKey7}; var vn8 = h('li', p8, c8); c2.push(vn8); - //COMPONENT - let k10 = \`__11__\` + nodeKey7; + // Component 'Link' + let k10 = \`__10__\` + nodeKey7; let w9 = k10 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k10]] : false; let props9 = {to:'/user/'+scope['user'].id}; if (w9 && w9.__owl__.currentFiber && !w9.__owl__.vnode) { @@ -312,9 +311,9 @@ exports[`t-slot directive slots are rendered with proper context, part 2 3`] = ` var h = this.h; let c8 = extra.parentNode; c8.push({text: \`User \`}); - var _12 = scope['user'].name; - if (_12 || _12 === 0) { - c8.push({text: _12}); + var _11 = scope['user'].name; + if (_11 || _11 === 0) { + c8.push({text: _11}); } }" `; @@ -325,14 +324,14 @@ exports[`t-slot directive slots are rendered with proper context, part 3 1`] = ` // Template name: \\"Link\\" let scope = Object.create(context); var h = this.h; - var _12 = scope['props'].to; - let c13 = [], p13 = {key:13,attrs:{href: _12}}; - var vn13 = h('a', p13, c13); - const slot14 = this.constructor.slots[context.__owl__.slotId + '_' + 'default']; - if (slot14) { - slot14.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c13, parent: extra.parent || context})); + var _11 = scope['props'].to; + let c12 = [], p12 = {key:12,attrs:{href: _11}}; + var vn12 = h('a', p12, c12); + const slot13 = this.constructor.slots[context.__owl__.slotId + '_' + 'default']; + if (slot13) { + slot13.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c12, parent: extra.parent || context})); } - return vn13; + return vn12; }" `; @@ -371,8 +370,8 @@ exports[`t-slot directive slots are rendered with proper context, part 3 2`] = ` var vn8 = h('li', p8, c8); c2.push(vn8); scope.userdescr = 'User '+scope['user'].name; - //COMPONENT - let k10 = \`__11__\` + nodeKey7; + // Component 'Link' + let k10 = \`__10__\` + nodeKey7; let w9 = k10 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k10]] : false; let props9 = {to:'/user/'+scope['user'].id}; if (w9 && w9.__owl__.currentFiber && !w9.__owl__.vnode) { @@ -427,9 +426,8 @@ exports[`t-slot directive slots are rendered with proper context, part 4 1`] = ` let c1 = [], p1 = {key:1}; var vn1 = h('div', p1, c1); scope.userdescr = 'User '+scope['state'].user.name; - //COMPONENT - let k3 = \`__4__\`; - let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false; + // Component 'Link' + let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false; let props2 = {to:'/user/'+scope['state'].user.id}; if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) { w2.destroy(); @@ -444,10 +442,10 @@ exports[`t-slot directive slots are rendered with proper context, part 4 1`] = ` let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Link']; if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')} w2 = new W2(parent, props2); - parent.__owl__.cmap[k3] = w2.__owl__.id; + parent.__owl__.cmap['__3__'] = w2.__owl__.id; w2.__owl__.slotId = 1; let fiber = w2.__prepare(extra.fiber, Object.assign(Object.create(context), scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); - let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}}); + let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}}); c1.push(pvnode); w2.__owl__.pvnode = pvnode; } @@ -476,12 +474,12 @@ exports[`t-slot directive template can just return a slot 1`] = ` let utils = this.constructor.utils; let result; var h = this.h; - const slot8 = this.constructor.slots[context.__owl__.slotId + '_' + 'default']; - if (slot8) { - let children9= [] + const slot6 = this.constructor.slots[context.__owl__.slotId + '_' + 'default']; + if (slot6) { + let children7= [] result = {} - slot8.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: children9, parent: extra.parent || context})); - utils.defineProxy(result, children9[0]); + slot6.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: children7, parent: extra.parent || context})); + utils.defineProxy(result, children7[0]); } return result; }" diff --git a/tests/router/__snapshots__/link.test.ts.snap b/tests/router/__snapshots__/link.test.ts.snap index 27b99b9e..99ea4845 100644 --- a/tests/router/__snapshots__/link.test.ts.snap +++ b/tests/router/__snapshots__/link.test.ts.snap @@ -7,16 +7,16 @@ exports[`Link component can render simple cases 1`] = ` let utils = this.constructor.utils; let scope = Object.create(context); var h = this.h; - let _5 = utils.toObj({'router-link-active':scope['isActive']}); - var _6 = scope['href']; - let c7 = [], p7 = {key:7,attrs:{href: _6},class:_5,on:{}}; - var vn7 = h('a', p7, c7); - extra.handlers['click' + 7] = extra.handlers['click' + 7] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['navigate'];if (fn) { fn.call(context, e); } else { context.navigate; }}; - p7.on['click'] = extra.handlers['click' + 7]; - const slot8 = this.constructor.slots[context.__owl__.slotId + '_' + 'default']; - if (slot8) { - slot8.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c7, parent: extra.parent || context})); + let _4 = utils.toObj({'router-link-active':scope['isActive']}); + var _5 = scope['href']; + let c6 = [], p6 = {key:6,attrs:{href: _5},class:_4,on:{}}; + var vn6 = h('a', p6, c6); + extra.handlers['click' + 6] = extra.handlers['click' + 6] || function (e) {if (!context.__owl__.isMounted){return}const fn = context['navigate'];if (fn) { fn.call(context, e); } else { context.navigate; }}; + p6.on['click'] = extra.handlers['click' + 6]; + const slot7 = this.constructor.slots[context.__owl__.slotId + '_' + 'default']; + if (slot7) { + slot7.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c6, parent: extra.parent || context})); } - return vn7; + return vn6; }" `; diff --git a/tests/router/__snapshots__/route_component.test.ts.snap b/tests/router/__snapshots__/route_component.test.ts.snap index ef0b4148..995a7c68 100644 --- a/tests/router/__snapshots__/route_component.test.ts.snap +++ b/tests/router/__snapshots__/route_component.test.ts.snap @@ -11,33 +11,33 @@ exports[`RouteComponent can render simple cases 1`] = ` let result; var h = this.h; if (scope['routeComponent']) { - const nodeKey5 = scope['env'].router.currentRouteName; - //COMPONENT - let k7 = \`__8__\` + nodeKey5; - let w6 = k7 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k7]] : false; - let vn9 = {}; - result = vn9; - let props6 = Object.assign({}, scope['env'].router.currentParams); - if (w6 && w6.__owl__.currentFiber && !w6.__owl__.vnode) { - w6.destroy(); - w6 = false; + const nodeKey4 = scope['env'].router.currentRouteName; + // Component 'routeComponent' + let k6 = \`__6__\` + nodeKey4; + let w5 = k6 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k6]] : false; + let vn7 = {}; + result = vn7; + let props5 = Object.assign({}, scope['env'].router.currentParams); + if (w5 && w5.__owl__.currentFiber && !w5.__owl__.vnode) { + w5.destroy(); + w5 = false; } - if (w6) { - w6.__updateProps(props6, extra.fiber, undefined); - let pvnode = w6.__owl__.pvnode; - utils.defineProxy(vn9, pvnode); + if (w5) { + w5.__updateProps(props5, extra.fiber, undefined); + let pvnode = w5.__owl__.pvnode; + utils.defineProxy(vn7, pvnode); } else { - let componentKey6 = \`routeComponent\`; - let W6 = context.constructor.components[componentKey6] || QWeb.components[componentKey6]|| scope['routeComponent']; - 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; }); - let pvnode = h('dummy', {key: k7, hook: {remove() {},destroy(vn) {w6.destroy();}}}); - utils.defineProxy(vn9, pvnode); - w6.__owl__.pvnode = pvnode; + let componentKey5 = \`routeComponent\`; + let W5 = context.constructor.components[componentKey5] || QWeb.components[componentKey5]|| scope['routeComponent']; + if (!W5) {throw new Error('Cannot find the definition of component \\"' + componentKey5 + '\\"')} + w5 = new W5(parent, props5); + parent.__owl__.cmap[k6] = w5.__owl__.id; + let fiber = w5.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; }); + let pvnode = h('dummy', {key: k6, hook: {remove() {},destroy(vn) {w5.destroy();}}}); + utils.defineProxy(vn7, pvnode); + w5.__owl__.pvnode = pvnode; } - w6.__owl__.parentLastFiberId = extra.fiber.id; + w5.__owl__.parentLastFiberId = extra.fiber.id; } return result; }"