Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: component filling a named slot does not honor let: directives #10395

Merged
merged 6 commits into from
Feb 6, 2024

Conversation

dimfeld
Copy link
Contributor

@dimfeld dimfeld commented Feb 5, 2024

Fixes #9797, a regression in Svelte 5 in which let: directives on a component filling a named slot do not work.

<Nested {things}>
  <!-- Throws error: thing is undefined -->
  <SlotInner slot="foo" let:thing {thing} />
</Nested>

This fix mostly works but is not complete yet. I'm hoping someone more knowledgable can help fill in the exact details on how to do things.

Some problems:

  • On the client side, the value passed to the inner component is an object instead of the actual value. It looks like this is because attribute.metadata.dynamic === false when it should probably be true. I haven't yet figured out the right way to accomplish this. Simon fixed this one :)
  • When multiple elements fill the same named slot, it renders const thing = $$slotProps.thing twice, although I think that's an issue with the existing implementation as well. Might just need some kind of deduplication when rendering the elements in context.state.init, but maybe there's a better way? update: as described below, the code that rendered to this wasn't supposed to be allowed in the first place.
  • It's a bit ambiguous as to whether a let: directive in this case applies to the parent's named slot being filled, or the current component's default slot. This change is only additive, pulling in values from the parent's named slot, and never cancelling the rendering of the current component's default slot. I think that ends up ok, worst case it's a bit of wasted code. EDIT: I tested on Svelte 4 and it removes the bindings to the default slot in this case, so I've done the same here.

Svelte 5 rewrite

Please note that the Svelte codebase is currently being rewritten for Svelte 5. Changes should target Svelte 5, which lives on the default branch (main).

If your PR concerns Svelte 4 (including updates to svelte.dev.docs), please ensure the base branch is svelte-4 and not main.

Before submitting the PR, please make sure you do the following

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • Prefix your PR title with feat:, fix:, chore:, or docs:.
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests and linting

  • Run the tests with pnpm test and lint the project with pnpm lint

Copy link

changeset-bot bot commented Feb 5, 2024

🦋 Changeset detected

Latest commit: 345973e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@dimfeld dimfeld changed the title fix: component in named slot does not get values for let: bindings fix: component filling a named slot does not get values references by let: directives Feb 5, 2024
@dimfeld dimfeld force-pushed the fix-component-in-named-slot-let branch 2 times, most recently from f6233c8 to 0b67bd6 Compare February 5, 2024 02:31
@dimfeld dimfeld changed the title fix: component filling a named slot does not get values references by let: directives fix: component filling a named slot does not honor let: directives Feb 5, 2024
@dimfeld dimfeld force-pushed the fix-component-in-named-slot-let branch from 0b67bd6 to 98efc2b Compare February 5, 2024 02:35
@dimfeld dimfeld force-pushed the fix-component-in-named-slot-let branch from 98efc2b to a3d3270 Compare February 5, 2024 07:51
@dummdidumm dummdidumm marked this pull request as ready for review February 5, 2024 15:55
@dummdidumm
Copy link
Member

dummdidumm commented Feb 5, 2024

Could you clarify with examples what you mean by the second-last bullet points (multiple fill the same)? It sounds like you found a related bug while trying to fix this?

@dimfeld
Copy link
Contributor Author

dimfeld commented Feb 5, 2024

Thanks for the assistance here!

Could you clarify with examples what you mean by the second-last bullet points (multiple fill the same)? It sounds like you found a related bug while trying to fix this?

Actually this turns out to be simpler than I thought, since the code that causes the error shouldn't be allowed in the first place.

REPL that shows the behavior

If I use 2 divs instead, I get a "duplicate slot" error on both Svelte 4 and 5, so I think the issue here is actually just that slot attributes on components aren't participating in that part of the analysis.

@dummdidumm
Copy link
Member

Yeah this throws a validation error in Svelte 4 but currently doesn't in Svelte 5. You can add it to the PR if you want or create a separate one.

@dimfeld
Copy link
Contributor Author

dimfeld commented Feb 5, 2024

Sounds good, I'll just add it into this current PR. Should have more time to work on this tonight I think. Thanks!

@dimfeld
Copy link
Contributor Author

dimfeld commented Feb 6, 2024

Turned out to be a small change to get that working. Thanks again for your help here!

Copy link
Member

@dummdidumm dummdidumm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@dummdidumm dummdidumm merged commit 255693e into sveltejs:main Feb 6, 2024
6 of 8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Svelte 5: error with a slot prop directly referenced
2 participants