imp: t-ref directive is now dynamic

closes #11

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' : ''">

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();`);

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
 ) {

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);

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", () => {