0.1.0

hstd - Introducing HyperStandard

import { $, h as html, on } from "hstd"


function Component() {

    const count = $(0);

    return html`
        <h1>Count is ${count}</h1>
        <button ${{ [on.click]: () => count.$++ }}>
            Add more!
        </button>
    `;
}


document.body.append(...Component());

HyperStandard is a new standard toolkit for building fast, interactive, extensible web interface.

0.0.82

Changed:

• Supercharged by Proxy: Now our Pointer has Proxy-based core!

	Before (Object-based)	After (Proxy-based)	Figures reduced
Performance (single manipulation)	90μs~	30μs~	66% faster ⚡️
Size (minified + gzipped)	2.7KB	2.3KB	15% smaller 📦

0.0.72

Added:

• Full Primitive Support: Every method installed as a pointer

const number = $(0);
const base = $(16)

// then
const hex = number.into($ => $.toString(base.$))
// now
const hex = number.toString(base)

hex.watch($ => console.log($))

number.$ += 14 // console: "e"

0.0.43

Changed:

• Now html returns REAL HTMLCollection

const frag = html`<label>I am real HTMLCollection!</label>` // HTMLCollection
frag[0] // HTMLLabelElement

0.0.41

Improved:

• 30% faster: Use WeakMap to caching nodes.
• ~0.1KB smaller: Reduced some verbose processes.

0.0.36

Added:

• Post-processing: get raw element ref with id properties and callbacks.

function Canvas() {

    const colorSwitch = $(true);

    return html`
        <canvas ${{ id: "color", [on.click]: () => colorSwitch.switch() }}></canvas>

    `.then(({ color }) => {

        const ctx = color.getContext("2d");
        colorSwitch.into($ => $ ? "red" : "blue").watch($ => {
            ctx.fillStyle = $;
            ctx.fillRect(0, 0, 100, 100);
        });
    })
}