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: properly validate snippet/slot interop #12421

Merged
merged 1 commit into from
Jul 12, 2024
Merged

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
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
9 checks passed
@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