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): 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/curly-fans-rhyme.md 100644
View File

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

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

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

30
packages/react-renderer/test/react-renderer.test.tsx
View File

@ -36,7 +36,7 @@ describe('Basic', () => {
expect(res).not.toBeNull() expect(res).not.toBeNull()
expect(res.status).toBe(200) expect(res.status).toBe(200)
expect(await res.text()).toBe( 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/') const res = await app.request('http://localhost/')
expect(res).not.toBeNull() expect(res).not.toBeNull()
expect(res.status).toBe(200) 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 () => { it('nested layout with Layout', async () => {
@ -109,14 +109,14 @@ describe('Basic', () => {
expect(res).not.toBeNull() expect(res).not.toBeNull()
expect(res.status).toBe(200) expect(res.status).toBe(200)
expect(await res.text()).toBe( 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') res = await app.request('http://localhost/nested/nested2')
expect(res).not.toBeNull() expect(res).not.toBeNull()
expect(res.status).toBe(200) expect(res.status).toBe(200)
expect(await res.text()).toBe( 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>') 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 () => { it('Should return a custom doctype', async () => {
const app = new Hono() const app = new Hono()
app.use( app.use(