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

Clone the repository:

git clone [email protected]:metonym/template-svelte.git
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 prepublishOnly command to package.json to automatically run the build script before publishing the package.

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

Recommended Set-up

VSCode

1) Install Extensions

Install the following extensions for Svelte syntax highlighting, intellisense and auto-formatting.

• Svelte: (jamesbirtles.svelte-vscode) github
• Prettier - Code formatter: (esbenp.prettier-vscode) github

2) Configure Settings

Open your VSCode settings.json.

You must explicitly specify the editor.defaultFormatter for .svelte files. Otherwise, VSCode will attempt to use the Prettier default formatter, which may not be able to parse .svelte files.

// settings.json
{
  // ...other VSCode settings
  "editor.formatOnSave": true, // auto-formats files using the Prettier extension
  "files.associations": {
    "*.html": "html",
    "*.svelte": "svelte" // enable syntax highlighting using the Svelte extension
  },
  "[svelte]": {
    "editor.defaultFormatter": "JamesBirtles.svelte-vscode"
  }
}

License

MIT