A cli svelte compiler & watcher that works with snowpack.
Goals
- No bundler required
- No config required
- Integrate directly with snowpack for an optimal experience
- Instant dev watch & rebuild cycle
- Fast production builds that are optimized & tree-shaken
- Keep your
node_modulessuper light - Only support browsers that work with esm
- Only support standard esm imports (no css/image/custom-loader-like imports)
How it works
The goal of svelvet is to make svelte play nicely with snowpack and web_modules.
As of today, svelte depends on a loader for webpack or rollup which compiles your svelte components into individual js files. Since snowpack's goal is to avoid the need for a bundler, we can't use those loaders, but we can use svelte's internal compiler api to do 95% of the work for us. On top of that, svelvet adds automatic file watching to recompile your svelte files just like a loader would, but much faster!
To do this, svelvet finds all your src/**/*.svelte files and compiles them to dist/**/*.js. On the initial build, we run snowpack (only once) to find all imported third-party dependencies and generate esm versions of them in dist/web_modules/. After the initial build, svelvet just watches for new or changed files and recompiles them instantly!
Getting started
Create a new project and add the required dependencies. An example project is set up here.
# svelte is a peer dep required by svelvet. You get to choose which
# version to use and when to upgrade!
npm install svelte
# Install the svelvet cli (requires node v10 or higher)
npm install svelvet --save-devAdd a few simple scripts as seen here:
"scripts": {
// This starts svelvet in watch mode and runs snowpack once to generate dist/web_modules.
// It also starts a live reloading dev server on localhost:8080
"dev": "npm run clean && svelvet",
// This builds the dist directory optimized for production with snowpack
"build": "NODE_ENV=production npm run dev",
// Remove generated files for a clean build
"clean": "rm -rf dist/*"
},And finally, add some svelte files! All source files must be stored inside the src directory so svelvet can compile them into the dist directory.
Use npm run dev to compile in dev mode. This watches for file changes, compiles to dist and starts a live reloading dev server on localhost:8080.
To optimize a build for production, use npm run build.
You also must have an index.html file that loads your entrypoint or root svelte component.
<!-- Example: dist/index.html -->
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app"></div>
<script type="module">
import App from './App.js';
new App({
target: document.querySelector('#app'),
});
</script>
</body>
</html>Known issues
Imports don't automatically resolve index.ext (Issue #1)
If you have a structure like src/components/Footer/index.svelte, you cannot rely on index.svelte being auto resolved. Standard esm doesn't auto resolve index.js files and at the moment we don't transform the imports for you. So when you import this component, you must use a full path to the index.
Before (very common): import Footer from './components/Footer';
After: import Footer from './components/Footer/index';
Notably, you should leave off the extension. This is automatically added during the transform phase.
Adding a new dependency when running dev mode fails (Issue #10)
So if you start svelvet in dev mode and then at any point you add a new unique node_modules import path, you'll likely get a runtime error saying that file doesn't exist. The other possibility is that you already had that module installed, but you're referencing a different path for the first time.
This happens because svelvet runs snowpack only once and we don't track your source for new import paths.
The quick workaround is to restart dev mode until this is fixed.
FAQ
Why not just use webpack or rollup?
I don't need to support non-esm browsers for most projects and I really like the idea of a super light build process. By removing the complexity of configuration and the overhead of bundling, svelvet makes the development process an optimal experience for myself and hopefully others :)
Many of you will not be able to use this if you depend on custom import types or other fancy loaders. This project is just not for you!
But seriously, give snowpack a read to understand the benefits of leaning on standard esm imports, allowing you to avoid a bundling process entirely.
Can I override the babel config?
Yes! Just create a babel.config.js file in the root of your project, and that should be properly picked up by svelvet and snowpack. If not, please file an issue.
Can I use the hydratable or immutable svelte options?
Yeah, just run svelvet with the --hydratable or --immutable args to enable those options!
Possible future features
- Simple
distserving in dev mode - Auto refresh page after compile/transform
