hyperf

Fast & tiny elements / fragments builder with reactivity support.

const el = h`<div foo=${foo}>${bar}</div>`

Create an element (or document fragment) via htm tagged literal.
Fields allow static values, async Promise, Thenable or reactives AsyncIterable, Observable, Signal, see sube.

import h from './hyperf.js'
import { signal } from '@preact/signals'

const text = signal('foo')

const a = h`<a>${ text }</a>`
// <a>foo</a>

text.value = 'bar'
// <a>bar</a>

const frag = h`<x ...${{x: 1}}>1</x><y>2</y>`

a.append(frag)
// <a><x x="1">1</x><y>2</y></a>

text = null // cleanup refs/observables

const el = h(tag, attrs, ...content)

Hyperscript syntax support. To enable JSX just provide a directive for your builder (webpack or esbuild):

import React from 'hyperf'

const a1 = <a>...</a>
const a2 = <a>Content: { value }</a>

document.querySelector('#container').append(a1, a2)

Refs

jsx-dom, textsaur, lit-html, htm, htl, hyperscript, incremental-dom, snabbdom, nanomorph, uhtml, uele, bruh, document-persistent-fragment, doma, mini-jsx and others.

ॐ