loading...
Cover image for dom-chef - Build DOM Elements with JSX

dom-chef - Build DOM Elements with JSX

nickytonline profile image Nick Taylor (he/him) Updated on ・1 min read

Photo by Wyron A on Unsplash

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

GitHub logo 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, set JSX pragma to h and optionally the pragmaFrag to DocumentFragment if you need fragment support.

// babel.config.js
const plugins = [
    [
        '@babel/plugin-transform-react-jsx',
        {
            pragma: 'h',
            pragmaFrag: 'DocumentFragment',
        },
    ],
];
// ...
import {h} from 'dom-chef'
const handleClick = e => {
    // <a> was clicked
};

const el = (
    <div

Posted on by:

nickytonline profile

Nick Taylor (he/him)

@nickytonline

Senior software engineer at DEV/Forem. Caught the live coding bug on Twitch at livecoding.ca

Discussion

markdown guide
 

Neat find seems a cool alternative to something like nanohtml which does the same but use tagged template literals to construct dom elements