svelte

svelte copied to clipboard

This is a continuation of https://github.com/sveltejs/svelte/pull/4296, which tackles https://github.com/sveltejs/svelte/issues/2588#issuecomment-488343541

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

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.

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

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

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

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

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

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.

Would love for this to get worked on!

@truongsinh just a reminder that this PR needs a rebase

The lack of the ability to pass slots when creating a component is blocking a lot of people here: https://github.com/testing-library/svelte-testing-library/issues/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…