I came across dom-chef while working on a PR for migrating Refined GitHub to TypeScript (WIP and something that is interesting on its own if you're new to TypeScript).
At a quick first glance, I thought Refined GitHub was built with React, but as soon as I had that second sip of coffee, I realized it was just JS with some JSX in it.
The TLDR:
- No API, JSX gets auto transformed into actual DOM elements
- Protection from XSS injections
- Partial SVG support
- React-like props naming (including events)
- Mix any DOM elements inside
This is definitely interesting if you're a fan of JSX.
Check out the repository
vadimdemedes
/
dom-chef
🍔 Build DOM elements using JSX automatically
Build regular DOM elements using JSX
With dom-chef, you can use Babel or TypeScript to transform JSX into plain old DOM elements, without using the unsafe innerHTML or clumsy document.createElement calls.
It supports everything you expect from JSX, including:
If something isn't supported (or doesn't work as well as it does in React) please open an issue!
Install
$ npm install dom-chef
Usage
Make sure to use a JSX transpiler (e.g. Babel, TypeScript compiler, esbuild, you only need one of them).
import {h} from 'dom-chef';
const handleClick = e => {
// <button> was clicked
};
const el = (
<div className="header">
<button className="btn-link" onClick={handleClick}>
Download
</button>
</div>
);
document.body.…
Top comments (1)
Neat find seems a cool alternative to something like nanohtml which does the same but use tagged template literals to construct dom elements