Skip to content
🧵 A cli svelte compiler & watcher that works with snowpack
TypeScript HTML JavaScript Shell
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Little cleanup Jan 22, 2020
bin Fix bin and add dev watch mode Jan 19, 2020
examples/basic Publish v0.3.0 Feb 11, 2020
scripts
src Use path.sep to fix windows build error (#45) Feb 13, 2020
tests Add new snapshot that imports 3rd party svelte files and uses snowpac… Feb 17, 2020
typings Use servor as our live reloading dev server (#34) Feb 4, 2020
.eslintrc.js Fix lint Jan 19, 2020
.gitattributes Should include everything Jan 19, 2020
.gitignore
.npmignore Seperate bin from lib Jan 19, 2020
.npmrc Watch for src changes and compile>snowpack>transform Jan 19, 2020
.prettierrc.js Add ci workflow Jan 19, 2020
CHANGELOG.md Publish v0.3.2 Feb 17, 2020
CODE_OF_CONDUCT.md Add github meta Jan 19, 2020
CONTRIBUTING.md Little cleanup Jan 22, 2020
LICENSE Initial commit Jan 18, 2020
README.md Add simple project screenshot Feb 17, 2020
package.json Publish v0.3.2 Feb 17, 2020
tsconfig.json Modify glob patterns which copied test files to dist (#29) Jan 25, 2020

README.md

svelvet logo

build status npm version

A cli svelte compiler & watcher that works with snowpack.

screenshot of a svelvet project

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_modules super 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-dev

Add 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": "svelvet",

    // This builds the dist directory optimized for production with snowpack
    "build": "NODE_ENV=production svelvet"
},

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!

You can’t perform that action at this time.