Tonic is a low profile component framework for the web. It's one file, less than 3kb gzipped and has no dependencies. It's designed to be used with modern Javascript and is compatible with all modern browsers and built on top of Web Components.
npm install @bicycle-codes/tonicimport Tonic from '@bicycle-codes/tonic'
You can use functions as components. They can be async or even an async generator function.
```js
async function MyGreeting () {
const data = await (await fetch('https://example.com/data')).text()
return this.html`<h1>Hello, ${data}</h1>`
}Or you can use classes. Every class must have a render method.
class MyGreeting extends Tonic {
async * render () {
yield this.html`<div>Loading...</div>`
const data = await (await fetch('https://example.com/data')).text()
return this.html`<div>Hello, ${data}.</div>`
}
}Tonic.add(MyGreeting, 'my-greeting')After adding your Javascript to your HTML, you can use your component anywhere.
<html>
<head>
<script src="my-greeting.js"></script>
</head>
<body>
<my-greeting></my-greeting>
</body>
</html>This is a fork of @socketsupply/tonic
See API docs
Things added to the forked version:
See src/index.d.ts.
Get the HTML tag name given a Tonic class.
static get tag():string;class ExampleTwo extends Tonic {
render () {
return this.html`<div>example two</div>`
}
}
ExampleTwo.tag
// => 'example-two'MIT License
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent