dylanjs

stallone

Fine grained reactive UI Library

npm: npm i stallone
cdn: https://cdn.jsdelivr.net/npm/stallone/+esm

• Small. hello world at ~3kB gzip.
• Truly reactive and fine grained. automatically derived from the app state.
• Rich ecosystem. From router to graphQL integration.
• DevEx. no compile step needed, choose your view syntax: h or <JSX/>.

Example

Counter - Codesandbox

/** @jsx h **/

import { component, h, render } from "stallone";

export const HomePage = component<{ name: string }>(
    "HomePage",
    (props, { signal, wire }) => {
        const count = signal(0);
        return (
            <div id="home">
                <p>Hey, {props.name}</p>
                <button
                    onclick={() => {
                        count(count() + 1);
                    }}
                >
                    Increment to {wire(count)}
                </button>
            </div>
        );
    }
);

render(<HomePage name="John Doe" />, document.body);

Motivation

The state part of this library is based on haptic specially the concept of aptly named Signals and Wires. Like haptic it also favours manual subscription model instead of automatic subscriptions model.

It's also influenced by Sinuous, Solid, & S.js

Signals

These are reactive read/write variables who notify subscribers when they've been written to. They are the only dispatchers in the reactive system.

const state = signal({
    name: "Deciduous Willow",
    age: 85,
});

state.name; // [Function: signal|0{name}]
state.name(); // 'Deciduous Willow'
state.name("Willow");
state.name(); // 'Willow'

The subscribers to signals are wires, which will be introduced next. They subscribe by read-subscribing the signal. This is an important distinction - signals have two types of reads!

state.name(); // Passive read (read-pass)
state.name($); // Subscribed read (read-subscribe)

This is unlike other reactive libraries, but it'll save us a lot of debugging. Separating the reads it makes subscribed reads an explicit and visually distinct action from passive reads. This makes Haptic an opt-in design, and it doesn't need the sample() function seen in other libraries. This is explained later when introducing wires, which is also where the $ value comes from.

Wires

These are task runners who subscribe to signals and react to signal writes. They hold a function (the task) and manage its subscriptions, nested wires, run count, and other metadata. The wire provides a $ token to the function call that, at your discretion as the developer, can use to read-subscribe to signals.

wire(($) => {
    // Explicitly subscribe to state.name using the subtoken "$"
    const name = state.name($);
    console.log("Update to state.name:", name);
    return name;
});

API

• signal
• wire
• getContext
• setContext

Ecosystem

• stallone-router
• stallone-apollo