hyperx

library3.0.1jsnpmunverified

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.

web-framework

npm install hyperx

github ↗package ↗

INSTALL

IMPORT

SIG · HYPERX

hyperx

web-frameworkjavascriptv3.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

hyperx

✓ import hyperx from 'hyperx'

✗ const { hyperx } = require('hyperx')

Default export: hyperx is a function that takes an h function and options.

hx (from hyperx)

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

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

Common pattern: create a tagged template function by passing an h function to hyperx.

html (via hyperxify)

✓ import html from 'hyperxify/html'

✗ const html = require('hyperx')

If using hyperxify browserify transform, the compiled version exports 'html' as a plain function.

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>

Debug

Known issues

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

fix

Consider using the hyperxify browserify transform to statically compile templates.

affects: >=0.0.0

gotchaWhen 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.

affects: >=2.5.0

gotchaIf 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.

affects: >=0.0.0

breakingv3.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.

affects: <3.0.0

deprecatedhyperx is no longer actively maintained; last release in 2020.

fix

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

affects: >=3.0.0

Errors

Common errors & fixes

Uncaught TypeError: hyperx is not a function

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

fix

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

Error: h is not a function

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)`.

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

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))`.

Uncaught SyntaxError: Invalid tagged template literal

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.

Upgrade

Version history

3.0.1latest on npm

Audit

Dependencies

hyperscriptoptionalDefault DOM builder if you use hyperx without passing an h function

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/choojs/hyperx ↗

packagehttps://www.npmjs.com/package/hyperx ↗