Security News
Input Validation Vulnerabilities Dominate MITRE's 2024 CWE Top 25 List
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
@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 6 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
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.