Recipes

Svelte

Basic

First, we need to install the dependencies for Svelte.

npm install -D parcel-plugin-svelte svelte

Make a new directory for Svelte components at /src/components/. Add a target element to render to in index.html, e.g. <div id="svelte-root"></div>. Finally, render the root component:

import App from './components/App.svelte';

const app = new App({
  target: document.getElementById('svelte-root'),
});

SCSS

To get SCSS working, we need to configure Svelte's preprocessing with svelte-preprocess-sass. First, install the necessary dependencies:

npm install -D svelte-preprocess-sass node-sass

Next, write a svelte.config.js file with the following contents:

const { sass } = require('svelte-preprocess-sass');

module.exports = {
  preprocess: {
    style: sass({}, { name: 'scss' }),
  },
};

Now all <style> elements in your components that have a type="text/sass" or lang="sass" attribute will be preprocessed by sass.

ESLint: https://github.com/sveltejs/eslint-plugin-svelte3

Troubleshooting: See https://github.com/DeMoorJasper/parcel-plugin-svelte/issues/152

Snowpack

Install the necessary dependencies.

npm i -D snowpack @jsonkao/snowpack-plugin-posthtml @snowpack/plugin-sass

If you want unmerged features from other branches:

$ [clone snowpack]
$ [checkout desired branch]
$ npm i -D path/to/snowpack/snowpack

Use this configuration file:

module.exports = {
  mount: { src: '/', data: '/', '.' : '/' },
  plugins: ['@snowpack/plugin-sass',[
    '@jsonkao/snowpack-plugin-posthtml',
    {
      root: './src'
    },
  ],],
  exclude: [
    '/Users/jasonkao/Development/redlining-heat/data/**/*.{tif,topojson,osm,json,geojson}*',
    '/Users/jasonkao/Development/redlining-heat/.git/**/*',
    '/Users/jasonkao/Development/redlining-heat/data/scripts/*',
    '/Users/jasonkao/Development/redlining-heat/data/holc-shapefile/*',
    '/Users/jasonkao/Development/redlining-heat/data/Makefile',
    '/Users/jasonkao/Development/redlining-heat/src/partials/*.html',
  ],
  buildOptions: {
    metaUrlPath: 'underscore_snowpack'
  },
};

Use your own excludes. The buildOptions.metaUrlPath just needs to not start with an underscore.

Partials must be ignored so that snowpack build doesn't try to read them independently (i.e. when they're not being <include>'d).

The styles.scss link in index.html needs to be changed to styles.css because snowpack transforms it.