Svelte Components template

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

Using

On GitHub:

Use this template button on top right.

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

Development

npm install
npm run dev :

build components on change and
serves from public/ directory at http://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

Using components in app

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} />

Technical background

More: https://github.com/sveltejs/sapper-template/blob/master/README.md#using-external-components

svelte https://svelte.dev
playwright for testing: https://playwright.dev
eslint and prettier for formatting and linting
rollupjs for bundling: https://rollupjs.org

Supported Node.js v12 LTS and v14 LTS.