dom-chef - Build DOM Elements with JSX

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.

…

View on GitHub

Photo by Wyron A on Unsplash