template-lib-svelte

Template for building Svelte component libraries.

Workflow

  • Development: develop the library using a webpack set-up (app/)
  • Testing: unit test the library using Jest and @testing-library/svelte
  • Building: build the library using Rollup to support ES/UMD formats
  • Publishing: publish the library to NPM
  • Documentation: deploy the compiled webpack set-up to GitHub Pages

Getting Started

Clone the repository:

git clone git@github.com:metonym/template-lib-svelte.git
cd template-lib-svelte

Install its dependencies:

yarn install

Development

When developing, use the webpack app set-up in the app/ folder to reload any changes to the library.

cd app
yarn install
yarn start

Available Scripts

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 test

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

yarn test:tdd

Runs tests in watch mode.

Publishing to npm

1) Update the Library Name

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

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

License

MIT

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes