@tezx/devtools 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 SRAKIB17
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights  
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+coming soon

package/cjs/devtools/dumpRoutes.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dumpRoutes = dumpRoutes;
+function collectRoutes(node, basePath = '/') {
+    const routes = [];
+    let fullPath = node.pathname;
+    if (node.isParam) {
+        fullPath = `${basePath}/:${node.paramName}`;
+    }
+    let pathname = fullPath?.replace(/\/+/g, '/');
+    for (const [method, _handler] of node.handlers.entries()) {
+        routes.push({
+            method,
+            match: node.pathname == pathname,
+            userPath: node.pathname,
+            routePattern: pathname,
+            appliedMiddlewares: [..._handler.middlewares].map(r => r?.name || "anonymous")
+        });
+    }
+    for (const child of node.children.values()) {
+        routes.push(...collectRoutes(child, fullPath));
+    }
+    return routes;
+}
+function dumpRoutes(TezX) {
+    let app = TezX;
+    let tri = collectRoutes(app.triRouter);
+    for (const [path, handlers] of app.routers) {
+        handlers.forEach((_, key) => {
+            console.log();
+            tri.push({
+                match: true,
+                userPath: `/${path}`,
+                routePattern: `/${path}`,
+                method: key,
+                appliedMiddlewares: [..._?.middlewares]?.map(r => r?.name || "anonymous")
+            });
+        });
+    }
+    return tri;
+}

package/cjs/devtools/index.js

@@ -0,0 +1,17 @@
+"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;

package/cjs/devtools/middlewares.js

@@ -0,0 +1,23 @@
+"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}`));
+    }
+    return entries;
+}

package/cjs/html/cookies.js

@@ -0,0 +1,145 @@
+"use strict";
+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);
+        }
+
+        .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');
+          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>
+          \`;
+          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 + '=' + 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>
+      `;
+    return html;
+}

package/cjs/html/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.html = html;
+const routes_js_1 = require("./routes.js");
+const cookies_js_1 = require("./cookies.js");
+function html(ctx, app) {
+    let tabDb = [
+        {
+            doc_title: "DevTools - Route Inspector",
+            label: "Routes",
+            tab: 'routes',
+            content: (0, routes_js_1.Routes)(ctx, app)
+        },
+        {
+            tab: 'cookies',
+            label: 'Cookies',
+            doc_title: 'DevTools - Cookie Inspector',
+            content: (0, cookies_js_1.CookiesInspector)(ctx)
+        }
+    ];
+    return tabDb;
+}

package/cjs/html/routes.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Routes = Routes;
+const devtools_1 = require("../devtools");
+function Routes(ctx, app) {
+    const allRoutes = (0, devtools_1.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>
+  `;
+}