@grandemayta/webcomponents-cli NPM

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>