Node ESM loader

[cyco130]

This PR implements a Node ESM loader that transpiles modules with Vite. It enables sourcemaps and breakpoints, fixing #6.

The problem

By default, Vite transforms modules loaded with ssrLoadModule into an async function using a function constructor. So the following module:

import { foo } from "./foo.js";

foo();

is transformed into something like the following:

async function(/* bunch of bookkeeping stuf */) {
  "use strict";
  const __vite_ssr_import_1__ = await __vite_ssr_import__("./foo.js");
  __vite_ssr_import_1__.foo();
}

This way, Vite can create, in runtime, pseudo-modules with full control over module resolution, transformation, and execution.

Unfortunately, functions created from strings have limited support for sourcemaps and breakpoints, making it painful to debug server-side code when using frameworks like Rakkas, vite-plugin-ssr, SvelteKit, Astro, Qwik.js, or SolidStart.

The solution

This PR disables Vite's builtin SSR transform and implements a Node ESM loader to resolve and transform SSR modules instead. The loader uses Vite's dev server to perform the resolutions and transformations. Since it hooks into Node's builtin loading mechanism, sourcemaps and breakpoints work as expected. It's also faster and -potentially- more compatible.

Usage

If you're already using vavite, you can simply use vavite dev --use-loader instead of vite dev. Otherwise:

• Install @vavite/node-loader as a dev dependency.
• Add import { nodeLoaderPlugin } from "@vavite/node-loader/plugin" to your Vite config
• Add nodeLoaderPlugin() to your Vite plugins
• Run your project with vavite-loader vite dev (or vavite-loader rakkas dev, vavite-loader astro dev, etc.)

Compatibility

The ability to skip the SSR transform landed on Vite 4.1.0. Make sure you have the correct version.

It should work with any Vite SSR project or framework that uses ssrLoadModule to load SSR modules in the same process as Vite itself. I tested with the following:

• vite-plugin-ssr with React and Vue
• Rakkas
• SvelteKit
• SolidStart (upgrade to Vite 4.1!)
• Astro
• Qwik.js

Nuxt 3 doesn't work because it seems to have implemented its own fix using the node:vm module to load SSR modules.

I only did in-depth testing with Rakkas and I did encounter a few glitches on SvelteKit and Astro. But, overall, it seems to work.

It doesn't work on WebContainers (StackBlitz) or Deno.

Limitations

• ESM loaders are experimental
• This approach may be leaking memory on every module invalidation

[epavanello]

It works also for sveltekit!
thanks a lot!