@bicycle-codes/tonic
Advanced tools
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 Web Components.
The tl;dr is that this allows you to pass full JS objects between components, not just strings as in HTML.
npm i -S @bicycle-codes/tonic
import Tonic from '@bicycle-codes/tonic'
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>
This is a fork of @socketsupply/tonic
See API docs
Things added to the forked version:
See src/index.d.ts.
tagGet 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'
emitEmit 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
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')
el.emit('testing', 'some data')
// override default values
el.emit('more testing', 'some data', {
bubbles: false
cancelable: false
})
static eventReturn the namespaced event name given a string.
class {
static event (type:string):string {
return `${this.tag}:${type}`
}
}
class EventsExample extends Tonic {
// ...
}
EventsExample.event('testing')
// => 'events-example:testing'
dispatchEmit a regular, non-namespaced event.
{
dispatch (eventName:string, detail = null):void
}
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
})
MIT License
FAQs
A component framework.
We found that @bicycle-codes/tonic demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Socket detected malicious node-ipc versions with obfuscated stealer/backdoor behavior in a developing npm supply chain attack.
Security News
TeamPCP and BreachForums are promoting a Shai-Hulud supply chain attack contest with a $1,000 prize for the biggest package compromise.
Security News
Packagist urges PHP projects to update Composer after a GitHub token format change exposed some GitHub Actions tokens in CI logs.