https://github.com/grandemayta/webcomponents-cli

WebComponents CLI allow you to develop WebComponents from scratch with LitElement and Typescript.
https://github.com/grandemayta/webcomponents-cli

customelements litelement typescript webcomponents

Last synced: about 2 months ago
JSON representation

WebComponents CLI allow you to develop WebComponents from scratch with LitElement and Typescript.

• Host: GitHub
• URL: https://github.com/grandemayta/webcomponents-cli
• Owner: grandemayta
• Created: 2019-05-23T20:51:45.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T03:43:31.000Z (about 2 years ago)
• Last Synced: 2024-10-10T20:47:00.907Z (2 months ago)
• Topics: customelements, litelement, typescript, webcomponents
• Language: JavaScript
• Homepage:
• Size: 1.21 MB
• Stars: 4
• Watchers: 2
• Forks: 2
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# WebComponents CLI

[![NPM version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=gh&type=6&v=0.0.9)](http://badge.fury.io/js/badge-list)

[![Open Source Love](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)

[![made-with-javascript-doc](https://img.shields.io/badge/Made%20with-Javascript-1f425f.svg)](https://www.sphinx-doc.org/)

WebComponents CLI allow you to develop WebComponents from scratch with LitElement and Typescript.

## Install

```sh

npm install -g @grandemayta/webcomponents-cli

```

## Create a Project

```sh

wc-cli 

```

## Getting Started

Launch the following commands to start the application:

```sh

npm start

```

## Scripts:

| Command | Description |

| ------ | ------ |

| npm start | Lift the application in local mode |

| npm run dev | Generate a build in dev mode |

| npm run prod | Generate a build in prod mode |

| npm run dev:legacy | Generate a build in dev mode to support legacy browsers |

| npm run prod:legacy | Generate a build in prod mode to support legacy browsers |

## Integration

Build tasks will create the following output:

#### Build for modern browsers:

    ├── dist/

        ├── vendor.min.js

        ├── bundle.min.js

#### Build with support for legacy browsers:

    ├── dist/

        ├── polyfills.min.js

        ├── webcomponents-loader.js

        ├── vendor.min.js

        ├── bundle.min.js

        ├── bundles/                               # These scripts will load at runtime

            ├── webcomponents-ce.js

            ├── webcomponents-sd-ce-pf.js

            ├── webcomponents-sd-ce.js

            ├── webcomponents-sd.js

#### Html example:

```html

    

    

    Web Components Example Integration

    

    

    

    

```

## Polyfills

We support the following features:

- Generics

    - Symbol

    - fetch

    - Promise

    - Async / Await

- Arrays

    - entries

    - from

    - find

    - findIndex

    - includes

    - keys

    - values

- Objects

    - assign

    - entries

    - values

- Strings

    - endsWith

    - includes

    - startsWith

## Browsers support

:white_check_mark: Chrome




:white_check_mark: Firefox




:white_check_mark: Safari




:white_check_mark: Edge




:white_check_mark: IE11

## Documentation

Use the [official guide](https://lit-element.polymer-project.org/guide) to create WebComponents with LitElement

## Todo

- [ ] Improve the documentation

- [ ] Setup Unit Testing

- [ ] Setup E2E Testing

Keep calm and code!




[![Open Source Love](https://badges.frapsoft.com/os/v3/open-source.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)