@tezx/devtools 1.0.12 → 1.0.14

package/README.md

@@ -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/env.js

@@ -42,39 +42,6 @@ export const app = new TezX({
     </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;
     }

package/cjs/html/routes.js

@@ -68,7 +68,6 @@ function Routes(ctx, app) {
       font-size: 1.25rem;
       margin-bottom: 0.5rem;
       font-weight: 600;
-      color: #334155;
     }
   </style>
 
@@ -111,7 +110,6 @@ function Routes(ctx, app) {
                         ">${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>

package/cjs/index.js

@@ -3,9 +3,17 @@ 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)
             : []);
@@ -290,7 +298,7 @@ function DevTools(app, options = { disableTabs: [] }) {
                 position: fixed;
                 bottom: 20px;
                 right: 20px;
-                background: #323232;
+                background: var(--accent);
                 color: white;
                 padding: 10px 16px;
                 border-radius: 8px;

package/html/env.js

@@ -39,39 +39,6 @@ export const app = new TezX({
     </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;
     }

package/html/routes.js

@@ -65,7 +65,6 @@ export function Routes(ctx, app) {
       font-size: 1.25rem;
       margin-bottom: 0.5rem;
       font-weight: 600;
-      color: #334155;
     }
   </style>
 
@@ -108,7 +107,6 @@ export function Routes(ctx, app) {
                         ">${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>

package/index.d.ts

@@ -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

@@ -1,8 +1,16 @@
 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)
             : []);
@@ -287,7 +295,7 @@ export function DevTools(app, options = { disableTabs: [] }) {
                 position: fixed;
                 bottom: 20px;
                 right: 20px;
-                background: #323232;
+                background: var(--accent);
                 color: white;
                 padding: 10px 16px;
                 border-radius: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tezx/devtools",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "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",