@aimeloic/monkey-tester 1.0.0 → 1.0.2

package/htmlTemplate.js

@@ -112,17 +112,14 @@ export function getHtmlTemplate(endpoints) {
 <div id="toast"></div>
 
 <script>
-// The backend server automatically stringifies the runtime mapping straight into here!
-const ENDPOINTS = ${JSON.stringify(endpoints, null, 2)};
+// Safely parse the object passed from node environment to prevent script token breaking 
+const ENDPOINTS = ${JSON.stringify(endpoints)};
 
 let currentEp = '';
 
 // Setup host variables contextually on layout initialization
 document.getElementById('base-url').value = window.location.origin;
 
-function getBase() { return document.getElementById('base-url').value.replace(/\/$/, ''); }
-function getJwt()  { return document.getElementById('jwt-input').value.trim(); }
-
 function buildSidebar() {
   const sidebar = document.getElementById('sidebar-nav');
   const keys = Object.keys(ENDPOINTS);
@@ -135,9 +132,9 @@ function buildSidebar() {
   keys.forEach((key, index) => {
     const ep = ENDPOINTS[key];
     const div = document.createElement('div');
-    div.className = \`nav-item \${index === 0 ? 'active' : ''}\`;
+    div.className = index === 0 ? 'nav-item active' : 'nav-item';
     div.setAttribute('data-ep', key);
-    div.innerHTML = \`<span class="method-badge \${ep.method}">\${ep.method}</span><span class="nav-label">\${ep.path}</span>\`;
+    div.innerHTML = '<span class="method-badge ' + ep.method + '">' + ep.method + '</span><span class="nav-label">' + ep.path + '</span>';
     
     div.addEventListener('click', () => {
       document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
@@ -159,41 +156,39 @@ function renderPanel(epKey) {
   const main = document.getElementById('main-panel');
   if(!ep) return;
 
-  let html = \`
-    <div class="endpoint-title">\${ep.title}</div>
-    <div class="endpoint-path">
-      <span class="method-badge \${ep.method}">\${ep.method}</span>
-      <span>\${ep.path}</span>
-    </div>
-    <div class="endpoint-desc">\${ep.desc}</div>
-  \`;
+  let html = '<div class="endpoint-title">' + ep.title + '</div>' +
+    '<div class="endpoint-path">' +
+      '<span class="method-badge ' + ep.method + '">' + ep.method + '</span>' +
+      '<span>' + ep.path + '</span>' +
+    '</div>' +
+    '<div class="endpoint-desc">' + ep.desc + '</div>';
 
-  if (ep.params?.length) {
-    html += \`<div class="form-section"><div class="form-section-title">Path Parameters</div>\`;
+  if (ep.params && ep.params.length) {
+    html += '<div class="form-section"><div class="form-section-title">Path Parameters</div>';
     ep.params.forEach(p => {
-      html += \`<div class="field-row">
-        <label class="field-label">\${p.label}</label>
-        <input type="text" id="param-\${p.name}" placeholder="\${p.placeholder}" />
-      </div>\`;
+      html += '<div class="field-row">' +
+        '<label class="field-label">' + p.label + '</label>' +
+        '<input type="text" id="param-' + p.name + '" placeholder="' + p.placeholder + '" />' +
+      '</div>';
     });
-    html += \`</div>\`;
+    html += '</div>';
   }
 
-  if (ep.fields?.length) {
-    html += \`<div class="form-section"><div class="form-section-title">JSON Request Body Raw Payload</div>\`;
+  if (ep.fields && ep.fields.length) {
+    html += '<div class="form-section"><div class="form-section-title">JSON Request Body Raw Payload</div>';
     ep.fields.forEach(f => {
-      html += \`<div class="field-row">
-        <label class="field-label">\${f.label}</label>
-        <input type="text" id="field-\${f.name}" value='{"key": "value"}' />
-      </div>\`;
+      html += '<div class="field-row">' +
+        '<label class="field-label">' + f.label + '</label>' +
+        '<input type="text" id="field-' + f.name + '" value=\'{"key": "value"}\' />' +
+      '</div>';
     });
-    html += \`</div>\`;
+    html += '</div>';
   }
 
-  html += \`<div class="btn-row">
-    <button class="btn" onclick="sendRequest()">Execute Route</button>
-    <button class="btn btn-secondary" onclick="clearResponse()">Clear Context</button>
-  </div>\`;
+  html += '<div class="btn-row">' +
+    '<button class="btn" onclick="sendRequest()">Execute Route</button>' +
+    '<button class="btn btn-secondary" onclick="clearResponse()">Clear Context</button>' +
+  '</div>';
 
   main.innerHTML = html;
 }
@@ -204,9 +199,9 @@ async function sendRequest() {
 
   if (ep.params) {
     for (const p of ep.params) {
-      const val = document.getElementById(\`param-\${p.name}\`)?.value.trim();
-      if (!val) { showToast(\`⚠ Parameter \${p.label} required\`); return; }
-      path = path.replace(\`:\${p.name}\`, encodeURIComponent(val));
+      const val = document.getElementById('param-' + p.name)?.value.trim();
+      if (!val) { showToast('⚠ Parameter ' + p.label + ' required'); return; }
+      path = path.replace(':' + p.name, encodeURIComponent(val));
     }
   }
 
@@ -214,11 +209,11 @@ async function sendRequest() {
   const headers = { 'Content-Type': 'application/json' };
   
   const jwt = getJwt();
-  if (jwt) headers['Authorization'] = \`Bearer \${jwt}\`;
+  if (jwt) headers['Authorization'] = 'Bearer ' + jwt;
 
   let body = undefined;
-  if (ep.fields?.length && ['POST','PUT','PATCH'].includes(ep.method)) {
-    const rawVal = document.getElementById(\`field-\${ep.fields[0].name}\`).value.trim();
+  if (ep.fields && ep.fields.length && ['POST','PUT','PATCH'].includes(ep.method)) {
+    const rawVal = document.getElementById('field-' + ep.fields[0].name).value.trim();
     try {
       JSON.parse(rawVal);
       body = rawVal;
@@ -254,8 +249,8 @@ function setResponse(data, state, status, ms) {
     return;
   }
 
-  badge.className = \`status-badge \${state === 'ok' ? 'status-ok' : 'status-err'}\`;
-  badge.textContent = \`\${status} · \${ms}ms\`;
+  badge.className = 'status-badge ' + (state === 'ok' ? 'status-ok' : 'status-err');
+  badge.textContent = status + ' · ' + ms + 'ms';
   body.innerHTML = highlightJson(typeof data === 'string' ? data : JSON.stringify(data, null, 2));
 }
 
@@ -273,10 +268,10 @@ function highlightJson(str) {
     .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
     .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => {
       if (/^"/.test(match)) {
-        if (/:$/.test(match)) return \`<span class="json-key">\${match}</span>\`;
-        return \`<span class="json-str">\${match}</span>\`;
+        if (/:$/.test(match)) return '<span class="json-key">' + match + '</span>';
+        return '<span class="json-str">' + match + '</span>';
       }
-      return \`<span class="json-num">\${match}</span>\`;
+      return '<span class="json-num">' + match + '</span>';
     });
 }
 
@@ -286,7 +281,7 @@ function showToast(msg) {
   setTimeout(() => t.classList.remove('show'), 2500);
 }
 
-// Initial fire
+// Initial script activation
 buildSidebar();
 </script>
 </body>

package/index.js

@@ -1,83 +1,68 @@
 import { getHtmlTemplate } from './htmlTemplate.js';
 
-/**
- * Express middleware to automatically map routes and serve the endtester UI
- */
 export function endtesterExpress() {
   return (req, res, next) => {
-    // We only intercept requests hitting the tester path
     if (req.path !== '/api/tester' && req.path !== '/api/tester/') {
       return next();
     }
 
-    // 1. Inspect the Express app to extract all registered routes
     const expressApp = req.app;
-    const routesStack = expressApp._router.stack;
     const detectedEndpoints = {};
 
-    routesStack.forEach((middleware) => {
-      if (middleware.route) {
-        // Simple top-level routes
-        processRoute(middleware.route, detectedEndpoints);
-      } else if (middleware.name === 'router') {
-        // Nested router stacks (e.g., app.use('/api', apiRouter))
-        const baseUrl = middleware.regexp.source
-          .replace('^\\', '')
-          .replace('\\/?(?=\\/|$)', '')
-          .replace('\\', '');
+    // Recursive function to dig through all layers of Express routes
+    function parseStack(stack, prefix = '') {
+      if (!stack) return;
+
+      stack.forEach((layer) => {
+        if (layer.route) {
+          // It's a direct route (e.g., app.get('/path'))
+          const methods = Object.keys(layer.route.methods);
+          const path = (prefix + layer.route.path).replace(/\/+/g, '/');
           
-        middleware.handle.stack.forEach((nestedHandler) => {
-          if (nestedHandler.route) {
-            processRoute(nestedHandler.route, detectedEndpoints, baseUrl);
+          if (path.includes('/api/tester')) return; // Skip ourselves
+
+          methods.forEach((method) => {
+            const httpMethod = method.toUpperCase();
+            const key = `${httpMethod.toLowerCase()}-${path.replace(/[^a-zA-Z0-9]/g, '-')}`;
+            
+            const pathParams = layer.route.keys ? layer.route.keys.map(k => ({
+              name: k.name,
+              label: k.name.toUpperCase(),
+              placeholder: 'value'
+            })) : [];
+
+            detectedEndpoints[key] = {
+              method: httpMethod,
+              path: path,
+              auth: false,
+              title: `${httpMethod} ${path}`,
+              desc: `Auto-discovered endpoint: ${path}`,
+              params: pathParams,
+              fields: ['POST', 'PUT', 'PATCH'].includes(httpMethod) ? [{ name: 'payload', label: 'JSON Body', type: 'text' }] : []
+            };
+          });
+        } else if (layer.name === 'router' && layer.handle && layer.handle.stack) {
+          // It's a router middleware (e.g., app.use('/api', myRouter))
+          let routerPath = '';
+          if (layer.regexp) {
+            // Extract the base path string from the router regex safely
+            const match = layer.regexp.toString().match(/^\/\^\\(.*?)\\\/\?/);
+            if (match && match[1]) {
+              routerPath = match[1].replace(/\\/g, '');
+            }
           }
-        });
-      }
-    });
+          parseStack(layer.handle.stack, prefix + '/' + routerPath);
+        }
+      });
+    }
 
-    // 2. Generate the HTML template injecting our found endpoints
-    const fullHtml = getHtmlTemplate(detectedEndpoints);
+    // Fire the scanner on the main app router stack
+    if (expressApp._router && expressApp._router.stack) {
+      parseStack(expressApp._router.stack);
+    }
 
-    // 3. Serve the interactive tester page
+    const fullHtml = getHtmlTemplate(detectedEndpoints);
     res.setHeader('Content-Type', 'text/html');
     return res.send(fullHtml);
   };
 }
-
-/**
- * Formats Express route data into the shape your UI script expects
- */
-function processRoute(route, targetObject, prefix = '') {
-  const fullPath = `${prefix}${route.path}`.replace(/\/+/g, '/');
-  
-  // Skip the tester endpoint itself to avoid recursion confusion
-  if (fullPath.includes('/api/tester')) return;
-
-  // Extract path parameters (e.g., :id)
-  const pathParams = route.keys ? route.keys.map(k => ({
-    name: k.name,
-    label: k.name.toUpperCase(),
-    placeholder: 'value'
-  })) : [];
-
-  Object.keys(route.methods).forEach((method) => {
-    if (!route.methods[method]) return;
-
-    const httpMethod = method.toUpperCase();
-    // Unique key for your UI state
-    const key = `${httpMethod.toLowerCase()}-${fullPath.replace(/[^a-zA-Z0-9]/g, '-')}`;
-
-    // Infer basic structure based on request types
-    const needsBody = ['POST', 'PUT', 'PATCH'].includes(httpMethod);
-
-    targetObject[key] = {
-      method: httpMethod,
-      path: fullPath,
-      auth: true, // Default to true, users can toggle or override
-      title: `${httpMethod} ${fullPath}`,
-      desc: `Auto-generated tester for ${fullPath}`,
-      params: pathParams,
-      queryParams: httpMethod === 'GET' ? [{ name: 'limit', label: 'Limit', placeholder: '10' }] : [],
-      fields: needsBody ? [{ name: 'payload', label: 'JSON Body Field', type: 'text', placeholder: 'Data string' }] : []
-    };
-  });
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aimeloic/monkey-tester",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Embedded interactive API testing UI for Node.js backends",
   "main": "index.js",
   "type":"module",