Every change in that gif is a separate hot module reload - seriously - build it yourself
- 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
npx svite create my-first-svite-project
cd my-first-svite-project
npm run dev # starts dev-server with hot-module-reloading
npm run build # builds to /distInstall svite and vite as a dev dependency
npm install -D svite viteVite requires an index.html file at project root that serves as entry point. see example
Svite has its own cli that wraps vite. It does not require a vite.config.js by default.
Simply set it up in scripts of package.json
{
"scripts": {
"dev": "svite",
"build": "svite build"
}
}most of vite cli options can also be passed to svite.
Create a new svite project from a template.
Usage: svite create [options] [targetDir]
create a new project. If you do not specify targetDir, "./svite-<template>" will be used
Options:
-t, --template [string] template for new project. ["minimal","routify-mdsvex","postcss-tailwind","svelte-preprocess-auto"] (default: "minimal")
-f, --force force operation even if targetDir exists and is not empty (default: false)
-c, --cache cache template for later use (default: false)
-d, --debug more verbose logging (default: false)
-si, --skip-install skip npm install (default: false)
-sg, --skip-git skip git init (default: false)
-sc, --skip-commit skip initial commit (default: false)
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
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")
--stats [boolean|string] generate bundle stats with rollup-plugin-visualizer. true, "json": stats.json, ["html" "treemap","sunburst","network"]: stats.html
--ssr [boolean] build for server-side rendering
Run vite optimizer. svite dev runs this automatically by default. Sometimes it can be helpful to run it manually to force updates to optimized dependencies.
Usage: svite optimize [options]
run vite optimizer
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
-f, --force force optimize even if hash is equal
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)],
};| option | type | default | values |
|---|---|---|---|
| hot |
booleanobject |
true |
• true use default svelte-hmr config• false disable svelte-hmr• object custom svelte-hmr config |
| useTransformCache |
boolean |
true |
• true enable transform cache• false disable transform cache |
| logLevel | string |
'info' |
• 'debug' • 'info' • 'warn' • 'error' • 'silent'. cli 'debug' flag automatically sets logLevel to 'debug' |
| svelte |
object |
not set |
• object rollup-plugin-svelte config object |
Only change this option if you have to. See svelte-hmr for more Information
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.
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
use this option if you don't want to use svelte.config.js or need a quick override.
as barebones as it gets, just an essential App.svelte
postcss and tailwindcss
routify with support for mdsvex
typescript and svelte-preprocess in automatic mode. This is heavily based on the regular svelte-preprocess example
This is an early version, some things may not work as expected. Please report findings.
Join svite discord
- svelte and vite obviously
- rixo - without svelte-hmr and your support this would not have been possible
- vite-plugin-svelte - initial inspiration