WebComponents CLI allow you to develop WebComponents from scratch with LitElement and Typescript.
npm install -g @grandemayta/webcomponents-cliwc-cli <name-of-your-project>Launch the following commands to start the application:
npm start| 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 |
Build tasks will create the following output:
├── dist/
├── vendor.min.js
├── bundle.min.js
├── 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
<!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>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
✅ Chrome
✅ Firefox
✅ Safari
✅ Edge
✅ IE11
Use the official guide to create WebComponents with LitElement
- Improve the documentation
- Setup Unit Testing
- Setup E2E Testing
Keep calm and code!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent