diff --git a/src/compiler/code_generator.ts b/src/compiler/code_generator.ts index 5e3e0ec3..48b2ea87 100644 --- a/src/compiler/code_generator.ts +++ b/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); diff --git a/tests/compiler/__snapshots__/svg.test.ts.snap b/tests/compiler/__snapshots__/svg.test.ts.snap index 14c96c65..44155ac4 100644 --- a/tests/compiler/__snapshots__/svg.test.ts.snap +++ b/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(\`
\`); + let block2 = createBlock(\`\`); + let block3 = createBlock(\`\`); + + 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(\`
\`); + let block2 = createBlock(\`\`); + + 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 ) { diff --git a/tests/compiler/svg.test.ts b/tests/compiler/svg.test.ts index 42b55d2d..cfe190c8 100644 --- a/tests/compiler/svg.test.ts +++ b/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` +
+ + + +
+ `; + } + 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` +
+ + + + +
+ `; + 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"); + } + }); });