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 as a dev dependency
npm install -D sviteVite requires an index.html file at project root that serves as entry point. In that index.html you need to reference the script that creates your svelte application.
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 enable typescript support for svelte !!!EXPERIMENTAL!!! (default: false)
-pm, --packageManager <string> which package manager to use. ["npm","pnpm","yarn","yarn2"] (default: "npm")
-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 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)
-r, --root <string> use specified directory as root
-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 eg. ["development","test","staging","production"] (default: "development")
-p, --port <port> port to use for serve (default: 3000)
-o, --open open browser on start
--useTransformCache [boolean] use transform cache for faster hmr (default: true)
--hot [boolean] enable/disable hmr for svelte (default: true)
--resolveSvelteField [boolean] resolve via svelte field in package.json (default: true)
--resolveSvelteExtensions [boolean] resolve svelte extensions in modules !!!EXPERIMENTAL!!! (default: false)
--resolveAbsoluteImportsInsideRoot [boolean] resolve absolute imports if they end up being inside rootDir (mostly used in generated code) (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)
-r, --root <string> use specified directory as root
-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 eg. ["development","test","staging","production"] (default: "production")
--entry <string> entry point for the application (default: "index.html")
--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: false, // boolean
};
module.exports = {
// if you provide a svite plugin here, svite cli will use it instead of initializing one for you
plugins: [svite(sviteConfig)],
// if you don't use svite cli, you should provide rollupDedupe option, otherwise you risk duplicate svelte instances and errors
rollupDedupe: ['svelte/animate', 'svelte/easing', 'svelte/internal', 'svelte/motion', 'svelte/store', 'svelte/transition', 'svelte'],
};| 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' |
| typescript | boolean |
false |
• true enable typescript preprocessing. !!!EXPERIMENTAL!!! • false disable typescript preprocessing. |
| resolveSvelteField | boolean |
true |
• true resolve via svelte field in package.json • false don't resolve via svelte field in package.json. |
| resolveSvelteExtensions | boolean |
false |
• true resolve svelte extensions. !!!EXPERIMENTAL!!! • false don't resolve svelte extensions. |
| resolveAbsoluteImportsInsideRoot | boolean |
true |
• true resolve absolute imports in root dir • false don't resolve absolute imports |
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 tsconfig.json like this
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*"],
"exclude": ["node_modules/*", "public/*"],
"compilerOptions": {
"module": "esnext",
"types": ["svelte", "vite/dist/importMeta"]
}
}And typescript preprocessor in svelte.config.js
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
preprocess: sveltePreprocess({
typescript: true,
// disable preprocessors not in use
babel: false,
coffeescript: false,
globalStyle: false,
less: false,
postcss: false,
pug: false,
replace: false,
sass: false,
scss: false,
stylus: false,
}),
};To use typescript in svelte files, add lang="ts" attribute to script tags
<script lang="ts">
export let foo: string;
</script>
Svelte libraries use the svelte field as a way to allow import Component from "library" style imports. This option enables resolving these kinds of imports in vite.
If a library has different exports in svelte and main field of package.json, this option will break importing via main field as svelte field takes precedence.
!!! EXPERIMENTAL !!!
Some extensions like .js, .ts can be omitted by default on imports. With this option enabled, all extensions of your svelte config can be omitted too.
So for src/components/Button.svelte you can use import Button from "/src/components/Button"
This option breaks if a dependency uses a .svelte file in package.json svelte field. e.g. svelte-spa-router.
With this option enabled, absolute imports into root directory are resolved correctly.
This is mainly useful for generated code that creates absolute paths like this
import Foo from "/home/user/dev/project/src/Foo.svelte"
One example are mdsvex layout imports.
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.
Support for commonjs modules in vite is limited. If you run into problems, try to add the dependency to vite optimizeDeps via vite.config.js
modules.exports = {
optimizeDeps: {
include: ['my-commonjs-dep'],
},
};and always use deep imports import {something} from 'my-commonjs-dep/deep/import/path'
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