@tezx/devtools 1.0.4 → 1.0.6

package/README.md

@@ -1 +1,143 @@
-coming soon
+
+# 📊 TezX DevTools
+
+> Developer-friendly diagnostics and inspector panel for TezX-based applications. Plug in to see routes, middlewares, env variables, cookies, and add your own custom debug tabs.
+
+---
+
+## ✅ Installation
+
+```bash
+npm install @tezx/devtools
+```
+
+Ensure you also have:
+
+```bash
+npm install tezx
+```
+
+---
+
+## 🚀 Quick Usage
+
+In your TezX app entry (e.g., `server.ts` or `index.ts`):
+
+```ts
+import { TezX } from "tezx";
+import {nodeAdapter} from "tezx/node";
+import DevTools from "@tezx/devtools";
+
+const app = new TezX();
+
+app.get(
+  "/devtools",
+  DevTools(app, {
+    // Optional
+    // disableTabs: ['cookies', 'routes'],
+    // extraTabs: (ctx) => [ ... ]
+  })
+);
+
+nodeAdapter(app).listen(3000);
+```
+
+Now visit:
+**`http://localhost:3000/devtools`**
+to see a real-time diagnostic dashboard.
+
+---
+
+## 🧩 Built-in Tabs
+
+| Tab           | Description                                              |
+| ------------- | -------------------------------------------------------- |
+| `routes`      | Lists all loaded routes with method, path, and source    |
+| `middlewares` | Displays registered middleware and which routes use them |
+| `cookies`     | Shows request cookies (parsed from `ctx`)                |
+| `.env`        | Displays environment variables loaded via `.env`         |
+
+---
+
+## ⚙️ API: `DevTools(app, options)`
+
+```ts
+DevTools(app: TezX<any>, options?: Options): Callback
+```
+
+### Options
+
+| Option        | Type                                                      | Description             |
+| ------------- | --------------------------------------------------------- | ----------------------- |
+| `extraTabs`   | `(ctx) => TabType \| Promise<TabType>`                    | Add your own tab panels |
+| `disableTabs` | `Array<'cookies' \| 'routes' \| '.env' \| 'middlewares'>` | Hide built-in tabs      |
+
+---
+
+## 🛠️ Add Custom Tabs
+
+You can inject your own debug panels using the `extraTabs` option.
+
+```ts
+import DevTools , { dumpMiddlewares } from "@tezx/devtools";
+
+app.get(
+  "/devtools",
+  DevTools(app, {
+    extraTabs(ctx) {
+      const rows = dumpMiddlewares(app)
+        .map(r => `<tr><td>${r.endpoint}</td><td>${r.pattern}</td><td>${r.appliedMiddlewares}</td></tr>`)
+        .join("");
+      return [
+        {
+          tab: "middlewares",
+          label: "Middleware Table",
+          doc_title: "Middleware Overview",
+          content: `<table>${rows}</table>`
+        }
+      ];
+    }
+  })
+);
+```
+
+---
+
+## 📚 Types
+
+```ts
+type Tab = "cookies" | "routes" | ".env" | "middlewares";
+
+type TabType = {
+  doc_title: string;
+  label: string;
+  tab: Tab | string;
+  content: string; // Rendered HTML content
+}[];
+
+type Options = {
+  extraTabs?: (ctx: Context) => Promise<TabType> | TabType;
+  disableTabs?: Tab[];
+};
+```
+
+---
+
+## 📁 Directory Example
+
+**Using `tezx/router`**
+
+```
+my-app/
+├── routes/
+│   ├── _middleware.ts
+│   └── ...
+├── public/
+│   └── ...
+├── tezx.config.mjs             ← setup TezX + DevTools here
+├── .env
+├── package.json
+└── tsconfig.json
+```
+
+---

package/cjs/devtools/dumpRoutes.js

@@ -1,22 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sanitizePathSplit = sanitizePathSplit;
 exports.dumpRoutes = dumpRoutes;
