implement udn-frontend package

static/dist/index.js

@@ -182,6 +182,65 @@
     return element;
   }
 
+  // ../node_modules/udn-frontend/index.ts
+  var UDNFrontend = class {
+    ws;
+    // handlers
+    connectionHandler = () => {
+    };
+    disconnectionHandler = () => {
+    };
+    messageHandler = (data) => {
+    };
+    // init
+    set onconnect(handler) {
+      this.connectionHandler = handler;
+    }
+    set ondisconnect(handler) {
+      this.disconnectionHandler = handler;
+    }
+    set onmessage(handler) {
+      this.messageHandler = 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
+    connect(address) {
+      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);
+        this.messageHandler(data);
+      });
+    }
+    sendMessage(channel, body) {
+      const messageObject = {
+        messageChannel: channel,
+        messageBody: body
+      };
+      return this.send(messageObject);
+    }
+    subscribe(channel) {
+      const messageObject = {
+        subscribeChannel: channel
+      };
+      return this.send(messageObject);
+    }
+    unsubscribe(channel) {
+      const messageObject = {
+        unsubscribeChannel: channel
+      };
+      return this.send(messageObject);
+    }
+  };
+
   // src/translations.tsx
   var staticTextEnglish = {
     channel: "Channel",
@@ -255,19 +314,20 @@
     }
     uuid = new UUID();
   };
-  var ws = new WebSocket(`ws://${window.location.host}`);
-  ws.addEventListener("open", () => updateStats());
-  ws.addEventListener("message", (message) => {
-    const formatted = formatMessage(message);
-    const { messageChannel, messageBody } = parseMessage(message);
-    if (formatted) {
-      lastReceivedMessage.value = formatted;
-    }
+  var UDN = new UDNFrontend();
+  UDN.onconnect = () => {
+    console.log("connected!");
+    updateStats();
+  };
+  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.connect(`ws://${window.location.host}`);
   var messages = new ListState();
   var lastReceivedMessage = new State(
     getText("noMessagesReceived")
@@ -292,32 +352,15 @@
     [newMessageChannel, newMessageBody],
     () => newMessageChannel.value == "" || newMessageBody.value == ""
   );
-  function formatMessage(message) {
-    const object = parseMessage(message);
-    const lines = Object.entries(object).map(
-      (entry) => `${entry[0]}: ${entry[1]}`
-    );
-    return lines.join("\n");
-  }
-  function parseMessage(message) {
-    return JSON.parse(message.data.toString());
-  }
-  function sendToWS(object) {
-    const stringified = JSON.stringify(object);
-    ws.send(stringified);
-  }
   function subscribe() {
-    sendToWS({ subscribeChannel: subscriptionChannel.value });
+    UDN.subscribe(subscriptionChannel.value);
   }
   function unsubscribe() {
-    sendToWS({ unsubscribeChannel: subscriptionChannel.value });
+    UDN.unsubscribe(subscriptionChannel.value);
   }
   function sendMessage() {
     if (isMessageEmpty.value == true) return;
-    sendToWS({
-      messageChannel: newMessageChannel.value,
-      messageBody: newMessageBody.value
-    });
+    UDN.sendMessage(newMessageChannel.value, newMessageBody.value);
     newMessageBody.value = "";
   }
 

static/src/mainScreen.tsx

@@ -1,7 +1,6 @@
 import * as React from "bloatless-react";
 
 import {
-  formatMessage,
   isMessageEmpty,
   lastReceivedMessage,
   newMessageBody,

static/src/messageScreen.tsx

@@ -5,7 +5,6 @@ import {
   isMessageEmpty,
   messages,
   newMessageBody,
-  parseMessage,
   sendMessage,
 } from "./model";
 

static/src/model.tsx

@@ -1,5 +1,6 @@
 import * as React from "bloatless-react";
 
+import UDNFrontend from "udn-frontend";
 import { getText } from "./translations";
 
 export class Message implements React.Identifiable {
@@ -8,23 +9,25 @@ export class Message implements React.Identifiable {
   constructor(public channel: string, public body: string) {}
 }
 
-// WS
-const ws = new WebSocket(`ws://${window.location.host}`);
+// UDN Frontend
+const UDN = new UDNFrontend();
 
-ws.addEventListener("open", () => updateStats());
+UDN.onconnect = () => {
+  console.log("connected!")
+  updateStats();
+};
 
-ws.addEventListener("message", (message) => {
-  const formatted = formatMessage(message);
-  const { messageChannel, messageBody } = parseMessage(message);
+UDN.onmessage = (data) => {
+  lastReceivedMessage.value = JSON.stringify(data, null, 4);
 
-  if (formatted) {
-    lastReceivedMessage.value = formatted;
-  }
+  const { messageChannel, messageBody } = data;
   if (messageChannel && messageBody) {
     const messageObject = new Message(messageChannel, messageBody);
     if (messageBody) messages.add(messageObject);
   }
-});
+};
+
+UDN.connect(`ws://${window.location.host}`)
 
 // STATE
 // messages
@@ -66,36 +69,16 @@ export const isMessageEmpty = React.createProxyState(
 );
 
 // METHODS
-export function formatMessage(message: MessageEvent<any>): string | undefined {
-  const object = parseMessage(message);
-  const lines = Object.entries(object).map(
-    (entry) => `${entry[0]}: ${entry[1]}`
-  );
-  return lines.join("\n");
-}
-
-export function parseMessage(message: MessageEvent<any>) {
-  return JSON.parse(message.data.toString());
-}
-
-export function sendToWS(object: any) {
-  const stringified = JSON.stringify(object);
-  ws.send(stringified);
-}
-
 export function subscribe() {
-  sendToWS({ subscribeChannel: subscriptionChannel.value });
+  UDN.subscribe(subscriptionChannel.value);
 }
 
 export function unsubscribe() {
-  sendToWS({ unsubscribeChannel: subscriptionChannel.value });
+  UDN.unsubscribe(subscriptionChannel.value);
 }
 
 export function sendMessage() {
   if (isMessageEmpty.value == true) return;
-  sendToWS({
-    messageChannel: newMessageChannel.value,
-    messageBody: newMessageBody.value,
-  });
+  UDN.sendMessage(newMessageChannel.value, newMessageBody.value);
   newMessageBody.value = "";
 }