npm - @tezx/devtools - Versions diffs - 1.0.13 → 4.0.1 - Mend

@tezx/devtools 1.0.13 → 4.0.1

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 (11) hide show

package/LICENSE CHANGED Viewed

File without changes

package/README.md CHANGED Viewed

@@ -25,7 +25,6 @@ In your TezX app entry (e.g., `server.ts` or `index.ts`):
 ```ts
 import { TezX } from "tezx";
-import {nodeAdapter} from "tezx/node";
 import DevTools from "@tezx/devtools";
 const app = new TezX();
@@ -39,7 +38,6 @@ app.get(
   })
 );
-nodeAdapter(app).listen(3000);
 ```
 Now visit:
@@ -74,35 +72,6 @@ DevTools(app: TezX<any>, options?: Options): Callback
 ---
-## 🛠️ Add Custom Tabs
-You can inject your own debug panels using the `extraTabs` option.
-```ts
-import DevTools , { dumpMiddlewares } from "@tezx/devtools";
-app.get(
-  "/devtools",
-  DevTools(app, {
-    extraTabs(ctx) {
-      const rows = dumpMiddlewares(app)
-        .map(r => `<tr><td>${r.endpoint}</td><td>${r.pattern}</td><td>${r.appliedMiddlewares}</td></tr>`)
-        .join("");
-      return [
-        {
-          tab: "middlewares",
-          label: "Middleware Table",
-          doc_title: "Middleware Overview",
-          content: `<table>${rows}</table>`
-        }
-      ];
-    }
-  })
-);
-```
----
 ## 📚 Types
 ```ts

package/cjs/html/index.js CHANGED Viewed

@@ -2,7 +2,6 @@
 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) {
@@ -25,12 +24,6 @@ function html(ctx, app) {
             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/index.js CHANGED Viewed

@@ -1,11 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DevTools = DevTools;
-const helper_1 = require("tezx/helper");
 const index_js_1 = require("./html/index.js");
-function DevTools(app, options = { disableTabs: [] }) {
-    let { disableTabs, extraTabs } = options;
+function DevTools(app, options = {
+    disableTabs: [],
+    enable: true,
+}) {
+    let { disableTabs } = options;
     return async (ctx) => {
+        if (!options?.enable) {
+            return ctx
+                .status(404)
+                .json({ error: "Devtools not enabled in this environment" });
+        }
         let extraTabs = await (typeof options.extraTabs === "function"
             ? options.extraTabs(ctx)
             : []);
@@ -26,14 +33,11 @@ function DevTools(app, options = { disableTabs: [] }) {
             </div>
             <div class="tabs">
                 <a class="toggle-dark" onclick="toggleTheme()">🌙 Toggle Dark</a>
-                <a class="active">
-                  ${helper_1.GlobalConfig.adapter}
-                </a>
             </div>
         </header>
         `;
         let find = html.find((r) => r?.tab == tab);
-        return ctx.html `
+        return ctx.html(`
 <!DOCTYPE html>
 <html lang="en">
     <head>
@@ -392,7 +396,7 @@ function DevTools(app, options = { disableTabs: [] }) {
                 </script>
     </body>
 </html>
-  `;
+  `);
     };
 }
 exports.default = DevTools;

package/html/index.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import { CookiesInspector } from "./cookies.js";
-import { EnvInspector } from "./env.js";
 import { Routes } from "./routes.js";
 import { StaticFile } from "./StaticFile.js";
 export function html(ctx, app) {
@@ -22,12 +21,6 @@ export function html(ctx, app) {
             doc_title: "DevTools - Cookie Inspector",
             content: CookiesInspector(ctx),
         },
-        {
-            tab: ".env",
-            label: "Environment",
-            doc_title: "DevTools - Environment",
-            content: EnvInspector(ctx),
-        },
     ];
     return tabDb;
 }

package/index.d.ts CHANGED Viewed

@@ -1,8 +1,16 @@
 import { Callback, Context, TezX } from "tezx";
 import { Tab, TabType } from "./html/index.js";
+/**
+ * Configuration options for the devtools.
+ *
+ * @property extraTabs - A function that receives the current context and returns additional tabs to be displayed. Can return a single tab or a promise resolving to a tab.
+ * @property disableTabs - An array of tabs to be disabled in the UI.
+ * @property enable - Indicates whether the devtools should be enabled. Set to `true` to activate devtools, or `false` to disable (e.g., in production).
+ */
 export type Options = {
     extraTabs?: (ctx: Context) => Promise<TabType> | TabType;
     disableTabs?: Tab[];
+    enable?: boolean;
 };
 export declare function DevTools(app: TezX<any>, options?: Options): Callback;
 export default DevTools;

package/index.js CHANGED Viewed

@@ -1,8 +1,15 @@
-import { GlobalConfig } from "tezx/helper";
 import { html as htmlTab } from "./html/index.js";
-export function DevTools(app, options = { disableTabs: [] }) {
-    let { disableTabs, extraTabs } = options;
+export function DevTools(app, options = {
+    disableTabs: [],
+    enable: true,
+}) {
+    let { disableTabs } = options;
     return async (ctx) => {
+        if (!options?.enable) {
+            return ctx
+                .status(404)
+                .json({ error: "Devtools not enabled in this environment" });
+        }
         let extraTabs = await (typeof options.extraTabs === "function"
             ? options.extraTabs(ctx)
             : []);
@@ -23,14 +30,11 @@ export function DevTools(app, options = { disableTabs: [] }) {
             </div>
             <div class="tabs">
                 <a class="toggle-dark" onclick="toggleTheme()">🌙 Toggle Dark</a>
-                <a class="active">
-                  ${GlobalConfig.adapter}
-                </a>
             </div>
         </header>
         `;
         let find = html.find((r) => r?.tab == tab);
-        return ctx.html `
+        return ctx.html(`
 <!DOCTYPE html>
 <html lang="en">
     <head>
@@ -389,7 +393,7 @@ export function DevTools(app, options = { disableTabs: [] }) {
                 </script>
     </body>
 </html>
-  `;
+  `);
     };
 }
 export default DevTools;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tezx/devtools",
-  "version": "1.0.13",
+  "version": "4.0.1",
   "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.",
   "type": "module",
   "main": "cjs/index.cjs",

package/cjs/html/env.js DELETED Viewed

@@ -1,135 +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, "&quot;");
-            const safeValue = value.replace(/`/g, "\\`").replace(/"/g, "&quot;");
-            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>
-    .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/html/env.d.ts DELETED Viewed

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

package/html/env.js DELETED Viewed

@@ -1,132 +0,0 @@
-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, "&quot;");
-            const safeValue = value.replace(/`/g, "\\`").replace(/"/g, "&quot;");
-            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>
-    .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>
-`;
-}