https://github.com/timobechtel/svelte-component-example

Example reusable ui components with svelte
https://github.com/timobechtel/svelte-component-example

components reusable svelte

Last synced: 29 days ago
JSON representation

Example reusable ui components with svelte

• Host: GitHub
• URL: https://github.com/timobechtel/svelte-component-example
• Owner: TimoBechtel
• Created: 2020-05-05T20:50:43.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-07-15T16:45:26.000Z (over 2 years ago)
• Last Synced: 2024-04-23T19:09:07.516Z (7 months ago)
• Topics: components, reusable, svelte
• Language: JavaScript
• Size: 181 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Svelte Component Example

This is a small example for creating reusable components with Svelte.

It's a pretty basic example, but it includes Storybook, Testing with Jest and Variable Colors.

In a real scenario, you probably have the components in separat repositories or in a component library. For this example, I've thrown everything in this repo.

## Contents

### button/

This is the main example component. It includes storybook stories and tests using jest.

For simplifying this example, I just exported the Svelte source files in the package.json, however when you want to use it in a project without svelte, you may want to add a bundler configuration (e.g. rollup).

- install with npm `cd example/ && npm i`

- run storybook `npm run storybook`

- run tests `npm run test`

**Note:**

The button component uses a slot. Because, as of right now (PR4296), we cannot render slots with the component constructor. So I added a `ButtonTestWrapper.svelte` component that is used to render the button's slot.

### example/

This is an example project that uses the button component and bundles it into a web page.

- install `cd button/ && npm i`

- serve website `npm run dev`