[IMP] qweb: make t-key directive dynamic

instead of having t-key and t-att-key.

closes #36

src/qweb.ts

@@ -632,7 +632,13 @@ export class QWeb {
       }
     }
     let nodeID = ctx.generateID();
-    const parts = [`key:${nodeID}`];
+    let nodeKey: any = (<Element>node).getAttribute("t-key");
+    if (nodeKey) {
+      nodeKey = ctx.formatExpression(nodeKey);
+    } else {
+      nodeKey = nodeID;
+    }
+    const parts = [`key:${nodeKey}`];
     if (attrs.length + tattrs.length > 0) {
       parts.push(`attrs:{${attrs.join(",")}}`);
     }
@@ -995,12 +1001,7 @@ const widgetDirective: Directive = {
 
     let key = node.getAttribute("t-key");
     if (key) {
-      key = `"${key}"`;
+      key = ctx.formatExpression(key);
-    } else {
-      key = node.getAttribute("t-att-key");
-      if (key) {
-        key = ctx.formatExpression(key);
-      }
     }
     if (props) {
       props = ctx.formatExpression(props);

tests/__snapshots__/component.test.ts.snap

@@ -69,7 +69,7 @@ exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
     var c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
     //WIDGET
-    let key5 = \\"somestring\\";
+    let key5 = 'somestring';
     let _2_index = c1.length;
     c1.push(null);
     let def3;

tests/__snapshots__/qweb.test.ts.snap

@@ -1001,6 +1001,53 @@ exports[`t-if can use some boolean operators in expressions 1`] = `
 }"
 `;
 
+exports[`t-key can use t-key directive on a node 1`] = `
+"function anonymous(context,extra
+) {
+    var h = this.utils.h;
+    var c1 = [], p1 = {key:context['beer'].id};
+    var vn1 = h('div', p1, c1);
+    var _2 = context['beer'].name;
+    if (_2 || _2 === 0) {
+        c1.push({text: _2});
+    }
+    return vn1;
+}"
+`;
+
+exports[`t-key t-key directive in a list 1`] = `
+"function anonymous(context,extra
+) {
+    context = Object.create(context);
+    var h = this.utils.h;
+    var c1 = [], p1 = {key:1};
+    var vn1 = h('ul', p1, c1);
+    var _2 = context['beers'];
+    if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
+    if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
+    var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    var _4 = _2 instanceof Array ? _2 : Object.values(_2);
+    for (let i = 0; i < _3.length; i++) {
+        context.beer_first = i === 0;
+        context.beer_last = i === _3.length - 1;
+        context.beer_parity = i % 2 === 0 ? 'even' : 'odd';
+        context.beer_index = i;
+        context.beer = _3[i];
+        context.beer_value = _4[i];
+        var c5 = [], p5 = {key:context['beer'].id};
+        var vn5 = h('li', p5, c5);
+        c1.push(vn5);
+        var _6 = context['beer'].name;
+        if (_6 || _6 === 0) {
+            c5.push({text: _6});
+        }
+    }
+    return vn1;
+}"
+`;
+
+exports[`t-key t-key directive in a list 2`] = `"<ul><li>Chimay Rouge</li></ul>"`;
+
 exports[`t-on can bind event handler 1`] = `
 "function anonymous(context,extra
 ) {

tests/component.test.ts

@@ -832,7 +832,7 @@ describe("composition", () => {
       "parent",
       `<div>
           <t t-foreach="state.numbers" t-as="number">
-            <t t-widget="ChildWidget" t-att-key="number"/>
+            <t t-widget="ChildWidget" t-key="number"/>
           </t>
         </div>`
     );
@@ -1103,7 +1103,7 @@ describe("random stuff/miscellaneous", () => {
   test("snapshotting compiled code", async () => {
     env.qweb.addTemplate(
       "parent",
-      `<div><t t-widget="child" t-key="somestring" t-props="{flag:state.flag}"/></div>`
+      `<div><t t-widget="child" t-key="'somestring'" t-props="{flag:state.flag}"/></div>`
     );
     class Parent extends Widget {
       inlineTemplate = "parent";

tests/qweb.test.ts

@@ -1056,3 +1056,29 @@ describe("whitespace handling", () => {
     expect(result3).toBe(pretagwithonlywhitespace);
   });
 });
+
+describe("t-key", () => {
+  test("can use t-key directive on a node", () => {
+    qweb.addTemplate(
+      "test",
+      `<div t-key="beer.id"><t t-esc="beer.name"/></div>`
+    );
+    expect(
+      renderToString(qweb, "test", { beer: { id: 12, name: "Chimay Rouge" } })
+    ).toBe("<div>Chimay Rouge</div>");
+  });
+
+  test("t-key directive in a list", () => {
+    qweb.addTemplate(
+      "test",
+      `<ul>
+        <li t-foreach="beers" t-as="beer" t-key="beer.id"><t t-esc="beer.name"/></li>
+       </ul>`
+    );
+    expect(
+      renderToString(qweb, "test", {
+        beers: [{ id: 12, name: "Chimay Rouge" }]
+      })
+    ).toMatchSnapshot();
+  });
+});