[REL] v1.3.1

# v1.3.1

Fixes

- components: fix issue with t-call in nested t-slot (parent component was incorrect)

README.md

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

doc/reference/qweb_templating_language.md

@@ -13,6 +13,7 @@
   - [Setting Variables](#setting-variables)
   - [Conditionals](#conditionals)
   - [Dynamic Attributes](#dynamic-attributes)
+  - [Dynamic Tag Names](#dynamic-tag-names)
   - [Loops](#loops)
   - [Rendering Sub Templates](#rendering-sub-templates)
   - [Dynamic Sub Templates](#dynamic-sub-templates)
@@ -76,6 +77,7 @@ needs. Here is a list of all Owl specific directives:
 | `t-transition`           | [Defining an animation](animations.md#css-transitions)                          |
 | `t-slot`                 | [Rendering a slot](slots.md)                                                    |
 | `t-model`                | [Form input bindings](component.md#form-input-bindings)                         |
+| `t-tag`                  | [Rendering nodes with dynamic tag name](#dynamic-tag-names)                     |
 
 ## Reference
 
@@ -324,6 +326,22 @@ values) or a pair `[key, value]`. For example:
 <div t-att="['a', 'b']"/> <!-- <div a="b"></div> -->
 ```
 
+### Dynamic tag names
+
+When writing generic components or templates, the specific concrete tag for an
+HTML element is not known yet. In those situations, the `t-tag` directive is
+useful. It simply evaluates dynamically an expression to use as a tag name. The
+template:
+
+```xml
+<t t-tag="tag">
+    <span>content</span>
+</t>
+```
+
+will be rendered as `<div><span>content</span></div>` if the `tag` context key
+is set to `div`.
+
 ### Loops
 
 QWeb has an iteration directive `t-foreach` which take an expression returning the

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "1.2.6",
+  "version": "1.3.1",
   "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.2.6
+- Current version: 1.3.1
 - Status: stable
 
 This roadmap is only an attempt at predicting Owl's future.  Everything may

src/qweb/base_directives.ts

@@ -281,7 +281,9 @@ QWeb.addDirective({
 
     // Step 4: add the appropriate function call to current component
     // ------------------------------------------------
-    const parentComponent = `utils.getComponent(context)`;
+    const parentComponent = ctx.rootContext.shouldDefineParent
+      ? `parent`
+      : `utils.getComponent(context)`;
     const key = ctx.generateTemplateKey();
     const parentNode = ctx.parentNode ? `c${ctx.parentNode}` : "result";
     const extra = `Object.assign({}, extra, {parentNode: ${parentNode}, parent: ${parentComponent}, key: ${key}})`;

src/qweb/qweb.ts

@@ -203,6 +203,7 @@ export class QWeb extends EventBus {
     att: 1,
     attf: 1,
     translation: 1,
+    tag: 1,
   };
   static DIRECTIVES: Directive[] = [];
 
@@ -435,6 +436,7 @@ export class QWeb extends EventBus {
       ctx.variables = Object.create(null);
       ctx.parentNode = ctx.generateID();
       ctx.allowMultipleRoots = true;
+      ctx.shouldDefineParent = true;
       ctx.hasParentWidget = true;
       ctx.shouldDefineResult = false;
       ctx.addLine(`let c${ctx.parentNode} = extra.parentNode;`);
@@ -614,7 +616,7 @@ export class QWeb extends EventBus {
       }
     }
 
-    if (node.nodeName !== "t") {
+    if (node.nodeName !== "t" || node.hasAttribute("t-tag")) {
       let nodeID = this._compileGenericNode(node, ctx, withHandlers);
       ctx = ctx.withParent(nodeID);
       let nodeHooks = {};
@@ -841,7 +843,14 @@ export class QWeb extends EventBus {
       ctx.addLine(`}`);
       ctx.closeIf();
     }
-    ctx.addLine(`let vn${nodeID} = h('${node.nodeName}', p${nodeID}, c${nodeID});`);
+    let nodeName = `'${node.nodeName}'`;
+    if ((<Element>node).hasAttribute("t-tag")) {
+      const tagExpr = (<Element>node).getAttribute("t-tag");
+      (<Element>node).removeAttribute("t-tag");
+      nodeName = `tag${ctx.generateID()}`;
+      ctx.addLine(`let ${nodeName} = ${ctx.formatExpression(tagExpr)};`);
+    }
+    ctx.addLine(`let vn${nodeID} = h(${nodeName}, p${nodeID}, c${nodeID});`);
     if (ctx.parentNode) {
       ctx.addLine(`c${ctx.parentNode}.push(vn${nodeID});`);
     } else if (ctx.loopNumber || ctx.hasKey0) {

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

@@ -1573,6 +1573,7 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
 ) {
     // Template name: \\"sub\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let h = this.h;
     let c2 = extra.parentNode;
     let key0 = extra.key || \\"\\";
@@ -1591,6 +1592,7 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
 ) {
     // Template name: \\"sub\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c2 = extra.parentNode;

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

@@ -68,6 +68,7 @@ exports[`t-slot directive can define and call slots 3`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_header_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c4 = extra.parentNode;
     let c5 = [], p5 = {key:5};
@@ -81,6 +82,7 @@ exports[`t-slot directive can define and call slots 4`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_footer_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c6 = extra.parentNode;
     let c7 = [], p7 = {key:7};
@@ -158,6 +160,7 @@ exports[`t-slot directive can define and call slots using old t-set keyword 3`]
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_header_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c4 = extra.parentNode;
     let c5 = [], p5 = {key:5};
@@ -171,6 +174,7 @@ exports[`t-slot directive can define and call slots using old t-set keyword 4`]
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_footer_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c6 = extra.parentNode;
     let c7 = [], p7 = {key:7};
@@ -184,6 +188,7 @@ exports[`t-slot directive content is the default slot 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c4 = extra.parentNode;
     let c5 = [], p5 = {key:5};
@@ -214,6 +219,7 @@ exports[`t-slot directive default slot work with text nodes 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c4 = extra.parentNode;
     c4.push({text: \`sts rocks\`});
@@ -243,6 +249,7 @@ exports[`t-slot directive multiple roots are allowed in a default slot 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c4 = extra.parentNode;
     let c5 = [], p5 = {key:5};
@@ -260,6 +267,7 @@ exports[`t-slot directive multiple roots are allowed in a named slot 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_content_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c4 = extra.parentNode;
     let c5 = [], p5 = {key:5};
@@ -295,6 +303,7 @@ exports[`t-slot directive refs are properly bound in slots 1`] = `
 ) {
     // Template name: \\"slot_footer_template\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     context.__owl__.refs = context.__owl__.refs || {};
     let h = this.h;
     let c8 = extra.parentNode;
@@ -321,6 +330,7 @@ exports[`t-slot directive slots are rendered with proper context 1`] = `
 ) {
     // Template name: \\"slot_footer_template\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let h = this.h;
     let c8 = extra.parentNode;
     let c9 = [], p9 = {key:9,on:{}};
@@ -418,6 +428,7 @@ exports[`t-slot directive slots are rendered with proper context, part 2 3`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c10 = extra.parentNode;
@@ -516,6 +527,7 @@ exports[`t-slot directive slots are rendered with proper context, part 3 3`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c10 = extra.parentNode;
@@ -570,6 +582,7 @@ exports[`t-slot directive slots are rendered with proper context, part 4 2`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c4 = extra.parentNode;

tests/component/slots.test.ts

@@ -1118,4 +1118,37 @@ describe("t-slot directive", () => {
 
     expect(env.qweb.templates[Toggler.template].fn.toString()).toMatchSnapshot();
   });
+
+  test("t-slot within dynamic t-call", async () => {
+    let child;
+    class Child extends Component {
+      static template = xml`<div class="child"/>`;
+      constructor(...args) {
+        super(...args);
+        child = this;
+      }
+    }
+
+    class Slotted extends Component {
+      static template = xml`<div class="slotted"><t t-slot="default" /></div>`;
+    }
+
+    class UsingTcallInSlotted extends Component {
+      tcallTemplate = xml`<div class="slot"><Child/></div>`;
+      static template = xml`
+      <div>
+        <Slotted>
+          <t t-call="{{ tcallTemplate }}"/>
+        </Slotted>
+      </div>`;
+      static components = { Slotted, Child };
+    }
+
+    await mount(UsingTcallInSlotted, { target: fixture });
+
+    expect(child.__owl__.parent).toBeInstanceOf(Slotted);
+    expect(fixture.innerHTML).toBe(
+      `<div><div class="slotted"><div class="slot"><div class="child"></div></div></div></div>`
+    );
+  });
 });

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

@@ -1514,6 +1514,7 @@ exports[`t-call (template calling recursive template, part 1 2`] = `
 ) {
     // Template name: \\"recursive\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c3 = extra.parentNode;
@@ -1530,7 +1531,7 @@ exports[`t-call (template calling recursive template, part 1 2`] = `
         scope = Object.create(scope);
         scope.__access_mode__ = 'ro';
         let k7 = \`__7__\${key0}__\`;
-        this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c4, parent: utils.getComponent(context), key: k7}));
+        this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c4, parent: parent, key: k7}));
         scope = _origScope6;
     }
 }"
@@ -1566,6 +1567,7 @@ exports[`t-call (template calling recursive template, part 2 2`] = `
 ) {
     // Template name: \\"nodeTemplate\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c2 = extra.parentNode;
@@ -1607,7 +1609,7 @@ exports[`t-call (template calling recursive template, part 2 2`] = `
                 scope[utils.zero] = c__0;
             }
             let k11 = \`__11__\${key0}__\${key1}__\`;
-            this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c3, parent: utils.getComponent(context), key: k11}));
+            this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c3, parent: parent, key: k11}));
         }
         scope = _origScope10;
     }
@@ -1645,6 +1647,7 @@ exports[`t-call (template calling recursive template, part 3 2`] = `
 ) {
     // Template name: \\"nodeTemplate\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c2 = extra.parentNode;
@@ -1686,7 +1689,7 @@ exports[`t-call (template calling recursive template, part 3 2`] = `
                 scope[utils.zero] = c__0;
             }
             let k11 = \`__11__\${key0}__\${key1}__\`;
-            this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c3, parent: utils.getComponent(context), key: k11}));
+            this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c3, parent: parent, key: k11}));
         }
         scope = _origScope10;
     }
@@ -1725,6 +1728,7 @@ exports[`t-call (template calling recursive template, part 4: with t-set recursi
 ) {
     // Template name: \\"nodeTemplate\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c2 = extra.parentNode;
@@ -1771,7 +1775,7 @@ exports[`t-call (template calling recursive template, part 4: with t-set recursi
                 scope[utils.zero] = c__0;
             }
             let k11 = \`__11__\${key0}__\${key1}__\`;
-            this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c3, parent: utils.getComponent(context), key: k11}));
+            this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c3, parent: parent, key: k11}));
         }
         scope = _origScope10;
     }

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

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`qweb t-tag simple usecases 1`] = `
+"function anonymous(context, extra
+) {
+    // Template name: \\"test\\"
+    let scope = Object.create(context);
+    let result;
+    let h = this.h;
+    let c1 = [], p1 = {key:1};
+    let tag2 = 'div';
+    let vn1 = h(tag2, p1, c1);
+    result = vn1;
+    return result;
+}"
+`;
+
+exports[`qweb t-tag simple usecases 2`] = `
+"function anonymous(context, extra
+) {
+    // Template name: \\"test\\"
+    let scope = Object.create(context);
+    let result;
+    let h = this.h;
+    let c3 = [], p3 = {key:3};
+    let tag4 = scope['tag'];
+    let vn3 = h(tag4, p3, c3);
+    result = vn3;
+    c3.push({text: \`text\`});
+    return result;
+}"
+`;
+
+exports[`qweb t-tag with multiple attributes 1`] = `
+"function anonymous(context, extra
+) {
+    // Template name: \\"test\\"
+    let scope = Object.create(context);
+    let result;
+    let h = this.h;
+    let _2 = {'blueberry':true};
+    let _3 = 'raspberry';
+    let c4 = [], p4 = {key:4,attrs:{taste: _3},class:_2};
+    let tag5 = scope['tag'];
+    let vn4 = h(tag5, p4, c4);
+    result = vn4;
+    c4.push({text: \`gooseberry\`});
+    return result;
+}"
+`;
+
+exports[`qweb t-tag with multiple child nodes 1`] = `
+"function anonymous(context, extra
+) {
+    // Template name: \\"test\\"
+    let scope = Object.create(context);
+    let result;
+    let h = this.h;
+    let c1 = [], p1 = {key:1};
+    let tag2 = scope['tag'];
+    let vn1 = h(tag2, p1, c1);
+    result = vn1;
+    c1.push({text: \` pear \`});
+    let c3 = [], p3 = {key:3};
+    let vn3 = h('span', p3, c3);
+    c1.push(vn3);
+    c3.push({text: \`apple\`});
+    c1.push({text: \` strawberry \`});
+    return result;
+}"
+`;

tests/qweb/qweb_t_tag.test.ts

@@ -0,0 +1,42 @@
+import { QWeb } from "../../src/qweb/index";
+import { renderToString } from "../helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+function render(template, context = {}) {
+  const qweb = new QWeb();
+  qweb.addTemplate("test", template);
+  return renderToString(qweb, "test", context);
+}
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+describe("qweb t-tag", () => {
+  test("simple usecases", () => {
+    expect(render(`<t t-tag="'div'"></t>`)).toBe("<div></div>");
+    expect(render(`<t t-tag="tag">text</t>`, { tag: "span" })).toBe("<span>text</span>");
+  });
+
+  test("with multiple child nodes", () => {
+    const template = `
+            <t t-tag="tag">
+                pear
+                <span>apple</span>
+                strawberry
+            </t>`;
+    expect(render(template, { tag: "div" })).toBe(
+      "<div> pear <span>apple</span> strawberry </div>"
+    );
+  });
+
+  test("with multiple attributes", () => {
+    const template = `
+            <t t-tag="tag" class="blueberry" taste="raspberry">gooseberry</t>`;
+    const expected = `<div taste=\"raspberry\" class=\"blueberry\">gooseberry</div>`;
+    expect(render(template, { tag: "div" })).toBe(expected);
+  });
+});