Awesome

parcel-plugin-svelte

A parcel plugin that enables svelte support

Getting Started

Install dependencies

yarn add svelte parcel-bundler parcel-plugin-svelte @babel/polyfill -D

Update the package.json

Update your package.json to contain these scripts (for more information on these commands, see: https://v1.parceljs.org/cli.html):

{
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  }
}

Create the files

Create an html file that will be used as the entrypoint, name it index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Parcel Plugin Svelte Example</title>
  </head>
  <body>
    <div id="demo"></div>

    <!-- This script tag points to the source of the JS file we want to load and bundle -->
    <script src="main.js"></script>
  </body>
</html>

Create a simple JavaScript file named main.js:

import '@babel/polyfill';
import App from './App.svelte';

new App({
  target: document.getElementById('demo'),
  props: {
    name: 'world'
  }
});

Create a Svelte file named App.svelte:

<p>
  Hello { name }, the time is <span class="the-time">{ hours }:{ minutes }:{ seconds }</span>
</p>

<style>
  .the-time {
    font-weight: bold;
  }
</style>

<script>
  import { onMount } from 'svelte';

  export let name = 'Anonymous';
  let time = new Date();

  onMount(() => {
    const timer = setInterval(() => {
      time = new Date();
    }, 1000)

    return () => {
      clearInterval(timer);
    }
  })

  let hours, minutes, seconds;

  $: {
    hours = time.getHours();
    minutes = time.getMinutes();
    seconds = time.getSeconds();
  }
</script>

Configuration

The default configuration should work for most people but for anyone who would like to change the way svelte compiles the files there is the possibility to configure it.

This can be done though a svelte.config.js file, .svelterc file or svelte field in package.json.

For documentation on which parameters you can set and use look at the official svelte docs.

// Used by svelte.compilerOptions
compilerOptions: {
  ...
},
// Used by svelte.preprocess
preprocess: {
  ...
}

Note: the use of compiler property will be deprecated on the next major version, you should use thecompilerOptions property instead.

CSS CompilerOptions

If you set compilerOptions.css to false, CSS will be bundled in a separate file. It also enables post-transformations provided by Parcel such as PostCSS and file resolution for url().

How does it work?

If you want to know how it works have a look at my article about this plugin, might help if you wanna fix a bug or write your own parcel-plugin.

Any more questions?

Any more questions about how the plugin works internally or how to use it? Feel free to open an issue in the repository.

License

This project is licensed under the MIT License