esm-loader-svelte
v1.0.11
Published
Chainable ESModule Loader for Svelte and SvelteKit
Downloads
92
Maintainers
Readme
esm-loader-svelte
Node.js ESModule Loader for importing and loading
Svelte (.svelte
) and SvelteKit files, and
transpiling on the fly.
Warning! Using experimental Node.js features and flags, API will likely change. This may be helpful for development and testing, but should not be used in production.
Usage
npm install --save-dev esm-loader-svelte
We want to import a .svelte
file with Node.js:
<!-- Component.svelte -->
<script>
const words = 'Hello'
</script>
<h1>{words} World!</h1>
<style>
h1 {
color: blue;
}
</style>
// index.js
import Component from './Component.svelte'
// render(Component) to DOM, etc.
Standalone
# node >= 20.7
cat << EOF > ./register.js
import { register } from 'node:module'
register('esm-loader-svelte', import.meta.url)
EOF
NODE_OPTIONS="--import ./register.js" node index.js
# node < 20.7
NODE_OPTIONS="--loader esm-loader-svelte" node index.js
Chainable
This loader can be configured, and chained with other loaders, using node-esm-loader.
npm install --save-dev node-esm-loader
// .loaderrc.js
export default {
loaders: ['esm-loader-svelte'],
}
# node >= 20.7
NODE_OPTIONS="--import node-esm-loader/register" node index.js
# node < 20.7
NODE_OPTIONS="--loader node-esm-loader" node index.js
Options
Debug
// .loaderrc.js
export default {
loaders: [
{
loader: 'esm-loader-svelte',
options: {
debug: true,
},
},
],
}
Preprocess
Preprocessing options can be supplied, for usage with something like SvelteKit's svelte-preprocess.
Supply preprocessing options via node-esm-loader
config file .loaderrc.js
:
// .loaderrc.js
import preprocess from 'svelte-preprocess'
import { resolve } from 'node:path'
export default {
loaders: [
{
loader: 'esm-loader-svelte',
options: {
preprocess: preprocess({
postcss: true,
typescript: {
tsconfigDirectory: resolve('./'),
tsconfigFile: 'tsconfig.json',
},
}),
},
},
],
}
SvelteKit
If options.preprocess
is NOT found in .loaderrc.js
, then we will try to
load a SvelteKit svelte.config.js
file, and use the preprocess
settings
found therein:
// svelte.config.js
import preprocess from 'svelte-preprocess'
import { resolve } from 'node:path'
export default {
kit: ...,
preprocess: preprocess({
postcss: true,
typescript: {
tsconfigDirectory: resolve('./'),
tsconfigFile: 'tsconfig.json',
}
})
}
To further support loading SvelteKit, you may be interested in chaining additional loaders. If you are testing a SvelteKit app, we suggest using vitest instead.
Caveats
Svelte does not run some lifecycle events on the server under Node.js:
onMount
, beforeUpdate
, afterUpdate
.