diff --git a/src/compiler/code_generator.ts b/src/compiler/code_generator.ts index 81cf3523..cf622393 100644 --- a/src/compiler/code_generator.ts +++ b/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) { @@ -137,6 +138,7 @@ function createContext(parentCtx: Context, params?: Partial) { 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); } diff --git a/tests/compiler/__snapshots__/svg.test.ts.snap b/tests/compiler/__snapshots__/svg.test.ts.snap index 17c691c9..2161f05a 100644 --- a/tests/compiler/__snapshots__/svg.test.ts.snap +++ b/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(\`\`); + let block1 = createBlock(\`\`); 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(\`\`); + let block2 = createBlock(\`\`); + + return function template(ctx, node, key = \\"\\") { + let b2; + if (ctx['path']) { + b2 = block2(); + } + return block1([], [b2]); + } +}" +`; diff --git a/tests/compiler/svg.test.ts b/tests/compiler/svg.test.ts index b4d1fce0..a56aa348 100644 --- a/tests/compiler/svg.test.ts +++ b/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 = ``; - expect(renderToString(template)).toBe(``); + 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 = ``; + + expect(renderToString(template, { path: false })).toBe(``); + expect(renderToString(template, { path: true })).toBe(``); + + 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"); + } }); });