hyperx

3.0.1 verified Fri May 01 auth: no javascript maintenance

Tagged template string virtual DOM builder that replaces JSX with standard ES6 template literals. Current stable version: 3.0.1 (released 2020). Hyperx is unmaintained as of 2023; last commit was in 2020. It works with virtual-dom, React, hyperscript, or any hyperscript-style API (h(tagName, attrs, children)). Key differentiators: no transpiler needed for modern browsers/Node 4+, supports inline <style> parsing, optional self-closing tag handling, and createFragment option for React fragments. Compared to JSX, hyperx avoids a build step but may be slower due to runtime parsing.

Common errors

error Uncaught TypeError: hyperx is not a function ↓

cause hyperx is a default export; using named import or wrong require syntax.

fix

Use const hyperx = require('hyperx') or import hyperx from 'hyperx'.

error Error: h is not a function ↓

cause The argument to hyperx() must be a function (the hyperscript h function). Often missing or undefined.

fix

Make sure to pass a valid h function, e.g., var h = require('virtual-dom').h; var hx = hyperx(h).

error Warning: Each child in a list should have a unique "key" prop. ↓

cause When using hyperx with React, children passed as array may lack keys. React's createElement expects separate arguments.

fix

Use the createFragment option or a custom createElement that spreads children: React.createElement.apply(null, [component, properties].concat(children)).

error Uncaught SyntaxError: Invalid tagged template literal ↓

cause Using hyperx with a transpiler that doesn't support tagged templates, or syntax error in template.

fix

Ensure your environment supports ES6 tagged templates. For older targets, use hyperxify to precompile.

Warnings

gotcha Hyperx parses template literals at runtime, which may be slower than pre-compiled JSX. ↓

fix Consider using the hyperxify browserify transform to statically compile templates.

gotcha When using React, you must create a custom createElement wrapper to avoid key warnings. See examples in README. ↓

fix Use React.createElement.apply(null, [component, properties].concat(children)) as the h function.

gotcha If you pass a function as an attribute, hyperx may treat it as an event handler. Verify the target DOM builder's behavior. ↓

fix Check the DOM builder's documentation for how it handles function attributes.

breaking v3.0.0 changed parsing behavior: direct descendant CSS selectors in inline <style> tags are now supported, and optional closing tags for self-closing tags are handled differently. ↓

fix Test templates that include CSS selectors with > or self-closing tags; update as needed.

deprecated hyperx is no longer actively maintained; last release in 2020. ↓

fix Evaluate alternatives like lit-html for actively maintained template-based DOM builders.

Install

npm install hyperx

yarn add hyperx

pnpm add hyperx

Imports

hyperx
wrong
```
const { hyperx } = require('hyperx')
```
correct
```
import hyperx from 'hyperx'
```
Default export: hyperx is a function that takes an h function and options.
hx (from hyperx)
wrong
```
const hx = require('hyperx')(require('virtual-dom').h)
```
correct
```
const hx = hyperx(require('virtual-dom').h)
```
Common pattern: create a tagged template function by passing an h function to hyperx.
html (via hyperxify)
wrong
```
const html = require('hyperx')
```
correct
```
import html from 'hyperxify/html'
```
If using hyperxify browserify transform, the compiled version exports 'html' as a plain function.

Quickstart

Creating a simple virtual DOM tree with hyperx and virtual-dom, demonstrating variables and mapping arrays.

const hyperx = require('hyperx')
const vdom = require('virtual-dom')
const hx = hyperx(vdom.h)

const title = 'world'
const items = [1, 2, 3]
const tree = hx`<div>
  <h1>hello ${title}!</h1>
  <ul>${items.map(i => hx`<li>${i}</li>`)}</ul>
</div>`
console.log(vdom.create(tree).toString())
// Output:
// <div>
//   <h1>hello world!</h1>
//   <ul><li>1</li><li>2</li><li>3</li></ul>
// </div>