Properly support and type optional props in Svelte components

[Princesseuh]

Changes

This changes the shape of the generated TSX for Svelte components to be more in line with how Svelte's tooling actually work

Previously, what we did was skip over every svelte2tsx type and just make our own type from render().props, this works for getting a list of the props, but it doesn't work for optional props as those are still included in the list and we don't have the needed type info to know it's optional or not due to how optional props work in Svelte

Now we use svelte2tsx's __sveltets_1_partial return type, which through TS trickery return the proper types and information for all kinds of situations

Fix withastro/language-tools#314

Testing

Tested manually against withastro/language-tools#344

Docs

N/A

[changeset-bot]

🦋 Changeset detected

Latest commit: dd14843

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

This PR includes changesets to release 3 packages

Name	Type
@astrojs/svelte	Patch
@e2e/errors	Patch
@e2e/svelte-component	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

[Princesseuh]

TLDR:

Svelte Component

<script lang="ts">
  export const hello = "Hello";
  export const wow = "Hello";
  export let hey: string;
</script>
{hey}

Old

let Props = render().props;
///<reference types="svelte" />
;function render() {

   const hello = "Hello";
   const wow = "Hello";
   let hey: string/*Ωignore_startΩ*/;hey = __sveltets_1_any(hey);/*Ωignore_endΩ*/;
;
async () => {

hey;

};
return { props: {hello: hello , wow: wow , hey: hey}, slots: {}, getters: {hello: hello, wow: wow}, events: {} }}

export default function MySvelteComponent__AstroComponent_(_props: typeof Props): any {}

New

/// <reference types="svelte2tsx/svelte-shims" />
///<reference types="svelte" />
;function render() {

   const hello = "Hello";
   const wow = "Hello";
   let hey: string/*Ωignore_startΩ*/;hey = __sveltets_1_any(hey);/*Ωignore_endΩ*/;
;
async () => {

hey;
};
return { props: {hello: hello , wow: wow , hey: hey}, slots: {}, getters: {hello: hello, wow: wow}, events: {} }}

export default function MySvelteComponent__AstroComponent_(_props: typeof Component.props): any {}
let Component = __sveltets_1_partial(['hello','wow'], __sveltets_1_with_any_event(render()))) {
    get hello() { return render().getters.hello }
    get wow() { return render().getters.wow }
}

(The export being on top of the let Component is on purpose, so the component documentation ends up on the exported function)

[natemoo-re]

Wow, impressive fix!