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: deduplicate children prop from default slot #10800

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Conversation

dummdidumm
Copy link
Member

@dummdidumm dummdidumm commented Mar 13, 2024

It's rare, but some components may have a children attribute and receive a default slot content. We previously had undefined behavior in this case, with this PR we're now putting the implicit default content into $$slots.default if we detect there's also a children prop - fixes #10790.
In order to do we need to detect at runtime whether or not a given value is a snippet at runtime, so I moved the "apply snippet symbol" function out of dev and am applying it everytime now. As a consequence, we can also provide a user-facing function, isSnippet, which will help people detect this - part of #9774 update: removed for now.

the following is outdated, now that the isSnippet function is no longer part of the public API. Once it would be, this problem would come back though

This is mostly done, the reason this is in draft mode is because dts-buddy is not creating the correct types. It's inlining the Snippet type on the return of the isSnippet function, but that's wrong because of the unique symbol, meaning the return type of isSnippet and the Snippet type are separate. This will throw a wrong type error:

<script lang="ts">
	import { isSnippet, type Snippet } from "svelte";
	let x = null as any;
	if (isSnippet(x)) {
		let y: Snippet = x;
	}
</script>

{#snippet foo()}
{/snippet}

The snippet type is also inlined in svelte/legacy, and it would be better if it instead would do something like import('svelte').Snippet. I'm not sure if this is really fixable in dts-buddy (unless you have a good idea @Rich-Harris), so my idea for tomorrow is to have some pre and postprocessing applied on the d.ts file generation to get the desired end result.
Update: No longer relevant when not exposing the type, but it will get relevant at some point. I think this requires some dts-buddy hackery, I actually think that TypeScript's doing something wrong here, because it inlines a type that cannot be inlined.

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 Mar 13, 2024

🦋 Changeset detected

Latest commit: 75b761d

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
Copy link
Member

I'm still 👎 on exposing this publicly, at least until there's evidence of significant demand. I think it just encourages bad API design.

@dummdidumm dummdidumm changed the title feat: provide isSnippet type, deduplicate children prop from default slot fix: deduplicate children prop from default slot Mar 19, 2024
@trueadm
Copy link
Contributor

trueadm commented Mar 19, 2024

This looks good to me, but I don't have the full context, so will defer to @Rich-Harris

Copy link
Contributor

@trueadm trueadm left a comment

Choose a reason for hiding this comment

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

Having spent time understanding this, this looks good to me!

Copy link
Member

@Rich-Harris Rich-Harris left a comment

Choose a reason for hiding this comment

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

I think we need to hold off on this until we have some clarity around #10678 (comment)

@dummdidumm
Copy link
Member Author

How does this relate to this PR? What would need to change? In general, programmatic slots (now snippets) are one of the most requested features, and have been the source of many "hacking into internals" workarounds, so a solution for it would be great

@Rich-Harris
Copy link
Member

How does this relate to this PR? What would need to change?

If we had an API for programmatically creating snippets, then either we need to design that API in such a way that the symbol is still present, or we need to come up with some other approach.

In a client-side context the ideal API is something close to this:

mount(App, {
  target,
  props: {
    mySnippet: (firstname, lastname) {
      const element = document.createElement('h1');
      $effect.pre(() => {
        element.textContent = `Hello ${firstname()} ${lastname()}!`;
      });
      return element;
    }
  }
});

In an SSR context that doesn't work, but perhaps that's just something the user needs to deal with:

render(App, {
  props: {
    mySnippet: (firstname, lastname) {
      return `<h1>Hello ${firstname()} ${lastname()}!</h1>`;
    }
  }
});

@dummdidumm
Copy link
Member Author

This sounds like we should expose a createSnippet method which returns a function with said symbol.

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: TypeError: children.forEach is not a function
3 participants