@tezx/devtools 1.0.10 → 1.0.11

package/cjs/html/StaticFile.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StaticFile = StaticFile;
+function StaticFile(ctx, app) {
+    const staticMap = Object.keys(app.staticFile);
+    const rawJSON = JSON.stringify(staticMap.map(r => {
+        const [method, path] = r.split(" ");
+        return {
+            method, path
+        };
+    }), null, 2);
+    const toCSV = (data) => {
+        const headers = ["Path", "Method"];
+        const rows = data.map((s) => {
+            const [method, path] = s.split(" ");
+            return [JSON.stringify(path), JSON.stringify(method)];
+        });
+        return [headers.join(","), ...rows.map((r) => r.join(","))].join("\n");
+    };
+    const csvString = toCSV(staticMap).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;
+    }
+    pre {
+        margin: 0;
+        font-size: 0.875rem;
+        line-height: 1.4;
+    }
+  </style>
+
+  <div class="tabs toolbar">
+    <a class="tab-btn active" onclick="showTab('static')">📂 Static Files (${staticMap?.length})</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 path or handler..." />
+  </div>
+
+  <div id="staticTab" class="table-container">
+    <table id="staticTable">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Path</th>
+          <th>Method</th>
+          <th>Copy</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${staticMap
+        .map((s, i) => {
+        const [method, path] = s.split(" ");
+        return `
+          <tr>
+            <td>${i + 1}</td>
+            <td>
+                <a href="${path}" target="_blank" style="color: var(--accent); text-decoration: underline; font-weight: 500; font-size: 0.95rem;">
+                    ${path}
+                </a>
+            </td>
+            <td>${method}</td>
+            <td>
+                <button class="copy-btn" onclick="copyToClipboard('${path}')">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M10 1.5A1.5 1.5 0 0 1 11.5 3v1h-1V3a.5.5 0 0 0-.5-.5H4A1.5 1.5 0 0 0 2.5 4v8A1.5 1.5 0 0 0 4 13.5H5v1H4A2.5 2.5 0 0 1 1.5 12V4A2.5 2.5 0 0 1 4 1.5h6z"/>
+                    <path d="M5.5 5A1.5 1.5 0 0 0 4 6.5v7A1.5 1.5 0 0 0 5.5 15h6A1.5 1.5 0 0 0 13 13.5v-7A1.5 1.5 0 0 0 11.5 5h-6zM5 6.5A.5.5 0 0 1 5.5 6h6a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5v-7z"/>
+                    </svg>
+                </button>
+            </td>
+          </tr>
+        `;
+    })
+        .join("")}
+      </tbody>
+    </table>
+  </div>
+
+  <div id="jsonTab" style="display:none">
+    <div class="json-view"><pre><code>${rawJSON}</code></pre></div>
+  </div>
+
+  <div id="exportTab" style="display:none">
+    <div class="download">
+      <a href="data:text/json;charset=utf-8,${encodeURIComponent(rawJSON)}" download="static.json">📥 JSON</a>
+      <a href="data:text/csv;charset=utf-8,${csvString}" download="static.csv">📥 CSV</a>
+    </div>
+  </div>
+
+  <script>
+    const tabs = ['static', 'json', 'export'];
+    const tabBtns = document.querySelectorAll('.tab-btn');
+
+    function showTab(tab) {
+      tabs.forEach(t => {
+        document.getElementById(t + 'Tab').style.display = t === tab ? 'block' : 'none';
+      });
+      tabBtns.forEach(btn => {
+        const active = btn.textContent.toLowerCase().includes(tab);
+        btn.classList.toggle('active', active);
+      });
+      document.getElementById('searchBar').style.display = (tab === 'static') ? 'flex' : 'none';
+    }
+
+    document.getElementById('search').addEventListener('input', (e) => {
+      const keyword = e.target.value.toLowerCase();
+      const rows = document.querySelectorAll('#staticTable tbody tr');
+      rows.forEach(row => {
+        row.style.display = row.textContent.toLowerCase().includes(keyword) ? '' : 'none';
+      });
+    });
+
+    function copyToClipboard(text) {
+      navigator.clipboard.writeText(text).then(() => {
+        showToast("Copied: " + text);
+      }).catch(err => {
+        alert("Failed to copy "+ err?.message);
+      });
+    }
+  </script>
+  `;
+}

package/cjs/html/cookies.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CookiesInspector = CookiesInspector;
+function CookiesInspector(ctx) {
+    const html = `
+    <style>
+      td[contenteditable="true"] {
+        outline: 0px;
+      }
+      td[contenteditable="true"]:focus {
+        outline: 1px solid var(--accent);
+        background: #fef9e7;
+      }
+    </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>\${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)">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                  <path d="M10 1.5A1.5 1.5 0 0 1 11.5 3v1h-1V3a.5.5 0 0 0-.5-.5H4A1.5 1.5 0 0 0 2.5 4v8A1.5 1.5 0 0 0 4 13.5H5v1H4A2.5 2.5 0 0 1 1.5 12V4A2.5 2.5 0 0 1 4 1.5h6z"/>
+                  <path d="M5.5 5A1.5 1.5 0 0 0 4 6.5v7A1.5 1.5 0 0 0 5.5 15h6A1.5 1.5 0 0 0 13 13.5v-7A1.5 1.5 0 0 0 11.5 5h-6zM5 6.5A.5.5 0 0 1 5.5 6h6a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5v-7z"/>
+                </svg>
+              </button>
+              <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" 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 + '=' + encodeURIComponent(value) + '; path=/';
+          }
+        });
+        renderCookies();
+        showToast('✅ Cookies saved!');
+      }
+
+
+      function exportCookies() {
+            const blob = new Blob([JSON.stringify(getCookies(), null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'cookie.json';
+            a.click();
+            URL.revokeObjectURL(url);
+      }
+
+      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(() => {
+              showToast(\`✅ Copied: \${key}\`);
+            });
+        }
+      }
+
+      renderCookies();
+    </script>
+  `;
+    return html;
+}

package/cjs/html/env.js

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnvInspector = EnvInspector;
+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><code>${safeKey}</code></td>
+            <td><code>${value}</code></td>
+            <td>
+              <button class="copy-btn" onclick="copyRowEnv('${safeKey}', \`${safeValue}\`)" title="Copy">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                  <path d="M10 1.5A1.5 1.5 0 0 1 11.5 3v1h-1V3a.5.5 0 0 0-.5-.5H4A1.5 1.5 0 0 0 2.5 4v8A1.5 1.5 0 0 0 4 13.5H5v1H4A2.5 2.5 0 0 1 1.5 12V4A2.5 2.5 0 0 1 4 1.5h6z"/>
+                  <path d="M5.5 5A1.5 1.5 0 0 0 4 6.5v7A1.5 1.5 0 0 0 5.5 15h6A1.5 1.5 0 0 0 13 13.5v-7A1.5 1.5 0 0 0 11.5 5h-6zM5 6.5A.5.5 0 0 1 5.5 6h6a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-6a.5.5 0 0 1-.5-.5v-7z"/>
+                </svg>
+              </button>
+            </td>
+          </tr>`;
+        })
+            .join("")
+        : `
+    <tr>
+      <td colspan="4">
+        <p>⚠️ <strong>No environment variables found.</strong></p>
+        <pre class="code-block">
+const env = loadEnv();
+
+export const app = new TezX({
+  env: env,
+  debugMode: true,
+  allowDuplicateMw: true,
+});
+        </pre>
+      </td>
+    </tr>`;
+    return `
+  <style>
+    .tabs {
+      margin-bottom: 1rem;
+    }
+    .tabs a {
+      display: inline-block;
+      margin-right: 1rem;
+      text-decoration: none;
+      font-weight: 500;
+      color: #0f172a;
+      cursor: pointer;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    table th, table td {
+      padding: 0.5rem;
+      border: 1px solid #e2e8f0;
+      text-align: left;
+    }
+
+    table td button.copy-btn {
+      background: #f8fafc;
+      border: none;
+      padding: 0.3rem 0.4rem;
+      border-radius: 0.375rem;
+      cursor: pointer;
+      color: #334155;
+      transition: background 0.2s ease;
+    }
+
+    .search-container {
+      margin-bottom: 1rem;
+    }
+
+    .search-container input {
+      padding: 0.5rem;
+      width: 100%;
+      max-width: 400px;
+      border: 1px solid #cbd5e1;
+      border-radius: 0.375rem;
+    }
+
+    .code-block {
+      background: #f1f5f9;
+      padding: 1rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+    }
+
+  </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(() => {
+        showToast('✅ All environment variables copied!');
+      }).catch(err => {
+        alert('❌ Failed to copy: ' + err);
+      });
+    }
+
+    function copyRowEnv(key, value) {
+      const text = \`\${key}=\${value}\`;
+      navigator.clipboard.writeText(text).then(() => {
+        showToast(\`✅ Copied: \${key}\`);
+      }).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') || '';
+        row.style.display = (key.includes(input) || value.includes(input)) ? '' : 'none';
+      });
+    }
+  </script>
+`;
+}

package/cjs/html/index.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.html = html;
+const cookies_js_1 = require("./cookies.js");
+const env_js_1 = require("./env.js");
+const routes_js_1 = require("./routes.js");
+const StaticFile_js_1 = require("./StaticFile.js");
+function html(ctx, app) {
+    let tabDb = [
+        {
+            doc_title: "DevTools - Route Inspector",
+            label: "Routes",
+            tab: "routes",
+            content: (0, routes_js_1.Routes)(ctx, app),
+        },
+        {
+            doc_title: "Static File",
+            label: "Static File",
+            tab: "static-file",
+            content: (0, StaticFile_js_1.StaticFile)(ctx, app),
+        },
+        {
+            tab: "cookies",
+            label: "Cookies",
+            doc_title: "DevTools - Cookie Inspector",
+            content: (0, cookies_js_1.CookiesInspector)(ctx),
+        },
+        {
+            tab: ".env",
+            label: "Environment",
+            doc_title: "DevTools - Environment",
+            content: (0, env_js_1.EnvInspector)(ctx),
+        },
+    ];
+    return tabDb;
+}

package/cjs/html/routes.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Routes = Routes;
+function Routes(ctx, app) {
+    const routeMap = app.route.reduce((acc, curr) => {
+        const { pattern, method, handlers } = curr;
+        if (!acc[pattern])
+            acc[pattern] = {};
+        acc[pattern][method] = handlers;
+        return acc;
+    }, {});
+    const allRoutes = Object.entries(routeMap).map(([pattern, middlewareMap]) => ({
+        pattern,
+        handlers: Object.entries(middlewareMap).map(([method, handlers]) => ({
+            method,
+            handlerNames: handlers.map((fn) => fn.name || "[anonymous]"),
+        })),
+    }));
+    const rawJSON = JSON.stringify(allRoutes, null, 2);
+    const toCSV = (data) => {
+        const headers = ["Path", "Middleware", "Handler"];
+        const rows = data.flatMap((route) => route.handlers.flatMap((mw) => mw.handlerNames.map((h) => [
+            JSON.stringify(route.pattern),
+            JSON.stringify(mw.method),
+            JSON.stringify(h),
+        ])));
+        return [headers.join(","), ...rows.map((r) => r.join(","))].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;
+    }
+
+    .router-title {
+      font-size: 1.25rem;
+      margin-bottom: 0.5rem;
+      font-weight: 600;
+      color: #334155;
+    }
+  </style>
+
+  <div class="tabs toolbar">
+    <a class="tab-btn active" onclick="showTab('routes')">📋 Routes (${allRoutes.flat(2)?.length})</a>
+    <a class="tab-btn" onclick="showTab('json')">🧾 Raw JSON</a>
+    <a class="tab-btn" onclick="showTab('export')">📤 Export</a>
+  </div>
+    <h2 class="router-title">📌 Router: <span class="router-name">${app.router.name}</span></h2>
+  <div id="searchBar">
+    <input type="text" id="search" placeholder="Filter by path or middleware..." />
+  </div>
+
+  <div id="routesTab" class="table-container">
+    <table id="routesTable">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Path</th>
+          <th>Middleware</th>
+          <th>Handlers</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${allRoutes.flatMap((r, i) => r.handlers.map((hn) => `
+              <tr>
+                <td>${i + 1}</td>
+                <td>${r.pattern}</td>
+                <td>
+                  ${hn.method === "ALL"
+        ? `<span style="
+                          display: inline-block;
+                          background-color: var(--accent);
+                          color: #fff;
+                          padding: 4px 10px;
+                          border-radius: 6px;
+                          font-weight: 500;
+                          font-size: 13px;
+                          box-shadow: 0 1px 4px rgba(0,0,0,0.15);
+                        ">${hn.method} <small style="opacity: 0.8;">(middleware)</small></span>`
+        : `<span style="
+                          font-size: 14px;
+                          color: #333;
+                        ">${hn.method}</span>`}
+                </td>
+                <td>${hn.handlerNames.join(", ")}</td>
+              </tr>
+            `))
+        .join("")}
+      </tbody>
+    </table>
+  </div>
+
+  <div id="jsonTab" style="display:none">
+    <div class="json-view"><pre>${rawJSON}</pre></div>
+  </div>
+
+  <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', 'json', 'export'];
+    const tabBtns = document.querySelectorAll('.tab-btn');
+
+    function showTab(tab) {
+      tabs.forEach(t => {
+        document.getElementById(t + 'Tab').style.display = t === tab ? 'block' : 'none';
+      });
+      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>
+  `;
+}