Home

Awesome

Svelte 3 Component Template

A highly-opinionated base for building shareable Svelte 3 components

Known Vulnerabilities Renovate enabled PRs Welcome

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:

image

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 .

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