[REL] v1.4.10

#v1.4.10

- fix: make arrow function capture backwards-compatible

README.md

@@ -124,7 +124,7 @@ npm install @odoo/owl
 
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl-1.4.9](https://github.com/odoo/owl/releases/tag/v1.4.9)
+- [owl-1.4.10](https://github.com/odoo/owl/releases/tag/v1.4.10)
 
 ## License
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "1.4.9",
+  "version": "1.4.10",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "browser": "dist/owl.iife.js",

roadmap.md

@@ -1,6 +1,6 @@
 # 🦉 OWL Roadmap 🦉
 
-- Current version: 1.4.9
+- Current version: 1.4.10
 - Status: stable
 
 This roadmap is only an attempt at predicting Owl's future.  Everything may

src/qweb/compilation_context.ts

@@ -162,7 +162,7 @@ export class CompilationContext {
     const tokens = compileExprToArray(expr, this.variables);
     const done = new Set();
     return tokens
-      .map((tok) => {
+      .map((tok, i) => {
         // "this" in captured expressions should be the current component
         if (tok.value === "this") {
           if (!done.has("this")) {
@@ -174,7 +174,14 @@ export class CompilationContext {
         // Variables that should be looked up in the scope. isLocal is for arrow
         // function arguments that should stay untouched (eg "ev => ev" should
         // not become "const ev_1 = scope['ev']; ev_1 => ev_1")
-        if (tok.varName && !tok.isLocal) {
+        if (
+          tok.varName &&
+          !tok.isLocal &&
+          // HACK: for backwards compatibility, we don't capture bare methods
+          // this allows them to be called with the rendering context/scope
+          // as their this value.
+          (!tokens[i + 1] || tokens[i + 1].type !== "LEFT_PAREN")
+        ) {
           if (!done.has(tok.varName)) {
             done.add(tok.varName);
             this.addLine(`const ${tok.varName}_${argId} = ${tok.value};`);

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

@@ -1798,6 +1798,61 @@ exports[`props evaluation  arrow function prop captures loop variables 2`] = `
 }"
 `;
 
+exports[`props evaluation  bare function calls in arrow function has rendering context as 'this' 1`] = `
+"function anonymous(context, extra
+) {
+    // Template name: \\"Parent\\"
+    let utils = this.constructor.utils;
+    let QWeb = this.constructor;
+    let parent = context;
+    let scope = Object.create(context);
+    let h = this.h;
+    let c1 = [], p1 = {key:1};
+    let vn1 = h('div', p1, c1);
+    scope.ctxVal = 2;
+    // Component 'Child'
+    let w3 = '__4__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__4__']] : false;
+    let props3 = {callback:value=>scope['setValue'](value),value:scope['state'].val};
+    if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
+        w3.destroy();
+        w3 = false;
+    }
+    if (w3) {
+        w3.__updateProps(props3, extra.fiber, undefined);
+        let pvnode = w3.__owl__.pvnode;
+        c1.push(pvnode);
+    } else {
+        let componentKey3 = \`Child\`;
+        let W3 = scope['Child'] || context.constructor.components[componentKey3] || QWeb.components[componentKey3];
+        if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
+        w3 = new W3(parent, props3);
+        parent.__owl__.cmap['__4__'] = w3.__owl__.id;
+        let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        let pvnode = h('dummy', {key: '__4__', hook: {remove() {},destroy(vn) {w3.destroy();}}});
+        c1.push(pvnode);
+        w3.__owl__.pvnode = pvnode;
+    }
+    w3.__owl__.parentLastFiberId = extra.fiber.id;
+    return vn1;
+}"
+`;
+
+exports[`props evaluation  bare function calls in arrow function has rendering context as 'this' 2`] = `
+"function anonymous(context, extra
+) {
+    // Template name: \\"Child\\"
+    let scope = Object.create(context);
+    let h = this.h;
+    let c5 = [], p5 = {key:5};
+    let vn5 = h('span', p5, c5);
+    let _6 = scope['props'].value;
+    if (_6 != null) {
+        c5.push({text: _6});
+    }
+    return vn5;
+}"
+`;
+
 exports[`props evaluation  t-set with a body expression can be used as textual prop 1`] = `
 "function anonymous(context, extra
 ) {

tests/component/component.test.ts

@@ -1920,6 +1920,49 @@ describe("props evaluation ", () => {
     expect(env.qweb.templates.Child.fn.toString()).toMatchSnapshot();
   });
 
+  test("bare function calls in arrow function has rendering context as 'this'", async () => {
+    expect.assertions(7);
+    let child, parent;
+    class Child extends Component {
+      setup() {
+        child = this;
+      }
+    }
+    env.qweb.addTemplate("Child", `<span><t t-esc="props.value"/></span>`);
+
+    class Parent extends Component {
+      static components = { Child };
+      state = useState({ val: 42 });
+      setup() {
+        parent = this;
+      }
+      setValue(value) {
+        // 'this' is the rendering context, NOT the instance
+        expect(this).not.toBe(parent);
+        // the state in the rendering context should be the same as the instance's
+        expect(this.state).toBe(parent.state);
+        expect((this as any).ctxVal).toBe(2);
+        this.state.val = value;
+      }
+    }
+    env.qweb.addTemplate(
+      "Parent",
+      `<div>
+        <t t-set="ctxVal" t-value="2"/>
+        <Child callback="value => setValue(value)" value="state.val"/>
+      </div>`
+    );
+
+    const widget = new Parent();
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>42</span></div>");
+    child.props.callback(123);
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>123</span></div>");
+    expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
+    expect(env.qweb.templates.Child.fn.toString()).toMatchSnapshot();
+  });
+
   test("arrow function prop captures context component instance as 'this' inside slot", async () => {
     expect.assertions(7);
     let child, parent;

tests/qweb/__snapshots__/qweb.test.ts.snap

@@ -3111,8 +3111,7 @@ exports[`t-on t-on with inline statement, part 3 1`] = `
     let c1 = [], p1 = {key:1,on:{}};
     let vn1 = h('button', p1, c1);
     const state_2 = scope['state'];
-    const someFunction_2 = scope['someFunction'];
-    p1.on['click'] = function (e) {if (context.__owl__.status === 5){return}const res = (() => { return state_2.n=someFunction_2(3) })(); if (typeof res === 'function') { res(e) }};
+    p1.on['click'] = function (e) {if (context.__owl__.status === 5){return}const res = (() => { return state_2.n=scope['someFunction'](3) })(); if (typeof res === 'function') { res(e) }};
     c1.push({text: \`Toggle\`});
     return vn1;
 }"