0.1.37 - Exposing Cores

⚙ Exposing Core Features

in 0.1.37, we added exports which contains some parts of hstd's core:

Pointer()

Module Pointer is the unwrapped edition of $.

import { $, Pointer } from "hstd";

const count = Pointer(0);
++count.$; // "1"

This module does not support some few features, such as producing pointer from template:

$`count is ${count}`; // "count is 1"
Pointer`count is ${count}`; // TypeError

and processing global property:

$.console.log(count); // show log from "count" changes
Pointer.console.log(count); // TypeError

...which is slightly faster than wrapped $.

Memo()

Module Memo uses Map or WeakMap to eliminate additional, unnecessary computation like React's useMemo().
this is used in various scene, from TemplateStringsArray validation layer to Pointer's binding strategy.

import { Memo } from "hstd";

const sum = Memo((input) => {
    console.log("computing...");
    return input + 1
});

sum(1); // returns "2"
// console: "computing..."
sum(1); // returns "2"
// nothing appears at console, which shows the callback was not executed.

the second arguments of Memo defines which method should be use between WeakMap or Map:

const resolveTemplate = Memo((template) => {

    console.log(`analyzing template... ${template.join("[value]")}`)
    const processedTemplate = // analyzing process continues...

    return (values) => processedTemplate(values);

}, true); // put "true" here when you want to use WeakMap for caching keys instead of Map.

const temp = (a, ...b) => resolveTemplate(a)(b);

const factory = () => temp`Hello world at ${performance.now()}`;

factory(); // returns: Hello world at 1187.437022
// console: "analyzing template... Hello world at [value]"

factory(); // returns: Hello world at 1196.921623
// nothing appears at console, which shows the first callback was not executed.

Prop()

Module Prop generates proxied stackable prop, which used in our on and css:

import { h as html, Prop } from "hstd";

const myStackable = Prop(
    (key) => (value, ref) => ref[key] = value;
);

document.body.append(...html`
    <video ${{ [myStackableProp.src]: "cat.webp" }}></video>
    <audio ${{
        [myStackableProp]: {
            src: "cat.opus"
        }
    }}></audio>
`)