Actors

<ddi-postoffice id="actors-example-office">
    <div class="bg p:airy rounded flow">
        <div class="x-flow">
            <div class="box rounded:4xs">
                <h2>A</h2>
                <ddi-receiver name="a">0</ddi-receiver>
            </div>
            <div class="box rounded:4xs">
                <h2>B</h2>
                <ddi-receiver name="b">0</ddi-receiver>
            </div>
        </div>
        <ddi-sender name="c"><button>Hit me!</button></ddi-sender>
    </div>
</ddi-postoffice>

<script>
    import {
        Actor,
        initPostofficeElement,
        registerTag,
        ok,
    } from "@dynamic-type/ddi/client";

    declare module "@dynamic-type/ddi/client" {
        interface Topics {
            ping: null;
        }
    }

    initPostofficeElement();

    registerTag(
        class Receiver extends Actor {
            static tagName = "ddi-receiver";

            get value() {
                return Number(this.innerText);
            }
            set value(value: number) {
                this.innerText = String(value);
            }

            observedTopics = {
                ping: () => {
                    this.value += 1;
                    return ok();
                },
            };
        },
    );

    registerTag(
        class Sender extends Actor {
            static tagName = "ddi-sender";

            observedEvents = {
                click: () => {
                    this.send({
                        topic: "ping",
                        to: Math.random() < 0.5 ? "a" : "b",
                        payload: null,
                    });
                },
            };
        },
    );
</script>