@tezx/devtools 1.0.3 → 1.0.5

package/cjs/html/middlewares.js

@@ -0,0 +1,184 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Middlewares = Middlewares;
+const devtools_1 = require("../devtools");
+function Middlewares(ctx, app) {
+    const allRoutes = (0, devtools_1.dumpMiddlewares)(app);
+    const totalRoutes = allRoutes.length;
+    const middlewareRoutes = {};
+    for (const route of allRoutes) {
+        for (const mw of route.appliedMiddlewares || []) {
+            (middlewareRoutes[mw] ||= []).push(route);
+        }
+    }
+    const rawJSON = JSON.stringify(allRoutes, null, 2);
+    const toCSV = (data) => {
+        const headers = ["pattern", "type", "appliedMiddlewares"];
+        const csvRows = [
+            headers.join(","),
+            ...data.map((r) => headers.map((h) => JSON.stringify(r[h] ?? "")).join(",")),
+        ];
+        return csvRows.join("\n");
+    };
+    const csvString = toCSV(allRoutes).replace(/"/g, """);
+    return `
+  <style>
+    .download {
+        margin-top: 1rem;
+        display: flex;
+        gap: 1rem;
+    }
+    .download a {
+        padding: 0.5rem 1rem;
+        border: 1px solid var(--accent);
+        color: var(--accent);
+        text-decoration: none;
+        border-radius: 6px;
+    }
+
+    .download a:hover {
+        background: var(--accent);
+        color: white;
+    }
+
+    #searchBar {
+        margin: 1rem 0;
+        display: flex;
+    }
+
+    #searchBar input {
+        flex: 1;
+    }
+
+    table td button {
+      background: #e2e8f0;
+      border: none;
+      padding: 0.2rem 0.5rem;
+      border-radius: 0.375rem;
+      cursor: pointer;
+      margin-left: 0.5rem;
+    }
+
+    table td button:hover {
+      background: #cbd5e1;
+    }
+  </style>
+
+  <div class="tabs toolbar">
+    <a class="tab-btn active counting" data-count="${totalRoutes}" onclick="showTab('routes')">📋 Routes</a>
+    <a class="tab-btn counting" data-count="${Object.keys(middlewareRoutes).length}" onclick="showTab('middlewares')">🧩 Middlewares</a>
+    <a class="tab-btn" onclick="showTab('json')">🧾 Raw JSON</a>
+    <a class="tab-btn" onclick="showTab('export')">📤 Export</a>
+  </div>
+
+  <div id="searchBar">
+    <input type="text" id="search" placeholder="Filter by pattern/type/middleware..." />
+  </div>
+
+  <!-- ROUTES -->
+  <div id="routesTab" class="table-container">
+    <table id="routesTable">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Pattern</th>
+          <th>Type</th>
+          <th>Middlewares</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${allRoutes
+        .map((r, i) => `
+        <tr>
+          <td>${i + 1}</td>
+          <td>
+            ${r.pattern}
+            <button onclick="copyText(\`${r.pattern}\`)">📋</button>
+          </td>
+          <td>
+            <span style="
+              display: inline-block;
+              padding: 0.2rem 0.5rem;
+              border-radius: 0.375rem;
+              color: white;
+              font-size: 0.75rem;
+              background-color: ${r.type === "static"
+        ? "#16a34a"
+        : r.type === "wildcard"
+            ? "#f97316"
+            : r.type === "optional params"
+                ? "#3b82f6"
+                : r.type === "dynamic params"
+                    ? "#9333ea"
+                    : "#6b7280"};
+            ">
+              ${r.type}
+            </span>
+          </td>
+          <td>${(r.appliedMiddlewares || []).join(", ")}</td>
+        </tr>
+        `)
+        .join("")}
+      </tbody>
+    </table>
+  </div>
+
+  <!-- MIDDLEWARES -->
+  <div id="middlewaresTab" style="display:none">
+    ${Object.entries(middlewareRoutes)
+        .map(([mw, routes]) => `
+      <h3>🔹 ${mw} (${routes.length})</h3>
+      <ul>
+        ${routes.map((r) => `<li><code>${r.pattern}</code> <span>(${r.type})</span></li>`).join("")}
+      </ul>
+    `)
+        .join("")}
+  </div>
+
+  <!-- RAW JSON -->
+  <div id="jsonTab" style="display:none">
+    <div class="json-view"><pre>${rawJSON}</pre></div>
+  </div>
+
+  <!-- EXPORT -->
+  <div id="exportTab" style="display:none">
+    <div class="download">
+      <a href="data:text/json;charset=utf-8,${encodeURIComponent(rawJSON)}" download="middlewares.json">📥 JSON</a>
+      <a href="data:text/csv;charset=utf-8,${csvString}" download="middlewares.csv">📥 CSV</a>
+    </div>
+  </div>
+
+  <script>
+    const tabs = ['routes', 'middlewares', 'json', 'export'];
+    const tabBtns = document.querySelectorAll('.tab-btn');
+
+    function showTab(tab) {
+      tabs.forEach(t => {
+        document.getElementById(t + 'Tab').style.display = t === tab ? 'block' : 'none';
+        document.getElementById(t + 'Tab').classList.toggle('active', t === tab);
+      });
+      tabBtns.forEach(btn => {
+        const active = btn.textContent.toLowerCase().includes(tab);
+        btn.classList.toggle('active', active);
+      });
+      document.getElementById('searchBar').style.display = (tab === 'routes') ? 'flex' : 'none';
+    }
+
+    document.getElementById('search').addEventListener('input', (e) => {
+      const keyword = e.target.value.toLowerCase();
+      const rows = document.querySelectorAll('#routesTable tbody tr');
+      rows.forEach(row => {
+        row.style.display = row.textContent.toLowerCase().includes(keyword) ? '' : 'none';
+      });
+    });
+
+    function copyText(text) {
+      navigator.clipboard.writeText(text).then(() => {
+        alert('✅ Copied: ' + text);
+      }).catch(err => {
+        alert('❌ Failed to copy: ' + err);
+      });
+    }
+  </script>
+  `;
+}

package/cjs/html/routes.js

@@ -15,14 +15,14 @@ function Routes(ctx, app) {
     }
     const rawJSON = JSON.stringify(allRoutes, null, 2);
     const toCSV = (data) => {
-        const headers = ['method', 'endpoint', 'pattern', 'appliedMiddlewares'];
+        const headers = ["method", "endpoint", "pattern", "appliedMiddlewares"];
         const csvRows = [
-            headers.join(','),
-            ...data.map(r => headers.map(h => JSON.stringify(r[h] ?? '')).join(','))
+            headers.join(","),
+            ...data.map((r) => headers.map((h) => JSON.stringify(r[h] ?? "")).join(",")),
         ];
-        return csvRows.join('\n');
+        return csvRows.join("\n");
     };
-    const csvString = toCSV(allRoutes).replace(/"/g, '"');
+    const csvString = toCSV(allRoutes).replace(/"/g, """);
     return `
   <style>
     .download {
@@ -52,107 +52,136 @@ function Routes(ctx, app) {
     #searchBar input {
         flex: 1;
     }
-</style>
 
-<div class="tabs">
+    table td button {
+      background: #e2e8f0;
+      border: none;
+      padding: 0.2rem 0.5rem;
+      border-radius: 0.375rem;
+      cursor: pointer;
+      margin-left: 0.5rem;
+    }
+
+    table td button:hover {
+      background: #cbd5e1;
+    }
+  </style>
+
+  <div class="tabs toolbar">
     <a class="tab-btn active counting" data-count="${totalRoutes}" onclick="showTab('routes')">📋 Routes</a>
-    <a class="tab-btn counting" data-count="${Object.keys(middlewareStats).length}" onclick="showTab('stats')">📈
-        Stats</a>
+    <a class="tab-btn counting" data-count="${Object.keys(middlewareStats).length}" onclick="showTab('stats')">📈 Stats</a>
     <a class="tab-btn" onclick="showTab('middlewares')">🧩 Middlewares</a>
     <a class="tab-btn" onclick="showTab('json')">🧾 Raw JSON</a>
     <a class="tab-btn" onclick="showTab('export')">📤 Export</a>
-</div>
+  </div>
 
-<div id="searchBar" style="display:flex">
+  <div id="searchBar">
     <input type="text" id="search" placeholder="Filter by method/path/middleware..." />
-</div>
+  </div>
 
-<!-- ROUTES -->
-<div id="routesTab">
+  <!-- ROUTES -->
+  <div id="routesTab" class="table-container">
     <table id="routesTable">
-        <thead>
-            <tr>
-                <th>#</th>
-                <th>Method</th>
-                <th>User Path</th>
-                <th>Route Pattern</th>
-                <th>Middlewares</th>
-            </tr>
-        </thead>
-        <tbody>
-            ${allRoutes.map((r, i) => `
-            <tr>
-                <td>${i + 1}</td>
-                <td>${r.method}</td>
-                <td>${r.endpoint}</td>
-                <td>${r.pattern}</td>
-                <td>${(r.appliedMiddlewares || []).join(', ')}</td>
-            </tr>`).join('')}
-        </tbody>
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Method</th>
+          <th>Endpoint</th>
+          <th>Pattern</th>
+          <th>Middlewares</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${allRoutes
+        .map((r, i) => `
+        <tr>
+          <td>${i + 1}</td>
+          <td>${r.method}</td>
+          <td>
+            ${r.endpoint}
+            <button onclick="copyText(\`${r.endpoint}\`)">📋</button>
+          </td>
+          <td>
+            ${r.pattern}
+            <button onclick="copyText(\`${r.pattern}\`)">📋</button>
+          </td>
+          <td>${(r.appliedMiddlewares || []).join(", ")}</td>
+        </tr>
+        `)
+        .join("")}
+      </tbody>
     </table>
-</div>
+  </div>
 
-<!-- STATS -->
-<div id="statsTab" style="display:none">
+  <!-- STATS -->
+  <div id="statsTab" style="display:none">
     <div class="json-view">
-        Total Routes: ${totalRoutes}
-        Middleware Used: ${Object.keys(middlewareStats).length}
-
-        ${Object.entries(middlewareStats).map(([mw, count]) => `- ${mw}: ${count} routes`).join('\n')}
+      Total Routes: ${totalRoutes}<br />
+      Middleware Used: ${Object.keys(middlewareStats).length}<br />
+      <pre>
+${Object.entries(middlewareStats)
+        .map(([mw, count]) => `- ${mw}: ${count} routes`)
+        .join("\n")}
+      </pre>
     </div>
-</div>
-
-<!-- MIDDLEWARES -->
-<div id="middlewaresTab" style="display:none">
-    ${Object.entries(middlewareRoutes).map(([mw, routes]) => `
-    <h3>🔹 ${mw} (${routes.length})</h3>
-    <ul>
-        ${routes.map(r => `<li><code>${r.method} ${r.endpoint}</code></li>`).join('')}
-    </ul>
-    `).join('')}
-</div>
-
-<!-- RAW JSON -->
-<div id="jsonTab" style="display:none">
-    <div class="json-view">${rawJSON}</div>
-</div>
-
-<!-- EXPORT -->
-<div id="exportTab" style="display:none">
+  </div>
+
+  <!-- MIDDLEWARES -->
+  <div id="middlewaresTab" style="display:none">
+    ${Object.entries(middlewareRoutes)
+        .map(([mw, routes]) => `
+      <h3>🔹 ${mw} (${routes.length})</h3>
+      <ul>
+        ${routes.map((r) => `<li><code>${r.method} ${r.endpoint}</code></li>`).join("")}
+      </ul>
+    `)
+        .join("")}
+  </div>
+
+  <!-- RAW JSON -->
+  <div id="jsonTab" style="display:none">
+    <div class="json-view"><pre>${rawJSON}</pre></div>
+  </div>
+
+  <!-- EXPORT -->
+  <div id="exportTab" style="display:none">
     <div class="download">
-        <a href="data:text/json;charset=utf-8,${encodeURIComponent(rawJSON)}" download="routes.json">📥 JSON</a>
-        <a href="data:text/csv;charset=utf-8,${csvString}" download="routes.csv">📥 CSV</a>
+      <a href="data:text/json;charset=utf-8,${encodeURIComponent(rawJSON)}" download="routes.json">📥 JSON</a>
+      <a href="data:text/csv;charset=utf-8,${csvString}" download="routes.csv">📥 CSV</a>
     </div>
-</div>
+  </div>
 
-<script>
+  <script>
     const tabs = ['routes', 'stats', 'middlewares', 'json', 'export'];
     const tabBtns = document.querySelectorAll('.tab-btn');
 
     function showTab(tab) {
-        tabs.forEach(t => {
-            document.getElementById(t + 'Tab').style.display = t === tab ? 'block' : 'none';
-            if (t === tab) {
-                document.getElementById(t + 'Tab').classList.add('active');
-            }
-            else {
-                document.getElementById(t + 'Tab').classList.remove('active');
-            }
-        });
-        tabBtns.forEach(btn => {
-            const active = btn.textContent.toLowerCase().includes(tab);
-            btn.classList.toggle('active', active);
-        });
-        document.getElementById('searchBar').style.display = (tab === 'routes') ? 'flex' : 'none';
+      tabs.forEach(t => {
+        document.getElementById(t + 'Tab').style.display = t === tab ? 'block' : 'none';
+        document.getElementById(t + 'Tab').classList.toggle('active', t === tab);
+      });
+      tabBtns.forEach(btn => {
+        const active = btn.textContent.toLowerCase().includes(tab);
+        btn.classList.toggle('active', active);
+      });
+      document.getElementById('searchBar').style.display = (tab === 'routes') ? 'flex' : 'none';
     }
 
     document.getElementById('search').addEventListener('input', (e) => {
-        const keyword = e.target.value.toLowerCase();
-        const rows = document.querySelectorAll('#routesTable tbody tr');
-        rows.forEach(row => {
-            row.style.display = row.textContent.toLowerCase().includes(keyword) ? '' : 'none';
-        });
+      const keyword = e.target.value.toLowerCase();
+      const rows = document.querySelectorAll('#routesTable tbody tr');
+      rows.forEach(row => {
+        row.style.display = row.textContent.toLowerCase().includes(keyword) ? '' : 'none';
+      });
     });
-</script>
+
+    function copyText(text) {
+      navigator.clipboard.writeText(text).then(() => {
+        alert('✅ Copied: ' + text);
+      }).catch(err => {
+        alert('❌ Failed to copy: ' + err);
+      });
+    }
+  </script>
   `;
 }

package/cjs/index.js

@@ -2,23 +2,31 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DevTools = DevTools;
 const index_js_1 = require("./html/index.js");
-function DevTools(app, options = { disableTabs: [], extraTabs: [] }) {
+function DevTools(app, options = { disableTabs: [] }) {
     let { disableTabs, extraTabs } = options;
-    return (ctx) => {
-        let html = [...(disableTabs?.length ? (0, index_js_1.html)(ctx, app)?.filter(r => !disableTabs?.includes(r?.tab)) : (0, index_js_1.html)(ctx, app)), ...extraTabs || []];
+    return async (ctx) => {
+        let extraTabs = await (typeof options.extraTabs === "function"
+            ? options.extraTabs(ctx)
+            : []);
+        let html = [
+            ...(disableTabs?.length
+                ? (0, index_js_1.html)(ctx, app)?.filter((r) => !disableTabs?.includes(r?.tab))
+                : (0, index_js_1.html)(ctx, app)),
+            ...extraTabs,
+        ];
         let tab = ctx.req.query?._tab || html?.[0]?.tab;
         const navbar = `
          <header>
             <div class="tabs">
                 <img src="http://papernxt.com/favicon.ico" style="height:32px;"/>
-                 ${html?.map(r => `<a href = "?_tab=${r?.tab}" class="${tab === r?.tab ? 'active' : ''}" > ${r?.label} </a>`)?.join('\n')}
+                 ${html?.map((r) => `<a href = "?_tab=${r?.tab}" class="${tab === r?.tab ? "active" : ""}" > ${r?.label} </a>`)?.join("\n")}
             </div>
             <div class="tabs">
                 <a class="toggle-dark" onclick="toggleTheme()">🌙 Toggle Dark</a>
             </div>
         </header>
         `;
-        let find = html.find(r => r?.tab == tab);
+        let find = html.find((r) => r?.tab == tab);
         return ctx.html `
 <!DOCTYPE html>
 <html lang="en">
@@ -94,7 +102,13 @@ function DevTools(app, options = { disableTabs: [], extraTabs: [] }) {
                 gap: 6px;
                 align-items: center;
             }
-
+            .toolbar ,.action{
+                display: flex;
+                padding: 16px;
+                align-items: center;
+                gap: 6px;
+                flex-wrap: wrap;
+            }
             .tabs a {
                 padding: 0.4rem 0.8rem;
                 text-decoration: none;
@@ -180,8 +194,10 @@ function DevTools(app, options = { disableTabs: [], extraTabs: [] }) {
             }
 
             .table-container {
-                overflow-x: auto;
+                overflow: auto;
+                margin-top: 16px;
                 border-radius: 0.5rem;
+                height: 75vh;
                 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
             }
 
@@ -204,6 +220,8 @@ function DevTools(app, options = { disableTabs: [], extraTabs: [] }) {
             thead {
                 background-color: var(--accent);
                 color: white;
+                position: sticky;
+                top: 0px;
             }
 
             /* Light mode zebra striping */
@@ -229,9 +247,8 @@ function DevTools(app, options = { disableTabs: [], extraTabs: [] }) {
                 color: red;
                 font-weight: bold;
             }
-
+            /**
             @media (max-width: 768px) {
-
                 table,
                 thead,
                 tbody,
@@ -265,6 +282,7 @@ function DevTools(app, options = { disableTabs: [], extraTabs: [] }) {
                     color: var(--accent);
                 }
             }
+        **/
         </style>
     </head>
     <body>
@@ -277,7 +295,6 @@ function DevTools(app, options = { disableTabs: [], extraTabs: [] }) {
             ${find?.content}
         </section>
                 <script>
-
                     const themeCookieName = "tezx-theme";
 
                     function setCookie(name, value, days = 30) {

package/devtools/dumpRoutes.d.ts

@@ -6,10 +6,9 @@ export type RouteEntry = {
     endpoint: string;
     appliedMiddlewares: string[];
 };
-export declare function dumpRoutes(TezX: TezX<any>): (RouteEntry | {
-    match: boolean;
+export declare function dumpRoutes(TezX: TezX<any>): {
     endpoint: string;
     pattern: string;
     method: any;
     appliedMiddlewares: any[];
-})[];
+}[];

package/devtools/dumpRoutes.js

@@ -1,12 +1,12 @@
 export function sanitizePathSplit(basePath, path) {
     const parts = `${basePath}/${path}`
-        .replace(/\\/g, '')
-        .replace(/\/+/g, '/')
+        .replace(/\\/g, "")
+        .replace(/\/+/g, "/")
         ?.split("/")
         .filter(Boolean);
     return parts;
 }
-function collectRoutes(node, basePath = '/') {
+function collectRoutes(node, basePath = "/") {
     const routes = [];
     let fullPath = basePath;
     if (node.isParam && node.paramName) {
@@ -34,7 +34,6 @@ export 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/devtools/index.d.ts

@@ -1,10 +1,6 @@
 export { dumpRoutes } from "./dumpRoutes";
+export { dumpMiddlewares } from "./middlewares";
 export type { RouteEntry } from "./dumpRoutes";
-import { TezX } from "tezx";
 export default class devtools {
     static get runtime(): string;
-    static dumpMiddlewares(TezX: TezX): {
-        pathname: string;
-        middlewares: string[];
-    }[];
 }

package/devtools/index.js

@@ -1,12 +1,7 @@
-import { inspectMiddlewares } from "./middlewares";
 export { dumpRoutes } from "./dumpRoutes";
+export { dumpMiddlewares } from "./middlewares";
 export default class devtools {
     static get runtime() {
-        return '';
-    }
-    static dumpMiddlewares(TezX) {
-        let app = TezX;
-        let middlewares = app?.triMiddlewares;
-        return inspectMiddlewares(middlewares);
+        return "";
     }
 }

package/devtools/middlewares.d.ts

@@ -1,7 +1,7 @@
-import type { TriMiddleware } from "tezx/core/MiddlewareConfigure";
-type MiddlewareEntry = {
-    pathname: string;
-    middlewares: string[];
+import type { TezX } from "tezx";
+export type MiddlewareEntry = {
+    pattern: string;
+    type: "static" | "wildcard" | "optional params" | "dynamic params";
+    appliedMiddlewares: string[];
 };
-export declare function inspectMiddlewares(node: TriMiddleware, basePath?: string): MiddlewareEntry[];
-export {};
+export declare function dumpMiddlewares(TezX: TezX<any>): MiddlewareEntry[];

package/devtools/middlewares.js

@@ -1,20 +1,30 @@
-export 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}`));
+import { sanitizePathSplit } from "./dumpRoutes";
+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 = 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 = sanitizePathSplit(basePath, childPath).join("/");
+        routes.push(...collectMiddlewares(childNode, newPath));
     }
-    return entries;
+    return routes;
+}
+export function dumpMiddlewares(TezX) {
+    return collectMiddlewares(TezX.triMiddlewares);
 }