Psst โ looking for an app template? Go here --> sveltejs/template
A base for building shareable Svelte component library. Clone it with degit:
npx degit nirmaoz/svelte-component-library-template my-new-component
cd my-new-component
npm install # or yarn
Your component's source code lives in src/Component.svelte
.
You can create a package that exports multiple components by adding them to the src
directory and editing src/index.js
to reexport them as named exports.
- Svelte Component
- Testing using svelte-testing-library + Jest
- Storybook
- Rollup, configured to build .js (umd), .min.js (iife), .mjs (es)
- Run
npm init
(oryarn init
) - Replace this README with your own
Your package.json has a "svelte"
field pointing to src/index.js
, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like rollup-plugin-svelte or svelte-loader (where resolve.mainFields
in your webpack config includes "svelte"
). This is recommended.
For everyone else, npm run build
will bundle your component's source code into a plain JavaScript module (dist/index.mjs
) and a UMD script (dist/index.js
). This will happen automatically when you publish your component to npm, courtesy of the prepublishOnly
hook in package.json.
I couldn't find an opinionated components library template to my liking, so I used sveltejs/component-template as base. And then I added minified build configuration using terser plugin + tests + storybook.
Comes with tests out of the box using svelte-testing-library + Jest.
To Run tests:
npm test # or yarn
To serve development build:
npm run storybook
To build static storybook site (default output folder is /docs for easly sharing on github pages):
npm run build-storybook