babel-plugin-transform-redom-jsx

3.0.6 verified Sat Apr 25 auth: no javascript

A Babel plugin that transforms JSX into RE:DOM element creation calls (el, text). Current stable version is 3.0.6. The plugin converts JSX syntax to RE:DOM's el() function calls, with support for component classes and this-assignment for direct DOM access. It requires Babel 7+ and is used alongside @babel/plugin-transform-react-jsx (or similar) with a pragma set to 'el'. Unlike generic JSX-to-hyperscript transforms, this plugin is specifically optimized for RE:DOM's reactive DOM patching and component lifecycle.

Common errors

error Unknown plugin "babel-plugin-transform-redom-jsx" ↓

cause Plugin not installed or Babel config not recognized.

fix

npm install --save-dev babel-plugin-transform-redom-jsx and ensure .babelrc is correct.

error ReferenceError: el is not defined ↓

cause el function not imported from redom.

fix

Add 'import { el } from "redom";' to your file.

error Support for the experimental syntax 'jsx' isn't currently enabled ↓

cause Missing @babel/plugin-transform-react-jsx or stale Babel config.

fix

Add @babel/plugin-transform-react-jsx with pragma 'el' to your plugins.

Warnings

breaking v3.0.0 changed handling of component JSX. Use <Component /> syntax, not special handling. ↓

fix Update JSX to standard component usage; see README for examples.

breaking v2.0.0 requires Babel 7+. Babel 6 is not supported. ↓

fix Upgrade to Babel 7 or use v1.x.

deprecated Old v1.x patterns using special handling for component JSX are removed in v2.0.0. ↓

fix Update JSX to use standard component pattern from v2.0.0+.

gotcha You must also include @babel/plugin-transform-react-jsx (or equivalent) with pragma 'el'. ↓

fix Add both plugins to Babel config as shown in README.

Install

npm install babel-plugin-transform-redom-jsx

yarn add babel-plugin-transform-redom-jsx

pnpm add babel-plugin-transform-redom-jsx

Imports

default
```
import plugin from 'babel-plugin-transform-redom-jsx'
```
This is a Babel plugin, typically used in .babelrc config string, not imported directly.

wrong

import { el } from 'babel-plugin-transform-redom-jsx'

correct

import { el } from 'redom'

el is from the redom package, this plugin transforms JSX to el calls.

text
wrong
```
import { text } from 'babel-plugin-transform-redom-jsx'
```
correct
```
import { text } from 'redom'
```
text is from redom package; plugin transforms JSX text nodes to text() calls.

Quickstart

Shows minimal Babel config and a RE:DOM component using JSX transformed to el() calls.

// .babelrc
{
  "plugins": [
    "babel-plugin-transform-redom-jsx",
    ["@babel/plugin-transform-react-jsx", { "pragma": "el" }]
  ]
}

// App.js
import { el, mount } from 'redom';

class Hello {
  constructor() {
    <div this="el">
      <h1>Hello, World!</h1>
    </div>;
  }
}

mount(document.body, <Hello />);