[FIX] compiler: svg in new block takes the right namespace

src/compiler/code_generator.ts

@@ -127,6 +127,7 @@ interface Context {
   isLast?: boolean;
   translate: boolean;
   tKeyExpr: string | null;
+  nameSpace?: string;
 }
 
 function createContext(parentCtx: Context, params?: Partial<Context>) {
@@ -137,6 +138,7 @@ function createContext(parentCtx: Context, params?: Partial<Context>) {
       forceNewBlock: true,
       translate: parentCtx.translate,
       tKeyExpr: null,
+      nameSpace: parentCtx.nameSpace,
     },
     params
   );
@@ -536,9 +538,10 @@ export class CodeGenerator {
     }
     // attributes
     const attrs: { [key: string]: string } = {};
-    if (ast.ns) {
+    const nameSpace = ast.ns || ctx.nameSpace;
+    if (nameSpace && isNewBlock) {
       // specific namespace uri
-      attrs["block-ns"] = ast.ns;
+      attrs["block-ns"] = nameSpace;
     }
     for (let key in ast.attrs) {
       if (key.startsWith("t-attf")) {
@@ -654,6 +657,7 @@ export class CodeGenerator {
           forceNewBlock: false,
           isLast: ctx.isLast && i === children.length - 1,
           tKeyExpr: ctx.tKeyExpr,
+          nameSpace,
         });
         this.compileAST(child, subCtx);
       }

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

@@ -44,10 +44,28 @@ exports[`properly support svg namespace to svg tags added even if already in svg
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
-  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><svg block-ns=\\"http://www.w3.org/2000/svg\\"/></svg>\`);
+  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><svg/></svg>\`);
   
   return function template(ctx, node, key = \\"\\") {
     return block1();
   }
 }"
 `;
+
+exports[`properly support svg svg namespace added to sub-blocks 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
+  let block2 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['path']) {
+      b2 = block2();
+    }
+    return block1([], [b2]);
+  }
+}"
+`;

tests/compiler/svg.test.ts

@@ -1,5 +1,5 @@
-import { renderToString, snapshotEverything } from "../helpers";
-
+import { renderToString, renderToBdom, snapshotEverything, makeTestFixture } from "../helpers";
+import { mount } from "../../src/blockdom";
 // NB: check the snapshots to see where the SVG namespaces are added
 snapshotEverything();
 
@@ -25,6 +25,31 @@ describe("properly support svg", () => {
 
   test("namespace to svg tags added even if already in svg namespace", () => {
     const template = `<svg><svg/></svg>`;
-    expect(renderToString(template)).toBe(`<svg><svg></svg></svg>`);
+    const bdom = renderToBdom(template);
+    const fixture = makeTestFixture();
+
+    mount(bdom, fixture);
+    const elems = fixture.querySelectorAll("svg");
+    expect(elems.length).toEqual(2);
+    for (const el of elems) {
+      expect(el.namespaceURI).toBe("http://www.w3.org/2000/svg");
+    }
+  });
+
+  test("svg namespace added to sub-blocks", () => {
+    const template = `<svg><path t-if="path"/></svg>`;
+
+    expect(renderToString(template, { path: false })).toBe(`<svg></svg>`);
+    expect(renderToString(template, { path: true })).toBe(`<svg><path></path></svg>`);
+
+    const bdom = renderToBdom(template, { path: true });
+    const fixture = makeTestFixture();
+
+    mount(bdom, fixture);
+    const elems = fixture.querySelectorAll("svg, path");
+    expect(elems.length).toEqual(2);
+    for (const el of elems) {
+      expect(el.namespaceURI).toBe("http://www.w3.org/2000/svg");
+    }
   });
 });