diff --git a/README.md b/README.md index 359880f8..e9d20bd2 100644 --- a/README.md +++ b/README.md @@ -21,13 +21,31 @@ npm install @socketsupply/tonic ```js import Tonic from '@socketsupply/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`

Hello, ${data}

` +} +``` + +Or you can use classes. Every class must have a render method. +``js class MyGreeting extends Tonic { - render () { - return this.html`
Hello, World.
` + async * render () { + yield this.html`
Loading...
` + + const data = await (await fetch('https://example.com/data')).text() + return this.html`
Hello, ${data}.
` } } +``` +```js Tonic.add(MyGreeting, 'my-greeting') ```