SvelteKit Component Library Template

Get Started

You can create a new github repo from this template.

Or use hygen.

npx hygen init repo forksofpower/sveltekit-component-library-template --to my-ui-lib

Below is a list of commands you will probably find useful:

# start storybook server
yarn storybook

# build storybook static website
yarn build-storybook

# run tests
yarn test

# eslint and prettier format
yarn lint
yarn format

# build
yarn build

# generate new react component
yarn new:component <name>

Generators

Create a new react component named NavBar from the built-in Component template.

$ yarn new:component NavBar
? What type of component is this? …
▸ atom
  molecule
  organism
  template
  recipe

Loaded templates: _templates
       added: src/lib/components/NavBar/NavBar.svelte
       added: src/lib/components/NavBar/index.ts
       added: src/lib/components/NavBar/NavBar.stories.ts
       added: src/lib/components/NavBar/NavBar.test.ts
      inject: src/lib/components/index.ts

Optimizations

Sveltekit uses Vite for bundling/building. Babel optimizations to come later.

Customization

Remove hygen generators

rm -r _templates/*

Publish and Deploy

NPM

Warning This project uses svelte-package to handle the build step and is fairly limited in terms of direct control over the build output. There are workaround implemented in this template to reduce the amount of bloat in the final deployed output. It is highly suggested that you run yarn pack inside the package/ directory and inspect the built tar archive for the correct files.

Build and publish the package to npm.

yarn build
cd package
npm publish

Running yarn build-storybook will generate a static build of your storybook. This can be deployed anywhere where static sites are hosted. Here are a few examples:

Chromatic

First, create a new project on Chromatic and copy the project token.

Install Chromatic

yarn add -D chromatic

Publish to Chromatic

npx chromatic --project-token <token>

Why?

Why can't I just use svelte-cli and add storybook?

You are more than welcome to generate a new project from scratch and tune it to work with storybook. I've simply done all of that for you and added a few optimizations to make starting from scratch less of a pain.

TODO

• npm deployment
• storybook site deployment
• postcss
• customization docs
  • tailwind
  • emotion
• DX
  • hygen + component template
  • dependabot
  • husky
  • lint-staged
  • size-limit can't be installed without a completely seperate webpack config and support for svelte files