feat: make dev server compatible with FetchableDevEnvironment - #15574
feat: make dev server compatible with FetchableDevEnvironment#15574teemingc wants to merge 243 commits into
Conversation
🦋 Changeset detectedLatest commit: 987889c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
more cleanup separated from #15574
|
I tried splitting the PR into dev changes and analyse/prerender changes but it doesn't work because they share APIs such as EDIT: Let me still try.... |
| server_manifest, | ||
| tracked_features | ||
| )) { | ||
| check_feature(route.id, route_config, feature, config.adapter); |
There was a problem hiding this comment.
Had to temporarily remove this because the implementation has changed such that it only works inside the Vite environment. It's re-added in the PR stacked on top of this
|
Read through the diff since I was curious how the environment split works. The architecture makes sense to me. A handful of things I could verify at source level, roughly in order of importance. All line refs are against the current head (987889c). packages/kit/src/exports/vite/dev/server.js
packages/kit/src/exports/vite/index.js
packages/kit/src/exports/vite/dev/ssr_manifest.js
packages/kit/src/core/postbuild/analyse.js
Two small questions. |
split off from #15574 EDIT: This PR adds a `customHandler` property which adapters can resolve to a module that runs `server.init` and `server.respond` with additional logic. The handler runs during dev, build, prerender, and preview. It's main purpose is to set us up to unify the `dev` and `preview` experiences. --- ### Please don't delete this checklist! Before submitting the PR, please make sure you do the following: - [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs - [x] This message body should clearly illustrate what problems it solves. - [ ] Ideally, include a test that fails without this PR but passes with it. ### Tests - [ ] Run the tests with `pnpm test` and lint the project with `pnpm lint` and `pnpm check` ### Changesets - [ ] If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running `pnpm changeset` and following the prompts. Changesets that add features should be `minor` and those that fix bugs should be `patch`. Please prefix changeset messages with `feat:`, `fix:`, or `chore:`. ### Edits - [x] Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed. --------- Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com> Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com> Co-authored-by: Nic Polumeyv <nicolas.polum@outlook.com> Co-authored-by: Rich Harris <rich.harris@vercel.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Rich Harris <richard.a.harris@gmail.com> Co-authored-by: Rich-Harris <hello@rich-harris.dev>
|
We've made the difficult decision not to include this in version 3. It's been a useful (if expensive!) exercise to go through, but we're just not sold on all the additional complexity that fetchable dev environments force frameworks to absorb. Certainly not ruling it out for a post-3.0 release, but having this PR hanging over us has prevented some much-needed refactoring — if it happens, it'll be part of a future minor release. Will close this, but the branch will continue to exist if we need to refer back to it. |
This PR changes the dev, preview, build analysis and prerender to run inside of the configured Vite SSR environment. This required the following fundamental changes:
1. Avoiding Node.js imports in the runtime
node:fsis a requirement but we import it in the main process instead and communicate the results back to the Vite SSR environment.AsyncLocalStorage.enterWithbecause it's a Node.js-only experimental API2. Replacing Vite's
ssrLoadModuleThe Vite docs recommendation is to create a
ModuleRunneror theRunnableDevEnvironmentinstance to achieve a similar functionality but these don't work with Cloudflare's environment. There's also no strict contract for environments to make these available to us so they can't be relied on. We solve this in two different ways:import.meta.hot.onin the SSR environment to listen for events from the main process, compute the result, and send it back.Serverclass from the build output in the main process, we spin up a Vite development server with the build output but proxy theServerclass by intercepting module resolution with Vite'sresolveIdhook. Starting a dev server and sending a request or HMR event seems to be the only way to run a module in the environment.3. Communication between the main process (where Vite runs) and the SSR environment (where user code runs)
The two points before this makes this a requirement. Now we'll detail the different types of communication that exist as a result:
One way communication
environments.ssr.hot.send. This helps us retain synchronous access to the filesystem from a non-Node environment such as checking if a filename exists as a key in the server assets map. We can also construct virtual modules with serialised data that the can be imported and accessed in the environment.import.meta.hot.sendso that the main process can then create a Vite error overlay in the browser. This replaces ourloudSsrLoadModuleutility.Two way communication
ssrLoadModuleto run some code in Vite's pipeline and get a result back. Now, we have to ensure the SSR environment has animport.meta.hot.onevent listener attached, emit an event, compute in the environment, and receive the results back in the main process throughenvironments.ssr.hot.onandPromise.withResolversto await the result. This is used for retrieving remote function info, etc. Alternatively, we can also proxy theServerclass during analysis and prerendering to respond with our environment computed result as mentioned earlier.import.meta.hotapproach above because Cloudflare's workerd doesn't like responding to requests from a context created byimport.meta.hot.on. Therefore, we usefetchto send a request to the running Vite dev server, configure the Vite dev server using theconfigureServerhook to intercept the request viavite.middlewares.use, and respond with the computed result. This is primarily used for getting CSS to inline to avoid FOUC during dev, finding out which param matchers exist from the filesystem, or even checking if a feature should be allowed by theadapter.supportsfunction which we can't serialise.Most of the
import.meta.hotandfetchstyle communication requires serialising and deserialising data usingdevalue.Future PRs
sirvon the build output instead of running the SSR serverPlease don't delete this checklist! Before submitting the PR, please make sure you do the following:
Tests
pnpm testand lint the project withpnpm lintandpnpm checkChangesets
pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.Edits