diff --git a/.changeset/funny-cooks-clean.md b/.changeset/funny-cooks-clean.md new file mode 100644 index 000000000000..93b891c9d0a3 --- /dev/null +++ b/.changeset/funny-cooks-clean.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: better `render` type diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js index d9ca957949a3..a75e7d933428 100644 --- a/packages/svelte/src/internal/server/index.js +++ b/packages/svelte/src/internal/server/index.js @@ -96,8 +96,11 @@ export function element(payload, tag, attributes_fn, children_fn) { export let on_destroy = []; /** - * @param {typeof import('svelte').SvelteComponent} component - * @param {{ props: Record; context?: Map }} options + * 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. + * @template {Record} Props + * @param {import('svelte').Component | import('svelte').ComponentType>} component + * @param {{ props: Omit; context?: Map }} options * @returns {import('#server').RenderOutput} */ export function render(component, options) { diff --git a/packages/svelte/tests/types/component.ts b/packages/svelte/tests/types/component.ts index 047363947b00..747380f78f20 100644 --- a/packages/svelte/tests/types/component.ts +++ b/packages/svelte/tests/types/component.ts @@ -8,6 +8,7 @@ import { hydrate, type Component } from 'svelte'; +import { render } from 'svelte/server'; SvelteComponent.element === HTMLElement; @@ -148,6 +149,14 @@ hydrate(NewComponent, { recover: false }); +render(NewComponent, { + props: { + prop: 'foo', + // @ts-expect-error + x: '' + } +}); + // --------------------------------------------------------------------------- interop const AsLegacyComponent = asClassComponent(newComponent); @@ -256,3 +265,12 @@ hydrate(functionComponent, { binding: true } }); + +render(functionComponent, { + props: { + binding: true, + readonly: 'foo', + // @ts-expect-error + x: '' + } +}); diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 3d60d81d12f3..9618a28bdc60 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -2108,9 +2108,13 @@ declare module 'svelte/reactivity' { } declare module 'svelte/server' { - export function render(component: typeof import('svelte').SvelteComponent, options: { - props: Record; - context?: Map; + /** + * 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; + context?: Map | undefined; }): RenderOutput; interface RenderOutput { /** HTML that goes into the `` */