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`
cd my-new-component
git init
npm install
package.json
:npm init
code .
src/lib/[MyComponent]/[MyComponent].svelte
.npm run dev
Edit a component file in src/lib
, save it and watch the magic happens.
Export your components in src/lib/index.js
.
Import your components in src/routes/index.svelte
from `$lib$, so you can preview and test it.
Navigate to localhost:3000 to see your components live.
All preprocessing is handled with svelte-preprocess.
Configure it in svelte.config.js
.
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.
In this repo you'll find a basic workflow that uses Chromatic for snapshot testing.
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';
There are a few options to do this:
@import url('https://unpkg.com/@scope/package/main.min.css');
npm run package
cd package
npm run publish