Baracuda
A tiny (400B), modern and fast utility around hyperscript like view layer
Why?
Mostly code readability and DX. h1('Hello world') is easier to understand (for me that is) than h('h1', {}, 'Hello world'). It comes in handy when you have nested childrens.
There was other options but they seemed a little on the heavy side. I wanted something modern and slick.
How?
Installation
or
yarn add @amoutonbrady/baracuda
Usage
Import the baracuda factory function and wrap it around an hyperscript like function.
According to tests, baracuda should be at least compatible with the following frameworks:
- Vue 3:
import { h } from 'vue' - Hyperapp:
import { h } from 'hyperapp' - Preact:
import { h } from 'preact' - Inferno:
import { h } from 'inferno-hyperscript' - Redom:
import { el } from 'redom'
You can find more example in the tests directory
The hyperscript like function has to take 3 arguments :
The return object from baracuda is a Proxy that can be destructed into functions with the following interface:
fn(childrens: string | Element | Element[]): Element
Where:
fnis the name of the tag (eg:div,h1, etc.)attributesis an object containing dom attributes (eg: classes, event handler, etc.)childrensis either a string or an array ofElement
childrens argument and defaulting the attributes to {}
Example
note: the library exports a default function as well as a named function
Quick example
import { h, render } from 'my-dom-library';
import { baracuda } from '@amoutonbrady/baracuda';
// import hh from '@amoutonbrady/baracuda'; <= That also works
const { ul, li } = baracuda(h);
const app = ul([
li(1),
li(2),
]);
render(app, document.body);