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

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`
  1. Enter the folder:
cd my-new-component
  1. Initiate Git:
git init
  1. Install dependencies:
npm install
  1. Configure package.json:
npm init
  1. Start coding:
code .
  • Your component's source code lives in src/lib/[MyComponent]/[MyComponent].svelte.

Developing

  1. Start SvelteKit:
npm run dev
  1. Edit a component file in src/lib, save it and watch the magic happens.

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

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

  4. 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
  1. Publish the package:
cd package
npm run publish

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes