feat(dev-server): transform HTML using Vite enabling HRM with official React plugin #142
Conversation
|
|
This pr is fixing #141 |
|
Thank you for the PR. This change will break the case of a streaming response. So the Suspense like the following does not work with this PR. import { Hono } from 'hono'
import { Suspense } from 'hono/jsx'
import { jsxRenderer } from 'hono/jsx-renderer'
export const renderer = jsxRenderer(
({ children }) => {
return (
<html>
<body>{children}</body>
</html>
)
},
{
stream: true
}
)
const app = new Hono()
app.use(renderer)
const AsyncComponent = async () => {
await new Promise((r) => setTimeout(r, 1000))
return <h1>Hello!</h1>
}
app.get('/', (c) => {
return c.render(
<div>
<h1>Streaming</h1>
<Suspense fallback={'loading...'}>
<AsyncComponent />
</Suspense>
</div>
)
})
export default app |
|
How can i fix this case? @yusukebe I am not familiar with streaming |
|
Hmm. Maybe this is the same issue: https://stackoverflow.com/questions/78090835/how-to-inject-vite-plugin-preamble-when-using-rendertopipeablestream |
|
Yes it looks the same |
|
@yusukebe It might be possible to do the same. This link can help to find a solution |
|
I added this in my template on the server side and HMR is working now. Maybe we can create a middleware or a plugin to inject those lines. {process.env.NODE_ENV === "development" && (
<>
<script
type="module"
dangerouslySetInnerHTML={{
__html: `
import RefreshRuntime from '${BASE_URL}/@react-refresh'
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
`,
}}
/>
<script type="module" src="src/assets/main.tsx"></script>
</>
)} |
vite react plugin add HMR support to vite. (Maybe other plugin do the same).
Today HMR is not working from component because Vite didn't transform the HTML.
This PR aim to fix this issue