rerender-lens 0.5.0 → 0.7.0

package/dist/cli.js

@@ -3,6 +3,7 @@ import { writeFileSync, readFileSync, existsSync } from 'fs';
 import { createServer } from 'http';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
+import { randomBytes } from 'crypto';
 
 // src/diff.ts
 var AVOIDABLE_KINDS = /* @__PURE__ */ new Set(["deep-equal", "function", "element"]);
@@ -402,6 +403,8 @@ function checkBudget(reports, budget) {
 function toBudget(reports) {
   return { "*": 0, ...avoidableCounts(reports) };
 }
+var MARKER = "__rerenderLens";
+var PROTOCOL = 2;
 var MIME = { ".html": "text/html; charset=utf-8", ".js": "text/javascript; charset=utf-8", ".css": "text/css; charset=utf-8" };
 function findPanelDir() {
   const here = dirname(fileURLToPath(import.meta.url));
@@ -436,26 +439,55 @@ function createRelayServer(options = {}) {
   const host = options.host ?? "127.0.0.1";
   const panelDir = options.panelDir === void 0 ? findPanelDir() : options.panelDir;
   const keepAliveMs = options.keepAliveMs ?? 15e3;
-  const apps = /* @__PURE__ */ new Set();
+  const token = options.token || null;
+  const apps = /* @__PURE__ */ new Map();
   const panels = /* @__PURE__ */ new Set();
   let url = "";
-  const send = (targets, message) => {
-    const line = `data: ${JSON.stringify(message)}
+  let nextAppId = 1;
+  const connectUrl = () => token ? `${url}?token=${encodeURIComponent(token)}` : url;
+  const line = (message) => `data: ${JSON.stringify(message)}
 
 `;
-    for (const res of targets) {
+  const sendTo = (res, message) => {
+    try {
+      res.write(line(message));
+    } catch {
+      apps.delete(res);
+      panels.delete(res);
+    }
+  };
+  const send = (targets, message) => {
+    const text = line(message);
+    for (const res of [...targets]) {
       try {
-        res.write(line);
+        res.write(text);
       } catch {
-        targets.delete(res);
+        apps.delete(res);
+        panels.delete(res);
       }
     }
   };
-  const route = (message) => {
+  const appList = () => [...apps.values()];
+  const roster = () => ({ [MARKER]: true, version: PROTOCOL, type: "relay", payload: { apps: apps.size, list: appList() } });
+  const streamOf = (id) => {
+    for (const [res, app] of apps) if (app.id === id) return res;
+    return null;
+  };
+  const route = (message, from) => {
     if (!message || typeof message !== "object") return;
     const m = message;
-    if (m.__rerenderLensCmd === true) send(apps, m);
-    else if (m.__rerenderLens === true || m.__rerenderLensReply === true) send(panels, m);
+    if (m.__rerenderLensCmd === true) {
+      const target = typeof m.app === "string" ? streamOf(m.app) : null;
+      if (target) sendTo(target, m);
+      else send(apps.keys(), m);
+    } else if (m.__rerenderLens === true || m.__rerenderLensReply === true) {
+      send(panels, from ? { ...m, app: from.id } : m);
+    }
+  };
+  const authorized = (req, u) => {
+    if (!token) return true;
+    const given = u.searchParams.get("token") || (typeof req.headers["x-rerender-lens-token"] === "string" ? req.headers["x-rerender-lens-token"] : "");
+    return given === token;
   };
   const server = createServer(async (req, res) => {
     cors(res);
@@ -467,18 +499,26 @@ function createRelayServer(options = {}) {
     }
     if (u.pathname === "/" && req.method === "GET") {
       res.statusCode = 302;
-      res.setHeader("Location", `/panel.html?relay=${encodeURIComponent(url)}`);
+      res.setHeader("Location", `/panel.html?relay=${encodeURIComponent(connectUrl())}`);
       res.end();
       return;
     }
+    if (/^\/(events|message|status)$/.test(u.pathname) && !authorized(req, u)) {
+      res.statusCode = 401;
+      res.setHeader("Content-Type", "text/plain");
+      res.end("rerender-lens relay: this relay needs the token from the URL it printed (?token=...)");
+      return;
+    }
     if (u.pathname === "/events" && req.method === "GET") {
-      const role = u.searchParams.get("role") === "app" ? apps : panels;
+      const isApp = u.searchParams.get("role") === "app";
       res.statusCode = 200;
       res.setHeader("Content-Type", "text/event-stream");
       res.setHeader("Cache-Control", "no-store");
       res.setHeader("Connection", "keep-alive");
       res.write(": connected\n\n");
-      role.add(res);
+      const app = isApp ? { id: `a${nextAppId++}`, label: (u.searchParams.get("label") || req.headers.origin || "").slice(0, 120) || `app ${nextAppId - 1}` } : null;
+      if (app) apps.set(res, app);
+      else panels.add(res);
       const ping = setInterval(() => {
         try {
           res.write(": ping\n\n");
@@ -487,14 +527,15 @@ function createRelayServer(options = {}) {
       }, keepAliveMs);
       req.on("close", () => {
         clearInterval(ping);
-        role.delete(res);
+        apps.delete(res);
+        panels.delete(res);
       });
-      const count = () => ({ __rerenderLens: true, version: 2, type: "relay", payload: { apps: apps.size } });
-      if (role === apps) {
-        send(panels, count());
-        req.on("close", () => send(panels, count()));
+      if (app) {
+        sendTo(res, { __rerenderLensRelay: true, version: PROTOCOL, app: app.id });
+        send(panels, roster());
+        req.on("close", () => send(panels, roster()));
       } else {
-        send(/* @__PURE__ */ new Set([res]), count());
+        sendTo(res, roster());
       }
       return;
     }
@@ -506,7 +547,9 @@ function createRelayServer(options = {}) {
     if (u.pathname === "/message" && req.method === "POST") {
       try {
         const parsed = JSON.parse(await readBody(req) || "null");
-        for (const m of Array.isArray(parsed) ? parsed : [parsed]) route(m);
+        const sender = u.searchParams.get("app");
+        const from = sender ? appList().find((a) => a.id === sender) ?? void 0 : void 0;
+        for (const m of Array.isArray(parsed) ? parsed : [parsed]) route(m, from);
         res.statusCode = 204;
         res.end();
       } catch (e) {
@@ -519,7 +562,7 @@ function createRelayServer(options = {}) {
     if (u.pathname === "/status" && req.method === "GET") {
       res.statusCode = 200;
       res.setHeader("Content-Type", "application/json");
-      res.end(JSON.stringify({ ok: true, apps: apps.size, panels: panels.size }));
+      res.end(JSON.stringify({ ok: true, apps: apps.size, panels: panels.size, list: appList() }));
       return;
     }
     const file = u.pathname.replace(/^\//, "");
@@ -549,10 +592,12 @@ function createRelayServer(options = {}) {
       resolve({
         server,
         url,
+        connectUrl: connectUrl(),
         port,
         counts: () => ({ apps: apps.size, panels: panels.size }),
+        appList,
         close: () => new Promise((done) => {
-          for (const res of [...apps, ...panels]) res.end();
+          for (const res of [...apps.keys(), ...panels]) res.end();
           apps.clear();
           panels.clear();
           server.close(() => done());
@@ -561,8 +606,6 @@ function createRelayServer(options = {}) {
     });
   });
 }
-
-// src/cli.ts
 var read = (file) => JSON.parse(readFileSync(file, "utf8"));
 function summaryOf(file) {
   const parsed = parseExport(read(file));
@@ -570,14 +613,20 @@ function summaryOf(file) {
   if (parsed.sessions.length && !parsed.reports.length) return parsed.sessions[parsed.sessions.length - 1];
   return summarizeReports(parsed.reports, { name: file.replace(/^.*[\\/]/, "").replace(/\.json$/, "") });
 }
+var isLoopback = (host) => host === "127.0.0.1" || host === "localhost" || host === "::1";
 async function panelCommand(args) {
   const flag = (name) => {
     const i = args.indexOf(name);
     return i >= 0 ? args[i + 1] ?? "" : null;
   };
-  const relay = await createRelayServer({ port: Number(flag("--port") || 4141), host: flag("--host") || "127.0.0.1" });
-  console.log(`rerender-lens panel: ${relay.url}/`);
-  console.log(`in the app: createDevtoolsNotifier({ relay: '${relay.url}' })  or  window.__RERENDER_LENS_RELAY__ = '${relay.url}'`);
+  const host = flag("--host") || "127.0.0.1";
+  const given = flag("--token");
+  const token = args.includes("--no-token") ? null : given || (isLoopback(host) ? null : randomToken());
+  const relay = await createRelayServer({ port: Number(flag("--port") || 4141), host, token: token ?? void 0 });
+  console.log(`rerender-lens panel: ${relay.connectUrl}/`);
+  console.log(`in the app: createDevtoolsNotifier({ relay: '${relay.connectUrl}' })  or  window.__RERENDER_LENS_RELAY__ = '${relay.connectUrl}'`);
+  if (token) console.log("The token in that URL is required: reports carry your app's prop, state and context values.");
+  else if (!isLoopback(host)) console.log(`WARNING: ${host} is reachable by other machines and --no-token was given: anyone who can reach this port can read every report.`);
   console.log("Ctrl+C to stop.");
   return new Promise((resolve) => {
     const stop = () => void relay.close().then(() => resolve(0));
@@ -586,6 +635,9 @@ async function panelCommand(args) {
     relay.server.once("close", () => resolve(0));
   });
 }
+function randomToken() {
+  return randomBytes(16).toString("base64url");
+}
 function main(argv) {
   const [cmd, ...args] = argv;
   if (cmd === "panel") return panelCommand(args).catch((e) => (console.error(e.message), 1));