@ruzafa8/jiafeijs
v1.1.0
Published
Vanilla JS library for WebComponents
Downloads
3
Readme
🥑 Welcome to Jiafei JS 🥑
Jiafei JS is a lightweight WebComponent based library which provides a set of functionalities to build a webpage using JS Vanilla
Main features
- Virtual DOM with diff algorithm to render only changes
- Reactive Components with state.
- Router class to handle urls in a SPA.
- Simple subscription system to events (bind, unbind, subscribe...)
- Attribute bindings.
Including CSS
We have different strategies to load CSS, you can check them here
Examples
Component({
tagName: "my-button",
stylesURL: "my-button.css"
},
class Button extends WebComponent {
render() {
return `
<button>This is a button :D</button>
`
}
})
Component({
tagName: "my-button",
stylesURL: "my-button.css"
},
class Button extends WebComponent {
init() {
this.state = {
count: 0,
}
}
bind() {
this.subscribe("button", "click", () => this.setState({ count: this.state.count + 1 }))
}
render() {
return `
<button>Total: ${this.state.count}</button>
`
}
})