fix: better render type (#11997)

paoloricciuti · dummdidumm · web-flow · commit e27b8c5cb5b5 · 2024-06-12T15:10:22.000+02:00
Closes #11996 --------- Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
diff --git a/.changeset/funny-cooks-clean.md 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
@@ -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) {
diff --git 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
@@ -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>` */

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"svelte": patch
 +---
++
 +fix: better `render` type