cwco
    TypeScript icon, indicating that this package has built-in type declarations

    1.7.5 • Public • Published

    CWCO

    CWCO Banner

    npm license node version Build Build

    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)

    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

    Install

    npm i cwco

    DownloadsWeekly Downloads

    238

    Version

    1.7.5

    License

    MIT

    Unpacked Size

    118 kB

    Total Files

    100

    Last publish

    Collaborators

    • ecorreia