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

chore: Bindable and Svelte 5 interop #2336

Merged
merged 25 commits into from
Apr 25, 2024
Merged

Conversation

dummdidumm
Copy link
Member

No description provided.

@dummdidumm
Copy link
Member Author

dummdidumm commented Apr 16, 2024

@jasonlyu123 this is still not fully finished, but let me know what you think of the approach:

  • Svelte will provide a Bindable type to mark things as being able to bind: to
  • We're going to wrap bindings with __sveltets_2_binding which gives back the Binding type. This means you'll get type errors when you're binding to something that cannot be bound to (Bindable missing)
  • ExportedNames.ts is enhanced to mark which things are bindable (so their types are wrapped with Bindable so you don't have to do it yourself) when using $props()
  • Due to backwards compat we gotta jump through some hoops: By adding & "_explicit_" to the props type we're marking it as "only things typed with Bindable can be used with bind:". That means all the existing d.ts files are implicitly all bindable. The alternative of not doing this would mean we would have to wait until Svelte 7 until we can give editor squigglies, because until then people could have old legacy typings Update: Thought of a better way: we're going to add an explicit constructor where we don't do the "wrap all with bindings" stuff which the SvelteComponent class type will do by default.
  • Massage error messages to get rid of weird types and type helpers making the error messages more confusing than they need to be

@dummdidumm dummdidumm force-pushed the bindable-and-svelte-5-interop branch from ade7c5b to e118ab0 Compare April 18, 2024 13:59
dummdidumm added a commit to sveltejs/svelte that referenced this pull request Apr 24, 2024
This is a typings PR and the companion PR to sveltejs/language-tools#2336

It introduces two new types:
- Binding: Marks a property as being bound (i.e. you must do bind:x)
- Bindable: Marks a property as being able to be bound (i.e. you can do bind:x)

Language tools then uses this generate code accordingly which then generates type errors.

All the other type gymnastics are there to ensure that you don't interact with these bindable types when using mount or hydrate or ComponentProps<MyComponent>, i.e. these two types should be mostly opaque for day-to-day users.

For backwards-compatibility, all properties are automatically wrapped with Bindable, which means existing type definition files will continue to work from a types perspective. Language tools opts into strict bindability by providing its own constructor definition for all generated classes in runes mode which omits the "wrap everything with bindable" behavior.
@dummdidumm dummdidumm marked this pull request as ready for review April 24, 2024 16:39
@dummdidumm dummdidumm merged commit 957b8d6 into master Apr 25, 2024
3 checks passed
@dummdidumm dummdidumm deleted the bindable-and-svelte-5-interop branch April 25, 2024 06:24
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.

1 participant