From e27b8c5cb5b51b0eacc321210e90b0fc9b117a6a Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Wed, 12 Jun 2024 15:10:22 +0200 Subject: [PATCH] fix: better `render` type (#11997) Closes #11996 --------- Co-authored-by: Simon Holthausen --- .changeset/funny-cooks-clean.md | 5 +++++ packages/svelte/src/internal/server/index.js | 7 +++++-- packages/svelte/tests/types/component.ts | 18 ++++++++++++++++++ packages/svelte/types/index.d.ts | 10 +++++++--- 4 files changed, 35 insertions(+), 5 deletions(-) create mode 100644 .changeset/funny-cooks-clean.md diff --git a/.changeset/funny-cooks-clean.md b/.changeset/funny-cooks-clean.md new file mode 100644 index 0000000000..93b891c9d0 --- /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 2798817415..b0cf9b19c2 100644 --- a/packages/svelte/src/internal/server/index.js +++ b/packages/svelte/src/internal/server/index.js @@ -93,8 +93,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 047363947b..747380f78f 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 58ed6358a4..681547c0d1 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 `` */