CWCO
Contextfull Web Component Library created to improve native Web Component APIs user experience with:
✅ No Build Required (Plug and Play)!✅ Works with other library and frameworks like React, Angular, Vue, Svelte, etc;✅ Truly Reactive Template✅ Powerful built-in Directives(including ability to create your own)✅ Built-in Context Data Handling✅ Event and Data Binding in HTML and CSS✅ Build view directly in HTML file✅ Simple API✅ Fast rendering✅ Lightweight package
Documentation (cwco.io)
- Getting Started
- WebComponent
- ContextProviderComponent
- Configurations
- Template
- Styling
- Events
- Attributes
- Properties
- Context
- Directives
- Custom Directives
- LiveCycles
- Error Handling
Install
This module can be used directly in the browser as well in Node environment. You can even use it along with other
web libraries and frameworks like React and Angular.
Browser
<!-- use the latest version -->
<script src="https://unpkg.com/cwco/dist/cwco.min.js"></script>
<!-- use a specific version -->
<script src="https://unpkg.com/[email protected]/dist/cwco.min.js"></script>
<!-- link your app script after -->
<script src="app.js"></script>NodeJs
npm install cwco
You can then import the constructors class according to what you are building.
const { WebComponent, ContextProviderComponent, Directive } = require('cwco');Code Editors & IDEs
CWCO is just HTML and if you want syntax highlighting for VSCode you can use the inline-html
VSCode
For syntax highlighting of HTML and CSS in javascript use inline-html or lit-html plugins.
You can import html from cwco which is just a help for VSCode which does nothing special
to the HTML string you use it with.
import {html, WebComponent} from "./cwco";
class MyButton extends WebComponent {
get template() {
return html`<button><slot></slot></button>`
}
get stylesheet() {
return html`<style>button {color: #222}</style>`
}
}Jet Brain IDEs
These IDEs have built-in HTML-in-Javascript syntax highlighting which can be useful when developing CWCO web components.