next-fetch-panel 0.1.0

package/dist/route.d.ts

@@ -0,0 +1,23 @@
+declare const dynamic = "force-dynamic";
+type GuardFn = (request: Request) => Response | null | undefined | void | Promise<Response | null | undefined | void>;
+/**
+ * Returns a Next.js Route Handler GET function for the SSE stream.
+ * Use the guard option to add authentication or any other access control:
+ *
+ *   export const dynamic = "force-dynamic"
+ *   export const GET = createDevPanelRoute({
+ *     guard: (request) => {
+ *       const token = request.headers.get("authorization")
+ *       if (!isValidToken(token)) return new Response("Forbidden", { status: 403 })
+ *     },
+ *   })
+ *
+ * For simple use with no access control:
+ *   export { dynamic, GET } from "@/server-network-panel/route"
+ */
+declare function createDevPanelRoute(options?: {
+    guard?: GuardFn;
+}): (request: Request) => Promise<Response>;
+declare const GET: (request: Request) => Promise<Response>;
+
+export { GET, createDevPanelRoute, dynamic };

package/dist/route.js

@@ -0,0 +1,96 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/route.ts
+var route_exports = {};
+__export(route_exports, {
+  GET: () => GET,
+  createDevPanelRoute: () => createDevPanelRoute,
+  dynamic: () => dynamic
+});
+module.exports = __toCommonJS(route_exports);
+var import_headers = require("next/headers");
+
+// src/store.ts
+var BUFFER_SIZE = 100;
+function createStore() {
+  const subscribers = /* @__PURE__ */ new Set();
+  const buffer = [];
+  return {
+    push(entry) {
+      buffer.push(entry);
+      if (buffer.length > BUFFER_SIZE) buffer.shift();
+      subscribers.forEach((fn) => fn(entry));
+    },
+    subscribe(fn) {
+      subscribers.add(fn);
+      return () => subscribers.delete(fn);
+    },
+    getBuffer() {
+      return buffer.slice();
+    }
+  };
+}
+var devLogStore = globalThis.__devLogStore ?? (globalThis.__devLogStore = createStore());
+
+// src/route.ts
+var dynamic = "force-dynamic";
+function createDevPanelRoute(options) {
+  return async function GET2(request) {
+    const blocked = await options?.guard?.(request);
+    if (blocked instanceof Response) return blocked;
+    const sessionId = (await (0, import_headers.headers)()).get("x-dev-sid");
+    let unsubscribe;
+    const stream = new ReadableStream({
+      start(controller) {
+        const encoder = new TextEncoder();
+        const encode = (entry) => encoder.encode(`data: ${JSON.stringify(entry)}
+
+`);
+        for (const entry of devLogStore.getBuffer()) {
+          if (entry.sessionId === sessionId) controller.enqueue(encode(entry));
+        }
+        unsubscribe = devLogStore.subscribe((entry) => {
+          if (entry.sessionId !== sessionId) return;
+          try {
+            controller.enqueue(encode(entry));
+          } catch {
+          }
+        });
+      },
+      cancel() {
+        unsubscribe?.();
+      }
+    });
+    return new Response(stream, {
+      headers: {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive"
+      }
+    });
+  };
+}
+var GET = createDevPanelRoute();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GET,
+  createDevPanelRoute,
+  dynamic
+});

package/dist/route.mjs

@@ -0,0 +1,69 @@
+// src/route.ts
+import { headers } from "next/headers";
+
+// src/store.ts
+var BUFFER_SIZE = 100;
+function createStore() {
+  const subscribers = /* @__PURE__ */ new Set();
+  const buffer = [];
+  return {
+    push(entry) {
+      buffer.push(entry);
+      if (buffer.length > BUFFER_SIZE) buffer.shift();
+      subscribers.forEach((fn) => fn(entry));
+    },
+    subscribe(fn) {
+      subscribers.add(fn);
+      return () => subscribers.delete(fn);
+    },
+    getBuffer() {
+      return buffer.slice();
+    }
+  };
+}
+var devLogStore = globalThis.__devLogStore ?? (globalThis.__devLogStore = createStore());
+
+// src/route.ts
+var dynamic = "force-dynamic";
+function createDevPanelRoute(options) {
+  return async function GET2(request) {
+    const blocked = await options?.guard?.(request);
+    if (blocked instanceof Response) return blocked;
+    const sessionId = (await headers()).get("x-dev-sid");
+    let unsubscribe;
+    const stream = new ReadableStream({
+      start(controller) {
+        const encoder = new TextEncoder();
+        const encode = (entry) => encoder.encode(`data: ${JSON.stringify(entry)}
+
+`);
+        for (const entry of devLogStore.getBuffer()) {
+          if (entry.sessionId === sessionId) controller.enqueue(encode(entry));
+        }
+        unsubscribe = devLogStore.subscribe((entry) => {
+          if (entry.sessionId !== sessionId) return;
+          try {
+            controller.enqueue(encode(entry));
+          } catch {
+          }
+        });
+      },
+      cancel() {
+        unsubscribe?.();
+      }
+    });
+    return new Response(stream, {
+      headers: {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive"
+      }
+    });
+  };
+}
+var GET = createDevPanelRoute();
+export {
+  GET,
+  createDevPanelRoute,
+  dynamic
+};

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "next-fetch-panel",
+  "version": "0.1.0",
+  "description": "Real-time server-side fetch inspector panel for Next.js App Router",
+  "keywords": [
+    "nextjs",
+    "devtools",
+    "fetch",
+    "inspector",
+    "panel",
+    "server-components",
+    "ssr",
+    "debugging"
+  ],
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./patch": {
+      "types": "./dist/patch.d.ts",
+      "import": "./dist/patch.mjs",
+      "require": "./dist/patch.js"
+    },
+    "./middleware": {
+      "types": "./dist/middleware.d.ts",
+      "import": "./dist/middleware.mjs",
+      "require": "./dist/middleware.js"
+    },
+    "./route": {
+      "types": "./dist/route.d.ts",
+      "import": "./dist/route.mjs",
+      "require": "./dist/route.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "next": ">=15.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.0.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^1.0.0",
+    "react-resizable-panels": "^4.0.0",
+    "tailwind-merge": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}