[FIX] compiler: force new block for svg nested in html

src/compiler/code_generator.ts

@@ -524,10 +524,10 @@ export class CodeGenerator {
 
   compileTDomNode(ast: ASTDomNode, ctx: Context) {
     let { block, forceNewBlock } = ctx;
-    const isNewBlock = !block || forceNewBlock || ast.dynamicTag !== null;
+    const isNewBlock = !block || forceNewBlock || ast.dynamicTag !== null || ast.ns;
     let codeIdx = this.target.code.length;
     if (isNewBlock) {
-      if ((ast.dynamicTag || ctx.tKeyExpr) && ctx.block) {
+      if ((ast.dynamicTag || ctx.tKeyExpr || ast.ns) && ctx.block) {
         this.insertAnchor(ctx.block!);
       }
       block = this.createBlock(block, "block", ctx);

tests/compiler/__snapshots__/svg.test.ts.snap

@@ -52,6 +52,41 @@ exports[`properly support svg namespace to svg tags added even if already in svg
 }"
 `;
 
+exports[`properly support svg svg creates new block if it is within html -- 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/><block-child-0/></svg>\`);
+  let block3 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3;
+    if (ctx['hasPath']) {
+      b3 = block3();
+    }
+    let b2 = block2([], [b3]);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`properly support svg svg creates new block if it is within html 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block2 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/></svg>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = block2();
+    return block1([], [b2]);
+  }
+}"
+`;
+
 exports[`properly support svg svg namespace added to sub templates if root tag is path 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/compiler/svg.test.ts

@@ -1,6 +1,6 @@
 import { renderToString, renderToBdom, snapshotEverything, makeTestFixture } from "../helpers";
 import { mount } from "../../src/blockdom";
-import { mount as mountComponent, Component } from "../../src/index";
+import { mount as mountComponent, Component, xml } from "../../src/index";
 
 // NB: check the snapshots to see where the SVG namespaces are added
 snapshotEverything();
@@ -74,4 +74,44 @@ describe("properly support svg", () => {
       expect(el.namespaceURI).toBe("http://www.w3.org/2000/svg");
     }
   });
+
+  test("svg creates new block if it is within html", async () => {
+    class Test extends Component {
+      static template = xml`
+        <div>
+          <svg>
+            <polygon fill="#000000" points="0 0 4 4 8 0" transform="translate(5 7)"/>
+          </svg>
+        </div>
+      `;
+    }
+    const fixture = makeTestFixture();
+    await mountComponent(Test, fixture);
+    const elems = fixture.querySelectorAll("svg, polygon");
+    expect(elems.length).toEqual(2);
+    for (const el of elems) {
+      expect(el.namespaceURI).toBe("http://www.w3.org/2000/svg");
+    }
+  });
+
+  test("svg creates new block if it is within html -- 2", async () => {
+    class Test extends Component {
+      static template = xml`
+        <div>
+          <svg>
+            <polygon fill="#000000" points="0 0 4 4 8 0" transform="translate(5 7)"/>
+            <path t-if="hasPath" />
+          </svg>
+        </div>
+      `;
+      hasPath = true;
+    }
+    const fixture = makeTestFixture();
+    await mountComponent(Test, fixture);
+    const elems = fixture.querySelectorAll("svg, polygon, path");
+    expect(elems.length).toEqual(3);
+    for (const el of elems) {
+      expect(el.namespaceURI).toBe("http://www.w3.org/2000/svg");
+    }
+  });
 });