nestjs-devtools 1.0.0 → 1.1.0

package/README.md

@@ -15,9 +15,7 @@ Symfony-style debug toolbar for NestJS applications.
 ## Installation
 
 ```bash
-npm install @nestjs/devtools
-# or
-yarn add @nestjs/devtools
+npm install nestjs-devtools
 ```
 
 ## Usage
@@ -26,7 +24,7 @@ Import in your root `AppModule`:
 
 ```typescript
 import { Module } from '@nestjs/common';
-import { DevtoolsModule } from '@nestjs/devtools';
+import { DevtoolsModule } from 'nestjs-devtools';
 
 @Module({
   imports: [
@@ -55,7 +53,7 @@ export class AppModule {}
 
 ```typescript
 import { Injectable } from '@nestjs/common';
-import { AbstractCollector, DevtoolsData } from '@nestjs/devtools';
+import { AbstractCollector, DevtoolsData } from 'nestjs-devtools';
 
 @Injectable()
 export class CustomCollector extends AbstractCollector {
@@ -75,6 +73,8 @@ export class CustomCollector extends AbstractCollector {
 Then pass it to `forRoot`:
 
 ```typescript
+import { DevtoolsModule } from 'nestjs-devtools';
+
 DevtoolsModule.forRoot({ collectors: [CustomCollector] })
 ```
 

package/dist/devtools.filter.js

@@ -13,41 +13,7 @@ exports.DevtoolsFilter = void 0;
 const common_1 = require("@nestjs/common");
 const rxjs_1 = require("rxjs");
 const devtools_service_1 = require("./devtools.service");
-const TOOLBAR_SCRIPT = (dataUrl) => `
-<script id="__devtools">
-(function() {
-  var TOOLBAR_URL = '${dataUrl}';
-  var container = document.createElement('div');
-  container.id = 'nestjs-devtoolbar';
-  container.innerHTML = '<div style="position:fixed;bottom:0;left:0;z-index:99999;font-family:system-ui,sans-serif;font-size:12px;background:#1e1e2e;color:#cdd6f4;border-top:2px solid #89b4fa;padding:0;width:100%;display:flex;align-items:center;height:36px;box-shadow:0 -2px 10px rgba(0,0,0,0.3)">Loading NestJS Devtools...</div>';
-  document.body.appendChild(container);
-
-  fetch(TOOLBAR_URL)
-    .then(function(r) { return r.json(); })
-    .then(function(data) {
-      var html = '<div style="position:fixed;bottom:0;left:0;z-index:99999;font-family:system-ui,sans-serif;font-size:12px;background:#1e1e2e;color:#cdd6f4;border-top:2px solid #89b4fa;width:100%;box-shadow:0 -2px 10px rgba(0,0,0,0.3)">';
-      html += '<div style="display:flex;align-items:center;height:36px;padding:0 12px;gap:6px;overflow-x:auto;white-space:nowrap">';
-      html += '<span style="font-weight:700;color:#89b4fa;margin-right:8px">DEV</span>';
-      html += '<span style="background:#313244;padding:2px 8px;border-radius:4px;color:#a6e3a1">' + (data.request?.summary || 'N/A') + '</span>';
-      html += '<span style="background:#313244;padding:2px 8px;border-radius:4px;color:#f9e2af">' + (data.performance?.summary || '') + '</span>';
-      html += '<span style="background:#313244;padding:2px 8px;border-radius:4px;color:#89b4fa">' + (data.database?.summary || '') + '</span>';
-      html += '<span style="background:#313244;padding:2px 8px;border-radius:4px;color:#94e2d5">' + (data.routes?.summary || '') + '</span>';
-      html += '<span style="background:#313244;padding:2px 8px;border-radius:4px;color:#fab387">' + (data.logs?.summary || '') + '</span>';
-      html += '<span style="margin-left:auto;color:#6c7086;cursor:pointer" onclick="var d=document.getElementById(\\'nestjs-devtoolbar-detail\\');d.style.display=d.style.display===\\'none\\'?\\'flex\\':\\'none\\'">&#x25B2; Details</span>';
-      html += '</div>';
-
-      html += '<div id="nestjs-devtoolbar-detail" style="display:none;border-top:1px solid #313244;padding:12px;max-height:300px;overflow-y:auto;background:#181825;font-size:11px">';
-      html += '<pre style="margin:0;color:#cdd6f4;white-space:pre-wrap;font-family:monospace">' + JSON.stringify(data, null, 2) + '</pre>';
-      html += '</div>';
-
-      html += '</div>';
-      container.innerHTML = html;
-    })
-    .catch(function() {
-      container.innerHTML = '';
-    });
-})();
-</script>`;
+const template_1 = require("./toolbar/template");
 let DevtoolsFilter = class DevtoolsFilter {
     constructor(devtoolsService) {
         this.devtoolsService = devtoolsService;
@@ -57,7 +23,7 @@ let DevtoolsFilter = class DevtoolsFilter {
             const response = context.switchToHttp().getResponse();
             const contentType = response.getHeader('content-type') ?? '';
             if (typeof data === 'string' && contentType.includes('text/html')) {
-                return data.replace('</body>', TOOLBAR_SCRIPT('/__devtools/data') + '</body>');
+                return data.replace('</body>', (0, template_1.TOOLBAR_TEMPLATE)('/__devtools/data') + '</body>');
             }
             return data;
         }));

package/dist/devtools.filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.filter.js","sourceRoot":"","sources":["../devtools.filter.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAKwB;AACxB,+BAAuC;AACvC,yDAAqD;AAErD,MAAM,cAAc,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC;;;uBAGrB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA+BpB,CAAC;AAGJ,IAAM,cAAc,GAApB,MAAM,cAAc;IACzB,YAA6B,eAAgC;QAAhC,oBAAe,GAAf,eAAe,CAAiB;IAAG,CAAC;IAEjE,SAAS,CAAC,OAAyB,EAAE,IAAiB;QACpD,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CACvB,IAAA,UAAG,EAAC,CAAC,IAAI,EAAE,EAAE;YACX,MAAM,QAAQ,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC,WAAW,EAAE,CAAC;YACtD,MAAM,WAAW,GAAG,QAAQ,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;YAE7D,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;gBAClE,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,GAAG,SAAS,CAAC,CAAC;YACjF,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;CACF,CAAA;AAjBY,wCAAc;yBAAd,cAAc;IAD1B,IAAA,mBAAU,GAAE;qCAEmC,kCAAe;GADlD,cAAc,CAiB1B"}
+{"version":3,"file":"devtools.filter.js","sourceRoot":"","sources":["../devtools.filter.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAKwB;AACxB,+BAAuC;AACvC,yDAAqD;AACrD,iDAAsD;AAG/C,IAAM,cAAc,GAApB,MAAM,cAAc;IACzB,YAA6B,eAAgC;QAAhC,oBAAe,GAAf,eAAe,CAAiB;IAAG,CAAC;IAEjE,SAAS,CAAC,OAAyB,EAAE,IAAiB;QACpD,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CACvB,IAAA,UAAG,EAAC,CAAC,IAAI,EAAE,EAAE;YACX,MAAM,QAAQ,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC,WAAW,EAAE,CAAC;YACtD,MAAM,WAAW,GAAG,QAAQ,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;YAE7D,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;gBAClE,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,IAAA,2BAAgB,EAAC,kBAAkB,CAAC,GAAG,SAAS,CAAC,CAAC;YACnF,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;CACF,CAAA;AAjBY,wCAAc;yBAAd,cAAc;IAD1B,IAAA,mBAAU,GAAE;qCAEmC,kCAAe;GADlD,cAAc,CAiB1B"}

package/dist/toolbar/template.d.ts

@@ -0,0 +1 @@
+export declare const TOOLBAR_TEMPLATE: (dataUrl: string) => string;

package/dist/toolbar/template.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOOLBAR_TEMPLATE = void 0;
+const TOOLBAR_TEMPLATE = (dataUrl) => {
+    const id = '__nestDevtools';
+    const uid = Math.random().toString(36).slice(2, 8);
+    return `<script id="${id}">
+(function(){
+  var D=document, B=D.body, C='__nestDt'+'${uid}';
+  var c=D.createElement('div'); c.id=C;
+  c.innerHTML='<div style="position:fixed;bottom:0;left:0;z-index:99999;font-family:-apple-system,BlinkMacSystemFont,\'Segoe UI\',Roboto,sans-serif;font-size:12px;background:#1f2937;color:#f3f4f6;border-top:2px solid #3b82f6;width:100%;box-shadow:0 -4px 12px rgba(0,0,0,0.35)"><div style="display:flex;align-items:center;height:34px;padding:0 8px;gap:4px;overflow-x:auto;white-space:nowrap;scrollbar-width:none"><span style="font-weight:800;font-size:13px;color:#60a5fa;padding:0 10px 0 4px;letter-spacing:-0.5px">NDev</span><div id="'+C+'-bar"></div><span id="'+C+'-toggle" style="margin-left:auto;color:#6b7280;cursor:pointer;padding:4px 8px;font-size:14px">&#x2039;</span></div><div id="'+C+'-panel" style="display:none;border-top:1px solid #374151;background:#111827;font-size:12px;line-height:1.5"></div></div>';
+  B.appendChild(c);
+
+  var lastActive=null;
+  function renderPanel(name, detail) {
+    var p=D.getElementById(C+'-panel');
+    if (lastActive===name) { p.style.display='none'; lastActive=null; return; }
+    lastActive=name;
+    var h='<div style="padding:12px 16px;max-height:360px;overflow-y:auto">';
+    h+='<div style="display:flex;align-items:center;margin-bottom:10px;gap:8px">';
+    h+='<span style="font-weight:700;font-size:13px">'+detail.label+'</span>';
+    h+='<span style="color:#9ca3af;font-size:11px">'+detail.summary+'</span>';
+    h+='<span style="margin-left:auto;cursor:pointer;color:#6b7280;font-size:16px" onclick="document.getElementById(\''+C+'-panel\').style.display=\'none\';lastActive=null">\u00d7</span>';
+    h+='</div>';
+    h+='<table style="width:100%;border-collapse:collapse">';
+    for (var k in detail.details) {
+      var v=detail.details[k];
+      if (k==='queries' && Array.isArray(v)) {
+        for (var i=0;i<v.length;i++) {
+          h+='<tr><td style="padding:4px 8px;color:#9ca3af;border-bottom:1px solid #1f2937;vertical-align:top;width:80px">#'+(i+1)+'</td><td style="padding:4px 8px;border-bottom:1px solid #1f2937;font-family:monospace;font-size:11px;word-break:break-all">'+escapeHtml(v[i].sql||'')+'</td><td style="padding:4px 8px;border-bottom:1px solid #1f2937;text-align:right;color:#fbbf24">'+escapeHtml(v[i].duration||'')+'</td></tr>';
+        }
+        continue;
+      }
+      if (k==='entries' && Array.isArray(v)) {
+        for (var i=0;i<v.length;i++) {
+          var e=v[i];
+          var lc=e.level==='error'?'#ef4444':e.level==='warn'?'#f59e0b':'#9ca3af';
+          h+='<tr><td style="padding:3px 8px;color:'+lc+';border-bottom:1px solid #1f2937;width:60px;text-transform:uppercase;font-weight:600;font-size:10px">'+escapeHtml(e.level||'')+'</td><td style="padding:3px 8px;border-bottom:1px solid #1f2937;word-break:break-all">'+escapeHtml(e.message||'')+'</td></tr>';
+        }
+        continue;
+      }
+      if (k==='grouped' && Array.isArray(v)) {
+        for (var i=0;i<v.length;i++) {
+          var g=v[i];
+          h+='<tr><td colspan="3" style="padding:6px 8px;color:#60a5fa;font-weight:600;border-bottom:1px solid #1f2937">'+escapeHtml(g.method||'')+' ('+(g.count||0)+')</td></tr>';
+          if (g.routes) {
+            for (var j=0;j<g.routes.length;j++) {
+              h+='<tr><td style="padding:2px 8px 2px 24px;border-bottom:1px solid #1f2937;font-family:monospace;font-size:11px" colspan="3">'+escapeHtml(g.routes[j].path||'')+' <span style="color:#6b7280">('+escapeHtml(g.routes[j].controller||'')+')</span></td></tr>';
+            }
+          }
+        }
+        continue;
+      }
+      h+='<tr><td style="padding:4px 8px;color:#9ca3af;border-bottom:1px solid #1f2937;width:120px;vertical-align:top">'+escapeHtml(k)+'</td><td style="padding:4px 8px;border-bottom:1px solid #1f2937;word-break:break-all">'+escapeHtml(String(v))+'</td></tr>';
+    }
+    h+='</table></div>';
+    p.innerHTML=h;
+    p.style.display='block';
+    D.getElementById(C+'-toggle').innerHTML='&#x203a;';
+  }
+
+  function escapeHtml(s) {
+    if (s==null) return '';
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  fetch('${dataUrl}').then(function(r){return r.json()}).then(function(d){
+    var bar=D.getElementById(C+'-bar');
+    var panels=[];
+    if(d.request) panels.push(d.request);
+    if(d.performance) panels.push(d.performance);
+    if(d.database) panels.push(d.database);
+    if(d.routes) panels.push(d.routes);
+    if(d.logs) panels.push(d.logs);
+    for(var k in d){if(panels.indexOf(d[k])===-1&&d[k]&&d[k].label)panels.push(d[k]);}
+    var colors=['#a6e3a1','#f9e2af','#89b4fa','#94e2d5','#fab387','#cba6f7','#f38ba8','#a6e3a1'];
+    var icons={request:'\u{1F310}',performance:'\u26A1',database:'\u{1F5C4}\uFE0F',routes:'\u{1F4CB}',logs:'\u{1F4DD}','default':'\u{1F527}'};
+    panels.forEach(function(p,i){
+      var ic=icons[p.label.toLowerCase()]||icons['default'];
+      var btn=D.createElement('span');
+      btn.style.cssText='display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:4px;cursor:pointer;color:#d1d5db;background:#374151;margin:0 2px;transition:background .15s';
+      btn.innerHTML=ic+' '+escapeHtml(p.summary);
+      btn.onmouseenter=function(){this.style.background='#4b5563'};
+      btn.onmouseleave=function(){this.style.background='#374151'};
+      btn.onclick=function(n){return function(){renderPanel(n,d[n]||d[Object.keys(d).filter(function(k){return d[k]===p})[0]])}}(Object.keys(d).filter(function(k){return d[k]===p})[0]);
+      bar.appendChild(btn);
+    });
+    D.getElementById(C+'-toggle').onclick=function(){
+      var p=D.getElementById(C+'-panel');
+      p.style.display=p.style.display==='none'?'block':'none';
+      this.innerHTML=p.style.display==='block'?'\u203A':'\u2039';
+    };
+  }).catch(function(){});
+})();
+</script>`;
+};
+exports.TOOLBAR_TEMPLATE = TOOLBAR_TEMPLATE;
+//# sourceMappingURL=template.js.map

package/dist/toolbar/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../toolbar/template.ts"],"names":[],"mappings":";;;AAAO,MAAM,gBAAgB,GAAG,CAAC,OAAe,EAAE,EAAE;IAClD,MAAM,EAAE,GAAG,gBAAgB,CAAC;IAC5B,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAEnD,OAAO,eAAe,EAAE;;4CAEkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA0DpC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA4BR,CAAC;AACX,CAAC,CAAC;AA7FW,QAAA,gBAAgB,oBA6F3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nestjs-devtools",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Symfony-style debug toolbar for NestJS applications",
   "keywords": [
     "nestjs",