feat(react-renderer): Include a doctype statement by default (#971)

* feat(react-renderer): Include a doctype statement by default

* chore: Add changeset
pull/972/head
ghaaj 2025-02-17 10:40:35 +09:00 committed by GitHub
parent a2fdda7f6f
commit be181bfff6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 34 additions and 7 deletions

View File

@ -0,0 +1,5 @@
---
'@hono/react-renderer': minor
---
The `doctype` option defaults to true

View File

@ -51,9 +51,9 @@ const createRenderer =
const docType =
typeof options?.docType === 'string'
? options.docType
: options?.docType === true
? '<!DOCTYPE html>'
: ''
: options?.docType === false
? ''
: '<!DOCTYPE html>'
const body =
docType + renderToString(React.createElement(RequestContext.Provider, { value: c }, node))
return c.html(body)

View File

@ -36,7 +36,7 @@ describe('Basic', () => {
expect(res).not.toBeNull()
expect(res.status).toBe(200)
expect(await res.text()).toBe(
'<html><head>Title</head><body><h1>http://localhost/</h1></body></html>'
'<!DOCTYPE html><html><head>Title</head><body><h1>http://localhost/</h1></body></html>'
)
})
@ -54,7 +54,7 @@ describe('Basic', () => {
const res = await app.request('http://localhost/')
expect(res).not.toBeNull()
expect(res.status).toBe(200)
expect(await res.text()).toBe('<h1>http://localhost/</h1>')
expect(await res.text()).toBe('<!DOCTYPE html><h1>http://localhost/</h1>')
})
it('nested layout with Layout', async () => {
@ -109,14 +109,14 @@ describe('Basic', () => {
expect(res).not.toBeNull()
expect(res.status).toBe(200)
expect(await res.text()).toBe(
'<html><head>Nested</head><body><div class="nested"><h1>http://localhost/nested</h1></div></body></html>'
'<!DOCTYPE html><html><head>Nested</head><body><div class="nested"><h1>http://localhost/nested</h1></div></body></html>'
)
res = await app.request('http://localhost/nested/nested2')
expect(res).not.toBeNull()
expect(res.status).toBe(200)
expect(await res.text()).toBe(
'<html><head>Nested2</head><body><div class="nested"><div class="nested2"><h1>http://localhost/nested</h1></div></div></body></html>'
'<!DOCTYPE html><html><head>Nested2</head><body><div class="nested"><div class="nested2"><h1>http://localhost/nested</h1></div></div></body></html>'
)
})
@ -142,6 +142,28 @@ describe('Basic', () => {
expect(await res.text()).toBe('<!DOCTYPE html><html><body><h1>Hello</h1></body></html>')
})
it('Should return a content without a doctype', async () => {
const app = new Hono()
app.use(
'*',
reactRenderer(
({ children }) => {
return (
<html>
<body>{children}</body>
</html>
)
},
{ docType: false }
)
)
app.get('/', (c) => c.render(<h1>Hello</h1>, { title: 'Title' }))
const res = await app.request('/')
expect(res).not.toBeNull()
expect(res.status).toBe(200)
expect(await res.text()).toBe('<html><body><h1>Hello</h1></body></html>')
})
it('Should return a custom doctype', async () => {
const app = new Hono()
app.use(