-function sanitizePathSplit(basePath, path) {
-    const parts = `${basePath}/${path}`
-        .replace(/\\/g, '')
-        .replace(/\/+/g, '/')
-        ?.split("/")
-        .filter(Boolean);
-    return parts;
-}
-function collectRoutes(node, basePath = '/') {
+const helper_1 = require("tezx/helper");
+function collectRoutes(node, basePath = "/") {
     const routes = [];
     let fullPath = basePath;
     if (node.isParam && node.paramName) {
         fullPath = `${basePath.replace(/\/+$/, "")}${node.paramName}`;
     }
-    const pathname = sanitizePathSplit("/", fullPath).join("/");
+    const pathname = (0, helper_1.sanitizePathSplit)("/", fullPath).join("/");
     for (const [method, handler] of node.handlers.entries()) {
         routes.push({
             method,
@@ -26,7 +18,7 @@ function collectRoutes(node, basePath = '/') {
         });
     }
     for (const [childPath, childNode] of node.children.entries()) {
-        const newPath = sanitizePathSplit(fullPath, childPath).join("/");
+        const newPath = (0, helper_1.sanitizePathSplit)(fullPath, childPath).join("/");
         routes.push(...collectRoutes(childNode, newPath));
     }
     return routes;
@@ -38,7 +30,6 @@ function dumpRoutes(TezX) {
     for (const [path, handlers] of app.routers) {
         for (const [method, handler] of handlers) {
             staticRoutes.push({
-                match: true,
                 endpoint: `/${path}`,
                 pattern: `/${path}`,
                 method,

package/cjs/devtools/index.js

@@ -1,17 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dumpRoutes = void 0;
-const middlewares_1 = require("./middlewares");
-var dumpRoutes_1 = require("./dumpRoutes");
-Object.defineProperty(exports, "dumpRoutes", { enumerable: true, get: function () { return dumpRoutes_1.dumpRoutes; } });
-class devtools {
-    static get runtime() {
-        return '';
-    }
-    static dumpMiddlewares(TezX) {
-        let app = TezX;
-        let middlewares = app?.triMiddlewares;
-        return (0, middlewares_1.inspectMiddlewares)(middlewares);
-    }
-}
-exports.default = devtools;
+exports.dumpMiddlewares = exports.dumpRoutes = void 0;
+var dumpRoutes_js_1 = require("./dumpRoutes.js");
+Object.defineProperty(exports, "dumpRoutes", { enumerable: true, get: function () { return dumpRoutes_js_1.dumpRoutes; } });
+var middlewares_js_1 = require("./middlewares.js");
+Object.defineProperty(exports, "dumpMiddlewares", { enumerable: true, get: function () { return middlewares_js_1.dumpMiddlewares; } });

package/cjs/devtools/middlewares.js

@@ -1,23 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inspectMiddlewares = inspectMiddlewares;
-function inspectMiddlewares(node, basePath = "") {
-    const fullPath = `${basePath}/${node.pathname}`
-        .replace(/\\/g, '')
-        .replace(/\/+/g, '/')
-        .replace(/^\/+|\/+$/g, '');
-    const middlewareList = Array.isArray(node.middlewares)
-        ? node.middlewares
-        : Array.from(node.middlewares);
-    const entries = [];
-    if (middlewareList.length > 0) {
-        entries.push({
-            pathname: fullPath === "" ? "/" : `/${fullPath}`,
-            middlewares: middlewareList.map(String),
-        });
-    }
-    for (const [, child] of node.children) {
-        entries.push(...inspectMiddlewares(child, `/${fullPath}`));
+exports.dumpMiddlewares = dumpMiddlewares;
+const helper_1 = require("tezx/helper");
+function detectRouteType(pathname, isOptional) {
+    if (pathname.includes("*"))
+        return "wildcard";
+    if (pathname.includes(":"))
+        return "dynamic params";
+    if (isOptional)
+        return "optional params";
+    return "static";
+}
+function collectMiddlewares(node, basePath = "/") {
+    const routes = [];
+    const fullPath = (0, helper_1.sanitizePathSplit)("/", basePath).join("/");
+    const routeType = detectRouteType(fullPath, node.isOptional);
+    routes.push({
+        type: routeType,
+        pattern: `/${fullPath}`,
+        appliedMiddlewares: Array.isArray(node.middlewares)
+            ? node.middlewares.map((mw) => mw?.name || "anonymous")
+            : Array.from(node.middlewares).map((mw) => mw?.name || "anonymous"),
+    });
+    for (const [childPath, childNode] of node.children.entries()) {
+        const newPath = (0, helper_1.sanitizePathSplit)(basePath, childPath).join("/");
+        routes.push(...collectMiddlewares(childNode, newPath));
     }
-    return entries;
+    return routes;
+}
+function dumpMiddlewares(TezX) {
+    return collectMiddlewares(TezX.triMiddlewares);
 }

package/cjs/html/cookies.js

@@ -3,143 +3,162 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CookiesInspector = CookiesInspector;
 function CookiesInspector(ctx) {
     const cookies = ctx.cookies.all();
-    const rawJSON = JSON.stringify(cookies, null, 2);
-    const tableRows = Object.entries(cookies)
-        .map(([key, value], i) => `
-        <tr>
-          <td>${i + 1}</td>
-          <td contenteditable="true" class="cookie-key">${key}</td>
-          <td contenteditable="true" class="cookie-value">${value}</td>
-          <td><button class="delete-btn">🗑️</button></td>
-        </tr>
-      `).join("");
     const html = `
-      <style>
-        td[contenteditable="true"] {
-          outline: 0px;
-        }
-        td[contenteditable="true"]:focus {
-          outline: 1px solid var(--accent);
-        }
+    <style>
+      td[contenteditable="true"] {
+        outline: 0px;
+      }
+      td[contenteditable="true"]:focus {
+        outline: 1px solid var(--accent);
+      }
 
-        .delete-btn {
-          background: #dc2626;
-          color: white;
-          border: none;
-          border-radius: 0.375rem;
-          padding: 0.3rem 0.6rem;
-          font-size: 0.8rem;
-          cursor: pointer;
-        }
-    
-        .delete-btn:hover {
-          background: #b91c1c;
-        }
-    
-        pre#json-output {
-          margin-top: 1rem;
-          padding: 1rem;
-          border-radius: 0.5rem;
-          font-size: 0.875rem;
-          overflow-x: auto;
-          display: none;
-        }
-    
-      </style>
-    
-        <div class="tabs">
-          <a onclick="addCookieRow()">➕ Add Cookie</a>
-          <a onclick="saveCookies()">💾 Save All</a>
-          <a onclick="exportCookies()">📤 Export JSON</a>
-        </div>
-    
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th>#</th>
-                <th>Key</th>
-                <th>Value</th>
-                <th>Action</th>
-              </tr>
-            </thead>
-            <tbody id="cookie-body"></tbody>
-          </table>
-        </div>
-    
-        <pre class="json-view" id="json-output"></pre>
-    
-      <script>
-        function getCookies() {
-          const cookies = {};
-          document.cookie.split(';').forEach(c => {
-            const [k, ...v] = c.trim().split('=');
-            cookies[k] = decodeURIComponent(v.join('='));
-          });
-          return cookies;
-        }
-    
-        function renderCookies() {
-          const tbody = document.getElementById('cookie-body');
-          tbody.innerHTML = '';
-          const cookies = getCookies();
-          let index = 1;
-          for (const [key, val] of Object.entries(cookies)) {
-            const row = document.createElement('tr');
-            row.innerHTML = \`
-              <td>\${index++}</td>
-              <td contenteditable="true" class="cookie-key">\${key}</td>
-              <td contenteditable="true" class="cookie-value">\${val}</td>
-              <td><button class="delete-btn" onclick="deleteRow(this)">Delete</button></td>
-            \`;
-            tbody.appendChild(row);
-          }
-        }
-    
-        function addCookieRow() {
-          const tbody = document.getElementById('cookie-body');
+      .delete-btn,
+      .copy-btn {
+        background: #dc2626;
+        color: white;
+        border: none;
+        border-radius: 0.375rem;
+        padding: 0.3rem 0.6rem;
+        font-size: 0.8rem;
+        cursor: pointer;
+        margin-left: 4px;
+      }
+
+      .copy-btn {
+        background: #2563eb;
+      }
+
+      .delete-btn:hover {
+        background: #b91c1c;
+      }
+
+      .copy-btn:hover {
+        background: #1e40af;
+      }
+
+      pre#json-output {
+        margin-top: 1rem;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        font-size: 0.875rem;
+        overflow-x: auto;
+        display: none;
+        background: #f3f4f6;
+      }
+    </style>
+
+    <div class="tabs">
+      <a onclick="addCookieRow()">➕ Add Cookie</a>
+      <a onclick="saveCookies()">💾 Save All</a>
+      <a onclick="exportCookies()">📤 Export JSON</a>
+    </div>
+
+    <div class="table-container">
+      <table>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Key</th>
+            <th>Value</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody id="cookie-body"></tbody>
+      </table>
+    </div>
+
+    <pre class="json-view" id="json-output"></pre>
+
+    <script>
+      function getCookies() {
+        const cookies = {};
+        document.cookie.split(';').forEach(c => {
+          const [k, ...v] = c.trim().split('=');
+          cookies[k] = decodeURIComponent(v.join('='));
+        });
+        return cookies;
+      }
+
+      function renderCookies() {
+        const tbody = document.getElementById('cookie-body');
+        tbody.innerHTML = '';
+        const cookies = getCookies();
+        let index = 1;
+        for (const [key, val] of Object.entries(cookies)) {
           const row = document.createElement('tr');
           row.innerHTML = \`
-            <td>\${tbody.children.length + 1}</td>
-            <td contenteditable="true" class="cookie-key"></td>
-            <td contenteditable="true" class="cookie-value"></td>
-            <td><button class="delete-btn" onclick="deleteRow(this)">Delete</button></td>
+            <td>\${index++}</td>
+            <td contenteditable="true" class="cookie-key" style="white-space: nowrap">\${key}</td>
+            <td contenteditable="true" class="cookie-value">\${val}</td>
+            <td class="action">
+              <button class="copy-btn" onclick="copyRow(this)">📋</button>
+              <button class="delete-btn" onclick="deleteRow(this)">Delete</button>
+            </td>
           \`;
           tbody.appendChild(row);
         }
-    
-        function deleteRow(button) {
-          const row = button.closest('tr');
+      }
+
+      function addCookieRow() {
+        const tbody = document.getElementById('cookie-body');
+        const row = document.createElement('tr');
+        row.innerHTML = \`
+          <td>\${tbody.children.length + 1}</td>
+          <td contenteditable="true" class="cookie-key" style="white-space: nowrap"></td>
+          <td contenteditable="true" class="cookie-value"></td>
+            <td class="action">
+              <button class="copy-btn" onclick="copyRow(this)">📋</button>
+              <button class="delete-btn" onclick="deleteRow(this)">Delete</button>
+            </td>
+        \`;
+        tbody.appendChild(row);
+      }
+
+      function deleteRow(button) {
+        const row = button.closest('tr');
+        const key = row.querySelector('.cookie-key')?.innerText.trim();
+        if (key) {
+          document.cookie = key + '=; Max-Age=0; path=/';
+        }
+        row.remove();
+        renderCookies();
+      }
+
+      function saveCookies() {
+        const rows = document.querySelectorAll('#cookie-body tr');
+        rows.forEach(row => {
           const key = row.querySelector('.cookie-key')?.innerText.trim();
+          const value = row.querySelector('.cookie-value')?.innerText.trim();
           if (key) {
-            document.cookie = key + '=; Max-Age=0; path=/';
+            document.cookie = key + '=' + encodeURIComponent(value) + '; path=/';
           }
-          row.remove();
-          renderCookies();
-        }
-    
-        function saveCookies() {
-          const rows = document.querySelectorAll('#cookie-body tr');
-          rows.forEach(row => {
-            const key = row.querySelector('.cookie-key')?.innerText.trim();
-            const value = row.querySelector('.cookie-value')?.innerText.trim();
-            if (key) {
-              document.cookie = key + '=' + encodeURIComponent(value) + '; path=/';
-            }
-          });
-          renderCookies();
-          alert('✅ Cookies saved!');
-        }
-    
-        function exportCookies() {
-          const cookies = getCookies();
-          const output = document.getElementById('json-output');
-          output.textContent = JSON.stringify(cookies, null, 2);
-          output.style.display = 'block';
-        }
-    
+        });
         renderCookies();
-      </script>
-      `;
+        alert('✅ Cookies saved!');
+      }
+
+      function exportCookies() {
+        const cookies = getCookies();
+        const output = document.getElementById('json-output');
+        output.textContent = JSON.stringify(cookies, null, 2);
+        output.style.display = 'block';
+      }
+
+      function copyRow(button) {
+        const row = button.closest('tr');
+        const key = row.querySelector('.cookie-key')?.innerText.trim();
+        const value = row.querySelector('.cookie-value')?.innerText.trim();
+        if (key) {
+          navigator.clipboard.writeText(\`\${key}: \${value}\`)
+            .then(() => {
+              button.innerText = '✅';
+              setTimeout(() => button.innerText = '📋', 1000);
+            });
+        }
+      }
+
+      renderCookies();
+    </script>
+  `;
     return html;
 }