Inject HMR code in Worker entry file

[jamesopstad]

Fixes #000.

This transforms the Worker entry file to inject an HMR boundary. By providing an HMR boundary at the root, we ensure that the full module graph is not invalidated on code changes. Ideally, frameworks should be adding server HMR code at route boundaries but React Router does not currently do this. This follows discussion with the Vite team and they have also merged a PR to update the docs (vitejs/vite#20401).

From feedback gathered from users, it appears this change fixes the issues experienced in #9518. I believe this may be because HMR updates are queued (https://github.com/vitejs/vite/blob/3e81af38a80c7617aba6bf3300d8b4267570f9cf/packages/vite/src/module-runner/hmrHandler.ts#L25) whereas full reloads are not (https://github.com/vitejs/vite/blob/3e81af38a80c7617aba6bf3300d8b4267570f9cf/packages/vite/src/module-runner/hmrHandler.ts#L54). If this turns out not to be the case then we can reopen the issue.

---

• Tests
  • Tests included
  • Tests not necessary because: not testable
• Public documentation
  • Cloudflare docs PR(s):
  • Documentation not necessary because: N/A
• Wrangler V3 Backport
  • Wrangler PR:
  • Not necessary because: not a Wrangler change

[changeset-bot]

🦋 Changeset detected

Latest commit: bf90adb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudflare/vite-plugin	Minor

Not sure what this means? Click here to learn what changesets are.

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

[pkg-pr-new]

create-cloudflare

npm i https://pkg.pr.new/create-cloudflare@10001

@cloudflare/kv-asset-handler

npm i https://pkg.pr.new/@cloudflare/kv-asset-handler@10001

miniflare

npm i https://pkg.pr.new/miniflare@10001

@cloudflare/pages-shared

npm i https://pkg.pr.new/@cloudflare/pages-shared@10001

@cloudflare/unenv-preset

npm i https://pkg.pr.new/@cloudflare/unenv-preset@10001

@cloudflare/vite-plugin

npm i https://pkg.pr.new/@cloudflare/vite-plugin@10001

@cloudflare/vitest-pool-workers

npm i https://pkg.pr.new/@cloudflare/vitest-pool-workers@10001

@cloudflare/workers-editor-shared

npm i https://pkg.pr.new/@cloudflare/workers-editor-shared@10001

wrangler

npm i https://pkg.pr.new/wrangler@10001

commit: bf90adb

[Phoenixmatrix]

I'm looking at the code but I'm not familiar with the full extent of the HMR setup in Vite. Does this do more than what I'd do if I added the HMR snippet in my entry myself?

Because adding it, while it seems to improve stability somewhat, definitely does NOT fix HMR entirely in large application. Its still very uninstable with just that snippet.

I can't get together a reproduceable sample without shipping my entire app (not open source unfortunately).

But looking at the behavior, the instant I hit save on my file, I see the HMR message in the terminal. I also see my app's page in the browser flicker a few times as the various HMRed impacted file get processed. I see network chatter as the files get loaded, especially the CSS. And then nothing happens.

My theory is because the Cloudflare Vite plugin rebundle the whole app (correct me if that's not true, its what folks in the Discord are saying), it takes several seconds to finish bundling, but the HMR step seem to "complete" long before that, so the changes don't get picked up. This is all uneducated guesses as best, but just adding the HMR code doesn't seem to do much.

If I use a small app like the RR7 template for Cloudflare, then it works 100% of the time, but that app builds almost instantly.

[edmundhung]

I can see how this could improve the performance on code change. But I wonder if this addresses the issue you mentioned in #9518 (comment) as it might just making it less likely to happen?

[jamesopstad]

I can see how this could improve the performance on code change. But I wonder if this addresses the issue you mentioned in #9518 (comment) as it might just making it less likely to happen?

Yep, I agree we shouldn't close the issue yet. This is an improvement rather than a fix and more investigation is still needed.