Skip to content
This repository has been archived by the owner on Jun 29, 2022. It is now read-only.

Latest commit

 

History

History
83 lines (55 loc) · 3.45 KB

README.md

File metadata and controls

83 lines (55 loc) · 3.45 KB

Svelte 3 Web Component Button with WindiCSS & Storybook

GitHub CI Commitizen friendly code style: prettier Conventional Commits GitHub issues GitHub pull requests GitHub stars GitHub forks GitHub contributors GitHub license GitHub code size in bytes GitHub repo size

This repository shows you how to create a reusable web component using Svelte. Exposed with documentation using Storybook.


Table of Contents


Prerequisites

  • Node.JS version ^14.17.0 || >=16.0.0

Installation

  1. Clone the git repository

    git clone https://github.com/smarlhens/svelte3-web-component-button.git
  2. Go into the project directory

    cd svelte3-web-component-button/
  3. Install NPM dependencies

    npm i

Folder organization


Usage

CustomButton.svelte:

<custom-button label="Button" disabled="false"></custom-button>

Example of usage in public/index.html.
Use npm run dev or npm run build & npm run start to test the rendering of the web component in your application.


Known issues

ESLint warning: it is expecting svelte.config.js to contain customElement: true. As we are using rollup.config.js, we do not need svelte.config.js. customElement: true is already used.

The 'tag' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?