Skip to content

fix: properly validate snippet/slot interop#12421

Merged
Rich-Harris merged 1 commit intomainfrom
snippet-slot-fix
Jul 12, 2024
Merged

fix: properly validate snippet/slot interop#12421
Rich-Harris merged 1 commit intomainfrom
snippet-slot-fix

Conversation

@dummdidumm
Copy link
Member

The previous validation for checking if slots with let directives were rendered with {@render children(...)} had false positives

  • threw an error even if the other side didn't make use of the arguments, i.e. wasn't actually using a let directive
  • didn't check that the rendered snippet actually was the children property

This fixes the validation by only applying it to children render tags, and by adding the slot to $$slots.default instead of $$props.children in more cases (when it's using <svelte:fragment> or let: directives, which both mean you're using old slot syntax)

Fixes #12414

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

The previous validation for checking if slots with let directives were rendered with `{@render children(...)}` had false positives
- threw an error even if the other side didn't make use of the arguments, i.e. wasn't actually using a let directive
- didn't check that the rendered snippet actually was the children property

This fixes the validation by only applying it to children render tags, and by adding the slot to `$$slots.default` instead of `$$props.children` in more cases (when it's using `<svelte:fragment>` or `let:` directives, which both mean you're using old slot syntax)

Fixes #12414
@changeset-bot
Copy link

changeset-bot bot commented Jul 12, 2024

🦋 Changeset detected

Latest commit: 01683b4

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

@Rich-Harris Rich-Harris merged commit 51f12d2 into main Jul 12, 2024
@Rich-Harris Rich-Harris deleted the snippet-slot-fix branch July 12, 2024 17:44
@diazmartinx
Copy link

I have been having this problem that I think is related to {@render ...}
My codebase works perfectly on v175 but breaks on v183 & v182 too.

The error: "Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method."

This just happens when the project is builded, not in dev

@ixxie
Copy link

ixxie commented Jul 12, 2024

I have been having this problem that I think is related to {@render ...} My codebase works perfectly on v175 but breaks on v183 & v182 too.

The error: "Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method."

This just happens when the project is builded, not in dev

Probably related to #12422

trueadm pushed a commit that referenced this pull request Jul 16, 2024
The previous validation for checking if slots with let directives were rendered with `{@render children(...)}` had false positives
- threw an error even if the other side didn't make use of the arguments, i.e. wasn't actually using a let directive
- didn't check that the rendered snippet actually was the children property

This fixes the validation by only applying it to children render tags, and by adding the slot to `$$slots.default` instead of `$$props.children` in more cases (when it's using `<svelte:fragment>` or `let:` directives, which both mean you're using old slot syntax)

Fixes #12414
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: Children snippet with argument is required to be explicitly defined now

5 participants