template-svelte

Template for building Svelte libraries with Storybook and Rollup.

Workflow

• Development & Documentation: Storybook (config)
• Unit Testing: Jest + @testing-library/svelte
• Code Formatting: Prettier + prettier-plugin-svelte
• Linting: ESLint + eslint-plugin-svelte3
• Continuous Integration: Travis CI (config)
• Building: Rollup (config)

Getting Started

Scaffold a new project using degit:

npx degit metonym/template-svelte template-svelte
cd template-svelte

Install its dependencies:

yarn install

Available Scripts

yarn start

Runs the storybook locally in development mode. Visit http://localhost:9000.

yarn build

Builds the library for production using Rollup and outputs artifacts to the lib folder.

Build Formats

// package.json
{
  "svelte": "src/index.js", // preferred Svelte entry
  "main": "lib/index.js", // UMD build
  "module": "lib/index.mjs" // ES Module build
}

yarn build:docs

Builds the Storybook for production and outputs files to the docs folder. This template uses GitHub pages for hosting the Storybook.

yarn test

Runs tests using Jest with @testing-library/svelte and generates a coverage report.

Publishing to npm

1) Update the Library Name

Update the library name in package.json and rollup.config.js.

{
- "name": "template-svelte",
+ "name": "<YOUR_LIBRARY_NAME>"
}

// rollup.config.js
if (UMD) {
- output.name = 'template-svelte';
+ output.name = '<YOUR_LIBRARY_NAME>';
}

2) Add Publishing Metadata

// package.json
{
  "files": ["lib", "src"], // `src` must be included for the `svelte` entry
  "repository": {
    "type": "git",
    "url": "https://github.com/<USER_NAME>/<REPO_NAME>.git"
  },
  "homepage": "https://github.com/<USER_NAME>/<REPO_NAME>"
}

3) Publishing

Important: Build the library in the UMD, ES formats before publishing:

yarn build

Publish the package to npm.

yarn publish

Recommendation: Add the prepackOnly command to package.json to automatically run the build script before publishing the package to NPM.

// package.json
{
  "scripts": {
    "start": "start-storybook -p 9000",
    "build": "rollup -c",
    "build:docs": "build-storybook -o docs",
    "test": "jest --coverage",
+   "prepackOnly": "yarn build"
  }
}

License

MIT