esm-loader-svelte

Experimental!

Node.js esmodules loader for Svelte, and optionally some SvelteKit.

About

If you:

• Are using a modern version of Node.js.
• Have set { type: 'module' } in your package.json (docs).
• Are using ESmodule import statements in your .js files.
• Don't mind experimental non-production code.

With this, you can:

• Successfully import .svelte components in Node.js.
  • JS code will be compiled with svelte/compile.
  • If a custom config file exists, component will be pre-processed with svelte/preprocess and svelte-preprocess.
  • SvelteKit import alias import { goto } from $app/navigation, will load successfully as a no-op.
• No-op import .css files without failure (helpful for testing).
  • Other asset file extensions from the preprocessor config (e.g. .postcss) will also be no-op imported without failure.

Install

npm install --save-dev esm-loader-svelte

Usage

Simple

Here we have a simple Svelte component:

<script>
  // Component.svelte -- A simple example Svelte component to test.
  import './styles/layout.css'

  const star = 'Sun'
</script>

<div>
  <strong>{star}</strong>
</div>

<style>
  strong { color: orange }
</style>

Node.js will ordinarily fail on the following import, as it doesn't know how to handle .svelte (and the included .css) files:

// Component.test.js -- Test a Svelte component.
import Component from './Component.svelte'

The same code will work successfully if we start Node.js with our loader:

NODE_OPTIONS="--experimental-loader esm-loader-svelte" npm run test

Complex

Here we have a more complex Svelte component, which requires preprocessing for it's advanced features:

<script>
  // Component.svelte -- A complex example Svelte component to test.

  // ADD: .postcss import
  import './styles/page.postcss'

  const star = 'Sun'
</script>

<!-- ADD: <template> tag from svelte-preprocess -->
<template>
  <div class="planet">
    <strong>{star}</strong>
  </div>
</template>

<!-- ADD: postcss w/nesting -->
<style lang="postcss">
  .planet {
    strong {
      color: orange;
    }
  }
</style>

We'll create a new custom config file to hold our svelte-preprocess settings:

// svelte-preprocess.config.js -- A custom home for our preprocess settings.
export default {
  postcss: true,
}

And now we can have our advanced Svelte component compile correctly:

NODE_OPTIONS="--experimental-loader esm-loader-svelte" npm run test

If you happen to use SvelteKit, and don't want to repeat the processor settings, you can change your svelte.config.js to pull in the config from our custom file:

// svelte.config.js -- SvelteKit config file.
import sveltePreprocess from 'svelte-preprocess'

const { default: sveltePreprocessConfig } = await
  import(resolve('./svelte-preprocess.config.js'))

export default {
  // ...,
  preprocess: [
    // ...,
    sveltePreprocess(sveltePreprocessConfig),
  ],
}

Why?

I'm using this to test my SvelteKit apps with UVU in full native ES6/ESM mode.

Notes

• Importing .json files can be accomplished with experimental node flag --experimental-json-modules.
• An esm DOM can be loaded into tests by importing global-jsdom/register from global-jsdom.
• Leaving off the .js extension works.
• You can import module folders, assuming that index.js exists in the folder.
• Import aliases (from '$utils/draw.js') works. This relies on svelte.config.js.