diff --git a/src/compiler/code_generator.ts b/src/compiler/code_generator.ts index b3aa587d..ca341a15 100644 --- a/src/compiler/code_generator.ts +++ b/src/compiler/code_generator.ts @@ -1234,7 +1234,7 @@ export class CodeGenerator { if (dynamic) { let name = this.generateId("slot"); this.define(name, slotName); - blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}), ${dynamic}, ${scope})`; + blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}, ${dynamic}, ${scope}))`; } else { blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope})`; } diff --git a/tests/components/__snapshots__/slots.test.ts.snap b/tests/components/__snapshots__/slots.test.ts.snap index c58a6727..d00d8521 100644 --- a/tests/components/__snapshots__/slots.test.ts.snap +++ b/tests/components/__snapshots__/slots.test.ts.snap @@ -626,7 +626,7 @@ exports[`slots dynamic t-slot call 2`] = ` return function template(ctx, node, key = \\"\\") { let hdlr1 = [ctx['toggle'], ctx]; const slot1 = (ctx['current'].slot); - const b2 = toggler(slot1, callSlot(ctx, node, key, slot1), true, null); + const b2 = toggler(slot1, callSlot(ctx, node, key, slot1, true, null)); return block1([hdlr1], [b2]); } }" @@ -1444,6 +1444,45 @@ exports[`slots simple default slot, variation 2`] = ` }" `; +exports[`slots simple dynamic slot with slot scope 1`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + let { capture, markRaw } = helpers; + + function slot1(ctx, node, key = \\"\\") { + let b2,b3; + if (ctx['slotScope'].bool) { + b2 = text(\`some text\`); + } else { + b3 = text(\`other text\`); + } + return multi([b2, b3]); + } + + return function template(ctx, node, key = \\"\\") { + const ctx1 = capture(ctx); + return component(\`Child\`, {slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, ctx); + } +}" +`; + +exports[`slots simple dynamic slot with slot scope 2`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + let { callSlot } = helpers; + + let block1 = createBlock(\`\`); + + return function template(ctx, node, key = \\"\\") { + const slot1 = ('slotName'); + const b2 = toggler(slot1, callSlot(ctx, node, key, slot1, true, {bool: ctx['state'].bool})); + return block1([], [b2]); + } +}" +`; + exports[`slots simple named and empty slot -- 2 1`] = ` "function anonymous(bdom, helpers ) { @@ -1754,7 +1793,7 @@ exports[`slots slot content has different key from other content -- dynamic slot return function template(ctx, node, key = \\"\\") { const b2 = component(\`Child\`, {parent: 'SlotDisplay'}, key + \`__1\`, node, ctx); const slot1 = (ctx['slotName']); - const b3 = toggler(slot1, callSlot(ctx, node, key, slot1), true, null); + const b3 = toggler(slot1, callSlot(ctx, node, key, slot1, true, null)); return multi([b2, b3]); } }" diff --git a/tests/components/slots.test.ts b/tests/components/slots.test.ts index 9cbf325b..26e20600 100644 --- a/tests/components/slots.test.ts +++ b/tests/components/slots.test.ts @@ -74,6 +74,35 @@ describe("slots", () => { expect(fixture.innerHTML).toBe("other text"); }); + test("simple dynamic slot with slot scope", async () => { + let child: any; + class Child extends Component { + static template = xml``; + state = useState({ bool: true }); + setup() { + child = this; + } + } + + class Parent extends Component { + static template = xml` + + + some text + other text + + `; + static components = { Child }; + } + + await mount(Parent, fixture); + expect(fixture.innerHTML).toBe("some text"); + + child.state.bool = false; + await nextTick(); + expect(fixture.innerHTML).toBe("other text"); + }); + test("simple named and empty slot", async () => { class Child extends Component { static template = xml``;