Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beforesemicolon/cwco
Powerful and Fast Web Component Library with a Simple API
https://github.com/beforesemicolon/cwco
components components-framework components-library css custom-elements cwco html javascript typescript vanilla-js web-component web-components webapp webcomponents
Last synced: 2 months ago
JSON representation
Powerful and Fast Web Component Library with a Simple API
- Host: GitHub
- URL: https://github.com/beforesemicolon/cwco
- Owner: beforesemicolon
- License: mit
- Created: 2021-12-31T00:29:23.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-10-22T03:19:35.000Z (about 1 year ago)
- Last Synced: 2024-05-01T09:46:48.709Z (8 months ago)
- Topics: components, components-framework, components-library, css, custom-elements, cwco, html, javascript, typescript, vanilla-js, web-component, web-components, webapp, webcomponents
- Language: TypeScript
- Homepage: https://cwco.beforesemicolon.com/
- Size: 1.3 MB
- Stars: 57
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# CWCO
[](https://cwco.beforesemicolon.com/)
[](https://www.npmjs.com/package/cwco)
[](https://github.com/beforesemicolon/cwco/blob/master/LICENSE)
[](https://github.com/sponsors/beforesemicolon)
**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](https://cwco.beforesemicolon.com/))
- [Getting Started](https://cwco.beforesemicolon.com/documentation/getting-started)
- [WebComponent](https://cwco.beforesemicolon.com/documentation/web-component)
- [ContextProviderComponent](https://cwco.beforesemicolon.com/documentation/context-provider-component)
- [Configurations](https://cwco.beforesemicolon.com/documentation/configurations)
- [Template](https://cwco.beforesemicolon.com/documentation/template)
- [Styling](https://cwco.beforesemicolon.com/documentation/stylesheet)
- [Events](https://cwco.beforesemicolon.com/documentation/events)
- [Attributes](https://cwco.beforesemicolon.com/documentation/observed-attributes)
- [Properties](https://cwco.beforesemicolon.com/documentation/properties)
- [Context](https://cwco.beforesemicolon.com/documentation/context)
- [Directives](https://cwco.beforesemicolon.com/documentation/if-directive)
- [Custom Directives](https://cwco.beforesemicolon.com/documentation/custom-directive)
- [LiveCycles](https://cwco.beforesemicolon.com/documentation/on-mount)
- [Error Handling](https://cwco.beforesemicolon.com/documentation/on-error)
### 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
```html
```
#### NodeJs
```
npm install cwco
```
You can then import the constructors class according to what you are building.
```js
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](https://github.com/pushqrdx/vscode-inline-html)
or [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.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.
```js
import {html, css, WebComponent} from "./cwco";
class MyButton extends WebComponent {
get template() {
return html``
}
get stylesheet() {
return css`button {color: #222}`
// 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](https://github.com/beforesemicolon/cwco/blob/master/CONTRIBUTING.md)