@substrate-system/tonic NPM

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.

See the API docs

Install

npm i -S @substrate-system/tonic

tl;dr

You can pass full JS objects into components, not just strings, as in HTML.

Use

Bundler

import Tonic from '@substrate-system/tonic'

Pre-bundled

This package exposes minified JS files too. Copy them so they are accessible to your web server, then link to them in HTML.

Copy

cp ./node_modules/@substrate-system/tonic/dist/index.min.js ./public/tonic.min.js

HTML

<script type="module" src="./tonic.min.js"></script>

Examples

You can use functions as components. They can be async or even an async generator function.

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>

fork

This is a fork of @socketsupply/tonic.

docs

See API docs.

types

See src/index.ts.

`tag`

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'

`emit`

Emit namespaced events, following a naming convention. The return value is the call to element.dispatchEvent().

Given an event name, the dispatched event will be prefixed with the element name, for example, my-element:event-name.

emit (type:string, detail:string|object|any[] = {}, opts:Partial<{
    bubbles:boolean;
    cancelable:boolean
}> = {}):boolean

emit example

class EventsExample extends Tonic {
  // ...
}

// EventsExample.event('name') will return the namespace event name
const evName = EventsExample.event('testing')

document.body.addEventListener(evName, ev => {
  // events bubble by default
  console.log(ev.type)  // => 'events-example:testing'
  console.log(ev.detail)  // => 'some data'
})

const el = document.querySelector('events-example')
// use default values for `bubbles = true` and `cancelable = true`
el.emit('testing', 'some data')

// override default values, `bubbles` and `cancelable`
el.emit('more testing', 'some data', {
  bubbles: false
  cancelable: false
})

`static event`

Return the namespaced event name given a string.

class {
  static event (type:string):string {
      return `${this.tag}:${type}`
  }
}

example

class EventsExample extends Tonic {
  // ...
}

EventsExample.event('testing')
//  => 'events-example:testing'

`dispatch`

Emit a regular, non-namespaced event.

{
  dispatch (eventName:string, detail = null):void
}

`dispatch` example

class EventsExample extends Tonic {
  // ...
}

document.body.addEventListener('testing', ev => {
  // events bubble by default
  console.log(ev.type)  // => 'testing'
  console.log(ev.detail)  // => 'some data'
})

const el = document.querySelector('events-example')
el.dispatch('testing', 'some data')

// override default values
el.dispatch('more testing', 'some data', {
  bubbles: false
  cancelable: false
})