diff --git a/src/content/docs/en/reference/container-reference.mdx b/src/content/docs/en/reference/container-reference.mdx index 661e1445430f9..0f16a713e356f 100644 --- a/src/content/docs/en/reference/container-reference.mdx +++ b/src/content/docs/en/reference/container-reference.mdx @@ -20,6 +20,11 @@ This API is experimental and subject to breaking changes, even in [minor or patc ## `create()` +

+ +**Type:** `(options?: AstroContainerOptions) => Promise` +

+ Creates a new instance of the container. ```js @@ -50,13 +55,21 @@ export type AddServerRenderer = ### `streaming` option -**Type:** `boolean` +

+ +**Type:** `boolean`
+**Default:** `false` +

Enables rendering components using [HTML streaming](/en/guides/on-demand-rendering/#html-streaming). ### `renderers` option -**Type:** `AddServerRenderer[]` +

+ +**Type:** `AddServerRenderer[]`
+**Default:** `[]` +

A list of loaded client renderers required by the component. Use this if your `.astro` component renders any [UI framework components](/en/guides/framework-components/) or MDX using an official Astro integration (e.g. React, Vue, etc.). @@ -106,8 +119,8 @@ import vueRenderer from "@astrojs/vue/server.js"; import mdxRenderer from "@astrojs/mdx/server.js"; const container = await experimental_AstroContainer.create(); -container.addServerRenderer({renderer: vueRenderer}); -container.addServerRenderer({renderer: mdxRenderer}); +container.addServerRenderer({ renderer: vueRenderer }); +container.addServerRenderer({ renderer: mdxRenderer }); container.addServerRenderer({ renderer: reactRenderer }); container.addClientRenderer({ name: "@astrojs/react", entrypoint: "@astrojs/react/client.js" }); @@ -115,6 +128,11 @@ container.addClientRenderer({ name: "@astrojs/react", entrypoint: "@astrojs/reac ## `renderToString()` +

+ +**Type:** (component: AstroComponentFactory; options?: ContainerRenderOptions) => Promise<string> +

+ This function renders a specified component inside a container. It takes an Astro component as an argument and it returns a string that represents the HTML/content rendered by the Astro component. ```js @@ -131,6 +149,11 @@ It also accepts an object as a second argument that can contain a [number of opt ## `renderToResponse()` +

+ +**Type:** (component: AstroComponentFactory; options?: ContainerRenderOptions) => Promise<Response> +

+ It renders a component, and it returns a `Response` object. ```js @@ -154,7 +177,8 @@ export type ContainerRenderOptions = { request?: Request; params?: Record; locals?: App.Locals; - routeType?: "page" | "endpoint"; + routeType?: RouteType; + partial?: boolean; }; ``` @@ -162,7 +186,10 @@ These optional values can be passed to the rendering function in order to provid ### `slots` -**Type:** `Record` +

+ +**Type**: `Record` +

An option to pass content to be rendered with [``](/en/basics/astro-components/#slots). @@ -224,7 +251,10 @@ const result = await container.renderToString(Card, { ### `props` option -**Type:** `Record` +

+ +**Type**: `Record` +

An option to pass [properties](/en/basics/astro-components/#component-props) for Astro components. @@ -252,7 +282,10 @@ const { name } = Astro.props; ### `request` option -**Type:** `Request` +

+ +**Type**: `Request` +

An option to pass a `Request` with information about the path/URL the component will render. @@ -274,7 +307,10 @@ const result = await container.renderToString(Card, { ### `params` option -**Type:** `Record` +

+ +**Type**: `Record` +

An object to pass information about the path parameter to an Astro component responsible for [generating dynamic routes](/en/guides/routing/#dynamic-routes). @@ -300,7 +336,10 @@ const result = await container.renderToString(LocaleSlug, { ### `locals` options -**Type:** `App.Locals` +

+ +**Type**: `App.Locals` +

An option to pass information from [`Astro.locals`](/en/reference/api-reference/#locals) for rendering your component. @@ -341,7 +380,10 @@ test("User is out", async () => { ### `routeType` option -**Type:** `"page" | "endpoint"` +

+ +**Type**: `RouteType` +

An option available when using `renderToResponse()` to specify that you are rendering an [endpoint](/en/guides/endpoints/):