@tezx/devtools 1.0.8 → 1.0.9

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@tezx/devtools",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "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",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "typings": "dist/index.d.ts",
   "scripts": {},
   "repository": {
     "type": "git",
@@ -17,18 +18,14 @@
   "homepage": "https://github.com/tezxjs/tezx-toolkit/tree/main/helpers/tezx-devtools#readme",
   "exports": {
     ".": {
-      "import": "./index.js",
-      "require": "./cjs/index.js",
-      "types": "./index.d.ts",
-      "default": "./index.js"
+      "import": "./dist/index.mjs",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/index.d.ts"
     }
   },
+  "sideEffects": false,
   "files": [
-    "cjs/",
-    "devtools/",
-    "html/",
-    "index.js",
-    "index.d.ts"
+    "dist/"
   ],
   "keywords": [
     "devtools",

package/cjs/devtools/dumpRoutes.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dumpRoutes = dumpRoutes;
-const helper_1 = require("tezx/helper");
-function collectRoutes(node, basePath = "/") {
-    const routes = [];
-    let fullPath = basePath;
-    if (node.isParam && node.paramName) {
-        fullPath = `${basePath.replace(/\/+$/, "")}${node.paramName}`;
-    }
-    const pathname = (0, helper_1.sanitizePathSplit)("/", fullPath).join("/");
-    for (const [method, handler] of node.handlers.entries()) {
-        routes.push({
-            method,
-            endpoint: node.pathname,
-            pattern: `/${pathname}`,
-            appliedMiddlewares: [...(handler?.middlewares || [])].map((r) => r?.name || "anonymous"),
-        });
-    }
-    for (const [childPath, childNode] of node.children.entries()) {
-        const newPath = (0, helper_1.sanitizePathSplit)(fullPath, childPath).join("/");
-        routes.push(...collectRoutes(childNode, newPath));
-    }
-    return routes;
-}
-function dumpRoutes(TezX) {
-    let app = TezX;
-    const triRoutes = collectRoutes(app.triRouter);
-    const staticRoutes = [];
-    for (const [path, handlers] of app.routers) {
-        for (const [method, handler] of handlers) {
-            staticRoutes.push({
-                endpoint: path?.replace(/^string:\/\//, "/").replace(/^regex:\/\//, ""),
-                pattern: path,
-                method,
-                appliedMiddlewares: [...(handler?.middlewares || [])].map((r) => r?.name || "anonymous"),
-            });
-        }
-    }
-    return [...triRoutes, ...staticRoutes];
-}

package/cjs/devtools/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dumpMiddlewares = exports.dumpRoutes = void 0;
-var dumpRoutes_js_1 = require("./dumpRoutes.js");
-Object.defineProperty(exports, "dumpRoutes", { enumerable: true, get: function () { return dumpRoutes_js_1.dumpRoutes; } });
-var middlewares_js_1 = require("./middlewares.js");
-Object.defineProperty(exports, "dumpMiddlewares", { enumerable: true, get: function () { return middlewares_js_1.dumpMiddlewares; } });

package/cjs/devtools/middlewares.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dumpMiddlewares = dumpMiddlewares;
-const helper_1 = require("tezx/helper");
-function detectRouteType(pathname, isOptional) {
-    if (pathname.includes("*"))
-        return "wildcard";
-    if (pathname.includes(":"))
-        return "dynamic params";
-    if (isOptional)
-        return "optional params";
-    return "static";
-}
-function collectMiddlewares(node, basePath = "/") {
-    const routes = [];
-    const fullPath = (0, helper_1.sanitizePathSplit)("/", basePath).join("/");
-    const routeType = detectRouteType(fullPath, node.isOptional);
-    routes.push({
-        type: routeType,
-        pattern: `/${fullPath}`,
-        appliedMiddlewares: Array.isArray(node.middlewares)
-            ? node.middlewares.map((mw) => mw?.name || "anonymous")
-            : Array.from(node.middlewares).map((mw) => mw?.name || "anonymous"),
-    });
-    for (const [childPath, childNode] of node.children.entries()) {
-        const newPath = (0, helper_1.sanitizePathSplit)(basePath, childPath).join("/");
-        routes.push(...collectMiddlewares(childNode, newPath));
-    }
-    return routes;
-}
-function dumpMiddlewares(TezX) {
-    return collectMiddlewares(TezX.triMiddlewares);
-}

package/cjs/html/cookies.js

@@ -1,164 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CookiesInspector = CookiesInspector;
-function CookiesInspector(ctx) {
-    const cookies = ctx.cookies.all();
-    const html = `
-    <style>
-      td[contenteditable="true"] {
-        outline: 0px;
-      }
-      td[contenteditable="true"]:focus {
-        outline: 1px solid var(--accent);
-      }
-
-      .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>\${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 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();
-        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/cjs/html/env.js

@@ -1,145 +0,0 @@
-"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>${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/cjs/html/index.js

@@ -1,36 +0,0 @@
-"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 middlewares_js_1 = require("./middlewares.js");
-const routes_js_1 = require("./routes.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: "DevTools - Middleware Inspector",
-            label: "Middlewares",
-            tab: "middleware",
-            content: (0, middlewares_js_1.Middlewares)(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/middlewares.js

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