diff --git a/packages/svelte/scripts/generate-types.js b/packages/svelte/scripts/generate-types.js index bb195f5f82..b401530f1d 100644 --- a/packages/svelte/scripts/generate-types.js +++ b/packages/svelte/scripts/generate-types.js @@ -30,7 +30,7 @@ await createBundle({ [`${pkg.name}/legacy`]: `${dir}/src/legacy/legacy-client.js`, [`${pkg.name}/motion`]: `${dir}/src/motion/public.d.ts`, [`${pkg.name}/reactivity`]: `${dir}/src/reactivity/index-client.js`, - [`${pkg.name}/server`]: `${dir}/src/server/index.js`, + [`${pkg.name}/server`]: `${dir}/src/server/index.d.ts`, [`${pkg.name}/store`]: `${dir}/src/store/public.d.ts`, [`${pkg.name}/transition`]: `${dir}/src/transition/public.d.ts`, [`${pkg.name}/events`]: `${dir}/src/events/index.js`, diff --git a/packages/svelte/src/server/index.d.ts b/packages/svelte/src/server/index.d.ts new file mode 100644 index 0000000000..b65ce5bdaa --- /dev/null +++ b/packages/svelte/src/server/index.d.ts @@ -0,0 +1,21 @@ +import type { RenderOutput } from '#server'; +import type { ComponentProps, Component, SvelteComponent, ComponentType } from 'svelte'; + +/** + * Only available on the server and when compiling with the `server` option. + * Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app. + */ +export function render< + Comp extends SvelteComponent | Component, + Props extends ComponentProps = ComponentProps +>( + ...args: {} extends Props + ? [ + component: Comp extends SvelteComponent ? ComponentType : Comp, + options?: { props?: Omit; context?: Map } + ] + : [ + component: Comp extends SvelteComponent ? ComponentType : Comp, + options: { props: Omit; context?: Map } + ] +): RenderOutput; diff --git a/packages/svelte/tests/types/component.ts b/packages/svelte/tests/types/component.ts index ca520656fd..88cde03a39 100644 --- a/packages/svelte/tests/types/component.ts +++ b/packages/svelte/tests/types/component.ts @@ -156,6 +156,14 @@ render(NewComponent, { x: '' } }); +// @ts-expect-error +render(NewComponent); +render(NewComponent, { + props: { + // @ts-expect-error + prop: 1 + } +}); // --------------------------------------------------------------------------- interop @@ -276,9 +284,22 @@ hydrate(functionComponent, { render(functionComponent, { props: { binding: true, - readonly: 'foo', + readonly: 'foo' + } +}); +// @ts-expect-error +render(functionComponent); +render(functionComponent, { + // @ts-expect-error + props: { + binding: true + } +}); +render(functionComponent, { + props: { + binding: true, // @ts-expect-error - x: '' + readonly: 1 } }); diff --git a/packages/svelte/tsconfig.json b/packages/svelte/tsconfig.json index 5cb26aef5a..0cc600dc74 100644 --- a/packages/svelte/tsconfig.json +++ b/packages/svelte/tsconfig.json @@ -23,7 +23,7 @@ "svelte/internal/client": ["./src/internal/client/index.js"], "svelte/legacy": ["./src/legacy/legacy-client.js"], "svelte/motion": ["./src/motion/public.d.ts"], - "svelte/server": ["./src/server/index.js"], + "svelte/server": ["./src/server/index.d.ts"], "svelte/store": ["./src/store/public.d.ts"], "#compiler": ["./src/compiler/types/index.d.ts"], "#client": ["./src/internal/client/types.d.ts"], diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index b0a58fe1a6..6a55c222be 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -2110,14 +2110,25 @@ declare module 'svelte/reactivity' { } declare module 'svelte/server' { + import type { ComponentProps, Component, SvelteComponent, ComponentType } from 'svelte'; /** * Only available on the server and when compiling with the `server` option. * Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app. - * */ - export function render>(component: import("svelte").Component | import("svelte").ComponentType>, options?: { - props?: Omit | undefined; - context?: Map | undefined; - } | undefined): RenderOutput; + */ + export function render< + Comp extends SvelteComponent | Component, + Props extends ComponentProps = ComponentProps + >( + ...args: {} extends Props + ? [ + component: Comp extends SvelteComponent ? ComponentType : Comp, + options?: { props?: Omit; context?: Map } + ] + : [ + component: Comp extends SvelteComponent ? ComponentType : Comp, + options: { props: Omit; context?: Map } + ] + ): RenderOutput; interface RenderOutput { /** HTML that goes into the `` */ head: string;