https://github.com/socketsupply/tonic

A Low Profile Component Framework – Stable, minimal, easy to audit, zero-dependencies and build-tool-free.
https://github.com/socketsupply/tonic

cba components framework jam jamstack local-first minimalist offline-first react tonic ui-components user-interface zero-dependencies zero-dependency

Last synced: 29 days ago
JSON representation

A Low Profile Component Framework – Stable, minimal, easy to audit, zero-dependencies and build-tool-free.

• Host: GitHub
• URL: https://github.com/socketsupply/tonic
• Owner: socketsupply
• License: mit
• Created: 2018-07-16T16:45:22.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-05-26T13:39:52.000Z (6 months ago)
• Last Synced: 2024-05-30T02:18:47.001Z (5 months ago)
• Topics: cba, components, framework, jam, jamstack, local-first, minimalist, offline-first, react, tonic, ui-components, user-interface, zero-dependencies, zero-dependency
• Language: JavaScript
• Homepage: http://tonicframework.dev
• Size: 655 KB
• Stars: 850
• Watchers: 19
• Forks: 24
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        

  

  

  



  https://tonicframework.dev









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 the Web Components. It was designed to be similar to React but 100x easier to reason about.


## Installation

```sh

npm install @socketsupply/tonic

```

## Usage

```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 {

  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')

```

After adding your Javascript to your HTML, you can use your component anywhere.

```html

  

    

  

  

    

  

```

# Useful links

- [Tonic components](https://github.com/socketsupply/components)

- [Migration from the early versions of Tonic](./MIGRATION.md)

- [API](./API.md)

- [Troubleshooting](./HELP.md)

Copyright (c) 2023 Socket Supply Co.

MIT License