@reboost/plugin-svelte

Svelte Plugin

Adds support for .svelte files. Enables Hot Reloading in Svelte components.

Usage

Setup

Install it using npm

npm i -D @reboost/plugin-svelte

Install svelte package, if not already installed

npm i svelte

Import it from the package

const { start } = require('reboost');
const SveltePlugin = require('@reboost/plugin-svelte');

Add it to the plugins array

const { start } = require('reboost');
const SveltePlugin = require('@reboost/plugin-svelte');

start({
  plugins: [
    SveltePlugin({
      // Options
    })
  ]
})

Require file in your code

import Component from './file.svelte';

Options

configFile

Type: string
Default: ./svelte.config.js

Path to Svelte config file.

hotOptions

Type: object

Options for svelte-hmr. Controls Svelte's hot reloading behavior.

preprocess

Type: object | array

Preprocessor plugin(s) to use with Svelte. You can grab some plugins from Svelte's community-maintained preprocessing plugins.

Example

Using preprocessors

svelte-preprocess is an official preprocessor plugin which can transform PostCSS, SCSS, Pug, and more. Let's see how we can use it with Svelte.

const { start, DefaultConfig } = require('reboost');
const SveltePlugin = require('@reboost/plugin-svelte');
const sveltePreprocess = require('svelte-preprocess');
const { pug, scss } = require('svelte-preprocess');

start({
  // ...
  plugins: [
    SveltePlugin({
      // Auto detect compatible languages
      // and transform them
      preprocess: sveltePreprocess({ /* Options */ }),

      // You can also use stand-alone preprocessors
      preprocess: [
        pug({ /* Options */ }),
        scss({ /* Options */ })
      ]
    })
  ]
})

If you've enabled SCSS preprocessor, you can now use SCSS syntax in your Svelte files, like so

<style lang="scss">
.card {
  padding: 10px;
  background-color: dodgerblue;

  h1 {
    font-weight: normal;
  }

  p {
    text-align: justify;
  }
}
</style>

<div class="card">
  <h1>Svelte</h1>
  <p>A cool tagline</p>
</div>

Automatic file resolving

You have to always type .svelte extension to import Svelte files. You can set up automatic import using resolve.extensions option

const { start, DefaultConfig } = require('reboost');
const SveltePlugin = require('@reboost/plugin-svelte');

start({
  resolve: {
    extensions: ['.svelte', ...DefaultConfig.resolve.extensions]
  },
  plugins: [
    SveltePlugin()
  ]
})

Now you can write

import App from './file';

instead of

import App from './file.svelte';

License

Licensed under the MIT License.