Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Back to Vite 🎉 #1728

Merged
merged 86 commits into from
Feb 29, 2024
Merged

Back to Vite 🎉 #1728

merged 86 commits into from
Feb 29, 2024

Conversation

frandiox
Copy link
Contributor

@frandiox frandiox commented Feb 5, 2024

Experimental Vite support! This uses the new ViteRuntime released in Vite 5.1.0-beta.6 to make Hydrogen/Remix run on workerd instead of polyfilling APIs.

I've started this as a CLI command to make things easier but we might be able to extract it later as a plugin (most of the Vite code is already separated from the CLI itself).

A good chunk of this comes from sapphi-red/vite-envs, especially around WS/HMR.

GraphiQL, Subrequest Profiler, log enhancements, worker devtools, etc. are already integrated 🎉

There are a few things that are not working properly yet:

  • Sourcemaps
  • Granular server HMR instead of a full reload (this is unrelated to browser HMR).
  • Need to sync with Remix team on things like virtual routes support, etc. Currently kind of hacking Remix to make things work.
  • Need to make a proper CLI command for vite-build.
  • Fix CSS loading delay in dev
  • VSCode step-debugging

To test this locally:

  • npm i
  • npm run build:pkg -- --force
  • cd examples/vite, npm run dev || or LOCAL_DEV=true h2 init --template vite to scaffold a new one.

Here's a diagram showing roughly the flow: https://www.tldraw.com/v/VJ2EJE5bJwrBaPYERLjBw?viewport=-284,-93,2090,1186&page=page:U22fjHfK0cK0yNoOgsNYZ

image image

@github-actions github-actions bot had a problem deploying to preview February 6, 2024 11:23 Failure
Base automatically changed from fd-remix-2.6 to main February 7, 2024 13:17
packages/cli/src/commands/hydrogen/build-vite.ts Outdated Show resolved Hide resolved
packages/cli/src/commands/hydrogen/build-vite.ts Outdated Show resolved Hide resolved
packages/cli/src/commands/hydrogen/deploy.ts Show resolved Hide resolved
packages/cli/src/lib/vite/utils.ts Show resolved Hide resolved
packages/cli/src/lib/vite/utils.ts Show resolved Hide resolved
* Worker entry module that wraps the user app's entry module.
*/
async fetch(request: Request, env: ViteEnv, ctx: any) {
env.__VITE_SETUP_ENV(request);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this method do?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It modifies globalThis with an utility for the Subrequest Profiler. Once Vite is stable, we can deprecate the code we have in remix-oxygen for this and move it here.

To see more details around how this works, check wrappedBindings in the mini-oxygen.ts file. The setupScripts part comes from the Hydrogen plugin.

packages/cli/src/lib/vite/worker-entry.ts Show resolved Hide resolved
Copy link
Contributor

@blittle blittle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it looks good for an unstable release. Though there's probably lots of interesting scenarios to test.

@frandiox frandiox merged commit e641255 into main Feb 29, 2024
10 checks passed
@frandiox frandiox deleted the fd-h2-vite branch February 29, 2024 13:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants