Small pieces. Complete applications.

npm install white-label-model

import {Model} from 'white-label-model';

Public mutation API

Events and integration

Explicit mutations emit change followed by the operation event (set, update, push, delete, or clear). Assign name and any EventEmitter-compatible mediator to relay events as model:<name>:<event>.

Executable source

import Mediator from 'white-label-mediator';
import {Model} from 'white-label-model';

type Profile = {
    active?: boolean;
    name?: string;
};

interface Task {
    complete: boolean;
    id: number;
    title: string;
}

/** Run the exact Model example rendered in the documentation. */
export function initializeModelExample(documentRoot: Document): () => void {
    const host = documentRoot.querySelector<HTMLElement>('#model .doc-card__body');
    if (!host) {return () => undefined;}

    const demo = documentRoot.createElement('section');
    demo.className = 'feature-card';
    demo.dataset.liveDemo = 'model';
    demo.innerHTML = `
        <p class="eyebrow">Live in your browser</p>
        <h4>Unified observable Model state</h4>
        <p>This is the same TypeScript module shown above. It uses local events, mediator relay, object and array Model mutations, lifecycle cleanup, and silent reset state.</p>
        <div class="hero__actions">
            <button class="button button--primary" type="button" data-demo-action="update">Update profile</button>
            <button class="button button--ghost" type="button" data-demo-action="add">Add task</button>
            <button class="button button--ghost" type="button" data-demo-action="complete">Complete first</button>
            <button class="button button--ghost" type="button" data-demo-action="remove">Remove first</button>
            <button class="button button--ghost" type="button" data-demo-action="clear">Clear profile</button>
            <button class="button button--ghost" type="button" data-demo-action="reset">Reset</button>
        </div>
        <pre><code data-demo-output></code></pre>`;
    host.append(demo);

    const output = demo.querySelector<HTMLElement>('[data-demo-output]')!;
    const mediator = new Mediator().initialize();
    const profile = new Model<Profile>({name: 'Ada', active: true}).initialize();
    const tasks = new Model<Task[]>([
        {id: 1, title: 'Read the reference', complete: false}
    ]).initialize();
    const events: string[] = [];

    profile.name = 'profile';
    profile.mediator = mediator;

    const recordProfileChange = (): void => { events.unshift('profile:change'); events.length = Math.min(events.length, 4); render(); };
    const recordProfileRelay = (): void => { events.unshift('model:profile:update'); events.length = Math.min(events.length, 4); render(); };
    const recordTaskChange = (): void => { events.unshift('tasks:change'); events.length = Math.min(events.length, 4); render(); };

    profile.on('change', recordProfileChange);
    mediator.on('model:profile:update', recordProfileRelay);
    tasks.on('change', recordTaskChange);

    function render(): void {
        output.textContent = JSON.stringify({
            profile: profile.get(),
            tasks: tasks.get(),
            recentEvents: events.slice(0, 4)
        }, null, 2);
    }

    const updateProfile = (): void => {
        const current = profile.get();
        profile.update({
            name: current.name === 'Ada' ? 'Grace' : 'Ada',
            active: !current.active
        });
    };
    const addTask = (): void => {
        const current = tasks.get() as Task[];
        tasks.push({id: current.length + 1, title: 'Explore another API', complete: false});
    };
    const completeFirst = (): void => {
        const current = tasks.get() as Task[];
        if (current[0]) {tasks.update(0, {complete: true});}
    };
    const removeFirst = (): void => {
        const current = tasks.get() as Task[];
        if (current[0]) {tasks.delete(0);}
    };
    const clearProfile = (): void => { profile.clear(); };
    const reset = (): void => {
        profile.set({name: 'Ada', active: true}, true);
        tasks.set([{id: 1, title: 'Read the reference', complete: false}], true);
        events.length = 0;
        render();
    };

    const actions: Record<string, () => void> = {
        update: updateProfile,
        add: addTask,
        complete: completeFirst,
        remove: removeFirst,
        clear: clearProfile,
        reset
    };
    for (const [name, handler] of Object.entries(actions)) {
        demo.querySelector<HTMLButtonElement>(`[data-demo-action="${name}"]`)!
            .addEventListener('click', handler);
    }

    render();

    return () => {
        for (const [name, handler] of Object.entries(actions)) {
            demo.querySelector<HTMLButtonElement>(`[data-demo-action="${name}"]`)!
                .removeEventListener('click', handler);
        }
        profile.removeListener('change', recordProfileChange);
        mediator.removeListener('model:profile:update', recordProfileRelay);
        tasks.removeListener('change', recordTaskChange);
        profile.destroy();
        tasks.destroy();
        mediator.destroy();
        demo.remove();
    };
}

