feat: fetchable dev environments#15574
Conversation
🦋 Changeset detectedLatest commit: 3ad4a3b 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 |
|
The recent on |
7f3e0a6 to
e64d61f
Compare
|
Alright, rewinding the merge, since I fucked things up beyond repair. Sorry 😬 Will see if I can get it right on the second attempt, though I'm a little worried that the new explicit env stuff is going to pose a real challenge |
e87ebce to
e64d61f
Compare
|
I’ll take a look too if you haven’t had another go at it already |
|
It's all working now, just needed to point to |
|
Heads up for when this rebases. The eager |
| const server_root = join(config.outDir, 'output'); | ||
|
|
||
| /** @type {import('types').ServerInternalModule} */ | ||
| const internal = await import(pathToFileURL(`${server_root}/server/internal.js`).href); |
There was a problem hiding this comment.
Instead of running the server directly in the current process, we're going to run invoke the dev environment and run it there (whatever process that is which has been configured in the Vite config). Most of the instructions here have been moved to the analysis_entry.js file which is the module we run in the dev environment
| if (!svelte_config.kit.adapter?.vite?.plugins) { | ||
| if (!vite.isFetchableDevEnvironment(server.environments.ssr)) { | ||
| throw new Error( | ||
| 'The Vite configured dev SSR environment must be a FetchableDevEnvironment' |
There was a problem hiding this comment.
Might make this doable in a future PR but not worth the extra branches for now
Extracts some changes from #15574 that allows adapters to provide their own Vite plugins. If the adapters provide a Vite plugin that configures dev/preview, it's expected for them to fully handle that. This will allow adapters to change dev/build/preview behaviour that's beneficial regardless of if we adopt the Vite environment API. For example: - the Cloudflare adapter could specify the build config platform to target webworkers instead of node - adapters can configure the preview server to run the adapter build output with a custom runtime rather than the current behaviour of running the Vite build output in a Node process all the time --- ### Please don't delete this checklist! Before submitting the PR, please make sure you do the following: - [x] 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. - will probably add some in a follow-up PR. It's more meaningful when done in the adapter packages that actually make use of the change - ### Tests - [ ] Run the tests with `pnpm test` and lint the project with `pnpm lint` and `pnpm check` ### Changesets - [x] 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>
|
Install the latest version of pnpm add https://pkg.svelte.dev/@sveltejs/kit/c/3ad4a3ba9c554150bd09adc7057533d027118ae2Open in |
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