CWCO
Contextfull Web Component Library created to improve native Web Component APIs user experience with:
-
✅ No Build Required! -
✅ Works with other library and frameworks -
✅ 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 -
✅ Built-in Context -
✅ Simple API -
✅ Fast rendering -
✅ Lightweight package
Learn by Examples
Learn More From The Documentation or visit Examples Playground Page for an extensive list of examples of everything this library can do.
Get Started
Learn about how create a project or starting to explore CWCO as soon as possible.
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.
Documentation
- Getting Started
- WebComponent
- ContextProviderComponent
- Configurations
- Template
- Events
- Attributes
- Properties
- Context
- Directives
- Custom Directives
- LiveCycles
- Styling
- Error Handling
2 Dec 25, 2021
2 Jun 1, 2022
0 Jan 2, 2022
1 Jan 2, 2022
143 Jan 8, 2023
6 Jun 17, 2022
9 May 20, 2022
5 Jan 27, 2022
18 Oct 13, 2022
3 Nov 6, 2022
17 Nov 19, 2022
6 May 10, 2023
2 Feb 17, 2022
7 Aug 26, 2022
24 Dec 3, 2022
2 Mar 31, 2022
6 Jul 19, 2022
13 Oct 23, 2022
12 Mar 10, 2022