You can create your own component library with this boilerplate.
A base for building Svelte components library using tailwindcss and pug.
On GitHub:
Use this template
button on top right.
CLI:
- Clone it with degit
npx degit fredpies/ui-library-boilerplate your-directory
cd ui-library-boilerplate
npm install # or yarn
-
Add your component's code to src/ as directory, e.g.: src/TestComponent/ (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 tailwind-entry.css and public/index.html
https://github.com/rollup/rollup-plugin-svelte#pkgsvelte
Tip: You can use component library, and install it once as devDependencies to app with npm i -D <path-to-your-components>
.
Import component library into your app in App.svelte
:
<script>
import { Test } from 'ui-library-boilerplate'
</script>
<Test />
svelte
https://svelte.devnightwatch
for testing: https://nightwatchjs.orgeslint
andprettier
for formatting and lintingrollupjs
for bundling: https://rollupjs.org