VDOM with generators sample

vdom-generator-sample.jsx

import { render } from "vdom-generator";

function* Clock(props, update) {
    let clockText = new Date().toTimeString();

    const timer = setInterval(() => {
        clockText = new Date().toTimeString();
        update.onAnimationFrame();
    }, props.interval);

    let lastClockText = clockText;

    while ((props = yield)) {
        if (clockText !== lastClockText) {
            yield (
                <span>
                    {clockText}
                </span>
            );
        } else {
            yield null;
        }
    }

    clearInterval(timer);
}

async function CurrentMessage(props) {
    const messageResponse = await fetch("/api/message");
    const message = await messageResponse.text();

    return (
        <h1>
            {message}
        </h1>
    );
}

async function* NumberedMessage(_, update) {
    const getMessage = async number => {
        const messageResponse = await fetch("/api/message");
        return await messageResponse.text();
    };

    let messageNumber = 0;

    const handleUp = () => {
        messageNumber++;
        update();
    };

    const handleDown = () => {
        if (messageNumber > 0) {
            messageNumber--;
            update();
        }
    };

    const container = children =>
        <div>
            {children}
            <button onClick={handleDown}>Down</button>
            <button onClick={handleUp}>Up</button>
        </div>;

    while (yield) {
        yield container(<em>Loading...</em>);

        const message = await getMessage(messageNumber);
        yield container(
            <strong>
                {message}
            </strong>
        );
    }
}

const App = props =>
    <div>
        <Clock />
        <CurrentMessage />
        <NumberedMessage />
    </div>;

render(App, document.getElementById("app"));