diff --git a/src/content/docs/guides/backend-adapters/hono.mdx b/src/content/docs/guides/backend-adapters/hono.mdx index 6fa46b2..87d60ed 100644 --- a/src/content/docs/guides/backend-adapters/hono.mdx +++ b/src/content/docs/guides/backend-adapters/hono.mdx @@ -42,22 +42,19 @@ Components inside other directories (e.g. `components` and `layouts`) will not b ### Run the development server -You can run the development server by using the `startServer` function: +You can run the development server by using the `mighty` middleware: -```ts {8} +```ts {6} import { Hono } from "hono"; -import { startServer } from "@gomighty/hono"; +import { mighty } from "@gomighty/hono"; -const app = new Hono(); - -// ... - -startServer(app); +// Chain .use(mighty()) for type safety +const app = new Hono().use(mighty()); ``` This will start a server that renders Astro components on-demand, with Hot Module Replacement (HMR) included for fast updates. -The server will only start **in development** (i.e. when `NODE_ENV=development`), and the `startServer` function will do nothing in production. +The `mighty()` middleware auto-detects the environment: in development it starts the dev server with HMR, and in production it sets up rendering of pre-built components. -### `hooks` option - -A series of events to hook into the Mighty pipeline. - -Use the `mighty:server:start` hook to get the Mighty server's address. - -This is useful when you want to send the server's host and port to your backend. - ## Render Astro components from your backend code -We assume your backend has knowledge about Mighty's server host and port (e.g. `http://localhost:4321`). - -You can now call the server on the `/render` endpoint to render Astro components: +The `dev()` and `start()` functions return a `render` function that you can use to render Astro components programmatically: ```ts -const res = await fetch("http://localhost:4321", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ - component: "posts.index", - props: { id: 1 }, - context: { backendVersion: "v1.2.0" }, - }), -}); -const astroComponentBody = await res.text(); +// Development +const { render, viteMiddleware, stop } = await dev({ config: { root: "./astro" } }); +const result = await render({ component: "posts.index", props: { id: 1 }, context: {}, address: "..." }); + +// Production +const { render } = await start({ config: { root: "./astro" } }); +const result = await render({ component: "posts.index", props: { id: 1 }, context: {} }); ``` -The `/render` endpoint accepts a JSON body with the following options: +The `render` function accepts a `MightyRenderRequest` object: ```ts export type MightyRenderRequest = { component: string; props?: Record; context?: Record; + /** @default true */ + partial?: boolean; }; ``` diff --git a/src/content/docs/guides/core-concepts/production-server.mdx b/src/content/docs/guides/core-concepts/production-server.mdx index 4c1625b..32e801f 100644 --- a/src/content/docs/guides/core-concepts/production-server.mdx +++ b/src/content/docs/guides/core-concepts/production-server.mdx @@ -30,3 +30,4 @@ In addition, backend adapters may perform additional tasks for better integratio To run the production server, refer to the instructions your backend adapter provides: - [Laravel](/guides/backend-adapters/laravel#start-the-production-server) +- [Hono](/guides/backend-adapters/hono#build-production-assets)