release: WRNexusJS 0.8.3

packages/csr/src/realtime-runtime.ts

@@ -23,10 +23,29 @@ export const REALTIME_RUNTIME = String.raw`
   if (!("WebSocket" in window)) return;
   var wire = (window.wire = window.wire || {});
   if (wire.room) return; // already installed
-  var open = {}; // name -> room connection
+  var open = {}; // normalized room+query key -> room connection
+
+  function normalizedQuery(query) {
+    var params = new URLSearchParams(String(query || "").replace(/^\?/, ""));
+    var pairs = [];
+    params.forEach(function (value, name) { pairs.push([name, value]); });
+    pairs.sort(function (a, b) {
+      return a[0] === b[0] ? String(a[1]).localeCompare(String(b[1])) : String(a[0]).localeCompare(String(b[0]));
+    });
+    var normalized = new URLSearchParams();
+    pairs.forEach(function (pair) { normalized.append(pair[0], pair[1]); });
+    return normalized.toString();
+  }
+
+  function roomKey(name, query) {
+    var normalized = normalizedQuery(query);
+    return String(name || "") + (normalized ? "?" + normalized : "");
+  }
 
   function openRoom(name, query) {
-    if (open[name]) return open[name];
+    query = normalizedQuery(query);
+    var key = roomKey(name, query);
+    if (open[key]) return open[key];
     var ws = null, queue = [], listeners = [], attempts = 0, timer = null, closed = false;
 
     function url() {
@@ -69,6 +88,8 @@ export const REALTIME_RUNTIME = String.raw`
 
     var api = {
       name: name,
+      key: key,
+      query: query,
       send: function (obj) {
         var payload = typeof obj === "string" ? obj : JSON.stringify(obj);
         if (ws && ws.readyState === 1) ws.send(payload);
@@ -80,9 +101,9 @@ export const REALTIME_RUNTIME = String.raw`
         listeners.push({ type: type, cb: cb });
         return api;
       },
-      close: function () { closed = true; clearTimeout(timer); if (ws) try { ws.close(); } catch (_) {} ws = null; delete open[name]; },
+      close: function () { closed = true; clearTimeout(timer); if (ws) try { ws.close(); } catch (_) {} ws = null; delete open[key]; },
     };
-    open[name] = api;
+    open[key] = api;
     connect();
     return api;
   }
@@ -114,11 +135,14 @@ export const REALTIME_RUNTIME = String.raw`
   }
 
   function bindContainer(el) {
-    if (el.__wireRoomBound) return;
-    el.__wireRoomBound = true;
     var name = el.getAttribute("data-room");
     var user = el.getAttribute("data-room-user");
-    var room = openRoom(name, user ? "user=" + encodeURIComponent(user) : "");
+    var query = el.getAttribute("data-room-query") || (user ? "user=" + encodeURIComponent(user) : "");
+    var key = roomKey(name, query);
+    if (el.__wireRoomBound && el.__wireRoomKey === key) return;
+    el.__wireRoomBound = true;
+    el.__wireRoomKey = key;
+    var room = openRoom(name, query);
     el.__wireRoom = room;
 
     var log = el.querySelector("[data-room-log]");
@@ -161,7 +185,7 @@ export const REALTIME_RUNTIME = String.raw`
           var input = form.elements[i];
           if (input.name) data[input.name] = input.value;
         }
-        room.send(data);
+        if (el.__wireRoom) el.__wireRoom.send(data);
         for (var j = 0; j < form.elements.length; j++) {
           if (form.elements[j].hasAttribute("data-room-reset")) form.elements[j].value = "";
         }
@@ -173,8 +197,8 @@ export const REALTIME_RUNTIME = String.raw`
     var containers = (root || document).querySelectorAll("[data-room]");
     var present = {};
     for (var i = 0; i < containers.length; i++) {
-      present[containers[i].getAttribute("data-room")] = true;
       bindContainer(containers[i]);
+      if (containers[i].__wireRoomKey) present[containers[i].__wireRoomKey] = true;
     }
     // Close rooms whose container has left the page (client-side navigation).
     for (var nm in open) if (!present[nm]) open[nm].close();