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
- a cli with lots of options
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")
-ts, --typescript [boolean] enable typescript support for svelte !!!EXPERIMENTAL!!! (default: false)
-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)
-h, --help display help for command
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
-ts, --typescript [boolean] enable typescript preprocessing in svelte !!!EXPERIMENTAL!!! (default: false)
-p, --port [port] port to use for serve (default: 3000)
-o, --open [boolean] open browser on start
--useTransformCache [boolean] use transform cache for faster hmr (default: false)
--hot [boolean] enable/disable hmr for svelte (default: true)
--resolveSvelteField [boolean] resolve via svelte field in package.json (default: true)
-h, --help display help for command
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
-ts, --typescript [boolean] enable typescript preprocessing in svelte !!!EXPERIMENTAL!!! (default: false)
-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
-h, --help display help for command
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 |
| typescript | boolean |
false |
• true enable typescript preprocessing. !!!EXPERIMENTAL!!! • false disable typescript preprocessing. |
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.
!!! EXPERIMENTAL !!!
use this option if you want to use typescript inside svelte
This option requires you to set up a typescript preprocessor for svelte as the first preprocessor in svelte.config.js
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
preprocess: [
sveltePreprocess.typescript(), // must be the first one and must be only typescript, not sveltePreprocess()
//you can add additional preprocessors here if you need them
//if you need svelte-preprocess, disable its typescript preprocessor, you don't want two
sveltePreprocess({ typescript: false }),
],
};as barebones as it gets, just an essential App.svelte
postcss and tailwindcss
routify with support for mdsvex
svelte-preprocess in automatic mode. This is heavily based on the regular svelte-preprocess example
All of the above, but with typescript support
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