@tezx/devtools 1.0.0

package/html/routes.js

@@ -0,0 +1,157 @@
+import { dumpRoutes } from "../devtools";
+export function Routes(ctx, app) {
+    const allRoutes = dumpRoutes(app);
+    const totalRoutes = allRoutes.length;
+    const middlewareStats = {};
+    const middlewareRoutes = {};
+    for (const route of allRoutes) {
+        for (const mw of route.appliedMiddlewares || []) {
+            middlewareStats[mw] = (middlewareStats[mw] || 0) + 1;
+            (middlewareRoutes[mw] ||= []).push(route);
+        }
+    }
+    const rawJSON = JSON.stringify(allRoutes, null, 2);
+    const toCSV = (data) => {
+        const headers = ['method', 'match', 'userPath', 'routePattern', '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;
+    }
+</style>
+
+<div class="tabs">
+    <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" 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" style="display:flex">
+    <input type="text" id="search" placeholder="Filter by method/path/middleware..." />
+</div>
+
+<!-- ROUTES -->
+<div id="routesTab">
+    <table id="routesTable">
+        <thead>
+            <tr>
+                <th>#</th>
+                <th>Method</th>
+                <th>Match</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.match}</td>
+                <td>${r.userPath}</td>
+                <td>${r.routePattern}</td>
+                <td>${(r.appliedMiddlewares || []).join(', ')}</td>
+            </tr>`).join('')}
+        </tbody>
+    </table>
+</div>
+
+<!-- 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')}
+    </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.userPath}</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 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>
+    </div>
+</div>
+
+<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';
+    }
+
+    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';
+        });
+    });
+</script>
+  `;
+}

package/index.d.ts

@@ -0,0 +1,8 @@
+import { Callback, TezX } from "tezx";
+import { Tab, TabType } from "./html/index.js";
+export type Options = {
+    extraTabs?: TabType;
+    disableTabs?: Tab[];
+};
+export declare function DevTools(app: TezX, options?: Options): Callback;
+export default DevTools;

package/index.js

@@ -0,0 +1,309 @@
+import { html as htmlTab } from "./html/index.js";
+export function DevTools(app, options = { disableTabs: [], extraTabs: [] }) {
+    let { disableTabs, extraTabs } = options;
+    return (ctx) => {
+        let html = [...(disableTabs?.length ? htmlTab(ctx, app)?.filter(r => !disableTabs?.includes(r?.tab)) : htmlTab(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')}
+            </div>
+            <div class="tabs">
+                <a class="toggle-dark" onclick="toggleTheme()">🌙 Toggle Dark</a>
+            </div>
+        </header>
+        `;
+        let find = html.find(r => r?.tab == tab);
+        return ctx.html `
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>${find?.doc_title}</title>
+        <style>
+            :root {
+                --bg: #f8f9fa;
+                --text: #212529;
+                --accent: #FF581E;
+                --header-bg: rgba(255, 255, 255, 0.94);
+                --table-bg: #ffffff;
+                --table-border: #d1d5db;
+                /* Gray-300 */
+                --tr-hover: #e3f2fd;
+                /* Light Blue Hover */
+                --tr-odd: #f8fafc;
+                /* Lightest gray-blue */
+                --tr-even: #ffffff;
+            }
+
+            body.dark {
+                --bg: #0e1117;
+                --text: #f1f3f5;
+                --accent: #58a6ff;
+                /* GitHub Blue */
+                --header-bg: rgba(18, 18, 18, 0.9);
+                --table-bg: #161b22;
+                --table-border: #30363d;
+                --tr-hover: #1f6feb33;
+                /* Blue hover with opacity */
+                --tr-odd: #1a1f24;
+                --tr-even: #0f1419;
+
+                --col-1: #9ca3af;
+                /* Gray-400 */
+                --col-2: #58a6ff;
+                /* Blue-300 */
+                --col-3: #4ade80;
+                /* Green-400 */
+                --col-4: #facc15;
+                /* Yellow-400 */
+                --col-5: #c084fc;
+                /* Purple-400 */
+            }
+
+            body {
+                margin: 0;
+                font-family: system-ui, sans-serif;
+                background: var(--bg);
+                color: var(--text);
+                transition: background 0.3s ease, color 0.3s ease;
+            }
+
+
+            header {
+                position: sticky;
+                background: var(--header-bg);
+                border-bottom: 1px solid var(--accent);
+                top: 0px;
+                display: flex;
+                padding: 16px;
+                align-items: center;
+                justify-content: space-between;
+                gap: 6px;
+                flex-wrap: wrap;
+            }
+
+            header>div {
+                display: flex;
+                gap: 6px;
+                align-items: center;
+            }
+
+            .tabs a {
+                padding: 0.4rem 0.8rem;
+                text-decoration: none;
+                border: 1px solid var(--accent);
+                border-radius: 5px;
+                color: var(--accent);
+                cursor: pointer;
+                text-transform: capitalize;
+            }
+
+            .tabs a.active {
+                background-color: var(--accent);
+                color: white;
+            }
+
+
+            .tabs a.counting::after {
+                content: attr(data-count);
+                background: var(--accent);
+                color: white;
+                font-size: 0.7rem;
+                margin-left: 6px;
+                padding: 2px 6px;
+                border-radius: 10px;
+                display: inline-block;
+            }
+
+            .tabs a.counting.active::after {
+                content: attr(data-count);
+                background: white;
+                color: black;
+                font-size: 0.7rem;
+                margin-left: 6px;
+                padding: 2px 6px;
+                border-radius: 10px;
+                display: inline-block;
+            }
+
+            section.content {
+                padding: 16px;
+            }
+
+            h1 {
+                font-size: 1.8rem;
+                margin-top: 0px;
+                margin-bottom: 20px;
+            }
+
+            input[type="text"] {
+                display: inline-flex;
+                margin-top: 16px;
+                padding: 0.5rem;
+                font-size: 1rem;
+                border: 1px solid var(--table-border);
+                border-radius: 6px;
+                max-width: 300px;
+            }
+
+            input[type="text"]:focus {
+                outline: 1px solid var(--accent);
+            }
+
+            .match-true {
+                color: green;
+                font-weight: bold;
+            }
+
+            .match-false {
+                color: red;
+                font-weight: bold;
+            }
+
+            .json-view {
+                margin-top: 16px;
+                white-space: pre-wrap;
+                background: var(--table-bg);
+                padding: 1rem;
+                border: 1px solid var(--table-border);
+                border-radius: 6px;
+                font-family: monospace;
+                max-height: 600px;
+                overflow: auto;
+            }
+
+            .table-container {
+                overflow-x: auto;
+                border-radius: 0.5rem;
+                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+            }
+
+            table {
+                width: 100%;
+                border-collapse: collapse;
+                background: var(--table-bg);
+                margin-top: 1rem;
+                border: 1px solid var(--table-border);
+            }
+
+            th,
+            td {
+                padding: 0.75rem;
+                text-align: left;
+                border: 1px solid var(--table-border);
+                font-size: 0.95rem;
+            }
+
+            thead {
+                background-color: var(--accent);
+                color: white;
+            }
+
+            /* Light mode zebra striping */
+            tbody tr:nth-child(odd) {
+                background-color: var(--tr-odd);
+            }
+
+            tbody tr:nth-child(even) {
+                background-color: var(--tr-even);
+            }
+
+            /* Hover effect */
+            tbody tr:hover {
+                background-color: var(--tr-hover);
+            }
+
+            .status-true {
+                color: green;
+                font-weight: bold;
+            }
+
+            .status-false {
+                color: red;
+                font-weight: bold;
+            }
+
+            @media (max-width: 768px) {
+
+                table,
+                thead,
+                tbody,
+                th,
+                td,
+                tr {
+                    display: block;
+                }
+
+                thead {
+                    display: none;
+                }
+
+                tr {
+                    margin-bottom: 1rem;
+                    border: 1px solid var(--table-border);
+                    border-radius: 8px;
+                    background: var(--table-bg);
+                }
+
+                td {
+                    display: flex;
+                    justify-content: space-between;
+                    padding: 0.5rem 1rem;
+                    border: none;
+                }
+
+                td::before {
+                    content: attr(data-label);
+                    font-weight: bold;
+                    color: var(--accent);
+                }
+            }
+        </style>
+    </head>
+    <body>
+        ${navbar}
+
+        <section class="content">
+            <h1>
+                ${find?.doc_title}
+            </h1>
+            ${find?.content}
+            <section>
+                <script>
+
+                    const themeCookieName = "tezx-theme";
+
+                    function setCookie(name, value, days = 30) {
+                        const expires = new Date(Date.now() + days * 864e5).toUTCString();
+                        document.cookie = ${"`${ name }=${ value }; expires = ${ expires }; path =/`"};
+                    }
+                    function getCookie(name) {
+                        return document.cookie.split('; ').reduce((acc, cookie) => {
+                            const [key, val] = cookie.split('=');
+                            return key === name ? decodeURIComponent(val) : acc;
+                        }, null);
+                    }
+
+                    function toggleTheme() {
+                        document.body.classList.toggle('dark');
+                        setCookie(themeCookieName, document.body.classList.contains('dark') ? 'dark' : 'light');
+                    }
+
+                    // Load theme from cookie
+                    window.addEventListener('DOMContentLoaded', () => {
+                        const savedTheme = getCookie(themeCookieName);
+                        if (savedTheme === 'dark') {
+                            document.body.classList.add('dark');
+                        }
+                    });
+                </script>
+    </body>
+</html>
+  `;
+    };
+}
+export default DevTools;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@tezx/devtools",
+  "version": "1.0.0",
+  "description": "Developer tools for the TezX framework, including route inspector, cookie manager, and real-time diagnostics. Lightweight and plug-and-play compatible with Node.js, Bun, and Deno.",
+  "main": "cjs/index.js",
+  "module": "index.js",
+  "types": "index.d.ts",
+  "typings": "index.d.ts",
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tezxjs/devtools.git"
+  },
+  "bugs": {
+    "url": "https://github.com/tezxjs/devtools/issues"
+  },
+  "homepage": "https://github.com/tezxjs/devtools#readme",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./cjs/index.js",
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    }
+  },
+  "files": [
+    "cjs/",
+    "devtools/",
+    "html/",
+    "index.js",
+    "index.d.ts"
+  ],
+  "keywords": [
+    "devtools",
+    "tezx",
+    "debugging",
+    "developer-tools",
+    "route-inspector",
+    "cookie-manager",
+    "inspector",
+    "nodejs",
+    "bun",
+    "deno"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18",
+    "bun": ">=1.0",
+    "deno": ">=1.36"
+  },
+  "author": "SRAKIB17",
+  "license": "MIT"
+}