diff --git a/src/app/template_helpers.ts b/src/app/template_helpers.ts index 82773a39..7928df60 100644 --- a/src/app/template_helpers.ts +++ b/src/app/template_helpers.ts @@ -32,6 +32,7 @@ function callSlot( extra: any, defaultContent?: (ctx: any, node: any, key: string) => BDom ): BDom { + key = key + "__slot_" + name; const slots = (ctx.props && ctx.props.slots) || {}; const { __render, __ctx, __scope } = slots[name] || {}; const slotScope = Object.create(__ctx || {}); diff --git a/tests/components/__snapshots__/slots.test.ts.snap b/tests/components/__snapshots__/slots.test.ts.snap index e4f114e9..279efed5 100644 --- a/tests/components/__snapshots__/slots.test.ts.snap +++ b/tests/components/__snapshots__/slots.test.ts.snap @@ -1416,6 +1416,93 @@ exports[`slots slot are properly rendered if inner props are changed 3`] = ` }" `; +exports[`slots slot content has different key from other content -- dynamic slot 1`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + + function slot1(ctx, node, key = \\"\\") { + return component(\`Child\`, {parent: 'Parent'}, key + \`__1\`, node, ctx); + } + + return function template(ctx, node, key = \\"\\") { + return component(\`SlotDisplay\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx); + } +}" +`; + +exports[`slots slot content has different key from other content -- dynamic slot 2`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + let { callSlot } = helpers; + + return function template(ctx, node, key = \\"\\") { + let b2 = component(\`Child\`, {parent: 'SlotDisplay'}, key + \`__1\`, node, ctx); + const slot1 = (ctx['slotName']); + let b3 = toggler(slot1, callSlot(ctx, node, key, slot1), true, {}); + return multi([b2, b3]); + } +}" +`; + +exports[`slots slot content has different key from other content -- dynamic slot 3`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + + let block1 = createBlock(\`
\`); + + return function template(ctx, node, key = \\"\\") { + let txt1 = ctx['props'].parent; + return block1([txt1]); + } +}" +`; + +exports[`slots slot content has different key from other content -- static slot 1`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + + function slot1(ctx, node, key = \\"\\") { + return component(\`Child\`, {parent: 'Parent'}, key + \`__1\`, node, ctx); + } + + return function template(ctx, node, key = \\"\\") { + return component(\`SlotDisplay\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx); + } +}" +`; + +exports[`slots slot content has different key from other content -- static slot 2`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + let { callSlot } = helpers; + + return function template(ctx, node, key = \\"\\") { + let b2 = component(\`Child\`, {parent: 'SlotDisplay'}, key + \`__1\`, node, ctx); + let b3 = callSlot(ctx, node, key, 'default', false, {}); + return multi([b2, b3]); + } +}" +`; + +exports[`slots slot content has different key from other content -- static slot 3`] = ` +"function anonymous(bdom, helpers +) { + let { text, createBlock, list, multi, html, toggler, component, comment } = bdom; + + let block1 = createBlock(\`
\`); + + return function template(ctx, node, key = \\"\\") { + let txt1 = ctx['props'].parent; + return block1([txt1]); + } +}" +`; + exports[`slots slot content is bound to caller (variation) 1`] = ` "function anonymous(bdom, helpers ) { diff --git a/tests/components/slots.test.ts b/tests/components/slots.test.ts index a7bac80a..dd151ad5 100644 --- a/tests/components/slots.test.ts +++ b/tests/components/slots.test.ts @@ -1544,4 +1544,49 @@ describe("slots", () => { } await mount(Parent, fixture); }); + + test("slot content has different key from other content -- static slot", async () => { + class Child extends Component { + static template = xml`
`; + } + + class SlotDisplay extends Component { + static components = { Child }; + static template = xml``; + } + + class Parent extends Component { + static components = { Child, SlotDisplay }; + static template = xml` + + + `; + } + + await mount(Parent, fixture); + expect(fixture.innerHTML).toBe("
SlotDisplay
Parent
"); + }); + + test("slot content has different key from other content -- dynamic slot", async () => { + class Child extends Component { + static template = xml`
`; + } + + class SlotDisplay extends Component { + static components = { Child }; + slotName = "default"; + static template = xml``; + } + + class Parent extends Component { + static components = { Child, SlotDisplay }; + static template = xml` + + + `; + } + + await mount(Parent, fixture); + expect(fixture.innerHTML).toBe("
SlotDisplay
Parent
"); + }); });