Svelte 3 Component Template

Table of Contents

1. Features
2. Getting started
3. Developing
4. Consuming components
5. Backward Compatibility
6. Preprocessors
7. Testing
8. Publishing to npm
9. Frequently Asked Questions
10. Credits & Inspiration

Features

• Autoprefixing CSS
• Preprocessing
• Formating
• Linting
• Testing
• Storybook

Getting Started

1. Choose your template (regular/monorepo)

2. Clone it with degit:

npx degit YogliB/svelte-component-template my-new-component
or
npx degit "YogliB/svelte-component-template#monorepo" my-new-component

3. cd into the folder and install the node_modules:

cd my-new-component
git init

npm install

or:

yarn

• For monorepo run:

  npm run bootstrap
  

or:

yarn bootstrap

4. Run npm init, to configure the project.

Your component's source code lives in src/components/[MyComponent].svelte.

Developing

1. Start Rollup:

npm run dev

2. Edit a component file in src/components, save it and watch the magic happens.

3. Make sure your component is exported in src/components/index.js.

4. Make sure your component is imported and nested in src/App.svelte, so you can preview and test it.

5. Navigate to localhost:5000 to see your components live.

Consuming Components

Your package.json has a "svelte" field pointing to src/components/index.js, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like rollup-plugin-svelte or svelte-loader (where resolve.mainFields in your webpack config includes "svelte").

Backward Compatibility

This template uses svelte-preprocess in order to integrate PostCSS auto-prefixing capabilities & Babel's transpiling capabilities into the build process.

Browserlist

PostCSS uses browserlist under the hood, in order to "know" what css to prefix.

The browserlist configuration is located inside the package.json.

Preprocessors

This template comes with the svelte-preprocess by default, which simplifies the use of preprocessors in components.

Usage

Getting Started with svelte-preprocess.

• To configure svelte-preprocess use the sveltePreprocessConfig variable in ./preprocess.js

Testing

This template uses Cypress & testing-library for testing.

It is highly recommended going through their docs if you intend on testing your components.

You can witness a simple example by running npm run cy:open.

Frequently Asked Questions

What's the index.js file for?

It's for Svelte to be able to import multiple components from a single source.

For instance, it lets the user do:

import { MyComponent, MyOtherComponent } from 'my-component-library';

Instead of:

import MyComponent from 'my-component-library/components/MyComponent.svelte';
import MyOtherComponent from 'my-component-library/components/MyOtherComponent';

How do I include 3'rd party css in my components?

There are a few options to do this:

1. Don't include 3'rd party css and just tell your users to do that (Probably using PostCSS).
2. Include it via a cdn, like so:

@import url('https://unpkg.com/@scope/package/main.min.css');

Publishing to npm

• Creating and publishing scoped public packages
• Creating and publishing unscoped public packages

Credits & Inspiration

• Official component-template by @Rich-Harris
• Official app-template by @Rich-Harris
• This PR by @sisou
• This PR by @BlackFenix2