beforesemicolon / cwco

Powerful and Fast Web Component Library with a Simple API

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/[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, 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

cwco's Issues

Support for template literal for CSS and Template

Current

template = `<button type=“{type}”></button>`

New

template = html`<button type=“${type}”></button>`

Benefits:

• syntax highlighting
• no eval is needed

Is there an vscode extension we can use for syntax highlighing in html templates?

Right now it looks like a simple string. it'll be much better if we could get some syntax highlighting and ability to check/format the html and css in template string. Something like what the lit-html vscode extension does

Add Deno support

Introduce a file similar to this one https://github.com/beforesemicolon/cwco/blob/master/src/node-window.ts for Deno DOM

Refer to Node setup guide to understand how it is supposed to work

a readme typo

Describe the bug
the line https://github.com/beforesemicolon/cwco/blob/master/README.md?plain=1#L45
is missing =

Additional context
fixed in #6

handle function calls in directives

The following can be too much for template:

<li repeat="app.todos.filter(todo => app.searchTerm.length >= 3 ? todo.title.toLowerCase().search(app.searchTerm) >= 0 : true)"
></li>

This should be able to be formatted to

<li repeat="getSearchMatchedList(app.todos)"></li>

Right now the directive don't handle function calls as value, like the on* attributes do

The pattern attribute may contain syntax that does not work with data binding syntax

The following will break the component

<input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Must contain at least one  number and one uppercase and lowercase letter, and at least 8 or more characters">

This is because it tries to resolve {8,} thinking its a data binding.

We need a way to handle such cases when we have regex or something similar.

wrongly calculated `current-tab-indicator` offset in firefox

Describe the bug
most likely, offset of current-tab-indicator is calculated from absolute position of current-tab,
which means it's parent (or parent's parent) element needs position:relative

To Reproduce
Steps to reproduce the behavior:

1. Open https://beforesemicolon.github.io/cwco/?example=create-component.html&theme=neo&file=app.js in Firefox
2. See the problem:
   

Expected behavior
offset should be calculated from relative position of current-tab element, like this:

Desktop (please complete the following information):

• OS: any
• Browser: Firefox
• Version: latest

Additional context
fixed in #7

Properly handle Link tags in stylesheet mixed with style tag

This will throw an error:

class ExampleComponent extends WebComponent {
  stylesheet = `
        <link rel="stylesheet" href="./example.css">
        <style>:host {display: block;}</style>`;
}

It should allow stylesheet links to be mixed with style tags

Add support for form association

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals

Good article breaking it down

https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386

Create a VSCode plugin for HTML and CSS highlight for CWCO

The plugin does not need to exist inside this repo but anything to make it compatible can be done here.

Submission of a plugin will make the contributor part of the core development of CWCO.

Plugin name: cwco
Features:

• support syntax highlight;
• support the data binding syntax and mapping to the data in the class
• auto detection of CWCO syntax in .html, .css, .ts, .js, .cjs and .mjs files

initial request: #15

Syntax highlighting support for css

Syntax highlighting for html works, when using it with css the component doesn't work