add channel communication

static/dist/index.js

@@ -1,5 +1,27 @@
 (() => {
   // node_modules/bloatless-react/index.ts
+  var State = class {
+    _value;
+    _bindings = /* @__PURE__ */ new Set();
+    constructor(initialValue) {
+      this._value = initialValue;
+    }
+    get value() {
+      return this._value;
+    }
+    set value(newValue) {
+      if (this._value == newValue) return;
+      this._value = newValue;
+      this.callSubscriptions();
+    }
+    callSubscriptions() {
+      this._bindings.forEach((fn) => fn(this._value));
+    }
+    subscribe(fn) {
+      this._bindings.add(fn);
+      fn(this._value);
+    }
+  };
   function createElement(tagName, attributes = {}, ...children) {
     const element = document.createElement(tagName);
     if (attributes != null)
@@ -58,7 +80,36 @@
 
   // src/index.tsx
   var ws = new WebSocket(`ws://${window.location.host}`);
-  ws.onopen = () => ws.send("Hello!");
-  ws.onmessage = (data) => console.log(data);
-  document.querySelector("main").append(/* @__PURE__ */ createElement("h1", null, "Hello there!"));
+  ws.addEventListener("message", (message) => {
+    receivedMessage.value = message.data;
+  });
+  function send(object) {
+    const stringified = JSON.stringify(object);
+    ws.send(stringified);
+  }
+  var receivedMessage = new State("");
+  var subscriptionChannel = new State("");
+  var messageChannel = new State("");
+  var messageBody = new State("");
+  function subscribe() {
+    send({ subscribeChannel: subscriptionChannel.value });
+  }
+  function unsubscribe() {
+    send({ unsubscribeChannel: subscriptionChannel.value });
+  }
+  function sendMessage() {
+    send({
+      messageChannel: messageChannel.value,
+      messageBody: messageBody.value
+    });
+  }
+  document.querySelector("main").append(
+    /* @__PURE__ */ createElement("article", null, /* @__PURE__ */ createElement("header", null, "UDN Test"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, "Received message"), /* @__PURE__ */ createElement("p", { class: "secondary", "subscribe:innerText": receivedMessage }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, "Subscribe to channel"), /* @__PURE__ */ createElement(
+      "input",
+      {
+        placeholder: "my-channel",
+        "bind:value": subscriptionChannel
+      }
+    ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement("button", { class: "danger width-50", "on:click": unsubscribe }, "Unsubscribe"), /* @__PURE__ */ createElement("button", { class: "primary width-50", "on:click": subscribe }, "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, "Channel"), /* @__PURE__ */ createElement("input", { placeholder: "my-channel", "bind:value": messageChannel }))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, "Message"), /* @__PURE__ */ createElement("input", { placeholder: "Hello, world!", "bind:value": messageBody }))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement("button", { class: "primary width-50", "on:click": sendMessage }, "Send", /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))))
+  );
 })();

static/src/index.tsx

@@ -1,8 +1,95 @@
 import * as React from "bloatless-react";
 
+// WS
 const ws = new WebSocket(`ws://${window.location.host}`);
 
-ws.onopen = () => ws.send("Hello!")
-ws.onmessage = (data) => console.log(data);
+ws.addEventListener("message", (message) => {
+  receivedMessage.value = message.data;
+});
 
-document.querySelector("main")!.append(<h1>Hello there!</h1>);
+function send(object: any) {
+  const stringified = JSON.stringify(object);
+  ws.send(stringified);
+}
+
+// STATE
+const receivedMessage = new React.State("");
+
+const subscriptionChannel = new React.State("");
+const messageChannel = new React.State("");
+const messageBody = new React.State("");
+
+function subscribe() {
+  send({ subscribeChannel: subscriptionChannel.value });
+}
+
+function unsubscribe() {
+  send({ unsubscribeChannel: subscriptionChannel.value });
+}
+
+function sendMessage() {
+  send({
+    messageChannel: messageChannel.value,
+    messageBody: messageBody.value,
+  });
+}
+
+// UI
+document.querySelector("main")!.append(
+  <article>
+    <header>UDN Test</header>
+    <div>
+      <div class="tile">
+        <div>
+          <b>Received message</b>
+          <p class="secondary" subscribe:innerText={receivedMessage}></p>
+        </div>
+      </div>
+
+      <hr></hr>
+
+      <label class="tile">
+        <div>
+          <span>Subscribe to channel</span>
+          <input
+            placeholder="my-channel"
+            bind:value={subscriptionChannel}
+          ></input>
+        </div>
+      </label>
+
+      <div class="flex-row width-input justify-end">
+        <button class="danger width-50" on:click={unsubscribe}>
+          Unsubscribe
+        </button>
+        <button class="primary width-50" on:click={subscribe}>
+          Subscribe
+          <span class="icon">arrow_forward</span>
+        </button>
+      </div>
+
+      <hr></hr>
+
+      <label class="tile">
+        <div>
+          <span>Channel</span>
+          <input placeholder="my-channel" bind:value={messageChannel}></input>
+        </div>
+      </label>
+
+      <label class="tile">
+        <div>
+          <span>Message</span>
+          <input placeholder="Hello, world!" bind:value={messageBody}></input>
+        </div>
+      </label>
+
+      <div class="flex-row width-input justify-end">
+        <button class="primary width-50" on:click={sendMessage}>
+          Send
+          <span class="icon">arrow_forward</span>
+        </button>
+      </div>
+    </div>
+  </article>
+);