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.beforesemicolon.com)

• 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/cwco@1.0.0/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, css, WebComponent} from "./cwco";

class MyButton extends WebComponent {
  get template() {
    return html`<button><slot></slot></button>`
  }
  
  get stylesheet() {
    return css`<style>button {color: #222}</style>`
    // or 
    // return css`button {color: #222}`
  }
}

Jet Brain IDEs

These IDEs have built-in HTML-in-Javascript syntax highlighting which can be useful when developing CWCO web components.

Want to Help?

Learn How