If you love JSX you don't necessarily need a JS framework like React. You can provide a h() function yourself and use Vanilla JS.
Essentially, all vanillaH provides is a h() function that creates DOM nodes using document.createElement, Element.setAttribute, Element.appendChild and document.createTextNode.
An example using JSX is on Codepen.
This is essentially what vanillaH does. I don't know how useful it is to you. Maybe not. āŗļø
vanillaH is available via NPM:
npm i vanillah
The vanillaH npm package provides a factory function where you pass in a document object (DOM API).
It returns a h() function which can be used with JSX.
import vanillaH from 'vanillah';
const h = vanillaH(document);
const snippet = <h1>Hello World</h1>
document.body.appendChild(snippet);
You can provide the jsx factory via esbuild.
On Codepen, you can enable this by
choosing "Babel" as preprocessor and adding a directive to use h() as a jsx factory:
/* @jsx h */
import vanillaH from 'https://unpkg.com/vanillah?module';
const h = vanillaH(document);
const stuff = <h1>Hello World</h1>;
document.body.appendChild(stuff);
You can also use vanillaH without transpile step:
h('div', {className: 'wrapper'},
h('h1', null, 'Hello World')
);
This may be a bit cumbersome. But there's a library which allows you to use template strings, called htm.
import vanillaH from 'https://unpkg.com/vanillah?module';
import htm from 'https://unpkg.com/htm?module';
const h = vanillaH(document);
const html = htm.bind(h);
const stuff = html`
<div>
<div className="headline-wrapper">
<h1 id="hello-world">Hello World</h1>
<a href="#hello-world">
<span aria-hidden="true">#</span>
</a>
</div>
<a href="https://lea.codes" aria-labelledby="hello-world" target="_blank">Hello world</a>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam dolorem
aspernatur saepe asperiores autem, rem architecto eos fugit officia sed.
Soluta corrupti, facere iure quae accusamus velit consequuntur magni quia!
</p>
</div>
`;
document.body.appendChild(stuff);
You can use vanillaH on the server-side by using linkedom.
import { parseHTML } from 'linkedom';
import htm from 'htm';
import vanillaH from 'vanillah';
const {
window, document
} = parseHTML(`
<!doctype html>
<html lang="en">
<head>
<title>Hello SSR</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
`);
const h = vanillaH(document);
const html = htm.bind(h);
document.body.appendChild(html`<h1>Hello World</h1>`);
console.log(document.toString());
FAQs
A h() function in VanillaJS for use with JSX or HTM
We found that vanillah 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.