# @nichoth/tonic

> A component framework.

Latest version **15.3.4** (published 2023-12-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nichoth/tonic
pnpm add @nichoth/tonic
yarn add @nichoth/tonic
bun add @nichoth/tonic
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 15.3.4 |
| Published | 2023-12-26 |
| First published | 2023-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 24 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | nichoth |

## Links

- npm: https://www.npmjs.com/package/@nichoth/tonic
- Repository: https://github.com/nichoth/tonic
- Homepage: https://tonicframework.dev
- Issues: https://github.com/nichoth/tonic/issues
- npm.io page: https://npm.io/package/@nichoth/tonic

## Recent versions

- 15.3.4 (latest) — 2023-12-26
- 15.3.3 — 2023-12-26
- 15.3.2 — 2023-12-26
- 15.3.1 — 2023-12-22
- 15.3.0 — 2023-12-22
- 15.1.8 — 2023-12-22
- 15.1.7 — 2023-11-10
- 15.1.6 — 2023-11-09
- 15.1.5 — 2023-11-09
- 15.1.4 — 2023-11-09
- 15.1.3 — 2023-10-19
- 15.1.2 — 2023-10-12

## README

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/socketsupply/tonic/master/readme-tonic-dark.png">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/socketsupply/tonic/master/readme-tonic.png">
  <img alt="tonic" src="https://raw.githubusercontent.com/socketsupply/tonic/master/readme-tonic.png">
</picture>

<p align="center">
  https://tonicframework.dev
</p>
<br/>
<br/>

A fork of [@socketsupply/tonic](https://github.com/socketsupply/tonic)

![tests](https://github.com/nichoth/tonic/actions/workflows/nodejs.yml/badge.svg)
[![Socket Badge](https://socket.dev/api/badge/npm/package/@nichoth/tonic)](https://socket.dev/npm/package/@nichoth/tonic)
[![module](https://img.shields.io/badge/module-ESM-blue)](README.md)
[![license](https://img.shields.io/badge/license-MIT-brightgreen)](LICENSE.txt)


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.

## Install

```sh
npm install @nichoth/tonic
```

## Use

```js
import Tonic from '@nichoth/tonic'

class MyGreeting extends Tonic {
  render () {
    return this.html`<div>Hello, World.</div>`
  }
}

Tonic.add(MyGreeting, 'my-greeting')
```

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

```html
<html>
  <head>
    <script src="my-greeting.js"></script>
  </head>
  <body>
    <my-greeting></my-greeting>
  </body>
</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)

MIT License

---
_Source: https://npm.io/package/@nichoth/tonic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._