Web Components

:rocket: Reusable Web Components built with Svelte

Motivation

• Reuse components across different platform using web standards
• Isolate component development
• Code once, deploy anywhere.

:bulb: Structure

.
├── docs                                    # usage guides
├── packages                                # components
├── packages/{Component}/stories            # components stories
├──── shared                                # shared resource 
├────── utils                               # shared code utils 
├────── styles                              # shared component styles 
├────────── scss                            # shared scss variables and styles 
├──── storybook                             # storybook 
├── .generator                              # new component generator script folder
└── README.md

:wrench: Setup

Clone this repository, then install dependencies

$ yarn install

:art: Creating new component

$ yarn run new

Creating new component generates:

1. Component folder
2. Component Storybook
3. Component Git branch to avoid accidental commit to master branch. Pull request is encouraged.

:package: Building

Build all components

$ yarn run build

Build specific component

$  cd packages/your-component
$  yarn run build

or Build via workspace (root folder)

$ yarn workspace {workspace-name} run build 

{workspace-name} is the Component package name in package.json

:camera_flash: Storybook - Component Testing and Documentation

$ yarn run sb

:memo: Docs

• Prop types
• Styling
• Event handling
• Importing
• Commit conventions
• Known Issues

Svelte CustomElementsEverywhere 100% Test score

Svelte scored 100%

:nut_and_bolt: Dependencies

Name	License	Description
Svelte		Compiles code to tiny, framework-less vanilla JS — your app starts fast and stays fast
Vite		Blazing fast dev tooling & bundler
SASS		Stylesheet language that’s compiled to CSS. Use variables, nested rules, mixins, functions, and more