diff --git a/src/compiler/code_generator.ts b/src/compiler/code_generator.ts index 7b55f8ef..049fe4c9 100644 --- a/src/compiler/code_generator.ts +++ b/src/compiler/code_generator.ts @@ -191,7 +191,7 @@ class CodeTarget { let result: string[] = []; result.push(`function ${this.name}(ctx, node, key = "") {`); if (this.hasRef) { - result.push(` const refs = ctx.__owl__.refs;`); + result.push(` const refs = this.__owl__.refs;`); for (let name in this.refInfo) { const [id, expr] = this.refInfo[name]; result.push(` const ${id} = ${expr};`); @@ -1104,7 +1104,7 @@ export class CodeGenerator { if (suffix === "bind") { this.helpers.add("bind"); name = _name; - value = `bind(ctx, ${value || undefined})`; + value = `bind(this, ${value || undefined})`; } else { throw new OwlError("Invalid prop suffix"); } @@ -1140,7 +1140,7 @@ export class CodeGenerator { if (this.target.loopLevel || !this.hasSafeContext) { ctxStr = generateId("ctx"); this.helpers.add("capture"); - this.define(ctxStr, `capture(ctx)`); + this.define(ctxStr, `capture(ctx, this)`); } let slotStr: string[] = []; for (let slotName in ast.slots) { @@ -1148,7 +1148,7 @@ export class CodeGenerator { const params = []; if (slotAst.content) { const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on); - params.push(`__render: ${name}, __ctx: ${ctxStr}`); + params.push(`__render: ${name}.bind(this), __ctx: ${ctxStr}`); } const scope = ast.slots[slotName].scope; if (scope) { @@ -1275,7 +1275,7 @@ export class CodeGenerator { const scope = this.getPropString(props, dynProps); if (ast.defaultContent) { const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx); - blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name})`; + blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name}.bind(this))`; } else { if (dynamic) { let name = generateId("slot"); @@ -1316,7 +1316,7 @@ export class CodeGenerator { if (this.target.loopLevel || !this.hasSafeContext) { ctxStr = generateId("ctx"); this.helpers.add("capture"); - this.define(ctxStr, `capture(ctx)`); + this.define(ctxStr, `capture(ctx, this)`); } let id = generateId("comp"); this.staticDefs.push({ @@ -1325,7 +1325,7 @@ export class CodeGenerator { }); const target = compileExpr(ast.target); - const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`; + const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`; if (block) { this.insertAnchor(block); } diff --git a/src/runtime/template_helpers.ts b/src/runtime/template_helpers.ts index abdf14be..a6944918 100644 --- a/src/runtime/template_helpers.ts +++ b/src/runtime/template_helpers.ts @@ -32,22 +32,21 @@ function callSlot( if (__scope) { slotScope[__scope] = extra; } - const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null; + const slotBDom = __render ? __render(slotScope, parent, key) : null; if (defaultContent) { let child1: BDom | undefined = undefined; let child2: BDom | undefined = undefined; if (slotBDom) { child1 = dynamic ? toggler(name, slotBDom) : slotBDom; } else { - child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key); + child2 = defaultContent(ctx, parent, key); } return multi([child1, child2]); } return slotBDom || text(""); } -function capture(ctx: any): any { - const component = ctx.__owl__.component; +function capture(ctx: any, component: any): any { const result = ObjectCreate(component); for (let k in ctx) { result[k] = ctx[k]; @@ -115,7 +114,7 @@ class LazyValue { constructor(fn: any, ctx: any, component: any, node: any, key: any) { this.fn = fn; - this.ctx = capture(ctx); + this.ctx = capture(ctx, component); this.component = component; this.node = node; this.key = key; @@ -171,8 +170,7 @@ let boundFunctions = new WeakMap(); const WeakMapGet = WeakMap.prototype.get; const WeakMapSet = WeakMap.prototype.set; -function bind(ctx: any, fn: Function): Function { - let component = ctx.__owl__.component; +function bind(component: any, fn: Function): Function { let boundFnMap = WeakMapGet.call(boundFunctions, component); if (!boundFnMap) { boundFnMap = new WeakMap(); diff --git a/tests/compiler/__snapshots__/misc.test.ts.snap b/tests/compiler/__snapshots__/misc.test.ts.snap index 12b06f8f..33f7acc2 100644 --- a/tests/compiler/__snapshots__/misc.test.ts.snap +++ b/tests/compiler/__snapshots__/misc.test.ts.snap @@ -217,7 +217,7 @@ exports[`misc other complex template 1`] = ` let block25 = createBlock(\`
\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = (el) => refs[\`search_input\`] = el; const ref2 = (el) => refs[\`settings_menu\`] = el; let b2,b4,b14,b17,b22,b23,b24,b25; diff --git a/tests/compiler/__snapshots__/t_ref.test.ts.snap b/tests/compiler/__snapshots__/t_ref.test.ts.snap index 6ee65018..6048615a 100644 --- a/tests/compiler/__snapshots__/t_ref.test.ts.snap +++ b/tests/compiler/__snapshots__/t_ref.test.ts.snap @@ -8,7 +8,7 @@ exports[`t-ref can get a dynamic ref on a node 1`] = ` let block1 = createBlock(\`
\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const v1 = ctx['id']; let ref1 = (el) => refs[\`myspan\${v1}\`] = el; return block1([ref1]); @@ -24,7 +24,7 @@ exports[`t-ref can get a dynamic ref on a node, alternate syntax 1`] = ` let block1 = createBlock(\`
\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const v1 = ctx['id']; let ref1 = (el) => refs[\`myspan\${v1}\`] = el; return block1([ref1]); @@ -40,7 +40,7 @@ exports[`t-ref can get a ref on a node 1`] = ` let block1 = createBlock(\`
\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = (el) => refs[\`myspan\`] = el; return block1([ref1]); } @@ -70,7 +70,7 @@ exports[`t-ref ref in a t-call 2`] = ` let block1 = createBlock(\`
12
\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = (el) => refs[\`name\`] = el; return block1([ref1]); } @@ -86,7 +86,7 @@ exports[`t-ref ref in a t-if 1`] = ` let block2 = createBlock(\`\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = (el) => refs[\`name\`] = el; let b2; if (ctx['condition']) { @@ -107,7 +107,7 @@ exports[`t-ref refs in a loop 1`] = ` let block3 = createBlock(\`
\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; ctx = Object.create(ctx); const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);; for (let i1 = 0; i1 < l_block2; i1++) { @@ -134,7 +134,7 @@ exports[`t-ref two refs, one in a t-if 1`] = ` let block2 = createBlock(\`\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = (el) => refs[\`name\`] = el; const ref2 = (el) => refs[\`p\`] = el; let b2; diff --git a/tests/compiler/t_ref.test.ts b/tests/compiler/t_ref.test.ts index 0c4e1383..8bef41e1 100644 --- a/tests/compiler/t_ref.test.ts +++ b/tests/compiler/t_ref.test.ts @@ -114,7 +114,8 @@ describe("t-ref", () => { app.addTemplate("main", main); app.addTemplate("sub", sub); - const bdom = app.getTemplate("main")({ __owl__: { refs } }, {}); + const comp = { __owl__: { refs } }; + const bdom = app.getTemplate("main").call(comp, comp, {}); mount(bdom, document.createElement("div")); expect(refs.name.tagName).toBe("SPAN"); diff --git a/tests/components/__snapshots__/error_handling.test.ts.snap b/tests/components/__snapshots__/error_handling.test.ts.snap index 0716d793..ee7453ff 100644 --- a/tests/components/__snapshots__/error_handling.test.ts.snap +++ b/tests/components/__snapshots__/error_handling.test.ts.snap @@ -268,7 +268,7 @@ exports[`can catch errors can catch an error in a component render function 1`] } return function template(ctx, node, key = \\"\\") { - const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); return block1([], [b3]); } }" @@ -323,7 +323,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon } return function template(ctx, node, key = \\"\\") { - const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); return block1([], [b3]); } }" @@ -367,7 +367,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon } return function template(ctx, node, key = \\"\\") { - const b5 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null); + const b5 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null); return block1([], [b5]); } }" @@ -447,7 +447,7 @@ exports[`can catch errors can catch an error in the initial call of a component } return function template(ctx, node, key = \\"\\") { - const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); return block1([], [b3]); } }" @@ -504,7 +504,7 @@ exports[`can catch errors can catch an error in the initial call of a component return function template(ctx, node, key = \\"\\") { let b3; if (ctx['state'].flag) { - b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); } return block1([], [b3]); } @@ -653,7 +653,7 @@ exports[`can catch errors can catch an error in the mounted call 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); return block1([], [b3]); } }" @@ -708,7 +708,7 @@ exports[`can catch errors can catch an error in the willPatch call 1`] = ` return function template(ctx, node, key = \\"\\") { let txt1 = ctx['state'].message; - const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); return block1([txt1], [b3]); } }" @@ -763,7 +763,7 @@ exports[`can catch errors can catch an error in the willStart call 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); return block1([], [b3]); } }" @@ -820,7 +820,7 @@ exports[`can catch errors can catch an error origination from a child's willStar } return function template(ctx, node, key = \\"\\") { - const b5 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null); + const b5 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null); return block1([], [b5]); } }" @@ -941,8 +941,8 @@ exports[`can catch errors catching error, rethrow, render parent -- a main comp ctx[\`cp\`] = v_block1[i1]; const key1 = ctx['cp'].id; const v1 = ctx['cp']; - const ctx1 = capture(ctx); - c_block1[i1] = withKey(comp2({onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1); + const ctx1 = capture(ctx, this); + c_block1[i1] = withKey(comp2({onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1); } return list(c_block1); } @@ -1019,8 +1019,8 @@ exports[`can catch errors catching in child makes parent render 1`] = ` ctx[\`elem\`] = v_block1[i1]; const key1 = ctx['elem'][0]; const v1 = ctx['elem']; - const ctx1 = capture(ctx); - c_block1[i1] = withKey(comp2({onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1); + const ctx1 = capture(ctx, this); + c_block1[i1] = withKey(comp2({onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1); } return list(c_block1); } @@ -1083,7 +1083,7 @@ exports[`can catch errors error in mounted on a component with a sibling (proper return function template(ctx, node, key = \\"\\") { const b2 = comp1({}, key + \`__1\`, node, this, null); - const b4 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null); + const b4 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null); return block1([], [b2, b4]); } }" diff --git a/tests/components/__snapshots__/hooks.test.ts.snap b/tests/components/__snapshots__/hooks.test.ts.snap index 102c1afd..3fd4d391 100644 --- a/tests/components/__snapshots__/hooks.test.ts.snap +++ b/tests/components/__snapshots__/hooks.test.ts.snap @@ -9,7 +9,7 @@ exports[`hooks autofocus hook input in a t-if 1`] = ` let block2 = createBlock(\`\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = (el) => refs[\`input1\`] = el; const ref2 = (el) => refs[\`input2\`] = el; let b2; @@ -29,7 +29,7 @@ exports[`hooks autofocus hook simple input 1`] = ` let block1 = createBlock(\`
\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = (el) => refs[\`input1\`] = el; const ref2 = (el) => refs[\`input2\`] = el; return block1([ref1, ref2]); @@ -268,7 +268,7 @@ exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = ` let block2 = createBlock(\`
\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = (el) => refs[\`div\`] = el; let b2; if (ctx['state'].value) { @@ -357,7 +357,7 @@ exports[`hooks useRef hook: basic use 1`] = ` let block1 = createBlock(\`
\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = (el) => refs[\`button\`] = el; let txt1 = ctx['value']; return block1([ref1, txt1]); diff --git a/tests/components/__snapshots__/props.test.ts.snap b/tests/components/__snapshots__/props.test.ts.snap index d9fe1083..7f67df30 100644 --- a/tests/components/__snapshots__/props.test.ts.snap +++ b/tests/components/__snapshots__/props.test.ts.snap @@ -283,7 +283,7 @@ exports[`bound functions is referentially equal after update 1`] = ` const comp1 = app.createComponent(\`Child\`, true, false, false, false); return function template(ctx, node, key = \\"\\") { - return comp1({val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, node, this, null); + return comp1({val: ctx['state'].val,fn: bind(this, ctx['someFunction'])}, key + \`__1\`, node, this, null); } }" `; @@ -307,7 +307,7 @@ exports[`can bind function prop with bind suffix 1`] = ` const comp1 = app.createComponent(\`Child\`, true, false, false, false); return function template(ctx, node, key = \\"\\") { - return comp1({doSomething: bind(ctx, ctx['doSomething'])}, key + \`__1\`, node, this, null); + return comp1({doSomething: bind(this, ctx['doSomething'])}, key + \`__1\`, node, this, null); } }" `; diff --git a/tests/components/__snapshots__/props_validation.test.ts.snap b/tests/components/__snapshots__/props_validation.test.ts.snap index 9ae2f135..9b50aec0 100644 --- a/tests/components/__snapshots__/props_validation.test.ts.snap +++ b/tests/components/__snapshots__/props_validation.test.ts.snap @@ -695,7 +695,7 @@ exports[`props validation can validate through slots 1`] = ` } return function template(ctx, node, key = \\"\\") { - const props2 = {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}; + const props2 = {slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}; helpers.validateProps(\`Wrapper\`, props2, this); return comp2(props2, key + \`__2\`, node, this, null); } diff --git a/tests/components/__snapshots__/refs.test.ts.snap b/tests/components/__snapshots__/refs.test.ts.snap index c4d1f058..bb4e4c41 100644 --- a/tests/components/__snapshots__/refs.test.ts.snap +++ b/tests/components/__snapshots__/refs.test.ts.snap @@ -8,7 +8,7 @@ exports[`refs basic use 1`] = ` let block1 = createBlock(\`
\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = (el) => refs[\`div\`] = el; return block1([ref1]); } @@ -25,7 +25,7 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = ` let block3 = createBlock(\`\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = multiRefSetter(refs, \`coucou\`); let b2,b3; if (ctx['state'].value) { @@ -47,7 +47,7 @@ exports[`refs refs and recursive templates 1`] = ` let block1 = createBlock(\`

\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = (el) => refs[\`root\`] = el; let b2; let txt1 = ctx['props'].tree.value; @@ -70,7 +70,7 @@ exports[`refs refs are properly bound in slots 1`] = ` let block2 = createBlock(\`\`); function slot1(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = (el) => refs[\`myButton\`] = el; let hdlr1 = [ctx['doSomething'], ctx]; return block2([hdlr1, ref1]); @@ -78,8 +78,8 @@ exports[`refs refs are properly bound in slots 1`] = ` return function template(ctx, node, key = \\"\\") { let txt1 = ctx['state'].val; - const ctx1 = capture(ctx); - const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); return block1([txt1], [b3]); } }" @@ -110,7 +110,7 @@ exports[`refs throws if there are 2 same refs at the same time 1`] = ` let block3 = createBlock(\`\`); return function template(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = multiRefSetter(refs, \`coucou\`); const b2 = block2([ref1]); const b3 = block3([ref1]); diff --git a/tests/components/__snapshots__/slots.test.ts.snap b/tests/components/__snapshots__/slots.test.ts.snap index e2165068..501445bf 100644 --- a/tests/components/__snapshots__/slots.test.ts.snap +++ b/tests/components/__snapshots__/slots.test.ts.snap @@ -28,7 +28,7 @@ exports[`slots can define a default content 2`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1); + const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this)); return block1([], [b3]); } }" @@ -54,8 +54,8 @@ exports[`slots can define and call slots 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b4 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1}, 'footer': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1}, 'footer': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); return block1([], [b4]); } }" @@ -89,8 +89,8 @@ exports[`slots can define and call slots with bound params 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp1({slots: markRaw({'abc': {__render: slot1, __ctx: ctx1, getValue: bind(ctx, ctx['getValue'])}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp1({slots: markRaw({'abc': {__render: slot1.bind(this), __ctx: ctx1, getValue: bind(this, ctx['getValue'])}})}, key + \`__1\`, node, this, null); } }" `; @@ -129,8 +129,8 @@ exports[`slots can define and call slots with params 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b4 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1, param: ctx['var']}, 'footer': {__render: slot2, __ctx: ctx1, param: '5'}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1, param: ctx['var']}, 'footer': {__render: slot2.bind(this), __ctx: ctx1, param: '5'}})}, key + \`__1\`, node, this, null); return block1([], [b4]); } }" @@ -165,7 +165,7 @@ exports[`slots can render node with t-ref and Component in same slot 1`] = ` let block2 = createBlock(\`
\`); function slot1(ctx, node, key = \\"\\") { - const refs = ctx.__owl__.refs; + const refs = this.__owl__.refs; const ref1 = (el) => refs[\`div\`] = el; const b2 = block2([ref1]); const b3 = comp1({}, key + \`__1\`, node, this, null); @@ -173,7 +173,7 @@ exports[`slots can render node with t-ref and Component in same slot 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); } }" `; @@ -226,7 +226,7 @@ exports[`slots can use component in default-content of t-slot 2`] = ` } return function template(ctx, node, key = \\"\\") { - return callSlot(ctx, node, key, 'default', false, {}, defaultContent1); + return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this)); } }" `; @@ -266,7 +266,7 @@ exports[`slots can use t-call in default-content of t-slot 2`] = ` } return function template(ctx, node, key = \\"\\") { - return callSlot(ctx, node, key, 'default', false, {}, defaultContent1); + return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this)); } }" `; @@ -296,7 +296,7 @@ exports[`slots content is the default slot (variation) 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } }" `; @@ -328,7 +328,7 @@ exports[`slots content is the default slot 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); return block1([], [b3]); } }" @@ -363,8 +363,8 @@ exports[`slots default content is not rendered if named slot is provided 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b3 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b3 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); return block1([], [b3]); } }" @@ -383,7 +383,7 @@ exports[`slots default content is not rendered if named slot is provided 2`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1); + const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1.bind(this)); return block1([], [b3]); } }" @@ -403,7 +403,7 @@ exports[`slots default content is not rendered if slot is provided 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); return block1([], [b3]); } }" @@ -422,7 +422,7 @@ exports[`slots default content is not rendered if slot is provided 2`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1); + const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this)); return block1([], [b3]); } }" @@ -442,8 +442,8 @@ exports[`slots default slot next to named slot, with default content 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); return block1([], [b3]); } }" @@ -466,8 +466,8 @@ exports[`slots default slot next to named slot, with default content 2`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1); - const b5 = callSlot(ctx, node, key, 'footer', false, {}, defaultContent2); + const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this)); + const b5 = callSlot(ctx, node, key, 'footer', false, {}, defaultContent2.bind(this)); return block1([], [b3, b5]); } }" @@ -485,7 +485,7 @@ exports[`slots default slot with params with - in it 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null); } }" `; @@ -520,7 +520,7 @@ exports[`slots default slot with slot scope: shorthand syntax 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null); } }" `; @@ -552,7 +552,7 @@ exports[`slots default slot work with text nodes (variation) 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } }" `; @@ -583,7 +583,7 @@ exports[`slots default slot work with text nodes 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); return block1([], [b3]); } }" @@ -619,8 +619,8 @@ exports[`slots dynamic slot in multiple locations 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp2({location: ctx['state'].location,slots: markRaw({'coffee': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp2({location: ctx['state'].location,slots: markRaw({'coffee': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null); } }" `; @@ -685,8 +685,8 @@ exports[`slots dynamic t-slot call 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b6 = comp1({slots: markRaw({'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); return block1([], [b6]); } }" @@ -732,8 +732,8 @@ exports[`slots dynamic t-slot call with default 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b6 = comp1({slots: markRaw({'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); return block1([], [b6]); } }" @@ -753,7 +753,7 @@ exports[`slots dynamic t-slot call with default 2`] = ` return function template(ctx, node, key = \\"\\") { let hdlr1 = [ctx['toggle'], ctx]; - const b3 = callSlot(ctx, node, key + \`__1\`, (ctx['current'].slot), true, {}, defaultContent1); + const b3 = callSlot(ctx, node, key + \`__1\`, (ctx['current'].slot), true, {}, defaultContent1.bind(this)); return block1([hdlr1], [b3]); } }" @@ -771,7 +771,7 @@ exports[`slots fun: two calls to the same slot 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } }" `; @@ -865,8 +865,8 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null); } }" `; @@ -952,7 +952,7 @@ exports[`slots multiple roots are allowed in a default slot 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b5 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + const b5 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); return block1([], [b5]); } }" @@ -991,8 +991,8 @@ exports[`slots multiple roots are allowed in a named slot 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b5 = comp1({slots: markRaw({'content': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b5 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); return block1([], [b5]); } }" @@ -1031,8 +1031,8 @@ exports[`slots multiple slots containing components 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp3({slots: markRaw({'s1': {__render: slot1, __ctx: ctx1}, 's2': {__render: slot2, __ctx: ctx1}})}, key + \`__3\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp3({slots: markRaw({'s1': {__render: slot1.bind(this), __ctx: ctx1}, 's2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__3\`, node, this, null); } }" `; @@ -1085,8 +1085,8 @@ exports[`slots named slot inside slot 1`] = ` } function slot2(ctx, node, key = \\"\\") { - const ctx2 = capture(ctx); - return comp1({slots: markRaw({'brol': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null); + const ctx2 = capture(ctx, this); + return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null); } function slot3(ctx, node, key = \\"\\") { @@ -1095,8 +1095,8 @@ exports[`slots named slot inside slot 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b5 = comp2({slots: markRaw({'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null); + const ctx1 = capture(ctx, this); + const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null); return block1([], [b5]); } }" @@ -1136,8 +1136,8 @@ exports[`slots named slot inside slot, part 3 1`] = ` } function slot2(ctx, node, key = \\"\\") { - const ctx2 = capture(ctx); - return comp1({slots: markRaw({'brol': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null); + const ctx2 = capture(ctx, this); + return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null); } function slot3(ctx, node, key = \\"\\") { @@ -1146,8 +1146,8 @@ exports[`slots named slot inside slot, part 3 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b5 = comp2({slots: markRaw({'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null); + const ctx1 = capture(ctx, this); + const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null); return block1([], [b5]); } }" @@ -1197,7 +1197,7 @@ exports[`slots named slots can define a default content 2`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1); + const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1.bind(this)); return block1([], [b3]); } }" @@ -1221,8 +1221,8 @@ exports[`slots named slots inside slot, again 1`] = ` } function slot2(ctx, node, key = \\"\\") { - const ctx2 = capture(ctx); - return comp1({slots: markRaw({'brol2': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null); + const ctx2 = capture(ctx, this); + return comp1({slots: markRaw({'brol2': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null); } function slot3(ctx, node, key = \\"\\") { @@ -1231,8 +1231,8 @@ exports[`slots named slots inside slot, again 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b5 = comp2({slots: markRaw({'brol1': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null); + const ctx1 = capture(ctx, this); + const b5 = comp2({slots: markRaw({'brol1': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null); return block1([], [b5]); } }" @@ -1255,8 +1255,8 @@ exports[`slots named slots inside slot, again 2`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultContent1); - const b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultContent2); + const b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultContent1.bind(this)); + const b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultContent2.bind(this)); const b6 = callSlot(ctx, node, key, 'default', false, {}); return block1([], [b3, b5, b6]); } @@ -1275,7 +1275,7 @@ exports[`slots nested slots in same template 1`] = ` let block1 = createBlock(\`\`); function slot1(ctx, node, key = \\"\\") { - return comp2({slots: markRaw({'default': {__render: slot2, __ctx: ctx}})}, key + \`__2\`, node, this, null); + return comp2({slots: markRaw({'default': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); } function slot2(ctx, node, key = \\"\\") { @@ -1283,7 +1283,7 @@ exports[`slots nested slots in same template 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b4 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null); + const b4 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null); return block1([], [b4]); } }" @@ -1345,7 +1345,7 @@ exports[`slots nested slots: evaluation context and parented relationship 1`] = } return function template(ctx, node, key = \\"\\") { - return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); } }" `; @@ -1362,7 +1362,7 @@ exports[`slots nested slots: evaluation context and parented relationship 2`] = } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } }" `; @@ -1435,7 +1435,7 @@ exports[`slots simple default slot 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } }" `; @@ -1473,7 +1473,7 @@ exports[`slots simple default slot with params 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } }" `; @@ -1505,7 +1505,7 @@ exports[`slots simple default slot with params and bound function 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null); } }" `; @@ -1517,7 +1517,7 @@ exports[`slots simple default slot with params and bound function 2`] = ` let { callSlot, bind } = helpers; return function template(ctx, node, key = \\"\\") { - return callSlot(ctx, node, key, 'default', false, {fn: bind(ctx, ctx['getValue'])}); + return callSlot(ctx, node, key, 'default', false, {fn: bind(this, ctx['getValue'])}); } }" `; @@ -1534,7 +1534,7 @@ exports[`slots simple default slot, variation 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } }" `; @@ -1569,8 +1569,8 @@ exports[`slots simple dynamic slot with slot scope 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null); } }" `; @@ -1599,7 +1599,7 @@ exports[`slots simple named and empty slot -- 2 1`] = ` const comp1 = app.createComponent(\`Child\`, true, true, false, true); return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); + const ctx1 = capture(ctx, this); return comp1({slots: markRaw({'myEmptySlot': {myProp: 'myProp text'}})}, key + \`__1\`, node, this, null); } }" @@ -1618,7 +1618,7 @@ exports[`slots simple named and empty slot -- 2 2`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = callSlot(ctx, node, key, 'myEmptySlot', false, {}, defaultContent1); + const b3 = callSlot(ctx, node, key, 'myEmptySlot', false, {}, defaultContent1.bind(this)); return block1([], [b3]); } }" @@ -1636,8 +1636,8 @@ exports[`slots simple named and empty slot 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp1({slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp1({slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); } }" `; @@ -1676,8 +1676,8 @@ exports[`slots simple slot with slot scope 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null); } }" `; @@ -1712,8 +1712,8 @@ exports[`slots slot and (inline) t-call 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null); + const ctx1 = capture(ctx, this); + const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null); return block1([], [b3]); } }" @@ -1762,8 +1762,8 @@ exports[`slots slot and t-call 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null); + const ctx1 = capture(ctx, this); + const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null); return block1([], [b3]); } }" @@ -1811,7 +1811,7 @@ exports[`slots slot and t-esc 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); return block1([], [b3]); } }" @@ -1849,7 +1849,7 @@ exports[`slots slot are properly rendered if inner props are changed 1`] = ` return function template(ctx, node, key = \\"\\") { let hdlr1 = [ctx['inc'], ctx]; let txt1 = ctx['state'].val; - const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); return block1([hdlr1, txt1], [b3]); } }" @@ -1897,7 +1897,7 @@ exports[`slots slot content has different key from other content -- dynamic slot } return function template(ctx, node, key = \\"\\") { - return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); } }" `; @@ -1945,7 +1945,7 @@ exports[`slots slot content has different key from other content -- static slot } return function template(ctx, node, key = \\"\\") { - return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); } }" `; @@ -1997,8 +1997,8 @@ exports[`slots slot content is bound to caller (variation) 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); } }" `; @@ -2033,7 +2033,7 @@ exports[`slots slot content is bound to caller 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } }" `; @@ -2068,7 +2068,7 @@ exports[`slots slot in multiple locations 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp2({location: ctx['state'].location,slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + return comp2({location: ctx['state'].location,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); } }" `; @@ -2123,7 +2123,7 @@ exports[`slots slot in t-foreach locations 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp2({list: ctx['state'].list,slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + return comp2({list: ctx['state'].list,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); } }" `; @@ -2180,7 +2180,7 @@ exports[`slots slot preserves properly parented relationship 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); return block1([], [b3]); } }" @@ -2224,8 +2224,8 @@ exports[`slots slot preserves properly parented relationship, even through t-cal } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null); + const ctx1 = capture(ctx, this); + const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null); return block1([], [b3]); } }" @@ -2285,8 +2285,8 @@ exports[`slots slot with slot scope and t-props 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"info\\"}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"info\\"}})}, key + \`__1\`, node, this, null); } }" `; @@ -2315,7 +2315,7 @@ exports[`slots slots and wrapper components 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } }" `; @@ -2365,7 +2365,7 @@ exports[`slots slots are properly bound to correct component 2`] = ` } return function template(ctx, node, key = \\"\\") { - return callSlot(ctx, node, key, 'default', false, {}, defaultContent1); + return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this)); } }" `; @@ -2387,8 +2387,8 @@ exports[`slots slots are rendered with proper context 1`] = ` return function template(ctx, node, key = \\"\\") { let txt1 = ctx['state'].val; - const ctx1 = capture(ctx); - const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); return block1([txt1], [b3]); } }" @@ -2431,8 +2431,8 @@ exports[`slots slots are rendered with proper context, part 2 1`] = ` for (let i1 = 0; i1 < l_block2; i1++) { ctx[\`user\`] = v_block2[i1]; const key1 = ctx['user'].id; - const ctx1 = capture(ctx); - const b7 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null); + const ctx1 = capture(ctx, this); + const b7 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null); c_block2[i1] = withKey(block3([], [b7]), key1); } const b2 = list(c_block2); @@ -2480,8 +2480,8 @@ exports[`slots slots are rendered with proper context, part 3 1`] = ` ctx[\`user\`] = v_block2[i1]; const key1 = ctx['user'].id; setContextValue(ctx, \\"userdescr\\", 'User '+ctx['user'].name); - const ctx1 = capture(ctx); - const b5 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null); + const ctx1 = capture(ctx, this); + const b5 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null); c_block2[i1] = withKey(block3([], [b5]), key1); } const b2 = list(c_block2); @@ -2523,8 +2523,8 @@ exports[`slots slots are rendered with proper context, part 4 1`] = ` ctx = Object.create(ctx); ctx[isBoundary] = 1 setContextValue(ctx, \\"userdescr\\", 'User '+ctx['state'].user.name); - const ctx1 = capture(ctx); - const b3 = comp1({to: '/user/'+ctx['state'].user.id,slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b3 = comp1({to: '/user/'+ctx['state'].user.id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); return block1([], [b3]); } }" @@ -2565,8 +2565,8 @@ exports[`slots slots in slots, with vars 1`] = ` ctx = Object.create(ctx); ctx[isBoundary] = 1 setContextValue(ctx, \\"test\\", ctx['state'].name); - const ctx1 = capture(ctx); - const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); return block1([], [b3]); } }" @@ -2586,7 +2586,7 @@ exports[`slots slots in slots, with vars 2`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); return block1([], [b3]); } }" @@ -2627,8 +2627,8 @@ exports[`slots slots in t-foreach and re-rendering 1`] = ` ctx[\`n\`] = v_block2[i1]; ctx[\`n_index\`] = i1; const key1 = ctx['n_index']; - const ctx1 = capture(ctx); - c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1); + const ctx1 = capture(ctx, this); + c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1); } const b2 = list(c_block2); return block1([], [b2]); @@ -2682,8 +2682,8 @@ exports[`slots slots in t-foreach in t-foreach 1`] = ` for (let i2 = 0; i2 < l_block6; i2++) { ctx[\`node2\`] = v_block6[i2]; const key2 = ctx['node2'].key; - const ctx1 = capture(ctx); - c_block6[i2] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2); + const ctx1 = capture(ctx, this); + c_block6[i2] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2); } ctx = ctx.__proto__; const b6 = list(c_block6); @@ -2734,8 +2734,8 @@ exports[`slots slots in t-foreach with t-set and re-rendering 1`] = ` ctx[\`n_index\`] = i1; const key1 = ctx['n_index']; setContextValue(ctx, \\"dummy\\", ctx['n_index']); - const ctx1 = capture(ctx); - c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1); + const ctx1 = capture(ctx, this); + c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1); } const b2 = list(c_block2); return block1([], [b2]); @@ -2774,8 +2774,8 @@ exports[`slots t-debug on a t-set-slot (defining a slot) 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b3 = comp1({slots: markRaw({'content': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b3 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); return block1([], [b3]); } }" @@ -2813,8 +2813,8 @@ exports[`slots t-set t-value in a slot 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); return block1([], [b3]); } }" @@ -2847,8 +2847,8 @@ exports[`slots t-set-slot=default has priority over rest of the content 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); } }" `; @@ -2905,8 +2905,8 @@ exports[`slots t-slot in recursive templates 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null); } }" `; @@ -2941,7 +2941,7 @@ exports[`slots t-slot nested within another slot 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); return block1([], [b3]); } }" @@ -2958,7 +2958,7 @@ exports[`slots t-slot nested within another slot 2`] = ` let block1 = createBlock(\`\`); function slot1(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot2, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } function slot2(ctx, node, key = \\"\\") { @@ -2966,7 +2966,7 @@ exports[`slots t-slot nested within another slot 2`] = ` } return function template(ctx, node, key = \\"\\") { - const b4 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + const b4 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); return block1([], [b4]); } }" @@ -3029,7 +3029,7 @@ exports[`slots t-slot scope context 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } }" `; @@ -3050,7 +3050,7 @@ exports[`slots t-slot scope context 2`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } }" `; @@ -3083,8 +3083,8 @@ exports[`slots t-slot within dynamic t-call 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null); + const ctx1 = capture(ctx, this); + const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null); return block1([], [b3]); } }" @@ -3148,7 +3148,7 @@ exports[`slots template can just return a slot 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); return block1([], [b3]); } }" diff --git a/tests/components/__snapshots__/t_call.test.ts.snap b/tests/components/__snapshots__/t_call.test.ts.snap index 9debc214..4210e59f 100644 --- a/tests/components/__snapshots__/t_call.test.ts.snap +++ b/tests/components/__snapshots__/t_call.test.ts.snap @@ -514,3 +514,65 @@ exports[`t-call t-call with t-call-context, simple use 2`] = ` } }" `; + +exports[`t-call t-call-context: ComponentNode is not looked up in the context 1`] = ` +"function anonymous(app, bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, comment } = bdom; + const callTemplate_1 = app.getTemplate(\`someTemplate\`); + + return function template(ctx, node, key = \\"\\") { + let ctx1 = {method:function(){}}; + return callTemplate_1.call(this, ctx1, node, key + \`__1\`); + } +}" +`; + +exports[`t-call t-call-context: ComponentNode is not looked up in the context 2`] = ` +"function anonymous(app, bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, comment } = bdom; + let { bind, capture, isBoundary, withDefault, setContextValue, markRaw } = helpers; + const comp1 = app.createComponent(\`Child\`, true, true, false, false); + + let block2 = createBlock(\`
outside slot
\`); + let block4 = createBlock(\`
I'm the default slot
\`); + let block5 = createBlock(\`
\`); + let block6 = createBlock(\`
\`); + + function slot1(ctx, node, key = \\"\\") { + const refs = this.__owl__.refs; + const ref2 = (el) => refs[\`myRef2\`] = el; + ctx = Object.create(ctx); + ctx[isBoundary] = 1 + const b4 = block4([ref2]); + setContextValue(ctx, \\"test\\", 3); + let txt1 = this.__owl__.name; + const b5 = block5([txt1]); + let txt2 = ctx['test']; + const b6 = block6([txt2]); + return multi([b4, b5, b6]); + } + + return function template(ctx, node, key = \\"\\") { + const refs = this.__owl__.refs; + const ref1 = (el) => refs[\`myRef\`] = el; + const b2 = block2([ref1]); + const ctx1 = capture(ctx, this); + const b7 = comp1({prop: bind(this, ctx['method']),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); + return multi([b2, b7]); + } +}" +`; + +exports[`t-call t-call-context: ComponentNode is not looked up in the context 3`] = ` +"function anonymous(app, bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, comment } = bdom; + let { callSlot } = helpers; + + return function template(ctx, node, key = \\"\\") { + return callSlot(ctx, node, key, 'default', false, {}); + } +}" +`; diff --git a/tests/components/__snapshots__/t_foreach.test.ts.snap b/tests/components/__snapshots__/t_foreach.test.ts.snap index 1799a234..9e322886 100644 --- a/tests/components/__snapshots__/t_foreach.test.ts.snap +++ b/tests/components/__snapshots__/t_foreach.test.ts.snap @@ -175,8 +175,8 @@ exports[`list of components order is correct when slots are not of same type 1`] } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp1({slots: markRaw({'a': {__render: slot1, __ctx: ctx1, active: !ctx['state'].active}, 'b': {__render: slot2, __ctx: ctx1, active: true}, 'c': {__render: slot3, __ctx: ctx1, active: ctx['state'].active}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp1({slots: markRaw({'a': {__render: slot1.bind(this), __ctx: ctx1, active: !ctx['state'].active}, 'b': {__render: slot2.bind(this), __ctx: ctx1, active: true}, 'c': {__render: slot3.bind(this), __ctx: ctx1, active: ctx['state'].active}})}, key + \`__1\`, node, this, null); } }" `; diff --git a/tests/components/__snapshots__/t_on.test.ts.snap b/tests/components/__snapshots__/t_on.test.ts.snap index c3a942cd..89b74f1d 100644 --- a/tests/components/__snapshots__/t_on.test.ts.snap +++ b/tests/components/__snapshots__/t_on.test.ts.snap @@ -360,7 +360,7 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } }" `; @@ -401,8 +401,8 @@ exports[`t-on t-on on t-set-slots 1`] = ` const b2 = text(\` [\`); const b3 = text(ctx['state'].count); const b4 = text(\`] \`); - const ctx1 = capture(ctx); - const b8 = comp1({slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b8 = comp1({slots: markRaw({'myslot': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); return multi([b2, b3, b4, b8]); } }" @@ -434,7 +434,7 @@ exports[`t-on t-on on t-slots 1`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null); + return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null); } }" `; diff --git a/tests/components/__snapshots__/t_set.test.ts.snap b/tests/components/__snapshots__/t_set.test.ts.snap index deeb39af..2b71897f 100644 --- a/tests/components/__snapshots__/t_set.test.ts.snap +++ b/tests/components/__snapshots__/t_set.test.ts.snap @@ -21,8 +21,8 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = ` ctx[isBoundary] = 1 setContextValue(ctx, \\"iter\\", 'source'); let txt1 = ctx['iter']; - const ctx1 = capture(ctx); - const b2 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null); + const ctx1 = capture(ctx, this); + const b2 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null); let txt2 = ctx['iter']; return block1([txt1, txt2], [b2]); } @@ -70,8 +70,8 @@ exports[`t-set slots with a t-set with a component in body 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null); } }" `; @@ -127,8 +127,8 @@ exports[`t-set slots with an t-set with a component in body 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null); } }" `; @@ -178,8 +178,8 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = ` } return function template(ctx, node, key = \\"\\") { - const ctx1 = capture(ctx); - return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null); + const ctx1 = capture(ctx, this); + return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null); } }" `; diff --git a/tests/components/t_call.test.ts b/tests/components/t_call.test.ts index 24801afe..83b1ec1a 100644 --- a/tests/components/t_call.test.ts +++ b/tests/components/t_call.test.ts @@ -304,7 +304,7 @@ describe("t-call", () => { } await mount(Root, fixture, { - dev: true, + test: true, templates: ` @@ -315,4 +315,46 @@ describe("t-call", () => { }); expect(fixture.innerHTML).toBe("childaaronchildlucas"); }); + + test.only("t-call-context: ComponentNode is not looked up in the context", async () => { + let child: any; + class Child extends Component { + static template = xml``; + static props = ["name"]; + setup() { + child = this; + } + } + + class Root extends Component { + static template = xml` + `; + static components = { Child }; + } + + // The following things need a reference to the ComponentNode, historically + // we used to do this with ctx.__owl__, but this cannot work inside t-call-context + // - t-ref: node.refs[refName] = something + // - t-set: caused a call to capture, which used to use node.component + // - .bind: used to bind to node.component + const root = await mount(Root, fixture, { + templates: ` + + +
outside slot
+ +
I'm the default slot
+ +
+
+ + + `, + }); + expect(fixture.innerHTML).toBe( + "
outside slot
I'm the default slot
Root
3
" + ); + expect(Object.keys(child.__owl__.refs)).toEqual([]); + expect(Object.keys(root.__owl__.refs)).toEqual(["myRef", "myRef2"]); + }); }); diff --git a/tests/helpers.ts b/tests/helpers.ts index abdd1ca8..eaef3d8b 100644 --- a/tests/helpers.ts +++ b/tests/helpers.ts @@ -96,7 +96,7 @@ export function renderToBdom(template: string, context: any = {}, node?: any): B createComponent() {}, createDynamicComponent() {}, }; - return fn(app as any, blockDom, helpers)(context, node); + return fn(app as any, blockDom, helpers).call(context, context, node); } export function renderToString(template: string, context: any = {}, node?: any): string { diff --git a/tests/misc/__snapshots__/portal.test.ts.snap b/tests/misc/__snapshots__/portal.test.ts.snap index fd61e0f5..e9c7b38b 100644 --- a/tests/misc/__snapshots__/portal.test.ts.snap +++ b/tests/misc/__snapshots__/portal.test.ts.snap @@ -20,8 +20,8 @@ exports[`Portal Add and remove portals 1`] = ` for (let i1 = 0; i1 < l_block1; i1++) { ctx[\`portalId\`] = v_block1[i1]; const key1 = ctx['portalId']; - const ctx1 = capture(ctx); - c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1); + const ctx1 = capture(ctx, this); + c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1); } return list(c_block1); } @@ -49,8 +49,8 @@ exports[`Portal Add and remove portals on div 1`] = ` for (let i1 = 0; i1 < l_block1; i1++) { ctx[\`portalId\`] = v_block1[i1]; const key1 = ctx['portalId']; - const ctx1 = capture(ctx); - c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1); + const ctx1 = capture(ctx, this); + c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1); } return list(c_block1); } @@ -80,8 +80,8 @@ exports[`Portal Add and remove portals with t-foreach 1`] = ` ctx[\`portalId\`] = v_block1[i1]; const key1 = ctx['portalId']; let txt1 = ctx['portalId']; - const ctx1 = capture(ctx); - const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal); + const ctx1 = capture(ctx, this); + const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal); c_block1[i1] = withKey(block2([txt1], [b6]), key1); } return list(c_block1); @@ -112,8 +112,8 @@ exports[`Portal Add and remove portals with t-foreach and destroy 1`] = ` ctx[\`portalId\`] = v_block1[i1]; const key1 = ctx['portalId']; let txt1 = ctx['portalId']; - const ctx1 = capture(ctx); - const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal); + const ctx1 = capture(ctx, this); + const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal); c_block1[i1] = withKey(block2([txt1], [b6]), key1); } return list(c_block1); @@ -145,8 +145,8 @@ exports[`Portal Add and remove portals with t-foreach inside div 1`] = ` ctx[\`portalId\`] = v_block2[i1]; const key1 = ctx['portalId']; let txt1 = ctx['portalId']; - const ctx1 = capture(ctx); - const b7 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal); + const ctx1 = capture(ctx, this); + const b7 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal); c_block2[i1] = withKey(block3([txt1], [b7]), key1); } const b2 = list(c_block2); @@ -187,7 +187,7 @@ exports[`Portal Child and Portal 2`] = ` return function template(ctx, node, key = \\"\\") { const b2 = block2(); - const b4 = comp1({target: '.portal',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b4 = comp1({target: '.portal',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return multi([b2, b4]); } }" @@ -208,7 +208,7 @@ exports[`Portal Portal composed with t-slot 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null); + const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null); return block1([], [b3]); } }" @@ -227,7 +227,7 @@ exports[`Portal Portal composed with t-slot 2`] = ` } return function template(ctx, node, key = \\"\\") { - return comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + return comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); } }" `; @@ -261,7 +261,7 @@ exports[`Portal basic use of portal 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -282,7 +282,7 @@ exports[`Portal basic use of portal in dev mode 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -303,7 +303,7 @@ exports[`Portal basic use of portal on div 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -324,7 +324,7 @@ exports[`Portal basic use of portal, variation 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({target: ctx['target'],slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b3 = comp1({target: ctx['target'],slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -348,7 +348,7 @@ exports[`Portal conditional use of Portal (with sub Component) 1`] = ` let b2,b4; b2 = block2(); if (ctx['state'].hasPortal) { - b4 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal); + b4 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal); } return multi([b2, b4]); } @@ -387,7 +387,7 @@ exports[`Portal conditional use of Portal 1`] = ` let b2,b4; b2 = block2(); if (ctx['state'].hasPortal) { - b4 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); } return multi([b2, b4]); } @@ -431,8 +431,8 @@ exports[`Portal conditional use of Portal with child and div 2`] = ` for (let i1 = 0; i1 < l_block2; i1++) { ctx[\`elem\`] = v_block2[i1]; const key1 = ctx['elem']; - const ctx1 = capture(ctx); - c_block2[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1); + const ctx1 = capture(ctx, this); + c_block2[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1); } const b2 = list(c_block2); return block1([], [b2]); @@ -481,8 +481,8 @@ exports[`Portal conditional use of Portal with child and div, variation 2`] = ` for (let i1 = 0; i1 < l_block3; i1++) { ctx[\`elem\`] = v_block3[i1]; const key1 = ctx['elem']; - const ctx1 = capture(ctx); - c_block3[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1); + const ctx1 = capture(ctx, this); + c_block3[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1); } const b3 = list(c_block3); return multi([b2, b3]); @@ -507,7 +507,7 @@ exports[`Portal conditional use of Portal with div 1`] = ` return function template(ctx, node, key = \\"\\") { let b2; if (ctx['state'].hasPortal) { - const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); b2 = block2([], [b4]); } return multi([b2]); @@ -532,7 +532,7 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 1`] return function template(ctx, node, key = \\"\\") { let b3; if (ctx['state'].hasChild) { - b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal); + b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal); } return block1([], [b3]); } @@ -585,7 +585,7 @@ exports[`Portal portal and Child 2`] = ` return function template(ctx, node, key = \\"\\") { const b2 = block2(); - const b4 = comp1({target: '.portal',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b4 = comp1({target: '.portal',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return multi([b2, b4]); } }" @@ -611,7 +611,7 @@ exports[`Portal portal could have dynamically no content 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b4]); } }" @@ -632,7 +632,7 @@ exports[`Portal portal destroys on crash 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal); + const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -667,7 +667,7 @@ exports[`Portal portal with child and props 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal); + const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -710,7 +710,7 @@ exports[`Portal portal with dynamic body 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b5]); } }" @@ -734,7 +734,7 @@ exports[`Portal portal with many children 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b5]); } }" @@ -758,7 +758,7 @@ exports[`Portal portal with no content 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b4]); } }" @@ -778,7 +778,7 @@ exports[`Portal portal with only text as content 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -799,7 +799,7 @@ exports[`Portal portal with target not in dom 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({target: '#does-not-exist',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b3 = comp1({target: '#does-not-exist',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -820,7 +820,7 @@ exports[`Portal portal's parent's env is not polluted 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal); + const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -875,7 +875,7 @@ exports[`Portal simple catchError with portal 2`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -896,7 +896,7 @@ exports[`Portal with target in template (after portal) 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -917,7 +917,7 @@ exports[`Portal with target in template (before portal) 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -938,7 +938,7 @@ exports[`Portal: Props validation target must be a valid selector 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({target: ' ',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b3 = comp1({target: ' ',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -959,7 +959,7 @@ exports[`Portal: Props validation target must be a valid selector 2 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp1({target: 'aa',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); + const b3 = comp1({target: 'aa',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal); return block1([], [b3]); } }" @@ -980,7 +980,7 @@ exports[`Portal: UI/UX focus is kept across re-renders 1`] = ` } return function template(ctx, node, key = \\"\\") { - const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal); + const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal); return block1([], [b3]); } }"