babel-preset-hyperdom

2.0.0 verified Sat Apr 25 auth: no javascript

Babel preset for hyperdom, a React-like library with a custom JSX syntax for data binding. Current stable version is 2.0.0, released alongside hyperdom V2 which requires Babel 7. For Babel 6 use version 1.4.0. This preset transforms JSX binding expressions (e.g., `binding="item[n].method().name"`) into JavaScript function calls. It is specifically designed for hyperdom and not a general-purpose JSX preset.

Common errors

error Error: Cannot find module '@babel/core' ↓

cause Missing @babel/core peer dependency when using version 2.x.

fix

npm install --save-dev @babel/core

error Error: Plugin/Preset files are not allowed to export objects, only functions. ↓

cause Using ESM import syntax with this CommonJS preset in a babel.config.js file that expects ESM.

fix

Use module.exports or require in CommonJS config, or reference preset as string 'hyperdom'.

Warnings

breaking Version 2.0.0 requires Babel 7. Attempting to use with Babel 6 will cause errors. ↓

fix Upgrade to Babel 7 or use version 1.4.0 with Babel 6.

deprecated Version 1.4.0 is deprecated for Babel 7 users. It will not receive updates. ↓

fix Upgrade to 2.0.0 with Babel 7.

gotcha This preset only works with hyperdom JSX binding syntax. Using standard JSX without binding will not be transformed. ↓

fix Ensure your JSX expressions use the binding attribute as shown in the documentation.

Install

npm install babel-preset-hyperdom

yarn add babel-preset-hyperdom

pnpm add babel-preset-hyperdom

Imports

default
wrong
```
import preset from 'babel-preset-hyperdom'
```
correct
```
module.exports = require('babel-preset-hyperdom')
```
This is a CommonJS module; ESM import is not supported. In .babelrc or babel.config.js, use string reference 'hyperdom'.

Quickstart

Shows .babelrc configuration and transpilation of a binding expression.

// .babelrc
{
  "presets": ["hyperdom"]
}

// Source file (.jsx)
<input type="text" binding="item[n].method().name" />
// Transpiles to:
hyperdom.jsx("input", { type: "text", binding: [item[n].method(), "name"] });