diff --git a/src/blockdom/html.ts b/src/blockdom/html.ts index de4748d6..0c01eccf 100644 --- a/src/blockdom/html.ts +++ b/src/blockdom/html.ts @@ -61,6 +61,7 @@ class VHtml { // remove current content this.remove(); this.content = content; + this.html = other.html; } } diff --git a/tests/components/__snapshots__/basics.test.ts.snap b/tests/components/__snapshots__/basics.test.ts.snap index b85efa8b..99fd4dd4 100644 --- a/tests/components/__snapshots__/basics.test.ts.snap +++ b/tests/components/__snapshots__/basics.test.ts.snap @@ -1217,6 +1217,20 @@ exports[`t-out in components can render list of t-out 1`] = ` }" `; +exports[`t-out in components can switch the contents of two t-out repeatedly 1`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + let { safeOutput } = helpers; + + return function template(ctx, node, key = \\"\\") { + let b2 = safeOutput(ctx['state'].a); + let b3 = safeOutput(ctx['state'].b); + return multi([b2, b3]); + } +}" +`; + exports[`t-out in components update properly on state changes 1`] = ` "function anonymous(bdom, helpers ) { diff --git a/tests/components/basics.test.ts b/tests/components/basics.test.ts index 2e12d33f..40ec74e8 100644 --- a/tests/components/basics.test.ts +++ b/tests/components/basics.test.ts @@ -1006,4 +1006,31 @@ describe("t-out in components", () => { "
<b>one</b>one<b>two</b>two<b>tree</b>tree
" ); }); + + test("can switch the contents of two t-out repeatedly", async () => { + class Test extends Component { + static template = xml` + + + `; + state = useState({ + a: markup("
1
"), + b: markup("
2
"), + }); + + reverse() { + const { state } = this; + [state.a, state.b] = [state.b, state.a]; + } + } + + const comp = await mount(Test, fixture); + expect(fixture.innerHTML).toBe("
1
2
"); + comp.reverse(); + await nextTick(); + expect(fixture.innerHTML).toBe("
2
1
"); + comp.reverse(); + await nextTick(); + expect(fixture.innerHTML).toBe("
1
2
"); + }); });