fix: renderers types (#13720)

Author: florian-lefebvre

.changeset/tangy-eagles-train.md

@@ -0,0 +1,7 @@
+---
+'@astrojs/svelte': patch
+'@astrojs/react': patch
+'@astrojs/vue': patch
+---
+
+Fixes SSR renderer type

packages/integrations/react/src/server-v17.ts

@@ -1,4 +1,4 @@
-import type { AstroComponentMetadata } from 'astro';
+import type { AstroComponentMetadata, NamedSSRLoadedRendererValue } from 'astro';
 import React from 'react';
 import ReactDOM from 'react-dom/server';
 import StaticHtml from './static-html.js';
@@ -36,11 +36,11 @@ function check(Component: any, props: Record<string, any>, children: any) {
 	return isReactComponent;
 }
 
-function renderToStaticMarkup(
+async function renderToStaticMarkup(
 	Component: any,
 	props: Record<string, any>,
 	{ default: children, ...slotted }: Record<string, any>,
-	metadata: AstroComponentMetadata,
+	metadata?: AstroComponentMetadata,
 ) {
 	delete props['class'];
 	const slots: Record<string, any> = {};
@@ -57,12 +57,12 @@ function renderToStaticMarkup(
 	if (newChildren != null) {
 		newProps.children = React.createElement(StaticHtml, {
 			// Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
-			hydrate: metadata.astroStaticSlot ? !!metadata.hydrate : true,
+			hydrate: metadata?.astroStaticSlot ? !!metadata.hydrate : true,
 			value: newChildren,
 		});
 	}
 	const vnode = React.createElement(Component, newProps);
-	let html;
+	let html: string;
 	if (metadata?.hydrate) {
 		html = ReactDOM.renderToString(vnode);
 	} else {
@@ -71,9 +71,11 @@ function renderToStaticMarkup(
 	return { html };
 }
 
-export default {
+const renderer: NamedSSRLoadedRendererValue = {
 	name: '@astrojs/react',
 	check,
 	renderToStaticMarkup,
 	supportsAstroStaticSlot: true,
 };
+
+export default renderer;

packages/integrations/react/src/server.ts

@@ -1,5 +1,5 @@
 import opts from 'astro:react:opts';
-import type { AstroComponentMetadata } from 'astro';
+import type { AstroComponentMetadata, NamedSSRLoadedRendererValue } from 'astro';
 import React from 'react';
 import ReactDOM from 'react-dom/server';
 import { incrementId } from './context.js';
@@ -47,7 +47,7 @@ async function check(
 		return React.createElement('div');
 	}
 
-	await renderToStaticMarkup.call(this, Tester, props, children, {} as any);
+	await renderToStaticMarkup.call(this, Tester, props, children);
 
 	return isReactComponent;
 }
@@ -58,17 +58,17 @@ async function getNodeWritable(): Promise<typeof import('node:stream').Writable>
 	return Writable;
 }
 
-function needsHydration(metadata: AstroComponentMetadata) {
+function needsHydration(metadata?: AstroComponentMetadata) {
 	// Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
-	return metadata.astroStaticSlot ? !!metadata.hydrate : true;
+	return metadata?.astroStaticSlot ? !!metadata.hydrate : true;
 }
 
 async function renderToStaticMarkup(
 	this: RendererContext,
 	Component: any,
 	props: Record<string, any>,
 	{ default: children, ...slotted }: Record<string, any>,
-	metadata: AstroComponentMetadata,
+	metadata?: AstroComponentMetadata,
 ) {
 	let prefix;
 	if (this && this.result) {
@@ -113,7 +113,7 @@ async function renderToStaticMarkup(
 		identifierPrefix: prefix,
 		formState,
 	};
-	let html;
+	let html: string;
 	if (opts.experimentalDisableStreaming) {
 		html = ReactDOM.renderToString(vnode);
 	} else if ('renderToReadableStream' in ReactDOM) {
@@ -156,7 +156,7 @@ async function getFormState({
 async function renderToPipeableStreamAsync(vnode: any, options: Record<string, any>) {
 	const Writable = await getNodeWritable();
 	let html = '';
-	return new Promise((resolve, reject) => {
+	return new Promise<string>((resolve, reject) => {
 		let error = undefined;
 		let stream = ReactDOM.renderToPipeableStream(vnode, {
 			...options,
@@ -219,9 +219,11 @@ function isFormRequest(contentType: string | null) {
 	return formContentTypes.some((t) => type === t);
 }
 
-export default {
+const renderer: NamedSSRLoadedRendererValue = {
 	name: '@astrojs/react',
 	check,
 	renderToStaticMarkup,
 	supportsAstroStaticSlot: true,
 };
+
+export default renderer;

packages/integrations/svelte/src/server.ts

@@ -1,4 +1,4 @@
-import type { AstroComponentMetadata } from 'astro';
+import type { AstroComponentMetadata, NamedSSRLoadedRendererValue } from 'astro';
 import { createRawSnippet } from 'svelte';
 import { render } from 'svelte/server';
 import { incrementId } from './context.js';
@@ -13,17 +13,17 @@ function check(Component: any) {
 	return Component.toString().includes('$$payload');
 }
 
-function needsHydration(metadata: AstroComponentMetadata) {
+function needsHydration(metadata?: AstroComponentMetadata) {
 	// Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
-	return metadata.astroStaticSlot ? !!metadata.hydrate : true;
+	return metadata?.astroStaticSlot ? !!metadata.hydrate : true;
 }
 
 async function renderToStaticMarkup(
 	this: RendererContext,
 	Component: any,
 	props: Record<string, any>,
 	slotted: Record<string, any>,
-	metadata: AstroComponentMetadata,
+	metadata?: AstroComponentMetadata,
 ) {
 	const tagName = needsHydration(metadata) ? 'astro-slot' : 'astro-static-slot';
 
@@ -66,9 +66,11 @@ async function renderToStaticMarkup(
 	return { html: result.body };
 }
 
-export default {
+const renderer: NamedSSRLoadedRendererValue = {
 	name: '@astrojs/svelte',
 	check,
 	renderToStaticMarkup,
 	supportsAstroStaticSlot: true,
 };
+
+export default renderer;

packages/integrations/vue/src/server.ts

@@ -1,12 +1,12 @@
 import { setup } from 'virtual:@astrojs/vue/app';
-import type { AstroComponentMetadata } from 'astro';
+import type { AstroComponentMetadata, NamedSSRLoadedRendererValue } from 'astro';
 import { createSSRApp, h } from 'vue';
 import { renderToString } from 'vue/server-renderer';
 import { incrementId } from './context.js';
 import StaticHtml from './static-html.js';
 import type { RendererContext } from './types.js';
 
-function check(Component: any) {
+async function check(Component: any) {
 	return !!Component['ssrRender'] || !!Component['__ssrInlineRender'];
 }
 
@@ -15,13 +15,13 @@ async function renderToStaticMarkup(
 	Component: any,
 	inputProps: Record<string, any>,
 	slotted: Record<string, any>,
-	metadata: AstroComponentMetadata,
+	metadata?: AstroComponentMetadata,
 ) {
 	let prefix;
 	if (this && this.result) {
 		prefix = incrementId(this.result);
 	}
-	const attrs = { prefix };
+	const attrs: Record<string, any> = { prefix };
 
 	const slots: Record<string, any> = {};
 	const props = { ...inputProps };
@@ -32,7 +32,7 @@ async function renderToStaticMarkup(
 				value,
 				name: key === 'default' ? undefined : key,
 				// Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot`
-				hydrate: metadata.astroStaticSlot ? !!metadata.hydrate : true,
+				hydrate: metadata?.astroStaticSlot ? !!metadata.hydrate : true,
 			});
 	}
 	const app = createSSRApp({ render: () => h(Component, props, slots) });
@@ -42,9 +42,11 @@ async function renderToStaticMarkup(
 	return { html, attrs };
 }
 
-export default {
+const renderer: NamedSSRLoadedRendererValue = {
 	name: '@astrojs/vue',
 	check,
 	renderToStaticMarkup,
 	supportsAstroStaticSlot: true,
 };
+
+export default renderer;