@couch-kit/devtools 3.0.2 → 3.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @couch-kit/devtools
 
+## 3.0.3
+
+### Patch Changes
+
+- [#206](https://github.com/faluciano/react-native-couch-kit/pull/206) [`cfe5bbb`](https://github.com/faluciano/react-native-couch-kit/commit/cfe5bbb1ac46eca0cb006b07473fbfab32e0182b) Thanks [@faluciano](https://github.com/faluciano)! - Publish a bundle that actually contains `DebugOverlay`.
+
+  Every previous release shipped a 27-byte `dist/index.js` that exported `DebugOverlay` without defining it: with `sideEffects: false`, the bundler tree-shook the named re-export of the package's only value. The build also targeted React's development JSX runtime, which does not work in a production build. The entry point now uses `export *`, the bundle is built against `react/jsx-runtime`, and the build fails if either regresses.
+
 ## 3.0.2
 
 ### Patch Changes

package/dist/index.js

@@ -1,3 +1,372 @@
+// src/DebugOverlay.tsx
+import { useState, useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STATUS_COLORS = {
+  connected: "#4ade80",
+  connecting: "#facc15",
+  reconnecting: "#facc15",
+  disconnected: "#f87171",
+  error: "#f87171"
+};
+function formatTimestamp(ts) {
+  const date = new Date(ts);
+  return date.toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  }) + "." + String(date.getMilliseconds()).padStart(3, "0");
+}
+function JsonTree({ data, depth = 0 }) {
+  if (data === null || data === undefined) {
+    return /* @__PURE__ */ jsx("span", {
+      style: { color: "#9ca3af" },
+      children: String(data)
+    });
+  }
+  if (typeof data === "boolean") {
+    return /* @__PURE__ */ jsx("span", {
+      style: { color: "#c084fc" },
+      children: String(data)
+    });
+  }
+  if (typeof data === "number") {
+    return /* @__PURE__ */ jsx("span", {
+      style: { color: "#60a5fa" },
+      children: data
+    });
+  }
+  if (typeof data === "string") {
+    return /* @__PURE__ */ jsxs("span", {
+      style: { color: "#4ade80" },
+      children: [
+        '"',
+        data,
+        '"'
+      ]
+    });
+  }
+  if (Array.isArray(data)) {
+    if (data.length === 0)
+      return /* @__PURE__ */ jsx("span", {
+        children: "[]"
+      });
+    return /* @__PURE__ */ jsxs("span", {
+      children: [
+        `[
+`,
+        data.map((item, i) => /* @__PURE__ */ jsxs("span", {
+          children: [
+            "  ".repeat(depth + 1),
+            /* @__PURE__ */ jsx(JsonTree, {
+              data: item,
+              depth: depth + 1
+            }),
+            i < data.length - 1 ? "," : "",
+            `
+`
+          ]
+        }, i)),
+        "  ".repeat(depth),
+        "]"
+      ]
+    });
+  }
+  if (typeof data === "object") {
+    const entries = Object.entries(data);
+    if (entries.length === 0)
+      return /* @__PURE__ */ jsx("span", {
+        children: "{}"
+      });
+    return /* @__PURE__ */ jsxs("span", {
+      children: [
+        `{
+`,
+        entries.map(([key, value], i) => /* @__PURE__ */ jsxs("span", {
+          children: [
+            "  ".repeat(depth + 1),
+            /* @__PURE__ */ jsx("span", {
+              style: { color: "#93c5fd" },
+              children: key
+            }),
+            ": ",
+            /* @__PURE__ */ jsx(JsonTree, {
+              data: value,
+              depth: depth + 1
+            }),
+            i < entries.length - 1 ? "," : "",
+            `
+`
+          ]
+        }, key)),
+        "  ".repeat(depth),
+        "}"
+      ]
+    });
+  }
+  return /* @__PURE__ */ jsx("span", {
+    children: String(data)
+  });
+}
+function DebugOverlay({
+  data,
+  defaultCollapsed = true,
+  position = "bottom-right",
+  maxHeight = 400
+}) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const [activeTab, setActiveTab] = useState("actions");
+  const tapCountRef = useRef(0);
+  const tapTimerRef = useRef(null);
+  const handleToggle = useCallback(() => {
+    tapCountRef.current++;
+    if (tapTimerRef.current) {
+      clearTimeout(tapTimerRef.current);
+    }
+    tapTimerRef.current = setTimeout(() => {
+      tapCountRef.current = 0;
+    }, 300);
+    setCollapsed((prev) => !prev);
+  }, []);
+  if (!data.enabled)
+    return null;
+  const positionStyles = {
+    position: "fixed",
+    zIndex: 99999,
+    ...position.includes("top") ? { top: 8 } : { bottom: 8 },
+    ...position.includes("left") ? { left: 8 } : { right: 8 }
+  };
+  const statusColor = STATUS_COLORS[data.connectionStatus] ?? "#9ca3af";
+  const panelStyle = {
+    ...positionStyles,
+    fontFamily: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace",
+    fontSize: 11,
+    lineHeight: 1.4,
+    color: "#e5e7eb",
+    backgroundColor: "rgba(17, 24, 39, 0.95)",
+    border: "1px solid rgba(75, 85, 99, 0.6)",
+    borderRadius: 8,
+    overflow: "hidden",
+    width: collapsed ? "auto" : 360,
+    backdropFilter: "blur(8px)",
+    boxShadow: "0 4px 24px rgba(0, 0, 0, 0.4)"
+  };
+  const buttonStyle = {
+    background: "none",
+    border: "none",
+    color: "#e5e7eb",
+    cursor: "pointer",
+    padding: "6px 10px",
+    fontSize: 11,
+    fontFamily: "inherit"
+  };
+  const tabStyle = (isActive) => ({
+    ...buttonStyle,
+    borderBottom: isActive ? "2px solid #60a5fa" : "2px solid transparent",
+    color: isActive ? "#60a5fa" : "#9ca3af",
+    paddingBottom: 4
+  });
+  if (collapsed) {
+    return /* @__PURE__ */ jsx("div", {
+      style: positionStyles,
+      children: /* @__PURE__ */ jsxs("button", {
+        onClick: handleToggle,
+        style: {
+          ...buttonStyle,
+          backgroundColor: "rgba(17, 24, 39, 0.95)",
+          border: "1px solid rgba(75, 85, 99, 0.6)",
+          borderRadius: 8,
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "6px 12px",
+          backdropFilter: "blur(8px)",
+          boxShadow: "0 2px 12px rgba(0, 0, 0, 0.3)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            style: {
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              backgroundColor: statusColor,
+              display: "inline-block"
+            }
+          }),
+          /* @__PURE__ */ jsx("span", {
+            children: "Debug"
+          }),
+          data.rtt !== null && /* @__PURE__ */ jsxs("span", {
+            style: { color: "#9ca3af" },
+            children: [
+              data.rtt,
+              "ms"
+            ]
+          })
+        ]
+      })
+    });
+  }
+  const latestState = data.stateHistory.length > 0 ? data.stateHistory[data.stateHistory.length - 1]?.state : null;
+  return /* @__PURE__ */ jsxs("div", {
+    style: panelStyle,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "6px 10px",
+          borderBottom: "1px solid rgba(75, 85, 99, 0.4)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            style: { display: "flex", alignItems: "center", gap: 6 },
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                style: {
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  backgroundColor: statusColor,
+                  display: "inline-block"
+                }
+              }),
+              /* @__PURE__ */ jsx("span", {
+                style: { fontWeight: 600 },
+                children: "Debug"
+              }),
+              /* @__PURE__ */ jsxs("span", {
+                style: { color: "#9ca3af" },
+                children: [
+                  data.connectionStatus,
+                  data.rtt !== null ? ` · ${data.rtt}ms` : ""
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            style: { display: "flex", gap: 4 },
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                onClick: data.clearHistory,
+                style: buttonStyle,
+                title: "Clear",
+                children: "✕"
+              }),
+              /* @__PURE__ */ jsx("button", {
+                onClick: handleToggle,
+                style: buttonStyle,
+                title: "Collapse",
+                children: "▾"
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        style: {
+          display: "flex",
+          gap: 0,
+          borderBottom: "1px solid rgba(75, 85, 99, 0.4)",
+          padding: "0 6px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("button", {
+            onClick: () => setActiveTab("actions"),
+            style: tabStyle(activeTab === "actions"),
+            children: [
+              "Actions (",
+              data.actionLog.length,
+              ")"
+            ]
+          }),
+          /* @__PURE__ */ jsx("button", {
+            onClick: () => setActiveTab("state"),
+            style: tabStyle(activeTab === "state"),
+            children: "State"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        style: {
+          maxHeight,
+          overflowY: "auto",
+          padding: 8
+        },
+        children: [
+          activeTab === "actions" && /* @__PURE__ */ jsx("div", {
+            children: data.actionLog.length === 0 ? /* @__PURE__ */ jsx("div", {
+              style: {
+                color: "#6b7280",
+                textAlign: "center",
+                padding: 16
+              },
+              children: "No actions recorded"
+            }) : data.actionLog.slice().reverse().map((entry) => /* @__PURE__ */ jsxs("div", {
+              style: {
+                padding: "4px 6px",
+                borderBottom: "1px solid rgba(75, 85, 99, 0.2)",
+                display: "flex",
+                flexDirection: "column",
+                gap: 2
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", {
+                      style: {
+                        color: entry.source === "local" ? "#60a5fa" : "#4ade80",
+                        fontSize: 10,
+                        textTransform: "uppercase"
+                      },
+                      children: entry.source
+                    }),
+                    /* @__PURE__ */ jsx("span", {
+                      style: { color: "#6b7280", fontSize: 10 },
+                      children: formatTimestamp(entry.timestamp)
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsx("pre", {
+                  style: {
+                    margin: 0,
+                    fontSize: 10,
+                    color: "#d1d5db",
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-all"
+                  },
+                  children: /* @__PURE__ */ jsx(JsonTree, {
+                    data: entry.action
+                  })
+                })
+              ]
+            }, entry.id))
+          }),
+          activeTab === "state" && /* @__PURE__ */ jsx("pre", {
+            style: {
+              margin: 0,
+              fontSize: 10,
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all"
+            },
+            children: latestState !== null ? /* @__PURE__ */ jsx(JsonTree, {
+              data: latestState
+            }) : /* @__PURE__ */ jsx("span", {
+              style: { color: "#6b7280" },
+              children: "No state captured"
+            })
+          })
+        ]
+      })
+    ]
+  });
+}
 export {
   DebugOverlay
 };

