Actors – DDI

Direct messages

Send messages to specific actor

A

B

<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>

Topics

Send messages to topics

<ddi-postoffice id="actors-example-office" name="topics-office">
    <div class="bg p:airy rounded flow">
        <div class="x-flow">
            <ddi-minus-button><button>-</button></ddi-minus-button>
            <ddi-plus-button><button>+</button></ddi-plus-button>
        </div>
        <ddi-counter class="center font-size:xl">0</ddi-counter>
    </div>
</ddi-postoffice>

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

    declare module "@dynamic-type/ddi/client" {
        interface Topics {
            increase: number;
            decrease: number;
        }
    }

    registerTag(
        class PlusButton extends Actor {
            static tagName = "ddi-plus-button";
            observedEvents = {
                click: () => {
                    this.send({
                        topic: "increase",
                        payload: Math.random(),
                    });
                },
            };
        },
    );

    initPostofficeElement();

    registerTag(
        class Counter extends Actor {
            static tagName = "ddi-counter";

            observedTopics: Callbacks = {
                increase: (letter) => {
                    this.innerText =
                        `${Number(this.innerText) + letter.payload}`.slice(
                            0,
                            5,
                        );
                    return ok();
                },
                decrease: (letter) => {
                    this.innerText =
                        `${Number(this.innerText) - letter.payload}`.slice(
                            0,
                            5,
                        );
                    return ok();
                },
            };
        },
    );

    registerTag(
        class MinusButton extends Actor {
            static tagName = "ddi-minus-button";

            observedEvents = {
                click: () => {
                    this.send({
                        topic: "decrease",
                        payload: Math.random(),
                    });
                },
            };
        },
    );
</script>

Using Postoffice and Postbox directly

Using postboxes and a postoffice directly.

<div id="wrapper" class="bg p:airy rounded flow">
    <div class="x-flow">
        <button id="minus">-</button>
        <button id="plus">+</button>
    </div>
    <div id="counter" class="center font-size:xl">0</div>
</div>

<script>
    import { Postbox, Postoffice, ok } from "@dynamic-type/ddi/client";

    declare module "@dynamic-type/ddi/client" {
        interface Topics {
            increase: number;
            decrease: number;
        }
    }

    const plusButton = document.getElementById("plus")!;
    const plusBox = new Postbox().requestConnection(plusButton);
    plusButton.addEventListener("click", () => {
        plusBox.send({
            topic: "increase",
            payload: Math.random(),
        });
    });

    const wrapper = document.getElementById("wrapper")!;
    const office = new Postoffice(wrapper).activate();
    office.connect(
        new Postbox({
            increase: (letter) => {
                console.log("Letter sent", letter);
                return ok();
            },
            decrease: (letter) => {
                console.log("Letter sent", letter);
                return ok();
            },
        }),
    );

    const counter = document.getElementById("counter")!;
    new Postbox({
        increase: (letter) => {
            counter.innerText =
                `${Number(counter.innerText) + letter.payload}`.slice(0, 5);
            return ok();
        },
        decrease: (letter) => {
            counter.innerText =
                `${Number(counter.innerText) - letter.payload}`.slice(0, 5);
            return ok();
        },
    }).requestConnection(counter);

    const minusButton = document.getElementById("minus")!;
    const minusBox = new Postbox().requestConnection(minusButton);
    minusButton.addEventListener("click", () => {
        minusBox.send({
            topic: "decrease",
            payload: Math.random(),
        });
    });
</script>