Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
@amoutonbrady/baracuda
Advanced tools
A tiny (400B), modern and fast utility around hyperscript like view layer
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.
ul([li('First item'), li('Second item')]);
There was other options but they seemed a little on the heavy side. I wanted something modern and slick.
npm install @amoutonbrady/baracuda
or
yarn add @amoutonbrady/baracuda
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:
import { h } from 'vue'
import { h } from 'hyperapp'
import { h } from 'preact'
import { h } from 'inferno-hyperscript'
import { el } from 'redom'
You can find more example in the tests
directory
The hyperscript
like function has to take 3 arguments :
h(tag: string, attributes: Object, childrens: string | Element | Element[])
The return object from baracuda
is a Proxy that can be destructed into functions with the following interface:
fn(attributes: Object, childrens: string | Element | Element[]): Element
fn(childrens: string | Element | Element[]): Element
Where:
fn
is the name of the tag (eg: div
, h1
, etc.)attributes
is an object containing dom attributes (eg: classes, event handler, etc.)childrens
is either a string or an array of Element
⚠️ If the first argument is not an object, it will be interpreted as the childrens
argument and defaulting the attributes
to {}
note: the library exports a default function as well as a named function
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);
This utility is based on an non polyfillable feature: Proxy. This can't be used in a non evergreen browser.
See MDN for the full compatibility list. I only use the handler.get
feature.
Mithril is only partially compatible for the moment.
git clone https://github.com/amoutonbrady/baracuda
cd baracuda
yarn install
yarn build
yarn test
FAQs
An alternative to JSX to work with HyperScript view layer
The npm package @amoutonbrady/baracuda receives a total of 8 weekly downloads. As such, @amoutonbrady/baracuda popularity was classified as not popular.
We found that @amoutonbrady/baracuda 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
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.