[IMP] qweb: implement t-key with a directive

closes #331

src/component/directive.ts

@@ -223,30 +223,19 @@ QWeb.addDirective({
       }
     }
 
-    let key = node.getAttribute("t-key");
-    if (key) {
-      key = ctx.formatExpression(key);
-    }
-
     // computing the props string representing the props object
     let propStr = Object.keys(props)
       .map(k => k + ":" + props[k])
       .join(",");
     let defID = ctx.generateID();
     let componentID = ctx.generateID();
-    let keyID = key && ctx.generateID();
-    if (key) {
-      // we bind a variable to the key (could be a complex expression, so we
-      // want to evaluate it only once)
-      ctx.addLine(`let key${keyID} = 'key' + ${key};`);
-    }
 
     let locationExpr = `\`__${ctx.generateID()}__`;
     for (let i = 0; i < ctx.loopNumber - 1; i++) {
       locationExpr += `\${i${i + 1}}__`;
     }
-    if (key || ctx.currentKey) {
-      const k = key ? `key${keyID}` : ctx.currentKey;
+    if (ctx.lastNodeKey || ctx.currentKey) {
+      const k = ctx.lastNodeKey || ctx.currentKey;
       ctx.addLine(`let templateId${componentID} = ${locationExpr}\` + ${k};`);
     } else {
       locationExpr += ctx.loopNumber ? `\${i${ctx.loopNumber}}__\`` : "`";

src/qweb/base_directives.ts

@@ -294,25 +294,17 @@ QWeb.addDirective({
     ctx.addToScope(name, `_${keysID}[${loopVar}]`);
     ctx.addToScope(name + "_value", `_${valuesID}[${loopVar}]`);
     const nodeCopy = <Element>node.cloneNode(true);
-    let shouldWarn = nodeCopy.tagName !== "t" && !nodeCopy.hasAttribute("t-key");
-    if (!shouldWarn && node.tagName === "t") {
-      if (node.hasAttribute("t-component") && !node.hasAttribute("t-key")) {
-        shouldWarn = true;
-      }
-      if (
-        !shouldWarn &&
-        node.children.length === 1 &&
-        node.children[0].tagName !== "t" &&
-        !node.children[0].hasAttribute("t-key")
-      ) {
-        shouldWarn = true;
-      }
-    }
+    let shouldWarn =
+      !nodeCopy.hasAttribute("t-key") &&
+      node.children.length === 1 &&
+      node.children[0].tagName !== "t" &&
+      !node.children[0].hasAttribute("t-key");
     if (shouldWarn) {
       console.warn(
         `Directive t-foreach should always be used with a t-key! (in template: '${ctx.templateName}')`
       );
     }
+
     nodeCopy.removeAttribute("t-foreach");
     qweb._compileNode(nodeCopy, ctx);
     ctx.dedent();

src/qweb/extensions.ts

@@ -261,3 +261,16 @@ QWeb.addDirective({
     ctx.addLine(`p${nodeID}.on['${event}'] = extra.handlers['${event}' + ${nodeID}];`);
   }
 });
+
+//------------------------------------------------------------------------------
+// t-key
+//------------------------------------------------------------------------------
+QWeb.addDirective({
+  name: "key",
+  priority: 45,
+  atNodeEncounter({ ctx, value }) {
+    let id = ctx.generateID();
+    ctx.addLine(`const nodeKey${id} = ${ctx.formatExpression(value)};`);
+    ctx.lastNodeKey = `nodeKey${id}`;
+  }
+});

src/qweb/qweb.ts

@@ -151,7 +151,6 @@ export class QWeb extends EventBus {
     name: 1,
     att: 1,
     attf: 1,
-    key: 1,
     translation: 1
   };
   static DIRECTIVES: Directive[] = [];
@@ -725,14 +724,7 @@ export class QWeb extends EventBus {
       }
     }
     let nodeID = ctx.generateID();
-    let nodeKey: any = (<Element>node).getAttribute("t-key");
-    if (nodeKey) {
-      ctx.addLine(`const nodeKey${nodeID} = ${ctx.formatExpression(nodeKey)}`);
-      nodeKey = `nodeKey${nodeID}`;
-      ctx.lastNodeKey = nodeKey;
-    } else {
-      nodeKey = nodeID;
-    }
+    let nodeKey = ctx.lastNodeKey || nodeID;
     const parts = [`key:${nodeKey}`];
     if (attrs.length + tattrs.length > 0) {
       parts.push(`attrs:{${attrs.join(",")}}`);