@tezx/devtools 1.0.4 → 1.0.5

package/html/cookies.js

@@ -1,142 +1,161 @@
 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);
-        }
+    <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;
 }

package/html/env.d.ts

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

package/html/env.js

@@ -0,0 +1,142 @@
+export function EnvInspector(ctx) {
+    const env = ctx.env;
+    const entries = Object.entries(env);
+    const tableRows = entries.length
+        ? entries
+            .map(([key, value], i) => {
+            const safeKey = key.replace(/"/g, """);
+            const safeValue = value.replace(/`/g, "\\`").replace(/"/g, """);
+            return `
+          <tr data-key="${safeKey.toLowerCase()}" data-value="${value.toLowerCase()}">
+            <td>${i + 1}</td>
+            <td>${safeKey}</td>
+            <td>${value}</td>
+            <td><button onclick="copyRowEnv('${safeKey}', \`${safeValue}\`)">📋</button></td>
+          </tr>
+        `;
+        })
+            .join("")
+        : `
+    <tr>
+      <td colspan="4">
+        <p>⚠️ <strong>No environment variables found.</strong></p>
+        <pre style="margin-top: 1rem; background: #f1f5f9; padding: 1rem; border-radius: 0.5rem;">
+const env = loadEnv();
+
+export const app = new TezX({
+  env: env,
+  debugMode: true,
+  // basePath: 'v1',
+  allowDuplicateMw: true,
+});
+        </pre>
+      </td>
+    </tr>`;
+    return `
+  <style>
+    table td button {
+      background: #e2e8f0;
+      border: none;
+      padding: 0.3rem 0.6rem;
+      border-radius: 0.375rem;
+      cursor: pointer;
+    }
+    table td button:hover {
+      background: #cbd5e1;
+    }
+    pre#json-output {
+      margin-top: 1rem;
+      padding: 1rem;
+      border-radius: 0.5rem;
+      background: #f9fafb;
+      border: 1px solid #e5e7eb;
+      font-size: 0.875rem;
+      overflow-x: auto;
+      display: none;
+    }
+    .search-container {
+      margin-bottom: 1rem;
+    }
+    .search-container input {
+      padding: 0.5rem;
+      width: 100%;
+      max-width: 400px;
+      border: 1px solid #e5e7eb;
+      border-radius: 0.375rem;
+    }
+  </style>
+
+  <div class="tabs">
+    <a onclick="exportEnv()">📤 Export JSON</a>
+    <a onclick="copyAllEnv()">📋 Copy All</a>
+  </div>
+
+  <div class="search-container">
+    <input type="text" id="env-search" placeholder="🔍 Search environment variables..." oninput="filterEnvTable()" />
+  </div>
+
+  <div class="table-container">
+    <table>
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Key</th>
+          <th>Value</th>
+          <th>Copy</th>
+        </tr>
+      </thead>
+      <tbody id="env-body">
+        ${tableRows}
+      </tbody>
+    </table>
+  </div>
+
+  <pre id="json-output">${JSON.stringify(env, null, 2)}</pre>
+
+  <script>
+    function exportEnv() {
+      const output = document.getElementById('json-output');
+      const blob = new Blob([output.textContent], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'env.json';
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+
+    function copyAllEnv() {
+      const output = document.getElementById('json-output');
+      navigator.clipboard.writeText(output.textContent).then(() => {
+        alert('✅ All environment variables copied!');
+      }).catch(err => {
+        alert('❌ Failed to copy: ' + err);
+      });
+    }
+
+    function copyRowEnv(key, value) {
+      const text = \`\${key}=\${value}\`;
+      navigator.clipboard.writeText(text).then(() => {
+        alert(\`✅ Copied: \${text}\`);
+      }).catch(err => {
+        alert('❌ Failed to copy: ' + err);
+      });
+    }
+
+    function filterEnvTable() {
+      const input = document.getElementById('env-search').value.toLowerCase();
+      const rows = document.querySelectorAll('#env-body tr');
+
+      rows.forEach(row => {
+        const key = row.getAttribute('data-key') || '';
+        const value = row.getAttribute('data-value') || '';
+        if (key.includes(input) || value.includes(input)) {
+          row.style.display = '';
+        } else {
+          row.style.display = 'none';
+        }
+      });
+    }
+  </script>
+`;
+}

package/html/index.d.ts

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

package/html/index.js

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

package/html/middlewares.d.ts

@@ -0,0 +1,7 @@
+import { Context, TezX } from "tezx";
+export type MiddlewareEntry = {
+    pattern: string;
+    type: "static" | "wildcard" | "optional params" | "dynamic params";
+    appliedMiddlewares: string[];
+};
+export declare function Middlewares(ctx: Context, app: TezX): string;

package/html/middlewares.js

@@ -0,0 +1,181 @@
+import { dumpMiddlewares } from "../devtools";
+export function Middlewares(ctx, app) {
+    const allRoutes = 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>
+  `;
+}