package/lib/index.d.ts

@@ -1,3 +1,2 @@
-export { DebugOverlay } from "./DebugOverlay";
-export type { DebugOverlayProps } from "./DebugOverlay";
+export * from "./DebugOverlay";
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@couch-kit/devtools",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Developer tooling and debug overlay for Couch Kit games",
   "main": "./dist/index.js",
   "types": "./lib/index.d.ts",
@@ -13,7 +13,9 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "bun build ./src/index.ts --outdir ./dist --target browser --external react --external @couch-kit/client --external @couch-kit/core && tsc -p tsconfig.build.json",
+    "build": "NODE_ENV=production bun build ./src/index.ts --outdir ./dist --target browser --external react --external @couch-kit/client --external @couch-kit/core && tsc -p tsconfig.build.json && bun run verify-build",
+    "verify-build": "node -e \"const s=require('fs').readFileSync('./dist/index.js','utf8');if(!s.includes('function DebugOverlay'))throw new Error('dist/index.js is missing DebugOverlay — empty bundle');if(s.includes('jsx-dev-runtime'))throw new Error('dist/index.js uses react/jsx-dev-runtime — build with NODE_ENV=production');\"",
+    "prepublishOnly": "bun run build",
     "test": "bun test",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf dist lib"
@@ -27,8 +29,8 @@
   ],
   "dependencies": {},
   "devDependencies": {
-    "@couch-kit/client": "0.11.0",
-    "@couch-kit/core": "0.9.3",
+    "@couch-kit/client": "0.15.0",
+    "@couch-kit/core": "0.10.0",
     "@happy-dom/global-registrator": "^20.10.6",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",

package/src/index.ts

@@ -1,2 +1,5 @@
-export { DebugOverlay } from "./DebugOverlay";
-export type { DebugOverlayProps } from "./DebugOverlay";
+// `export *`, not `export { DebugOverlay } from`: with `sideEffects: false`,
+// bun tree-shakes a named re-export of the package's only value out of the
+// bundle, publishing a `dist/index.js` that exports a binding it never defines.
+// The build's `verify-build` step fails if that ever happens again.
+export * from "./DebugOverlay";