fix: better `render` type (#11997)

Closes #11996 --------- Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
1 year ago · e27b8c5cb5
parent 7272b650d6
commit e27b8c5cb5
4 changed files with 35 additions and 5 deletions
--- a/.changeset/funny-cooks-clean.md
+++ b/.changeset/funny-cooks-clean.md
@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: better `render` type
--- 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<string, any>; context?: Map<any, any> }} 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<string, any>} Props
+ * @param {import('svelte').Component<Props> | import('svelte').ComponentType<import('svelte').SvelteComponent<Props>>} component
+ * @param {{ props: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }} options
 * @returns {import('#server').RenderOutput}
 */
 export function render(component, options) {
--- 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: ''
+	}
+});
--- 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<string, any>;
-		context?: Map<any, any>;
+	/**
+	 * 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<Props extends Record<string, any>>(component: import("svelte").Component<Props, any, string> | import("svelte").ComponentType<import("svelte").SvelteComponent<Props, any, any>>, options: {
+		props: Omit<Props, "$$slots" | "$$events">;
+		context?: Map<any, any> | undefined;
 	}): RenderOutput;
 	interface RenderOutput {
 		/** HTML that goes into the `<head>` */