Svelte 3 Component Template

A highly-opinionated base for building shareable Svelte 3 components

Table of Contents

1. Features
2. Getting started
3. Developing
4. Preprocessors
5. Testing
6. Publishing to npm
7. Frequently Asked Questions

Features

• Preprocessing
• Formating
• Linting
• Storybook
• Testing

Getting Started

1. Clone the template:

Option #1: Clone it with Github's "Use this template" option:

Option #2: Clone this repository with degit:

npx degit YogliB/svelte-component-template `my-new-component`

2. Enter the folder:

cd my-new-component

2. Initiate Git:

git init

3. Install dependencies:

npm install

3. Configure package.json:

npm init

4. Start coding:

code .

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

Developing

1. Start SvelteKit:

npm run dev

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

3. Export your components in src/lib/index.js.

4. Import your components in src/routes/index.svelte from `$lib$, so you can preview and test it.

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

Preprocessors

All preprocessing is handled with svelte-preprocess. Configure it in svelte.config.js.

Testing

Interaction testing

This is a simple and intuitive method that can be done through Storybook, with the help of Cypress. And example and pre-made test scripts can be found in this repository, and more info can be found in Storybook's docs.

Snapshot testing

In this repo you'll find a basic workflow that uses Chromatic for snapshot testing.

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

1. Prepare the package for publishing:

npm run package

2. Publish the package:

cd package
npm run publish

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