@grandemayta/webcomponents-cli

v0.0.9

Published

3 years ago

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

Downloads

0High
0Medium
0Low

grandemayta

webcomponents litelement lithtml customelements typescript

WebComponents CLI

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

Install

npm install -g @grandemayta/webcomponents-cli

Create a Project

wc-cli <name-of-your-project>

Getting Started

Launch the following commands to start the application:

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Components Example Integration</title>
</head>
<body>

    <app-greetings fullname="Charlotte"></app-greetings>

    <!-- If you want support legacy browser just remove this comment
    <script src="polyfills.min.js" nomodule></script>
    <script src="webcomponents-loader.js"></script>
    -->
    <script src="vendor.min.js"></script>
    <script src="bundle.min.js"></script>
</body>
</html>

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 to create WebComponents with LitElement

Todo

[ ] Improve the documentation
[ ] Setup Unit Testing
[ ] Setup E2E Testing

Keep calm and code!