add slots option to component constructor options object

[truongsinh]

This is a continuation of #4296, which tackles #2588 (comment)

This commits also ensures that no extra code is added into svelte/internal. Instead, if users want to use slots API, they will import directly from svelte:

// parent.svelte
import { createSlot, slot } from 'svelte';
import MyChild from './mychild.svelte';

new MyCmp({
  slots: createSlot({
    slot(MyChild)
  })
});

<!-- mychild.svelte -->
<div>this div is in nested.svelte</div>
<span>this span is in nested.svelte</span>

Discussions

• createSlot, slot seems really confusing, what would be good names?
• see https://github.com/sveltejs/svelte/pull/5687/files#discussion_r525860067
• typescript and sucrase dep bump to support null coalesce

[truongsinh]

I tried but did not know how to modify src/compiler/compile/render_dom/Block.ts to expose created HTML element

[benmccann]

If you rebase against master you should be able to drop your changes to this file and package-lock.json. I submitted those as a separate PR in #5758 because that was a big enough change by itself that it took some review. Hopefully that'll make review of this one a bit easier by making this one a bit smaller

[akauppi]

createSlot, slot seems really confusing, what would be good names?

If it's not too late, here's my 2c:

createSlot may not be needed, at all. It's so simple I would think people are okay doing a .map when needed. For providing the default slot only, the case without createSlot is simpler than with it:

This could be done just with createSlots, as @lukeed does here.

I would prefer the plural name, since the object can carry information for multiple slots. If wanted, there can be a createSlot for only defining the default slot but that may be unnecessary overkill (and people can do such wraps easily, ourselves).

This would make your sample look like:

// parent.svelte
import { createSlots } from 'svelte';
import MyChild from './mychild.svelte';

new MyCmp({
  slots: createSlots({
    default: MyChild
  })
});

The values can be components, elements, or arrays thereof.

---

Would like to use this with SVG - and it can (I have a project doing that). The PR however currently contains divs, making it HTML specific.

[benmccann]

@truongsinh this PR has a merge conflict. You will need to rebase against master

[jmsunseri]

This would help a lot when we are trying to write unit tests and we need to programmatically assign something to a slot?

[zachstence]

Any update on the status of these tickets/pull requests? Would love to see this feature added.

[PClmnt]

Any update on this? It has pretty big ramifications for testing svelte components?

[SarcevicAntonio]

looks like this blocks testing slots with vitest and @testing-library/svelte, bummer...

[vekunz]

Are there any updates on this? This prevents us from testing our components well.

We need to create slot content to thoroughly test our components with unit tests.

[rousah]

Would love for this to get worked on!

[benmccann]

@truongsinh just a reminder that this PR needs a rebase

[unikitty37]

The lack of the ability to pass slots when creating a component is blocking a lot of people here: testing-library/svelte-testing-library#48 (the two workarounds listed there don't seem to work currently, at least for me — I really don't want to have to use Playwright's experimental component tests to do this!)

Please could this make it to release? It's been over two years for this PR…

[Rich-Harris]

Closing Svelte 4 PRs as stale — thank you

[Rich-Harris]

(note that this is addressed in Svelte 5, among other things with the createRawSnippet API)