fix(remix-dev/vite, remix-server-runtime): handle criticalCss in an adapter agnostic way

[hi-ogawa]

Closes: #7878

(EDIT: virtual module + globalThis approach is rewritten with explicit get/set API exposed by @remix-run/server-runtime. The following comment is only about the former approach.)

This PR adds __unstableRemixViteRuntime to virtual ServerBuild so that server-runtime can use it to implement certain vite dev specific features such as criticalCss (and also my motivation is to use this to expose ssrFixStacktrace #8066).
The idea is that, by extending ServerBuild, it allows server-runtime layer to handle certain features instead of adapter layer.

Messing with globalThis is probably not ideal (since this is essentially exposing API from @remix-run/dev to @remix-run/server-runtime via globalThis.__unstableRemixViteRuntime), but I saw there are other frameworks making use of similar approach to expose certain dev features through virtual module, for examples:

• vavite https://github.com/cyco130/vavite/blob/17d05d256818b654c68c194314931e8266cf9ff8/packages/expose-vite-dev-server/src/index.ts#L21
• vike https://github.com/vikejs/vike/blob/2580d69b532a125edfd65e5fa04336e62a690b7b/vike/utils/getGlobalObject.ts#L6

So, I thought this ideas is worth a shot, so I put together a PR. Please let me know if this approach is worth considering. Thanks!

Testing Strategy

Existing tests (namely vite-css-dev-test.ts and vite-css-dev-express-test.ts) should cover the functionality.

[changeset-bot]

🦋 Changeset detected

Latest commit: 80797d6

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

This PR includes changesets to release 16 packages

Name	Type
@remix-run/dev	Patch
@remix-run/server-runtime	Patch
@remix-run/cloudflare	Patch
@remix-run/deno	Patch
@remix-run/node	Patch
@remix-run/react	Patch
@remix-run/cloudflare-pages	Patch
@remix-run/cloudflare-workers	Patch
@remix-run/architect	Patch
@remix-run/express	Patch
@remix-run/serve	Patch
@remix-run/testing	Patch
create-remix	Patch
remix	Patch
@remix-run/css-bundle	Patch
@remix-run/eslint-config	Patch

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

[markdalgleish]

I love that this means consumers don't need to worry about managing the critical CSS for custom servers. I've pushed some refactors, mainly to get rid of the indirection of modifying the server build, but overall this looks good to me.

Since my changes were pretty significant, I'm throwing it to @pcattori to have a look too.

[markdalgleish]

This is such a nice clean up 🎉

[hi-ogawa]

Nice! I didn't think about exposing get/set API.
If I look at this simplicity, then I wonder if it would also work with just using local let variable like:

let _devServerHooks: DevServerHooks | undefined;

export function setDevServerHooks(devServerHooks: DevServerHooks) {
  _devServerHooks = devServerHooks
}

export function getDevServerHooks(): DevServerHooks | undefined {
  return _devServerHooks;
}

But this might have issues when dual package hazard like scenario (user-code is esm, but remix library is commonjs)?

---

I was just looking at the sveltekit for how they deal with ssrFixStacktrace and it looks like they have a clever way to pass "vite server thing" to "runtime":

https://github.com/sveltejs/kit/blob/b6c7e8b574b28b83407c068757a456d511891027/packages/kit/src/exports/vite/dev/index.js#L464-L467

				const { set_fix_stack_trace } = await vite.ssrLoadModule(
					`${runtime_base}/shared-server.js`
				);
				set_fix_stack_trace(fix_stack_trace);

https://github.com/sveltejs/kit/blob/b6c7e8b574b28b83407c068757a456d511891027/packages/kit/src/runtime/shared-server.js#L20-L24

export let fix_stack_trace = (error) => error?.stack;

export function set_fix_stack_trace(value) {
	fix_stack_trace = value;
}

I'm still digesting what's happening with this, but it might be possible to avoid globalThis, so I'll investigate further and I can follow up with a separate PR if I find a better way.

[markdalgleish]

@hi-ogawa Thanks so much for kicking off this PR. This is a massive improvement.

[github-actions]

🤖 Hello there,

We just published version 2.4.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.4.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!