signalizejs/hyperscript

Hyperscript: create HTML elements easily with reactive data and attributes.

Installation

Required import map dependencies:

const { h } = await signalize.resolve('hyperscript');

API

h

// Only a tag
const template = h('div');

// Tag and a string
const template = h('div', 'Content');

// Tag, attributes, content
const template = h('div', { class: 'example' }, 'Hello', 'World', '!');

const template = h('div', { class: 'example' },
	h('p', 'Hello World!'),
	h('p', 'Another Paragraph!')
);

// Replacing existing element
document.querySelector('#app').replaceWith(template);

An example with signals:

<div id="app"></div>

<script type="importmap">{
  "imports": {
    "signalizejs": "https://cdn.jsdelivr.net/npm/signalizejs/+esm",
    "signalizejs/bind": "https://cdn.jsdelivr.net/npm/signalizejs/bind/+esm",
    "signalizejs/event": "https://cdn.jsdelivr.net/npm/signalizejs/event/+esm",
    "signalizejs/mutation-observer": "https://cdn.jsdelivr.net/npm/signalizejs/mutation-observer/+esm",
    "signalizejs/scope": "https://cdn.jsdelivr.net/npm/signalizejs/scope/+esm",
    "signalizejs/signal": "https://cdn.jsdelivr.net/npm/signalizejs/signal/+esm",
    "signalizejs/hyperscript": "https://cdn.jsdelivr.net/npm/signalizejs/hyperscript/+esm"
  }
}</script>

<script type="module">
    import Signalize from 'signalizejs';

    const { resolve } = new Signalize();
    const { h, signal } = await resolve('hyperscript', 'signal');

    // Create a text signal
    const text = signal('Hello World!');

    document.querySelector('#app').replaceWith(
        // Create elements
        h('div', { id: 'app' },
            // Bind text signal to element attributes
            h('input', { value: text }),
            h('div', text)
        )
    );
</script>