From 3d87d087e122cc0637d1aa0ff0c2070611f54596 Mon Sep 17 00:00:00 2001 From: Emanuele Stoppa Date: Thu, 13 Jun 2024 14:04:44 +0100 Subject: [PATCH] update changeset --- .changeset/dull-carpets-breathe.md | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/.changeset/dull-carpets-breathe.md b/.changeset/dull-carpets-breathe.md index 1f950ac63022..63aca3cefd71 100644 --- a/.changeset/dull-carpets-breathe.md +++ b/.changeset/dull-carpets-breathe.md @@ -1,20 +1,24 @@ --- -'@astrojs/react': minor +'astro': patch --- -Exposes a `renderer` object from `@astrojs/react/server.js` and `@astrojs/react/server17.js`. This is useful when using the Container API for on-demand pages: +Adds a new function called `addServerRenderer` to the Container API. Use this function to manually store renderers inside the instance of your container. + +This new function should be preferred when using the Container API in environments like on-demand pages: ```ts -import type {APIRoute, SSRLoadedRenderer} from "astro"; +import type {APIRoute} from "astro"; import { experimental_AstroContainer } from "astro/container"; -import { renderer } from '@astrojs/react/server.js'; -import Component from "../components/button.jsx" +import reactRenderer from '@astrojs/react/server.js'; +import vueRenderer from '@astrojs/vue/server.js'; +import ReactComponent from "../components/button.jsx" +import VueComponent from "../components/button.vue" export const GET: APIRoute = async (ctx) => { - const renderers: SSRLoadedRenderer[] = [renderer]; - const container = await experimental_AstroContainer.create({ - renderers - }); + const container = await experimental_AstroContainer.create(); + container.addServerRenderer("@astrojs/react", reactRenderer); + container.addServerRenderer("@astrojs/vue", vueRenderer); + const vueComponent = await container.renderToString(VueComponent) return await container.renderToResponse(Component); } ```