[FIX] component: capture ref key in closure

This is what commit d3197e9865 should have
done. Many changes should be done on normal nodes and on components!

closes #77

src/qweb.ts

@@ -120,9 +120,9 @@ const UTILS = {
     elm.classList.add(name + "-leave");
     elm.classList.add(name + "-leave-active");
     const finalize = () => {
-        elm.classList.remove(name + "-leave-active");
-        elm.classList.remove(name + "-enter-to");
-        rm();
+      elm.classList.remove(name + "-leave-active");
+      elm.classList.remove(name + "-enter-to");
+      rm();
     };
     this.nextFrame(() => {
       elm.classList.remove(name + "-leave");
@@ -1193,22 +1193,23 @@ const widgetDirective: Directive = {
     for (let [event, method] of events) {
       ctx.addLine(`w${widgetID}.on('${event}', owner, owner['${method}'])`);
     }
-    let ref = node.getAttribute("t-ref");
-    let refExpr = ref
-      ? `context.refs[${ctx.formatExpression(ref)}] = w${widgetID};`
-      : "";
-
     ctx.addLine(`def${defID} = w${widgetID}._prepare();`);
     ctx.closeIf();
     ctx.closeIf();
+    let ref = node.getAttribute("t-ref");
+    let refExpr = "";
+    let refKey: string = "";
+    if (ref) {
+      refKey = `ref${ctx.generateID()}`;
+      ctx.addLine(`const ${refKey} = ${ctx.formatExpression(ref)}`);
+      refExpr = `context.refs[${refKey}] = w${widgetID};`;
+    }
 
     let finalizeWidgetCode = `w${widgetID}.${
       keepAlive ? "unmount" : "destroy"
     }()`;
     if (ref) {
-      finalizeWidgetCode += `;delete context.refs[${ctx.formatExpression(
-        ref
-      )}]`;
+      finalizeWidgetCode += `;delete context.refs[${refKey}]`;
     }
     ctx.addIf(`isNew${widgetID}`);
     ctx.addLine(

tests/component.test.ts

@@ -901,6 +901,21 @@ describe("composition", () => {
     );
   });
 
+  test("refs in a loop", async () => {
+    class ParentWidget extends Widget {
+      inlineTemplate = `<div>
+        <t t-foreach="state.items" t-as="item">
+          <t t-widget="Child" t-ref="item" t-key="item"/>
+        </t>
+      </div>`;
+      state = { items: [1, 2, 3] };
+      widgets = { Child: Widget };
+    }
+    const parent = new ParentWidget(env);
+    await parent.mount(fixture);
+    expect(Object.keys(parent.refs)).toEqual(["1", "2", "3"]);
+  });
+
   test("parent's elm for a children === children's elm, even after rerender", async () => {
     const widget = new WidgetA(env);
     await widget.mount(fixture);