[FIX] component: prevent collision between template ids and keys

src/component/directive.ts

@@ -238,7 +238,7 @@ QWeb.addDirective({
     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};`);
+      ctx.addLine(`let key${keyID} = 'key' + ${key};`);
     }
     ctx.addLine(`let def${defID};`);
     let templateID = key

tests/component/__snapshots__/component.test.ts.snap

@@ -516,7 +516,7 @@ exports[`composition sub components with some state rendered in a loop 1`] = `
         context.number = _3[i];
         context.number_value = _4[i];
         //COMPONENT
-        let key8 = context['number'];
+        let key8 = 'key' + context['number'];
         let def6;
         let w7 = key8 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[key8]] : false;
         let _5_index = c1.length;
@@ -1012,7 +1012,7 @@ exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
     //COMPONENT
-    let key5 = 'somestring';
+    let key5 = 'key' + 'somestring';
     let def3;
     let w4 = key5 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[key5]] : false;
     let _2_index = c1.length;
@@ -1069,7 +1069,7 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument
         context.item = _3[i];
         context.item_value = _4[i];
         //COMPONENT
-        let key8 = context['item'];
+        let key8 = 'key' + context['item'];
         let def6;
         let arg9 = context['item'];
         let w7 = key8 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[key8]] : false;

tests/component/component.test.ts

@@ -160,6 +160,30 @@ describe("basic widget properties", () => {
     widget.render();
     expect(fixture.innerHTML).toBe(`<div><span></span></div>`);
   });
+
+  test("reconciliation alg is not confused in some specific situation", async () => {
+    // in this test, we set t-key to 4 because it was in conflict with the
+    // template id corresponding to the first child.
+    env.qweb.addTemplates(`
+        <templates>
+            <div t-name="Parent">
+                <Child />
+                <Child t-key="4"/>
+            </div>
+            <span t-name="Child">child</span>
+        </templates>
+    `);
+
+    class Child extends Component<any, any, any> {}
+
+    class Parent extends Component<any, any, any> {
+      components = { Child };
+    }
+
+    const widget = new Parent(env);
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>child</span><span>child</span></div>");
+  });
 });
 
 describe("lifecycle hooks", () => {