Skip to content

azuwis/svite

 
 

Repository files navigation

svite-logo svite svite-logo

svelte + vite = sweet

features

  • reads svelte configruation with cosmiconfig
  • 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

Add as plugin to vite.config.js

const svite = require('svite');
module.exports = {
  plugins: [svite()],
};

run

just use regular vite or vite build commands

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

svite options

you can pass 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

boolean
object
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'
svelte
object
not set
• object rollup-plugin-svelte config object

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.

svelte

use this option if you don't want to use any of the ways you can provide a svelte config via cosmiconfig or need a quick override.

check out the examples

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

postcss and tailwindcss

routify with support for mdsvex

limitations

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

TODO

  • more features
    • vite options
  • release process
  • tests

Credits

About

svelte integration for vite

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages

  • JavaScript 100.0%