A minimalist component class inspired by React and Web Components.
- Tonic is tiny. About 150 lines of code.
- React-like component composition.
- One-way binding; pipe data though connected components.
- Prefer event delegation over individual event listeners.
- Prefer Javascript Template Literals to weird Template Langauges.
- Unopinionated about Routers, Reducers, Validators, etc.
- When re-rendering performance is truly important, a virtual dom is not the right tool. In these cases you should either A. update some specific dom nodes directly or B. use a graphics/animation engine. The one-way-everywhere approach might make some code easy to reason about, but it ends up being a performance compromise with added complexity.
- "Isomorphic" components add a huge amount of complexity to a component library. I don't send html from a server very often. My html pages are pretty static and served by a cdn. Otherwise, I'm creating electron apps for the decentralized web. This may be a deal breaker for some people doing more traditional client-server development.
- JSX
- Magic
You can find an api doc here, a trouble shooting guide here, and a bunch of examples here.
npm install @conductorlab/tonic
class Greeting extends Tonic {
stylesheet () {
return `
greeting div {
display: inline-block;
border: 1px dotted #666;
height: 100px;
width: 100px;
line-height: 90px;
}
`
}
click (event) {
alert(this.innerHTML)
}
render () {
return this.html`
<h1 class="example">
${this.props.value}
</h1>
`
}
}
Tonic.add(Greeting)
<greeting value="Hello, World">
</greeting>