import View from 'white-label-view';

import View from 'white-label-view/server';

Browser public API

Delegated-event registry methods on(), off(), and clear() return the registry for chaining.

Server public API

Executable source

import {Model} from 'white-label-model';
import View from 'white-label-view';

type ProfileState = {
    count: number;
    name: string;
};

/** A reusable View with delegated DOM events and explicit model binding. */
class ProfileView extends View {
    private get profileModel(): Model<ProfileState> {
        return this.model as Model<ProfileState>;
    }

    private readonly handleIncrement = (): void => {
        const current = this.profileModel.get();
        this.profileModel.update({count: (current.count ?? 0) + 1});
    };
    private readonly handleNameInput = (event: Event): void => {
        const input = event.target as HTMLInputElement;
        this.profileModel.update({name: input.value});
    };

    override addListeners(): this {
        this.delegated.on('click', '[data-increment]', this.handleIncrement);
        this.delegated.on('input', '[data-name]', this.handleNameInput);
        return this;
    }

    override removeListeners(): this {
        this.delegated.off('click', '[data-increment]', this.handleIncrement);
        this.delegated.off('input', '[data-name]', this.handleNameInput);
        return this;
    }

    override template = (data: unknown) => {
        const state = data as ProfileState;
        return (
            <div class="feature-card feature-card--cyan" aria-live="polite">
                <strong data-greeting>Hello, {state.name}</strong>
                <p data-count>Rendered count: {state.count}</p>
                <label>Name <input data-name value={state.name} /></label>
                <button class="button button--primary" type="button" data-increment>Increment in the View</button>
            </div>
        );
    };

    /** Keep the editable element, focus and composition state while updating only displayed data. */
    override render(): this {
        if (this.parentElement?.contains(this.element)) {
            const root = this.element as Element;
            const state = this.profileModel.get();
            root.querySelector('[data-greeting]')!.textContent = `Hello, ${state.name}`;
            root.querySelector('[data-count]')!.textContent = `Rendered count: ${state.count}`;
            const input = root.querySelector<HTMLInputElement>('[data-name]')!;
            if (input.value !== state.name) {input.value = state.name ?? '';}
            return this;
        }
        return super.render();
    }
}

/** Run the exact View example rendered in the documentation. */
export function initializeViewExample(documentRoot: Document): () => void {
    const host = documentRoot.querySelector<HTMLElement>('#view .doc-card__body');
    if (!host) {return () => undefined;}

    const demo = documentRoot.createElement('section');
    demo.className = 'feature-card';
    demo.dataset.liveDemo = 'view';
    demo.innerHTML = String(
        <>
            <p class="eyebrow">Live in your browser</p>
            <h4>Rendered View + delegated events</h4>
            <p>This is the same TypeScript module shown above. The View renders from Model state, re-renders on change, delegates events from its root, and exposes explicit binding lifecycle controls.</p>
            <div data-view-mount></div>
            <div class="hero__actions">
                <button class="button button--ghost" type="button" data-demo-action="pause">Pause model binding</button>
                <button class="button button--ghost" type="button" data-demo-action="resume">Resume model binding</button>
                <button class="button button--ghost" type="button" data-demo-action="render">Render manually</button>
                <button class="button button--ghost" type="button" data-demo-action="reset">Reset</button>
            </div>
        </>
    );
    host.append(demo);

    const model = new Model<ProfileState>({name: 'Ada', count: 0});
    const mount = demo.querySelector<HTMLElement>('[data-view-mount]')!;
    const view = new ProfileView({parentElement: mount, model}).initialize();

    const pause = (): void => { view.destroyModelBinding(); };
    const resume = (): void => { view.initializeModelBinding(); };
    const render = (): void => { view.render(); };
    const reset = (): void => { model.set({name: 'Ada', count: 0}); };
    const actions: Record<string, () => void> = {pause, resume, render, reset};

    for (const [name, handler] of Object.entries(actions)) {
        demo.querySelector<HTMLButtonElement>(`[data-demo-action="${name}"]`)!
            .addEventListener('click', handler);
    }

    return () => {
        for (const [name, handler] of Object.entries(actions)) {
            demo.querySelector<HTMLButtonElement>(`[data-demo-action="${name}"]`)!
                .removeEventListener('click', handler);
        }
        view.destroyModelBinding();
        view.destroy();
        model.destroy();
        demo.remove();
    };
}

npm install white-label-mediator

import Mediator from 'white-label-mediator';
const mediator = new Mediator();

Public API

Executable source

import Mediator from 'white-label-mediator';

/** Run the exact Mediator example rendered in the documentation. */
export function initializeMediatorExample(documentRoot: Document): () => void {
    const host = documentRoot.querySelector<HTMLElement>('#mediator .doc-card__body');
    if (!host) {return () => undefined;}

    const demo = documentRoot.createElement('section');
    demo.className = 'feature-card';
    demo.dataset.liveDemo = 'mediator';
    demo.innerHTML = `
        <p class="eyebrow">Live in your browser</p>
        <h4>Publish / subscribe lifecycle</h4>
        <p>This is the same TypeScript module shown above. It demonstrates typed callback payloads, synchronous delivery, once-only listeners, targeted teardown, listener counts, and full mediator destruction.</p>
        <div class="hero__actions">
            <button class="button button--primary" type="button" data-demo-action="publish">Publish event</button>
            <button class="button button--ghost" type="button" data-demo-action="remove">Remove regular listener</button>
            <button class="button button--ghost" type="button" data-demo-action="restore">Restore listener</button>
            <button class="button button--ghost" type="button" data-demo-action="clear">Clear log</button>
        </div>
        <div class="feature-card feature-card--green" aria-live="polite" data-demo-output></div>`;
    host.append(demo);

    const output = demo.querySelector<HTMLElement>('[data-demo-output]')!;
    const mediator = new Mediator().initialize();
    const messages: string[] = [];
    let sequence = 0;
    let regularListenerAttached = true;

    const render = (): void => {
        output.textContent = `${messages[0] ?? 'Waiting for an event'} — regular listeners: ${mediator.listenerCount('demo:message')}`;
    };
    const receive = (message: string): void => {
        messages.unshift(`regular: ${message}`);
        messages.length = Math.min(messages.length, 1);
        render();
    };
    const receiveOnce = (value: number): void => {
        messages.unshift(`once: first publish was #${value}`);
        messages.length = Math.min(messages.length, 1);
        render();
    };

    mediator.on('demo:message', receive);
    mediator.once('demo:once', receiveOnce);

    const publish = (): void => {
        sequence += 1;
        mediator.emit('demo:once', sequence);
        mediator.emit('demo:message', `message ${sequence} received`);
    };
    const remove = (): void => {
        if (!regularListenerAttached) {return;}
        mediator.removeListener('demo:message', receive);
        regularListenerAttached = false;
        messages.unshift('regular listener removed');
        messages.length = Math.min(messages.length, 1);
        render();
    };
    const restore = (): void => {
        if (regularListenerAttached) {return;}
        mediator.on('demo:message', receive);
        regularListenerAttached = true;
        messages.unshift('regular listener restored');
        messages.length = Math.min(messages.length, 1);
        render();
    };
    const clear = (): void => {
        messages.length = 0;
        render();
    };
    const actions: Record<string, () => void> = {publish, remove, restore, clear};

    for (const [name, handler] of Object.entries(actions)) {
        demo.querySelector<HTMLButtonElement>(`[data-demo-action="${name}"]`)!
            .addEventListener('click', handler);
    }
    render();

    return () => {
        for (const [name, handler] of Object.entries(actions)) {
            demo.querySelector<HTMLButtonElement>(`[data-demo-action="${name}"]`)!
                .removeEventListener('click', handler);
        }
        mediator.removeListener('demo:message', receive);
        mediator.destroy();
        demo.remove();
    };
}

const router = new Router();
router.routes = {'/products': route};
// initialize() dispatches the current URL and returns this router.
router.initialize();

const router = new Router();
router.routes = {'/products': route};
// Pass the request URL explicitly when no browser location exists.
router.initialize('/products/42?color=blue');

Public API

Executable source

import Router from 'white-label-router';

type DemoRoute = (scope: Element | null, location: Router.Location) => void;

/** A route callback and cleanup pair used by the site's real Router instance. */
export interface RouterExample {
    route: DemoRoute;
    destroy(): void;
}

/** Run the exact Router example rendered in the documentation. */
export function initializeRouterExample(documentRoot: Document, router: Router): RouterExample {
    const host = documentRoot.querySelector<HTMLElement>('#router .doc-card__body');
    if (!host) {
        return {route: () => undefined, destroy: () => undefined};
    }

    const demo = documentRoot.createElement('section');
    demo.className = 'feature-card';
    demo.dataset.liveDemo = 'router';
    demo.innerHTML = `
        <p class="eyebrow">Live in your browser</p>
        <h4>History API navigation with real links</h4>
        <p>This is the same TypeScript module shown above. The links are progressive-enhancement anchors handled by the site's real Router, while the button demonstrates programmatic navigation and mediator payload data.</p>
        <nav class="doc-tabs" aria-label="Router live demo">
            <a href="/?package=router&demo=home#router" data-pushstate data-router-demo-link="home">Home</a>
            <a href="/?package=router&demo=products#router" data-pushstate data-router-demo-link="products">Products</a>
            <a href="/?package=router&demo=settings#router" data-pushstate data-router-demo-link="settings">Settings</a>
        </nav>
        <div class="hero__actions">
            <button class="button button--primary" type="button" data-demo-action="navigate">Navigate to Settings from JavaScript</button>
        </div>
        <div class="feature-card feature-card--violet" aria-live="polite" data-router-demo-output></div>`;
    host.append(demo);

    const output = demo.querySelector<HTMLElement>('[data-router-demo-output]')!;
    const titles: Record<string, string> = {
        home: 'Home dashboard',
        products: 'Products route',
        settings: 'Settings route'
    };

    const route: DemoRoute = (_scope, location): void => {
        const requested = location.data.query.demo;
        const selected = requested === 'products' || requested === 'settings' ? requested : 'home';
        const source = location.data.mediator?.source;
        const title = titles[selected] ?? selected;
        output.textContent = source
            ? `${title} — navigation source: ${String(source)}`
            : title;
        for (const link of demo.querySelectorAll<HTMLAnchorElement>('[data-router-demo-link]')) {
            if (link.dataset.routerDemoLink === selected) {link.setAttribute('aria-current', 'page');}
            else {link.removeAttribute('aria-current');}
        }
    };

    const navigate = (): void => {
        router.navigate('/?package=router&demo=settings#router', {source: 'router.navigate()'});
    };
    const button = demo.querySelector<HTMLButtonElement>('[data-demo-action="navigate"]')!;
    button.addEventListener('click', navigate);

    const current = new URL(documentRoot.defaultView?.location.href ?? 'https://example.com/');
    route(router.scope, {
        url: current.pathname + current.search,
        data: {
            url: [],
            mediator: {},
            query: Object.fromEntries(current.searchParams)
        }
    });

    return {
        route,
        destroy() {
            button.removeEventListener('click', navigate);
            demo.remove();
        }
    };
}