From 370a92b67eb899b8c7e4de47687a960cae0c93f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Tue, 9 Apr 2019 10:31:32 +0200
Subject: [PATCH] imp: t-ref directive is now dynamic

closes #11
---
 examples/web/static/src/xml/templates.xml |  4 ++--
 src/qweb.ts                               | 10 ++++++----
 tests/__snapshots__/qweb.test.ts.snap     | 16 ++++++++++++++++
 tests/component.test.ts                   |  2 +-
 tests/qweb.test.ts                        |  9 ++++++++-
 5 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/examples/web/static/src/xml/templates.xml b/examples/web/static/src/xml/templates.xml
index cd4bf7f2..b3f99c9d 100644
--- a/examples/web/static/src/xml/templates.xml
+++ b/examples/web/static/src/xml/templates.xml
@@ -4,13 +4,13 @@
   <div t-name="web.web_client" class="o_web_client">
     <t t-widget="Navbar" t-props="{inHome:state.inHome,app:state.currentApp}" />
     <t t-widget="HomeMenu" t-if="state.inHome" t-keep-alive="1" t-props="{menuInfo:props.menuInfo}" />
-    <div class="o_content" t-att-class="state.inHome ? 'o_hidden' : ''" t-ref="content"/>
+    <div class="o_content" t-att-class="state.inHome ? 'o_hidden' : ''" t-ref="'content'"/>
     <div class="o_notification_container">
       <t t-foreach="state.notifications" t-as="notif">
         <t t-widget="Notification" t-props="notif"/>
       </t>
     </div>
-    <div class="o_loading d-none" t-ref="loading_indicator">Loading</div>
+    <div class="o_loading d-none" t-ref="'loading_indicator'">Loading</div>
   </div>
 
   <div t-name="web.navbar" class="o_navbar" t-att-class="props.inHome ? 'o_in_home' : ''">
diff --git a/src/qweb.ts b/src/qweb.ts
index ff9232b5..f874f3f9 100644
--- a/src/qweb.ts
+++ b/src/qweb.ts
@@ -900,10 +900,12 @@ const onDirective: Directive = {
 const refDirective: Directive = {
   name: "ref",
   priority: 95,
-  atNodeCreation({ ctx, node, nodeID }) {
-    let ref = node.getAttribute("t-ref");
+  atNodeCreation({ ctx, node }) {
+    let ref = node.getAttribute("t-ref")!;
     ctx.addLine(`p${ctx.parentNode}.hook = {
-            create: (_, n) => context.refs['${ref}'] = n.elm,
+            create: (_, n) => context.refs[${ctx.formatExpression(
+              ref
+            )}] = n.elm,
         };`);
   }
 };
@@ -996,7 +998,7 @@ const widgetDirective: Directive = {
     }
     let ref = node.getAttribute("t-ref");
     if (ref) {
-      ctx.addLine(`context.refs['${ref}'] = w${widgetID};`);
+      ctx.addLine(`context.refs[${ctx.formatExpression(ref)}] = w${widgetID};`);
     }
 
     ctx.addLine(`def${defID} = w${widgetID}._start();`);
diff --git a/tests/__snapshots__/qweb.test.ts.snap b/tests/__snapshots__/qweb.test.ts.snap
index aaa0b878..ebd6aff7 100644
--- a/tests/__snapshots__/qweb.test.ts.snap
+++ b/tests/__snapshots__/qweb.test.ts.snap
@@ -1189,6 +1189,22 @@ exports[`t-raw variable 1`] = `
 }"
 `;
 
+exports[`t-ref can get a dynamic ref on a node 1`] = `
+"function anonymous(context,extra
+) {
+    var h = this.utils.h;
+    var c1 = [], p1 = {key:1};
+    var vn1 = h('div', p1, c1);
+    var c2 = [], p2 = {key:2};
+    var vn2 = h('span', p2, c2);
+    c1.push(vn2);
+    p2.hook = {
+            create: (_, n) => context.refs['myspan' + 3] = n.elm,
+        };
+    return vn1;
+}"
+`;
+
 exports[`t-ref can get a ref on a node 1`] = `
 "function anonymous(context,extra
 ) {
diff --git a/tests/component.test.ts b/tests/component.test.ts
index ce83012f..c7b6535f 100644
--- a/tests/component.test.ts
+++ b/tests/component.test.ts
@@ -628,7 +628,7 @@ describe("composition", () => {
 
   test("t-refs on widget are widgets", async () => {
     class WidgetC extends Widget {
-      inlineTemplate = `<div>Hello<t t-ref="mywidgetb" t-widget="b"/></div>`;
+      inlineTemplate = `<div>Hello<t t-ref="'mywidgetb'" t-widget="b"/></div>`;
       widgets = { b: WidgetB };
     }
     const widget = new WidgetC(env);
diff --git a/tests/qweb.test.ts b/tests/qweb.test.ts
index 8b585dfc..0acb92d6 100644
--- a/tests/qweb.test.ts
+++ b/tests/qweb.test.ts
@@ -893,11 +893,18 @@ describe("t-on", () => {
 
 describe("t-ref", () => {
   test("can get a ref on a node", () => {
-    qweb.addTemplate("test", `<div><span t-ref="myspan"/></div>`);
+    qweb.addTemplate("test", `<div><span t-ref="'myspan'"/></div>`);
     let refs: any = {};
     renderToDOM(qweb, "test", { refs });
     expect(refs.myspan.tagName).toBe("SPAN");
   });
+
+  test("can get a dynamic ref on a node", () => {
+    qweb.addTemplate("test", `<div><span t-ref="'myspan' + 3"/></div>`);
+    let refs: any = {};
+    renderToDOM(qweb, "test", { refs });
+    expect(refs.myspan3.tagName).toBe("SPAN");
+  });
 });
 
 describe("loading templates", () => {