[FIX] component: fix issues with component internal template key

closes #298

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

@@ -16,7 +16,8 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
     var vn1 = h('div', p1, c1);
     //COMPONENT
     let def3;
-    let w4 = 4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[4]] : false;
+    let templateId4 = \`__5__\`;
+    let w4 = templateId4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[templateId4]] : false;
     let _2_index = c1.length;
     c1.push(null);
     let props4 = {message:1};
@@ -34,9 +35,9 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         utils.validateProps(W4, props4)
         w4 = new W4(parent, props4);
-        parent.__owl__.cmap[4] = w4.__owl__.id;
+        parent.__owl__.cmap[templateId4] = w4.__owl__.id;
         def3 = w4.__prepare(extra.fiber, undefined, undefined);
-        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: 4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
+        def3 = def3.then(vnode=>{if (w4.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: templateId4, hook: {insert(vn) {let nvn=w4.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w4.destroy();}}});c1[_2_index]=pvnode;w4.__owl__.pvnode = pvnode;});
     } else {
         utils.validateProps(w4.constructor, props4)
         def3 = def3 || w4.__updateProps(props4, extra.fiber, undefined, undefined);

tests/component/component.test.ts

@@ -182,6 +182,52 @@ describe("basic widget properties", () => {
     await widget.mount(fixture);
     expect(fixture.innerHTML).toBe("<div><span>child</span><span>child</span></div>");
   });
+
+  test("reconciliation alg works for t-foreach in t-foreach", async () => {
+    const warn = console.warn;
+    console.warn = () => {};
+    class Child extends Component<any, any> {
+      static template = xml`<div><t t-esc="props.blip"/></div>`;
+    }
+
+    class Parent extends Component<any, any> {
+      static template = xml`
+        <div>
+            <t t-foreach="state.s" t-as="section">
+                <t t-foreach="section.blips" t-as="blip">
+                  <Child blip="blip"/>
+                </t>
+            </t>
+        </div>`;
+      static components = { Child };
+      state = { s: [{ blips: ["a1", "a2"] }, { blips: ["b1"] }] };
+    }
+
+    const widget = new Parent(env);
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><div>a1</div><div>a2</div><div>b1</div></div>");
+    expect(env.qweb.templates[Parent.template].fn.toString()).toMatchSnapshot();
+    console.warn = warn;
+  });
+
+  test("same t-keys in two different places", async () => {
+    class Child extends Component<any, any> {
+      static template = xml`<span><t t-esc="props.blip"/></span>`;
+    }
+
+    class Parent extends Component<any, any> {
+      static template = xml`
+        <div>
+            <div><Child t-key="1" blip="'1'"/></div>
+            <div><Child t-key="1" blip="'2'"/></div>
+        </div>`;
+      static components = { Child };
+    }
+
+    const widget = new Parent(env);
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><div><span>1</span></div><div><span>2</span></div></div>");
+  });
 });
 
 describe("lifecycle hooks", () => {