Skip to content

patoi/svelte-component-library-template

Repository files navigation

Build Status Dependabot

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.

Read more: Creating a repository from a template

CLI:

  1. Clone it with degit
npx degit patoi/svelte-component-library-template svelte-component-library-template
cd svelte-component-library-template
npm install # or yarn
  1. Add your component's code to src/ as directory, e.g.: src/HelloComponent/ (or add your component directly to src/).

  2. Export the new component to apps in src/index.js

  3. src/test.js and src/App.svelte are for testing purposes:

  1. Create your test cases to your component:
  • add tests to test/ directory

Development

  1. npm install

  2. npm run dev :

  • build components on change and
  • serves from public/ directory at http://localhost:5000
  • and handling livereload
  1. 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

Supported Node.js v12 LTS and v14 LTS.