https://github.com/dy/hyperf

Hypertext fragment builder
https://github.com/dy/hyperf

Last synced: 9 months ago
JSON representation

Hypertext fragment builder

• Host: GitHub
• URL: https://github.com/dy/hyperf
• Owner: dy
• Created: 2022-01-13T22:18:16.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-18T18:31:46.000Z (over 1 year ago)
• Last Synced: 2025-08-31T04:47:05.541Z (10 months ago)
• Language: JavaScript
• Homepage:
• Size: 156 KB
• Stars: 12
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# hyperf [![test](https://github.com/spectjs/hyperf/actions/workflows/test.yml/badge.svg)](https://github.com/spectjs/hyperf/actions/workflows/test.yml) [![npm version](https://img.shields.io/npm/v/hyperf)](http://npmjs.org/hyperf) [![size](https://img.shields.io/bundlephobia/minzip/hyperf?label=size)](https://bundlephobia.com/result?p=hyperf)

> Fast & tiny elements / fragments builder with reactivity support.

#### _``const el = h`
${bar}
` ``_


Create an element (or document fragment) via [htm](https://github.com/developit/htm) tagged literal.


Fields allow static values, async _Promise_, _Thenable_ or reactives _AsyncIterable_, _Observable_, _Signal_, see [sube](https://github.com/spectjs/sube).

```js

import h from './hyperf.js'

import { signal } from '@preact/signals'

const text = signal('foo')

const a = h`${ text }`

// foo

text.value = 'bar'

// bar

const frag = h`12`

a.append(frag)

// 12

text = null // cleanup refs/observables

```

#### _``const el = h(tag, attrs, ...content) ``_

[Hyperscript](https://github.com/hyperhype/hyperscript) syntax support. To enable JSX just provide a directive for your builder (webpack or esbuild):

```jsx

import React from 'hyperf'

const a1 = ...

const a2 = Content: { value }

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

```

## Refs

[jsx-dom](https://github.com/alex-kinokon/jsx-dom), [textsaur](https://github.com/ConnorJamesLow/texsaur), [lit-html](https://ghub.io/lit-html), [htm](https://ghub.io/htm), [htl](https://ghub.io/htl), [hyperscript](https://ghub.io/hyperscript), [incremental-dom](https://ghub.io/incremental-dom), [snabbdom](https://ghub.io/snabbdom), [nanomorph](https://ghub.io/nanomorph), [uhtml](https://ghub.io/uhtml), [uele](https://github.com/kethan/uele), [bruh](https://github.com/Technical-Source/bruh), [document-persistent-fragment](https://www.npmjs.com/package/document-persistent-fragment), [doma](https://github.com/fregante/doma), [domify](https://ghub.io/domify), [mini-jsx](https://github.com/remcohaszing/mini-jsx) and others.

ॐ