suimeng
/
honojs-middleware
mirror of https://github.com/honojs/middleware.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(react-renderer): Support renderToReadableStream options for hydration (#410) 

* Support renderToReadableStream options for hydration

* Add changeset for @hono/react-renderer

* Minor updates, not patches
pull/414/head
yoshikouki 2024-03-06 22:43:31 +09:00 committed by GitHub
parent 053b2d5143
commit bda918e286
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/good-hairs-compare.md 100644
View File

@ -0,0 +1,5 @@
---
'@hono/react-renderer': minor
---
Support renderToReadableStream options.

6
packages/react-renderer/src/react-renderer.ts
View File

@ -1,12 +1,13 @@
import type { Context } from 'hono' import type { Context } from 'hono'
import type { Env, MiddlewareHandler } from 'hono/types' import type { Env, MiddlewareHandler } from 'hono/types'
import React from 'react' import React from 'react'
import { renderToString } from 'react-dom/server' import { renderToString, type RenderToReadableStreamOptions } from 'react-dom/server'
import type { Props } from '.' import type { Props } from '.'
type RendererOptions = { type RendererOptions = {
docType?: boolean | string docType?: boolean | string
stream?: boolean | Record<string, string> stream?: boolean | Record<string, string>
readableStreamOptions?: RenderToReadableStreamOptions
} }
type BaseProps = { type BaseProps = {
@ -26,7 +27,8 @@ const createRenderer =
if (options?.stream) { if (options?.stream) {
const { renderToReadableStream } = await import('react-dom/server') const { renderToReadableStream } = await import('react-dom/server')
const stream = await renderToReadableStream( const stream = await renderToReadableStream(
React.createElement(RequestContext.Provider, { value: c }, node) React.createElement(RequestContext.Provider, { value: c }, node),
options.readableStreamOptions
) )
return c.body(stream, { return c.body(stream, {
headers: headers: