npm - @tezx/devtools - Versions diffs - 1.0.0 - Mend

@tezx/devtools 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/LICENSE +21 -0
package/README.md +1 -0
package/cjs/devtools/dumpRoutes.js +41 -0
package/cjs/devtools/index.js +17 -0
package/cjs/devtools/middlewares.js +23 -0
package/cjs/html/cookies.js +145 -0
package/cjs/html/index.js +22 -0
package/cjs/html/routes.js +160 -0
package/cjs/index.js +312 -0
package/devtools/dumpRoutes.d.ts +9 -0
package/devtools/dumpRoutes.js +38 -0
package/devtools/index.d.ts +10 -0
package/devtools/index.js +12 -0
package/devtools/middlewares.d.ts +7 -0
package/devtools/middlewares.js +20 -0
package/html/cookies.d.ts +2 -0
package/html/cookies.js +142 -0
package/html/index.d.ts +9 -0
package/html/index.js +19 -0
package/html/routes.d.ts +2 -0
package/html/routes.js +157 -0
package/index.d.ts +8 -0
package/index.js +309 -0
package/package.json +55 -0

package/cjs/index.js ADDED Viewed

@@ -0,0 +1,312 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevTools = DevTools;
+const index_js_1 = require("./html/index.js");
+function DevTools(app, options = { disableTabs: [], extraTabs: [] }) {
+    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 || []];
+        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>
+  `;
+    };
+}
+exports.default = DevTools;

package/devtools/dumpRoutes.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { TezX } from "tezx";
+export type RouteEntry = {
+    method: string;
+    routePattern: string;
+    userPath: string;
+    appliedMiddlewares: string[];
+    match: boolean;
+};
+export declare function dumpRoutes(TezX: TezX): RouteEntry[];

package/devtools/dumpRoutes.js ADDED Viewed

@@ -0,0 +1,38 @@
+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;
+}
+export 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/devtools/index.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export { dumpRoutes } from "./dumpRoutes";
+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 ADDED Viewed

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

package/devtools/middlewares.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { TriMiddleware } from "tezx/core/MiddlewareConfigure";
+type MiddlewareEntry = {
+    pathname: string;
+    middlewares: string[];
+};
+export declare function inspectMiddlewares(node: TriMiddleware, basePath?: string): MiddlewareEntry[];
+export {};

package/devtools/middlewares.js ADDED Viewed

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

package/html/cookies.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { Context } from "tezx";
2	+ export declare function CookiesInspector(ctx: Context): string;

package/html/cookies.js ADDED Viewed

@@ -0,0 +1,142 @@
+export 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/html/index.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { Context, TezX } from "tezx";
+export type Tab = ("cookies" | "routes");
+export type TabType = {
+    doc_title: string;
+    label: string;
+    tab: Tab;
+    content: string;
+}[];
+export declare function html(ctx: Context, app: TezX): TabType;

package/html/index.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { Routes } from "./routes.js";
+import { CookiesInspector } from "./cookies.js";
+export function html(ctx, app) {
+    let tabDb = [
+        {
+            doc_title: "DevTools - Route Inspector",
+            label: "Routes",
+            tab: 'routes',
+            content: Routes(ctx, app)
+        },
+        {
+            tab: 'cookies',
+            label: 'Cookies',
+            doc_title: 'DevTools - Cookie Inspector',
+            content: CookiesInspector(ctx)
+        }
+    ];
+    return tabDb;
+}

package/html/routes.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { Context, TezX } from "tezx";
2	+ export declare function Routes(ctx: Context, app: TezX): string;