search

honojs / vite-plugins

Vite Plugins for Hono
https://hono.dev
130 stars 34 forks source link

feat(dev-server): transform HTML using Vite enabling HRM with official React plugin #142

Closed gaetan-puleo closed 5 months ago

gaetan-puleo commented 5 months ago

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

changeset-bot[bot] commented 5 months ago

⚠️ No Changeset found

Latest commit: 924e9ae8e3062c2eb85f20a326ac108af58142c8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

gaetan-puleo commented 5 months ago

This pr is fixing https://github.com/honojs/vite-plugins/issues/141

yusukebe commented 5 months ago

Hi @gaetan-puleo

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
gaetan-puleo commented 5 months ago

How can i fix this case? @yusukebe

I am not familiar with streaming

yusukebe commented 5 months ago

Hmm. Maybe this is the same issue: https://stackoverflow.com/questions/78090835/how-to-inject-vite-plugin-preamble-when-using-rendertopipeablestream

gaetan-puleo commented 5 months ago

Yes it looks the same

gaetan-puleo commented 5 months ago

@yusukebe It might be possible to do the same.

https://github.com/rakkasjs/rakkasjs/blob/ff95ee58ace4e262c320cc26884738ad0a74815c/packages/rakkasjs/src/features/pages/middleware.tsx#L750

This link can help to find a solution

gaetan-puleo commented 5 months ago

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>
              </>
            )}