UDN/static/dist/index.js

(() => {
  // static/node_modules/bloatless-react/index.ts
  var State = class {
    _value;
    _bindings = /* @__PURE__ */ new Set();
    // init
    constructor(initialValue) {
      this._value = initialValue;
    }
    // value
    get value() {
      return this._value;
    }
    set value(newValue) {
      if (this._value == newValue) return;
      this._value = newValue;
      this.callSubscriptions();
    }
    // subscriptions
    callSubscriptions() {
      this._bindings.forEach((fn) => fn(this._value));
    }
    subscribe(fn) {
      this._bindings.add(fn);
      fn(this._value);
    }
    // stringify
    toString() {
      return JSON.stringify(this._value);
    }
  };
  var ListState = class extends State {
    additionHandlers = /* @__PURE__ */ new Set();
    removalHandlers = /* @__PURE__ */ new Map();
    // init
    constructor(initialItems) {
      super(new Set(initialItems));
    }
    // list
    add(...items) {
      items.forEach((item) => {
        this.value.add(item);
        this.additionHandlers.forEach((handler) => handler(item));
      });
      this.callSubscriptions();
    }
    remove(...items) {
      items.forEach((item) => {
        this.value.delete(item);
        if (!this.removalHandlers.has(item)) return;
        this.removalHandlers.get(item)(item);
        this.removalHandlers.delete(item);
      });
      this.callSubscriptions();
    }
    clear() {
      this.remove(...this.value.values());
    }
    // handlers
    handleAddition(handler) {
      this.additionHandlers.add(handler);
      [...this.value.values()].forEach(handler);
    }
    handleRemoval(item, handler) {
      this.removalHandlers.set(item, handler);
    }
    // stringification
    toString() {
      const array = [...this.value];
      const json = JSON.stringify(array);
      return json;
    }
  };
  function createProxyState(statesToSubscibe, fn) {
    const proxyState = new State(fn());
    statesToSubscibe.forEach(
      (state) => state.subscribe(() => proxyState.value = fn())
    );
    return proxyState;
  }
  function persistState(localStorageKey, state) {
    state.subscribe(() => {
      const stringifiedValue = state.toString();
      localStorage.setItem(localStorageKey, stringifiedValue);
    });
  }
  function restoreState(localStorageKey, initialStateValue) {
    const storedString = localStorage.getItem(localStorageKey) ?? JSON.stringify(initialStateValue);
    const convertedValue = JSON.parse(storedString);
    const state = new State(convertedValue);
    persistState(localStorageKey, state);
    return state;
  }
  function createElement(tagName, attributes = {}, ...children) {
    const element = document.createElement(tagName);
    if (attributes != null)
      Object.entries(attributes).forEach((entry) => {
        const [attributename, value] = entry;
        const [directiveKey, directiveValue] = attributename.split(":");
        switch (directiveKey) {
          case "on": {
            switch (directiveValue) {
              case "enter": {
                element.addEventListener("keydown", (e) => {
                  if (e.key != "Enter") return;
                  value();
                });
                break;
              }
              default: {
                element.addEventListener(directiveValue, value);
              }
            }
            break;
          }
          case "subscribe": {
            if (directiveValue == "children") {
              element.style.scrollBehavior = "smooth";
              try {
                const [listState, toElement] = value;
                listState.handleAddition((newItem) => {
                  const child = toElement(newItem);
                  listState.handleRemoval(
                    newItem,
                    () => child.remove()
                  );
                  element.append(child);
                  element.scrollTop = element.scrollHeight;
                });
              } catch {
                throw `error: cannot process subscribe:children directive because ListItemConverter is not defined. Usage: "subscribe:children={[list, converter]}"; you can find a more detailed example in the documentation`;
              }
            } else {
              const state = value;
              state.subscribe(
                (newValue) => element[directiveValue] = newValue
              );
            }
            break;
          }
          case "bind": {
            const state = value;
            state.subscribe(
              (newValue) => element[directiveValue] = newValue
            );
            element.addEventListener(
              "input",
              () => state.value = element[directiveValue]
            );
            break;
          }
          case "toggle": {
            if (value.subscribe) {
              const state = value;
              state.subscribe(
                (newValue) => element.toggleAttribute(directiveValue, newValue)
              );
            } else {
              element.toggleAttribute(directiveValue, value);
            }
            break;
          }
          case "set": {
            const state = value;
            state.subscribe(
              (newValue) => element.setAttribute(directiveValue, newValue)
            );
            break;
          }
          default:
            element.setAttribute(attributename, value);
        }
      });
    children.filter((x) => x).forEach((child) => element.append(child));
    return element;
  }

  // static/node_modules/udn-frontend/index.ts
  var UDNFrontend = class {
    ws;
    // HANDLERS
    connectionHandler = () => {
    };
    disconnectionHandler = () => {
    };
    messageHandler = (data) => {
    };
    mailboxHandler = (mailboxId2) => {
    };
    mailboxConnectionHandler = (mailboxId2) => {
    };
    mailboxDeleteHandler = (mailboxId2) => {
    };
    // INIT
    set onconnect(handler) {
      this.connectionHandler = handler;
    }
    set ondisconnect(handler) {
      this.disconnectionHandler = handler;
    }
    set onmessage(handler) {
      this.messageHandler = handler;
    }
    set onmailboxcreate(handler) {
      this.mailboxHandler = handler;
    }
    set onmailboxconnect(handler) {
      this.mailboxConnectionHandler = handler;
    }
    set onmailboxdelete(handler) {
      this.mailboxDeleteHandler = handler;
    }
    // UTILITY METHODS
    send(messageObject) {
      if (this.ws == void 0) return false;
      const messageString = JSON.stringify(messageObject);
      this.ws.send(messageString);
      return true;
    }
    // PUBLIC METHODS
    // connection
    connect(address) {
      try {
        this.disconnect();
        this.ws = new WebSocket(address);
        this.ws.addEventListener("open", this.connectionHandler);
        this.ws.addEventListener("close", this.disconnectionHandler);
        this.ws.addEventListener("message", (message) => {
          const dataString = message.data.toString();
          const data = JSON.parse(dataString);
          if (data.assignedMailboxId) {
            return this.mailboxHandler(data.assignedMailboxId);
          } else if (data.connectedMailboxId) {
            return this.mailboxConnectionHandler(data.connectedMailboxId);
          } else if (data.deletedMailbox) {
            return this.mailboxDeleteHandler(data.deletedMailbox);
          } else {
            this.messageHandler(data);
          }
        });
      } catch (error) {
        console.error(error);
      }
    }
    disconnect() {
      this.ws?.close();
    }
    // message
    sendMessage(channel, body) {
      const messageObject = {
        messageChannel: channel,
        messageBody: body
      };
      return this.send(messageObject);
    }
    // subscription
    subscribe(channel) {
      const messageObject = {
        subscribeChannel: channel
      };
      return this.send(messageObject);
    }
    unsubscribe(channel) {
      const messageObject = {
        unsubscribeChannel: channel
      };
      return this.send(messageObject);
    }
    // mailbox
    requestMailbox() {
      const messageObject = {
        requestingMailboxSetup: true
      };
      return this.send(messageObject);
    }
    connectMailbox(mailboxId2) {
      const messageObject = {
        requestedMailbox: mailboxId2
      };
      return this.send(messageObject);
    }
    deleteMailbox(mailboxId2) {
      const messageObject = {
        deletingMailbox: mailboxId2
      };
      return this.send(messageObject);
    }
  };

  // static/src/translations.tsx
  var staticTextEnglish = {
    mailbox: "Mailbox",
    requestMailbox: "Request",
    deleteMailbox: "Delete",
    mailboxConnected: "Mailbox active",
    channel: "Channel",
    channel_placeholder: "my-channel",
    disconnected: "Server disconnected",
    reconnecting: "Reconnecting...",
    info: "Info",
    message: "Message",
    messages: "Messages",
    message_placeholder: "Hello, world!",
    message_placeholder_generic: "Type a message...",
    noMessagesReceived: "No messages received",
    messageLastReceived: "Last received message",
    messagesReceived: "Received Messages",
    send: "Send",
    serverInfo: "Server Info",
    settings: "Settings",
    subscribeToChannel: "Subscribe to channel",
    subscribe: "Subscribe",
    unsubscribe: "Unubscribe"
  };
  var allTranslations = {
    en: staticTextEnglish,
    es: {
      mailbox: "Buz\xF3n",
      requestMailbox: "Solicitar",
      deleteMailbox: "Eliminar",
      mailboxConnected: "Buz\xF3n activado",
      channel: "Canal",
      channel_placeholder: "mi-canal",
      disconnected: "Sin coneci\xF3n",
      reconnecting: "Conectando...",
      info: "Info",
      message: "Mensaje",
      messages: "Mensajes",
      message_placeholder: "Hola!",
      message_placeholder_generic: "Nuevo mensaje",
      noMessagesReceived: "Sin mensajes",
      messageLastReceived: "\xDAltimo mensaje",
      messagesReceived: "Todos los Mensajes",
      send: "Enviar",
      serverInfo: "Informaci\xF3n",
      settings: "Configuraci\xF3n",
      subscribeToChannel: "Suscribirse a un canal",
      subscribe: "Suscribirse",
      unsubscribe: "Cancelar"
    },
    de: {
      mailbox: "Briefkasten",
      requestMailbox: "Beantragen",
      deleteMailbox: "L\xF6schen",
      mailboxConnected: "Briefkasten aktiv",
      channel: "Kanal",
      channel_placeholder: "mein-kanal",
      disconnected: "Verbindung getrennt",
      reconnecting: "Verbindung wird hergestellt...",
      info: "Daten",
      message: "Nachricht",
      messages: "Nachrichten",
      message_placeholder: "Hallo!",
      message_placeholder_generic: "Neue Nachricht",
      noMessagesReceived: "Keine Nachrichten",
      messageLastReceived: "Letzte Nachricht",
      messagesReceived: "Empfangene Nachrichten",
      send: "Senden",
      serverInfo: "Serverdaten",
      settings: "Einstellungen",
      subscribeToChannel: "Kanal beitreten",
      subscribe: "Beitreten",
      unsubscribe: "Verlassen"
    }
  };
  var language = navigator.language.substring(0, 2);
  var translations = allTranslations[language];

  // static/src/model.tsx
  var Message = class {
    constructor(channel, body) {
      this.channel = channel;
      this.body = body;
    }
  };
  var isDisconnected = new State(true);
  var mailboxId = restoreState("mailbox-id", "");
  var isMailboxDisonnected = new State(true);
  var messages = new ListState();
  var lastReceivedMessage = new State(
    translations.noMessagesReceived
  );
  var statHTMLString = new State("");
  async function updateStats() {
    const response = await fetch(
      `${window.location.protocol}//${window.location.host}/stats`
    );
    const data = await response.json();
    let html = "";
    data.forEach((item) => {
      const tile = /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("div", { class: "flex-column align-start" }, /* @__PURE__ */ createElement("span", { class: "secondary flex width-100" }, item[0].toString()), ...item[1].toString().split("\n").map((string) => /* @__PURE__ */ createElement("b", null, string))));
      html += tile.outerHTML;
    });
    statHTMLString.value = html;
  }
  var subscriptionChannel = new State("");
  var newMessageChannel = new State("");
  var newMessageBody = new State("");
  var isMessageEmpty = createProxyState(
    [newMessageChannel, newMessageBody],
    () => newMessageChannel.value == "" || newMessageBody.value == ""
  );
  var UDN = new UDNFrontend();
  UDN.onconnect = () => {
    isDisconnected.value = false;
    updateStats();
    if (mailboxId.value != "") {
      UDN.connectMailbox(mailboxId.value);
    }
  };
  UDN.onmessage = (data) => {
    lastReceivedMessage.value = JSON.stringify(data, null, 4);
    const { messageChannel, messageBody } = data;
    if (messageChannel && messageBody) {
      const messageObject = new Message(messageChannel, messageBody);
      if (messageBody) messages.add(messageObject);
    }
  };
  UDN.onmailboxcreate = (id) => {
    console.log(id);
    mailboxId.value = id;
    UDN.connectMailbox(id);
  };
  UDN.onmailboxconnect = () => {
    isMailboxDisonnected.value = false;
  };
  UDN.onmailboxdelete = () => {
    isMailboxDisonnected.value = true;
  };
  UDN.ondisconnect = () => {
    isDisconnected.value = true;
    isMailboxDisonnected.value = true;
    setTimeout(connect, 1e3);
  };
  function connect() {
    UDN.connect(
      `${window.location.protocol.replace("http", "ws")}//${window.location.host}`
    );
  }
  connect();
  function subscribe() {
    UDN.subscribe(subscriptionChannel.value);
  }
  function unsubscribe() {
    UDN.unsubscribe(subscriptionChannel.value);
  }
  function sendMessage() {
    if (isMessageEmpty.value == true) return;
    UDN.sendMessage(newMessageChannel.value, newMessageBody.value);
    newMessageBody.value = "";
  }
  function requestMailbox() {
    UDN.requestMailbox();
  }
  function deleteMailbox() {
    UDN.deleteMailbox(mailboxId.value);
  }

  // static/src/infoScreen.tsx
  function InfoScreen() {
    return /* @__PURE__ */ createElement("article", { id: "info-screen" }, /* @__PURE__ */ createElement("header", null, translations.serverInfo, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement("button", { "on:click": updateStats }, /* @__PURE__ */ createElement("span", { class: "icon" }, "refresh")))), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement(
      "div",
      {
        class: "flex-column gap",
        "subscribe:innerHTML": statHTMLString
      }
    )));
  }

  // static/src/mainScreen.tsx
  function MainScreen() {
    return /* @__PURE__ */ createElement("article", { id: "main-screen" }, /* @__PURE__ */ createElement("header", null, translations.settings), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "tile width-input" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.messageLastReceived), /* @__PURE__ */ createElement(
      "p",
      {
        class: "secondary",
        "subscribe:innerText": lastReceivedMessage
      }
    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "tile width-input" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.mailbox), /* @__PURE__ */ createElement(
      "p",
      {
        class: "secondary",
        "toggle:hidden": isMailboxDisonnected
      },
      translations.mailboxConnected
    ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement(
      "button",
      {
        class: "danger width-50",
        "on:click": deleteMailbox,
        "toggle:disabled": isMailboxDisonnected
      },
      translations.deleteMailbox
    ), /* @__PURE__ */ createElement(
      "button",
      {
        class: "primary width-50",
        "on:click": requestMailbox,
        "toggle:disabled": isDisconnected
      },
      translations.requestMailbox,
      /* @__PURE__ */ createElement("span", { class: "icon" }, "inbox")
    )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.subscribeToChannel), /* @__PURE__ */ createElement(
      "input",
      {
        placeholder: translations.channel_placeholder,
        "bind:value": subscriptionChannel,
        "on:enter": subscribe
      }
    ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement("button", { class: "danger width-50", "on:click": unsubscribe }, translations.unsubscribe), /* @__PURE__ */ createElement("button", { class: "primary width-50", "on:click": subscribe }, translations.subscribe, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.channel), /* @__PURE__ */ createElement(
      "input",
      {
        placeholder: translations.channel_placeholder,
        "bind:value": newMessageChannel,
        "on:enter": sendMessage
      }
    ))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.message), /* @__PURE__ */ createElement(
      "input",
      {
        placeholder: translations.message_placeholder,
        "bind:value": newMessageBody,
        "on:enter": sendMessage
      }
    ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement(
      "button",
      {
        class: "primary width-50",
        "on:click": sendMessage,
        "toggle:disabled": isMessageEmpty
      },
      translations.send,
      /* @__PURE__ */ createElement("span", { class: "icon" }, "send")
    ))));
  }

  // static/src/messageScreen.tsx
  var convertMessageToElement = (message) => {
    return /* @__PURE__ */ createElement("div", { class: "tile", style: "flex: 0" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, message.channel), /* @__PURE__ */ createElement("b", null, message.body)));
  };
  function MessageScreen() {
    return /* @__PURE__ */ createElement("article", { id: "message-screen" }, /* @__PURE__ */ createElement("header", null, translations.messagesReceived), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement(
      "div",
      {
        class: "flex-column gap",
        "subscribe:children": [messages, convertMessageToElement]
      }
    )), /* @__PURE__ */ createElement("footer", null, /* @__PURE__ */ createElement(
      "input",
      {
        style: "max-width: unset",
        placeholder: translations.message_placeholder_generic,
        "bind:value": newMessageBody,
        "on:enter": sendMessage
      }
    ), /* @__PURE__ */ createElement(
      "button",
      {
        class: "primary",
        "on:click": sendMessage,
        "toggle:disabled": isMessageEmpty
      },
      /* @__PURE__ */ createElement("span", { class: "icon" }, "send")
    )));
  }

  // static/src/index.tsx
  document.body.prepend(
    /* @__PURE__ */ createElement("menu", null, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#info-screen", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "info"), translations.info), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#main-screen" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), translations.settings), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#message-screen" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "chat"), translations.messages))
  );
  document.querySelector("main").append(InfoScreen(), MainScreen(), MessageScreen());
  document.body.append(
    /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isDisconnected }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement(
      "div",
      {
        class: "flex-column align-center justify-center width-100 height-100",
        style: "gap: 1rem"
      },
      /* @__PURE__ */ createElement("span", { class: "icon error", style: "font-size: 3rem" }, "signal_disconnected"),
      /* @__PURE__ */ createElement("h1", { class: "error" }, translations.disconnected),
      /* @__PURE__ */ createElement("p", { class: "secondary" }, translations.reconnecting)
    ))))
  );
})();