[FIX] qweb/component: refactoring of scoping/variables/slots

This commit is a significant refactoring of the internal of QWeb. It
simplifies the way variables/scoping and slots interact together.  The
main idea is that we use a simple scope object instead of a
context/var/scope object.

This commit also implement the actual correct QWeb semantic for the
t-call directive with a sub body.  Before, we simply extracted the
variables from the body and injected them at the top of the sub
template.  We now simply compile the body before the sub template.

This is a joint work with Lucas (lpe).

closes #541
closes #544
closes #545

closes #557
closes #556

tests/__snapshots__/animations.test.ts.snap

@@ -7,7 +7,7 @@ exports[`animations t-transition combined with component 1`] = `
     let utils = this.constructor.utils;
     let QWeb = this.constructor;
     let parent = context;
-    let owner = context;
+    let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
@@ -20,18 +20,18 @@ exports[`animations t-transition combined with component 1`] = `
         w2 = false;
     }
     if (w2) {
-        w2.__updateProps(props2, extra.fiber, undefined, undefined);
+        w2.__updateProps(props2, extra.fiber, undefined);
         let pvnode = w2.__owl__.pvnode;
         c1.push(pvnode);
     } else {
         let componentKey2 = \`Child\`;
-        let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| context['Child'];
+        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);
         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;
-        let fiber = w2.__prepare(extra.fiber, undefined, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        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 = () => {
           w2.destroy();
         };
@@ -52,11 +52,11 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
     let utils = this.constructor.utils;
     let QWeb = this.constructor;
     let parent = context;
-    let owner = context;
+    let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
-    if (context['state'].display) {
+    if (scope['state'].display) {
         //COMPONENT
         let k3 = \`__4__\`;
         let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false;
@@ -66,18 +66,18 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
             w2 = false;
         }
         if (w2) {
-            w2.__updateProps(props2, extra.fiber, undefined, undefined);
+            w2.__updateProps(props2, extra.fiber, undefined);
             let pvnode = w2.__owl__.pvnode;
             c1.push(pvnode);
         } else {
             let componentKey2 = \`Child\`;
-            let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| context['Child'];
+            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);
             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;
-            let fiber = w2.__prepare(extra.fiber, undefined, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            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 = () => {
           w2.destroy();
         };
@@ -99,11 +99,11 @@ exports[`animations t-transition combined with t-component, remove and re-add be
     let utils = this.constructor.utils;
     let QWeb = this.constructor;
     let parent = context;
-    let owner = context;
+    let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
-    if (context['state'].flag) {
+    if (scope['state'].flag) {
         //COMPONENT
         let k3 = \`__4__\`;
         let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false;
@@ -113,18 +113,18 @@ exports[`animations t-transition combined with t-component, remove and re-add be
             w2 = false;
         }
         if (w2) {
-            w2.__updateProps(props2, extra.fiber, undefined, undefined);
+            w2.__updateProps(props2, extra.fiber, undefined);
             let pvnode = w2.__owl__.pvnode;
             c1.push(pvnode);
         } else {
             let componentKey2 = \`Child\`;
-            let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| context['Child'];
+            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);
             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;
-            let fiber = w2.__prepare(extra.fiber, undefined, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            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 = () => {
           w2.destroy();
         };

tests/component/__snapshots__/props_validation.test.ts.snap

@@ -7,7 +7,7 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
     let utils = this.constructor.utils;
     let QWeb = this.constructor;
     let parent = context;
-    let owner = context;
+    let scope = Object.create(context);
     var h = this.h;
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
@@ -20,16 +20,16 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
         w2 = false;
     }
     if (w2) {
-        w2.__updateProps(props2, extra.fiber, undefined, undefined);
+        w2.__updateProps(props2, extra.fiber, undefined);
         let pvnode = w2.__owl__.pvnode;
         c1.push(pvnode);
     } else {
         let componentKey2 = \`Child\`;
-        let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| context['Child'];
+        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, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        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();}}});
         c1.push(pvnode);
         w2.__owl__.pvnode = pvnode;

tests/component/component.test.ts

@@ -4586,6 +4586,159 @@ describe("t-slot directive", () => {
     expect(fixture.innerHTML).toBe("<div><span>B0</span><span>B1</span></div>");
   });
 
+  test("nested slots in same template", async () => {
+    let child, child2, child3;
+    class Child extends Widget {
+      static template = xml`
+        <span id="c1">
+          <div>
+            <t t-slot="default"/>
+          </div>
+        </span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        child = this;
+      }
+    }
+    class Child2 extends Widget {
+      static template = xml`
+        <span id="c2">
+          <t t-slot="default"/>
+        </span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        child2 = this;
+      }
+    }
+    class Child3 extends Widget {
+      static template = xml`
+        <span>Child 3</span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        child3 = this;
+      }
+    }
+    class Parent extends Widget {
+      static components = { Child, Child2, Child3 };
+      static template = xml`
+        <span id="parent">
+          <Child>
+            <Child2>
+              <Child3/>
+            </Child2>
+          </Child>
+        </span>`;
+    }
+
+    const widget = new Parent();
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe(
+      '<span id="parent"><span id="c1"><div><span id="c2"><span>Child 3</span></span></div></span></span>'
+    );
+
+    expect(child3.__owl__.parent).toStrictEqual(child2);
+    expect(child2.__owl__.parent).toStrictEqual(child);
+    expect(child.__owl__.parent).toStrictEqual(widget);
+  });
+
+  test("t-slot nested within another slot", async () => {
+    let portal, modal, child3;
+    class Child3 extends Widget {
+      static template = xml`
+        <span>Child 3</span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        child3 = this;
+      }
+    }
+    class Modal extends Widget {
+      static template = xml`
+        <span id="modal">
+          <t t-slot="default"/>
+        </span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        modal = this;
+      }
+    }
+    class Portal extends Widget {
+      static template = xml`
+        <span id="portal">
+          <t t-slot="default"/>
+        </span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        portal = this;
+      }
+    }
+    class Dialog extends Widget {
+      static components = { Modal, Portal };
+      static template = xml`
+        <span id="c2">
+          <Modal>
+            <Portal>
+              <t t-slot="default"/>
+            </Portal>
+           </Modal>
+        </span>`;
+    }
+    class Parent extends Widget {
+      static components = { Child3, Dialog };
+      static template = xml`
+        <span id="c1">
+          <Dialog>
+            <Child3/>
+          </Dialog>
+        </span>`;
+    }
+
+    const widget = new Parent();
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe(
+      '<span id="c1"><span id="c2"><span id="modal"><span id="portal"><span>Child 3</span></span></span></span></span>'
+    );
+
+    expect(child3.__owl__.parent).toStrictEqual(portal);
+    expect(portal.__owl__.parent).toStrictEqual(modal);
+  });
+
+  test("t-slot supports many instances", async () => {
+    let child3;
+    class Child3 extends Widget {
+      static template = xml`
+        <span>Child 3</span>`;
+      constructor(parent, props) {
+        super(parent, props);
+        child3 = this;
+      }
+    }
+    class Dialog extends Widget {
+      static template = xml`
+        <span id="c2">
+          <t t-slot="default"/>
+        </span>`;
+    }
+    class Parent extends Widget {
+      static components = { Child3, Dialog };
+      static template = xml`
+        <span id="c1">
+          <Dialog>
+            <Child3 val="state.lol"/>
+          </Dialog>
+        </span>`;
+      state = { lol: "k" };
+    }
+
+    const widget = new Parent();
+    await widget.mount(fixture);
+    expect(child3.props.val).toBe("k");
+
+    const widget_1 = new Parent();
+    widget_1.state.lol = "m";
+    await widget_1.mount(fixture);
+    expect(child3.props.val).toBe("m");
+  });
+
   test("slots in slots, with vars", async () => {
     class B extends Component<any, any> {
       static template = xml`<span><t t-slot="default"/></span>`;

tests/qweb/qweb.test.ts

@@ -278,6 +278,21 @@ describe("t-set", () => {
     expect(renderToString(qweb, "test", { flag: true })).toBe("<div>1</div>");
     expect(renderToString(qweb, "test", { flag: false })).toBe("<div>0</div>");
   });
+
+  test("t-set body is evaluated immediately", () => {
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <t t-set="v1" t-value="'before'"/>
+        <t t-set="v2">
+          <span><t t-esc="v1"/></span>
+        </t>
+        <t t-set="v1" t-value="'after'"/>
+        <t t-raw="v2"/>
+      </div>`);
+
+      expect(renderToString(qweb, "test")).toBe("<div><span>before</span></div>");
+    });
 });
 
 describe("t-if", () => {
@@ -598,10 +613,19 @@ describe("attributes", () => {
 
 describe("t-call (template calling", () => {
   test("basic caller", () => {
+    qweb.addTemplate("_basic-callee", "<span>ok</span>");
+    qweb.addTemplate("caller", '<div><t t-call="_basic-callee"/></div>');
+    const expected = "<div><span>ok</span></div>";
+    expect(renderToString(qweb, "caller")).toBe(expected);
+    expect(qweb.subTemplates["_basic-callee"].toString()).toMatchSnapshot();
+  });
+
+  test("basic caller, no parent node", () => {
     qweb.addTemplate("_basic-callee", "<div>ok</div>");
     qweb.addTemplate("caller", '<t t-call="_basic-callee"/>');
     const expected = "<div>ok</div>";
     expect(renderToString(qweb, "caller")).toBe(expected);
+    expect(qweb.subTemplates["_basic-callee"].toString()).toMatchSnapshot();
   });
 
   test("t-call with t-if", () => {
@@ -609,6 +633,7 @@ describe("t-call (template calling", () => {
     qweb.addTemplate("caller", '<div><t t-if="flag" t-call="sub"/></div>');
     const expected = "<div><span>ok</span></div>";
     expect(renderToString(qweb, "caller", { flag: true })).toBe(expected);
+    expect(qweb.subTemplates["sub"].toString()).toMatchSnapshot();
   });
 
   test("t-call not allowed on a non t node", () => {
@@ -693,6 +718,7 @@ describe("t-call (template calling", () => {
     `);
     const expected = "<div><div><span>hey</span> <span>yay</span></div></div>";
     expect(renderToString(qweb, "main")).toBe(expected);
+    expect(qweb.subTemplates["SubTemplate"].toString()).toMatchSnapshot();
   });
 
   test("cascading t-call t-raw='0'", () => {
@@ -742,7 +768,7 @@ describe("t-call (template calling", () => {
     `);
     const expected = "<div><span>hey</span></div>";
     expect(renderToString(qweb, "recursive")).toBe(expected);
-    const recursiveFn = Object.values(qweb.recursiveFns)[0] as any;
+    const recursiveFn = Object.values(qweb.subTemplates)[0] as any;
     expect(recursiveFn.toString()).toMatchSnapshot();
   });
 
@@ -770,7 +796,7 @@ describe("t-call (template calling", () => {
     expect(renderToString(qweb, "Parent", { root }, { fiber: { vars: {}, scope: {} } })).toBe(
       expected
     );
-    const recursiveFn = Object.values(qweb.recursiveFns)[0] as any;
+    const recursiveFn = Object.values(qweb.subTemplates)[0] as any;
     expect(recursiveFn.toString()).toMatchSnapshot();
   });
 
@@ -797,7 +823,7 @@ describe("t-call (template calling", () => {
     const expected =
       "<div><div><p>a</p><div><p>b</p><div><p>d</p></div></div><div><p>c</p></div></div></div>";
     expect(renderToString(qweb, "Parent", { root }, { fiber: {} })).toBe(expected);
-    const recursiveFn = Object.values(qweb.recursiveFns)[0] as any;
+    const recursiveFn = Object.values(qweb.subTemplates)[0] as any;
     expect(recursiveFn.toString()).toMatchSnapshot();
   });
 
@@ -807,6 +833,51 @@ describe("t-call (template calling", () => {
     const expected = "<div><span>desk</span></div>";
     expect(trim(renderToString(qweb, "abcd"))).toBe(expected);
   });
+
+  test("t-call with t-set inside and outside", () => {
+    qweb.addTemplates(`
+      <templates>
+        <div t-name="main">
+          <t t-foreach="list" t-as="v">
+            <t t-set="val" t-value="v.val"/>
+            <t t-call="sub">
+              <t t-set="val3" t-value="val*3"/>
+            </t>
+          </t>
+        </div>
+        <t t-name="sub">
+          <span t-esc="val3"/>
+        </t>
+      </templates>
+    `);
+    const expected = "<div><span>3</span><span>6</span><span>9</span></div>";
+    const context = { list: [{ val: 1 }, { val: 2 }, { val: 3 }] };
+    expect(trim(renderToString(qweb, "main", context))).toBe(expected);
+  });
+
+  test("t-call with t-set inside and outside. 2", () => {
+    qweb.addTemplates(`
+      <templates>
+        <div t-name="main">
+          <t t-foreach="list" t-as="v">
+            <t t-set="val" t-value="v.val"/>
+            <t t-call="sub">
+              <t t-set="val3" t-value="val*3"/>
+            </t>
+          </t>
+        </div>
+        <t t-name="sub">
+          <span t-esc="val3"/>
+          <t t-esc="w"/>
+        </t>
+        <p t-name="wrapper"><t t-set="w" t-value="'fromwrapper'"/><t t-call="main"/></p>
+      </templates>
+    `);
+    const expected =
+      "<p><div><span>3</span>fromwrapper<span>6</span>fromwrapper<span>9</span>fromwrapper</div></p>";
+    const context = { list: [{ val: 1 }, { val: 2 }, { val: 3 }] };
+    expect(trim(renderToString(qweb, "wrapper", context))).toBe(expected);
+  });
 });
 
 describe("foreach", () => {
@@ -1536,6 +1607,21 @@ describe("debugging", () => {
     console.log = consoleLog;
   });
 
+  test("t-debug on sub template", () => {
+    const consoleLog = console.log;
+    console.log = jest.fn();
+    qweb.addTemplates(`
+      <p t-name="sub" t-debug="1">coucou</p>
+      <div t-name="test">
+        <t t-call="sub"/>
+      </div>`
+    );
+    qweb.render("test");
+
+    expect(console.log).toHaveBeenCalledTimes(1);
+    console.log = consoleLog;
+  });
+
   test("t-log", () => {
     const consoleLog = console.log;
     console.log = jest.fn();

tests/qweb/qweb_expressions.test.ts

@@ -92,7 +92,7 @@ describe("expression evaluation", () => {
 
   test("parenthesis", () => {
     expect(compileExpr("(1)", {})).toBe("(1)");
-    expect(compileExpr("a*(1 +3)", {})).toBe("context['a']*(1+3)");
+    expect(compileExpr("a*(1 +3)", {})).toBe("scope['a']*(1+3)");
   });
 
   test("objects and sub objects", () => {
@@ -100,8 +100,8 @@ describe("expression evaluation", () => {
   });
 
   test("replacing variables", () => {
-    expect(compileExpr("a", {})).toBe("context['a']");
-    expect(compileExpr("a", { a: { id: "_3", expr: "" } })).toBe("_3");
+    expect(compileExpr("a", {})).toBe("scope['a']");
+    expect(compileExpr("a", { a: { id: "_3", expr: "scope._3" } })).toBe("scope._3");
   });
 
   test("arrays and objects", () => {
@@ -111,65 +111,63 @@ describe("expression evaluation", () => {
   });
 
   test("dot operator", () => {
-    expect(compileExpr("a.b", {})).toBe("context['a'].b");
-    expect(compileExpr("a.b.c", {})).toBe("context['a'].b.c");
+    expect(compileExpr("a.b", {})).toBe("scope['a'].b");
+    expect(compileExpr("a.b.c", {})).toBe("scope['a'].b.c");
   });
 
   test("various unary operators", () => {
-    expect(compileExpr("!flag", {})).toBe("!context['flag']");
+    expect(compileExpr("!flag", {})).toBe("!scope['flag']");
     expect(compileExpr("-3", {})).toBe("-3");
-    expect(compileExpr("-a", {})).toBe("-context['a']");
-    expect(compileExpr("typeof a", {})).toBe("typeof context['a']");
+    expect(compileExpr("-a", {})).toBe("-scope['a']");
+    expect(compileExpr("typeof a", {})).toBe("typeof scope['a']");
   });
 
   test("various binary operators", () => {
-    expect(compileExpr("color == 'black'", {})).toBe("context['color']=='black'");
-    expect(compileExpr("a || b", {})).toBe("context['a']||context['b']");
-    expect(compileExpr("color === 'black'", {})).toBe("context['color']==='black'");
-    expect(compileExpr("'li_'+item", {})).toBe("'li_'+context['item']");
-    expect(compileExpr("state.val > 1", {})).toBe("context['state'].val>1");
+    expect(compileExpr("color == 'black'", {})).toBe("scope['color']=='black'");
+    expect(compileExpr("a || b", {})).toBe("scope['a']||scope['b']");
+    expect(compileExpr("color === 'black'", {})).toBe("scope['color']==='black'");
+    expect(compileExpr("'li_'+item", {})).toBe("'li_'+scope['item']");
+    expect(compileExpr("state.val > 1", {})).toBe("scope['state'].val>1");
   });
 
   test("boolean operations", () => {
-    expect(compileExpr("a && b", {})).toBe("context['a']&&context['b']");
+    expect(compileExpr("a && b", {})).toBe("scope['a']&&scope['b']");
   });
 
   test("ternary operators", () => {
-    expect(compileExpr("a ? b: '2'", {})).toBe("context['a']?context['b']:'2'");
-    expect(compileExpr("a ? b: (c or '2') ", {})).toBe(
-      "context['a']?context['b']:(context['c']||'2')"
-    );
+    expect(compileExpr("a ? b: '2'", {})).toBe("scope['a']?scope['b']:'2'");
+    expect(compileExpr("a ? b: (c or '2') ", {})).toBe("scope['a']?scope['b']:(scope['c']||'2')");
     expect(compileExpr("a ? {test:c}: [1,u]", {})).toBe(
-      "context['a']?{test:context['c']}:[1,context['u']]"
+      "scope['a']?{test:scope['c']}:[1,scope['u']]"
     );
   });
 
   test("word replacement", () => {
-    expect(compileExpr("a or b", {})).toBe("context['a']||context['b']");
-    expect(compileExpr("a and b", {})).toBe("context['a']&&context['b']");
+    expect(compileExpr("a or b", {})).toBe("scope['a']||scope['b']");
+    expect(compileExpr("a and b", {})).toBe("scope['a']&&scope['b']");
   });
 
   test("function calls", () => {
-    expect(compileExpr("a()", {})).toBe("context['a']()");
-    expect(compileExpr("a(1)", {})).toBe("context['a'](1)");
-    expect(compileExpr("a(1,2)", {})).toBe("context['a'](1,2)");
-    expect(compileExpr("a(1,2,{a:[a]})", {})).toBe("context['a'](1,2,{a:[context['a']]})");
+    expect(compileExpr("a()", {})).toBe("scope['a']()");
+    expect(compileExpr("a(1)", {})).toBe("scope['a'](1)");
+    expect(compileExpr("a(1,2)", {})).toBe("scope['a'](1,2)");
+    expect(compileExpr("a(1,2,{a:[a]})", {})).toBe("scope['a'](1,2,{a:[scope['a']]})");
     expect(compileExpr("'x'.toUpperCase()", {})).toBe("'x'.toUpperCase()");
     expect(compileExpr("'x'.toUpperCase({a: 3})", {})).toBe("'x'.toUpperCase({a:3})");
-    expect(compileExpr("'x'.toUpperCase(a)", { a: { id: "_v5", expr: "" } })).toBe(
-      "'x'.toUpperCase(_v5)"
+    expect(compileExpr("'x'.toUpperCase(a)", { a: { id: "_v5", expr: "scope._v5" } })).toBe(
+      "'x'.toUpperCase(scope._v5)"
     );
-    expect(compileExpr("'x'.toUpperCase({b: a})", { a: { id: "_v5", expr: "" } })).toBe(
-      "'x'.toUpperCase({b:_v5})"
+    expect(compileExpr("'x'.toUpperCase({b: a})", { a: { id: "_v5", expr: "scope._v5" } })).toBe(
+      "'x'.toUpperCase({b:scope._v5})"
     );
   });
 
   test("arrow functions", () => {
-    expect(compileExpr("list.map(e => e.val)", {})).toBe("context['list'].map(e=>e.val)");
-    expect(compileExpr("list.map(e => a + e)", {})).toBe("context['list'].map(e=>context['a']+e)");
-    expect(compileExpr("list.map((e) => e)", {})).toBe("context['list'].map((e)=>e)");
+    expect(compileExpr("list.map(e => e.val)", {})).toBe("scope['list'].map(e=>e.val)");
+    expect(compileExpr("list.map(e => a + e)", {})).toBe("scope['list'].map(e=>scope['a']+e)");
+    expect(compileExpr("list.map((e) => e)", {})).toBe("scope['list'].map((e)=>e)");
     expect(compileExpr("list.map((elem, index) => elem + index)", {})).toBe(
-      "context['list'].map((elem,index)=>elem+index)"
+      "scope['list'].map((elem,index)=>elem+index)"
     );
   });
 });

tests/router/__snapshots__/link.test.ts.snap

@@ -5,17 +5,17 @@ exports[`Link component can render simple cases 1`] = `
 ) {
     // Template name: \\"__template__1\\"
     let utils = this.constructor.utils;
-    let owner = context;
+    let scope = Object.create(context);
     var h = this.h;
-    let _5 = utils.toObj({'router-link-active':context['isActive']});
-    var _6 = context['href'];
+    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(owner, e); } else { context.navigate; }};
+    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__.parent, Object.assign({}, extra, {parentNode: c7, parent: extra.parent || owner, vars: extra.fiber.vars}));
+        slot8.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c7, parent: extra.parent || context}));
     }
     return vn7;
 }"

tests/router/__snapshots__/route_component.test.ts.snap

@@ -7,32 +7,32 @@ exports[`RouteComponent can render simple cases 1`] = `
     let utils = this.constructor.utils;
     let QWeb = this.constructor;
     let parent = context;
-    let owner = context;
+    let scope = Object.create(context);
     let result;
     var h = this.h;
-    if (context['routeComponent']) {
-        const nodeKey5 = context['env'].router.currentRouteName;
+    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({}, context['env'].router.currentParams);
+        let props6 = Object.assign({}, scope['env'].router.currentParams);
         if (w6 && w6.__owl__.currentFiber && !w6.__owl__.vnode) {
             w6.destroy();
             w6 = false;
         }
         if (w6) {
-            w6.__updateProps(props6, extra.fiber, undefined, undefined);
+            w6.__updateProps(props6, extra.fiber, undefined);
             let pvnode = w6.__owl__.pvnode;
             utils.defineProxy(vn9, pvnode);
         } else {
             let componentKey6 = \`routeComponent\`;
-            let W6 = context.constructor.components[componentKey6] || QWeb.components[componentKey6]|| context['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, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            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;

tests/tooling/debug_script_3.test.ts

@@ -23,7 +23,7 @@ test("log a specific message for render method calls if component is not mounted
 
   class Parent extends Component<any, any> {
     static template = xml`<div><t t-esc="state.value"/></div>`;
-    state = owl.hooks.useState({value: 1});
+    state = owl.hooks.useState({ value: 1 });
   }
 
   const parent = new Parent(null, {});