You can create your own component library to your applications with this template.
A base for building Svelte component library.
Original work is https://github.com/sveltejs/component-template
On GitHub:
Use this template button on top right.
Read more: Creating a repository from a template
CLI:
- Clone it with degit
npx degit patoi/svelte-component-library-template svelte-component-library-template
cd svelte-component-library-template
npm install # or yarn-
Add your component's code to src/ as directory, e.g.: src/HelloComponent/ (or add your component directly to src/).
-
Export the new component to apps in src/index.js
-
src/test.js and src/App.svelte are for testing purposes:
- add component to the src/App.svelte
- add component's properties to src/test.js
- Create your test cases to your component:
- add tests to test/ directory
-
npm install -
npm run dev:
- build components on change and
- serves from
public/directory athttp://localhost:5000 - and handling livereload
npm test: test runner
For changing the view of the test page use public/global.css and public/index.html
https://github.com/rollup/rollup-plugin-svelte#pkgsvelte
Tip: if you are a developer of the component library, then you can install it once as devDependencies to app with npm i -D <path-to-your-components> , all change will appear immediately if you use livereload in app.
Import component library into your app in App.svelte :
<script>
import { ByeBye, Hello } from 'svelte-component-library-template'
export let name
</script>
<Hello {name} />
<ByeBye {name} />More: https://github.com/sveltejs/sapper-template/blob/master/README.md#using-external-components
sveltehttps://svelte.devplaywrightfor testing: https://playwright.deveslintandprettierfor formatting and lintingrollupjsfor bundling: https://rollupjs.org
Supported Node.js v12 LTS and v14 LTS.