svite v0.11.0

Every change in that gif is a separate hot module reload - seriously - build it yourself

features

• reads svelte configuration from svelte.config.js
• svelte preprocessor support
• svelte dependency optimization in dev
• svelte compiler result caching in dev
• hot module reloading thanks to svelte-hmr
• logging with configurable level
• drop-in installation as vite plugin

quickstart

npx degit dominikg/svite/examples/minimal my-first-svite-project
cd my-first-svite-project
npm install
npm run dev # starts dev-server with hot-module-reloading
npm run build # builds to /dist

usage

installation

Install svite and vite as a dev dependency

npm install -D svite vite

project setup

Vite requires an index.html file at project root that serves as entry point. example

run

Svite has its own cli that wraps vite. It does not require a vite.config.js by default

{
  "scripts": {
    "dev": "svite",
    "build": "svite build"
  }
}

Advanced usage

svite cli

most of vite cli options can also be passed to svite.

commands

dev

Start a dev server with svite or svite dev

Usage: svite dev [options]

Options:
  -d,  --debug [boolean|string]   enable debug output. you can use true for "vite:*,svite:*" or supply your own patterns. Separate patterns with , start with - to filter. eg: "foo:*,-foo:bar"  (default: false)
  -c,  --config [string]          use specified vite config file
  -p,  --port [port]              port to use for serve (default: 3000)
  -sw, --serviceWorker [boolean]  enable service worker caching (default: false)
  -o,  --open [boolean]           open browser on start

build

Bundle for production with svite build

Usage: svite build [options]

Options:
  -d, --debug [boolean|string]               enable debug output. you can use true for "vite:*,svite:*" or supply your own patterns. Separate patterns with , start with - to filter. eg: "foo:*,-foo:bar"  (default: false)
  -c, --config [string]                      use specified vite config file
  -m, --mode [string]                        specify env mode (default: "production")
  --base [string]                            public base path for build (default: "/")
  --outDir [string]                          output directory for build (default: "dist")
  --assetsDir [string]                       directory under outDir to place assets in (default: "_assets")
  --assetsInlineLimit [number]               static asset base64 inline threshold in bytes (default: 4096)
  --sourcemap [boolean]                      output source maps for build (default: false)
  --minify [boolean | "terser" | "esbuild"]  enable/disable minification, or specify minifier to use. (default: "terser")
  --ssr [boolean]                            build for server-side rendering

svite options

you can pass additional options to svite via vite.config.js

const svite = require('svite');
const sviteConfig = {
  hot: true, // boolean or options object for svelte-hmr
  useTransformCache: true, // boolean
  svelte: {}, // options for rollup-plugin-svelte
};
module.exports = {
  plugins: [svite(sviteConfig)],
};

hot

Only change this option if you have to. See svelte-hmr for more Information

useTransformCache

Improves performance for reloads.

When a reload request hits the dev server, vite runs transforms again. this option caches the result of the last transform and reuses it if the file was not modified. Uses more ram, less cpu and is a bit faster.

logLevel

Set this to 'debug' if you want to see more output, use 'warn', 'error' or 'silent' for less. This only applies to svites own logging. Logging of vite remains unaffected. You can use --debug cli option to control vite debug output

svelte

use this option if you don't want to use svelte.config.js or need a quick override.

check out the examples

minimal

as barebones as it gets, just an essential App.svelte

postcss-tailwind

postcss and tailwindcss

routify-mdsvex

routify with support for mdsvex

svelte-preprocess-auto

typescript and svelte-preprocess in automatic mode. This is heavily based on the regular svelte-preprocess example

limitations

This is an early version, some things may not work as expected. Please report findings.

Got a question? / Need help?

Join svite discord

Credits

• svelte and vite obviously
• rixo - without svelte-hmr and your support this would not have been possible
• vite-plugin-svelte - initial inspiration