zerra-core 1.2.0 → 1.2.1

package/index.d.ts

@@ -0,0 +1,47 @@
+import { IncomingMessage, ServerResponse } from 'http';
+
+export interface ZerraRequest extends IncomingMessage {
+  query: Record<string, string>;
+  path: string;
+  body: any;
+  files: Array<{
+    fieldname: string;
+    filename: string;
+    encoding: string;
+    mimetype: string;
+    buffer: Buffer;
+  }>;
+  params: Record<string, string>;
+}
+
+export interface ZerraResponse extends ServerResponse {
+  status(code: number): ZerraResponse;
+  json(data: any): void;
+  cors(options?: { origin?: string; methods?: string }): ZerraResponse;
+}
+
+export type ZerraHandler = (req: ZerraRequest, res: ZerraResponse) => void | Promise<void>;
+
+export type ZerraMiddleware = (req: ZerraRequest, res: ZerraResponse, next: () => Promise<void>) => void | Promise<void>;
+
+export interface ZerraConfig {
+  features: {
+    logging?: boolean;
+    dynamicRouting?: boolean;
+    middleware?: boolean;
+    dotenv?: boolean;
+    validation?: boolean;
+    multipart?: boolean;
+    errors?: boolean;
+    dashboard?: boolean;
+  };
+  plugins?: string[];
+}
+
+export interface ZerraApp {
+  use(fn: ZerraMiddleware): void;
+  decorate(target: 'req' | 'res', name: string, fn: Function): void;
+  config: ZerraConfig;
+}
+
+export function startServer(port?: number): void;

package/index.js

@@ -3,6 +3,7 @@ const fs = require("fs");
 const path = require("path");
 
 function startServer(port = 3000) {
+  const jiti = require("jiti")(__filename);
   const configPath = path.join(process.cwd(), 'zerra.config.json');
   let config = {
     features: {
@@ -26,6 +27,10 @@ function startServer(port = 3000) {
     }
   }
 
+  const customEnvKeys = new Set();
+  const recentRequests = [];
+  const MAX_LOGS = 20;
+
   // 8. Enhanced DX: Auto-load .env files
   if (config.features.dotenv) {
     const envPath = path.join(process.cwd(), '.env');
@@ -39,7 +44,11 @@ function startServer(port = 3000) {
           // Remove quotes
           if (value.startsWith('"') && value.endsWith('"')) value = value.slice(1, -1);
           else if (value.startsWith("'") && value.endsWith("'")) value = value.slice(1, -1);
-          if (!process.env.hasOwnProperty(key)) process.env[key] = value;
+          
+          if (!process.env.hasOwnProperty(key)) {
+            process.env[key] = value;
+          }
+          customEnvKeys.add(key);
         }
       });
     }
@@ -62,7 +71,7 @@ function startServer(port = 3000) {
   if (config.plugins && Array.isArray(config.plugins)) {
     config.plugins.forEach(pluginPath => {
       try {
-        const plugin = require(path.isAbsolute(pluginPath) ? pluginPath : path.join(process.cwd(), pluginPath));
+        const plugin = jiti(path.isAbsolute(pluginPath) ? pluginPath : path.join(process.cwd(), pluginPath));
         if (typeof plugin === 'function') plugin(zerra);
       } catch (e) {
         console.error(`❌ Failed to load plugin: ${pluginPath}`, e);
@@ -79,12 +88,28 @@ function startServer(port = 3000) {
     // 1. Enhanced DX: Beautiful Request Logging
     const originalEnd = res.end;
     res.end = function (...args) {
+      const duration = Date.now() - startTime;
+      const path = req.path || url;
+
+      // Log to terminal
       if (config.features.logging) {
-        const duration = Date.now() - startTime;
         const statusColor = res.statusCode >= 500 ? '\x1b[31m' : res.statusCode >= 400 ? '\x1b[33m' : '\x1b[32m';
         const resetColor = '\x1b[0m';
-        console.log(`${statusColor}[${method}]${resetColor} ${req.path || url} ➜ ${statusColor}${res.statusCode}${resetColor} (${duration}ms)`);
+        console.log(`${statusColor}[${method}]${resetColor} ${path} ➜ ${statusColor}${res.statusCode}${resetColor} (${duration}ms)`);
+      }
+
+      // Store for dashboard (exclude the dashboard itself)
+      if (path !== '/__zerra' && path !== '/favicon.ico') {
+        recentRequests.unshift({
+          method,
+          path,
+          statusCode: res.statusCode,
+          duration,
+          timestamp: new Date().toLocaleTimeString()
+        });
+        if (recentRequests.length > MAX_LOGS) recentRequests.pop();
       }
+
       return originalEnd.apply(this, args);
     };
 
@@ -191,9 +216,18 @@ function startServer(port = 3000) {
           const stat = fs.statSync(filePath);
           if (stat && stat.isDirectory()) {
             results = results.concat(getRoutes(filePath, path.join(base, file)));
-          } else if (file.endsWith('.js') && !file.startsWith('_')) {
-            const route = path.join(base, file).replace(/\\/g, '/').replace('.js', '');
-            results.push(route === 'index' ? '/' : `/${route}`);
+          } else if ((file.endsWith('.js') || file.endsWith('.ts')) && !file.startsWith('_')) {
+            const route = path.join(base, file).replace(/\\/g, '/').replace(/\.(js|ts)$/, '');
+            const fullPath = `/${route === 'index' ? '' : route}`;
+            
+            // Try to extract schema for playground presets
+            let schema = null;
+            try {
+              const mod = jiti(filePath);
+              schema = mod.schema || (mod.default && mod.default.schema);
+            } catch (e) {}
+
+            results.push({ path: fullPath, schema });
           }
         });
         return results;
@@ -202,51 +236,265 @@ function startServer(port = 3000) {
       const routes = getRoutes(apiDir);
       const featureList = Object.entries(config.features)
         .map(([k, v]) => `<li><strong>${k}</strong>: ${v ? '✅' : '❌'}</li>`).join('');
-      const routeList = routes.map(r => `<li><a href="${r}">${r}</a></li>`).join('');
+      const routeList = routes.map(r => `<li><a href="${r.path}">${r.path}</a></li>`).join('');
 
-      res.setHeader('Content-Type', 'text/html');
+      res.setHeader('Content-Type', 'text/html; charset=utf-8');
       return res.end(`
         <!DOCTYPE html>
-        <html>
+        <html lang="en">
           <head>
-            <title>Zerra Dashboard</title>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Zerra Dev Dashboard</title>
             <style>
-              body { font-family: sans-serif; line-height: 1.6; max-width: 800px; margin: 40px auto; padding: 0 20px; color: #333; background: #f9f9f9; }
-              h1 { color: #000; border-bottom: 2px solid #eee; padding-bottom: 10px; }
-              section { background: #fff; padding: 20px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 20px; }
-              h2 { margin-top: 0; font-size: 1.2rem; }
-              ul { padding-left: 20px; }
-              li { margin-bottom: 5px; }
-              a { color: #0070f3; text-decoration: none; }
-              a:hover { text-decoration: underline; }
-              .badge { font-size: 0.8rem; background: #000; color: #fff; padding: 2px 6px; border-radius: 3px; vertical-align: middle; }
+              :root {
+                --primary: #0070f3;
+                --bg: #fafafa;
+                --card-bg: #ffffff;
+                --text: #171717;
+                --text-light: #666;
+                --border: #eaeaea;
+                --success: #0070f3;
+                --warning: #f5a623;
+                --error: #ff0000;
+              }
+              body { 
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
+                line-height: 1.5; 
+                background: var(--bg); 
+                color: var(--text);
+                margin: 0;
+                padding: 0;
+              }
+              header {
+                background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
+                color: #fff;
+                padding: 16px 40px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+                border-bottom: 1px solid rgba(255,255,255,0.1);
+                position: sticky;
+                top: 0;
+                z-index: 100;
+              }
+              header h1 { 
+                margin: 0; 
+                font-size: 1.2rem; 
+                display: flex; 
+                align-items: center; 
+                gap: 12px; 
+                letter-spacing: 2px;
+                font-weight: 800;
+              }
+              header h1 span.console-text { 
+                font-weight: 300; 
+                opacity: 0.6; 
+                font-size: 0.9rem; 
+                letter-spacing: 0;
+                border-left: 1px solid rgba(255,255,255,0.2);
+                padding-left: 12px;
+              }
+              .badge { font-size: 0.75rem; background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 20px; font-weight: normal; }
+              
+              main { max-width: 1300px; margin: 40px auto; padding: 0 20px; }
+              
+              .grid { display: grid; grid-template-columns: 2.5fr 1fr; gap: 25px; margin-bottom: 20px; }
+              @media (max-width: 1024px) { .grid { grid-template-columns: 1fr; } }
+              
+              section { 
+                background: var(--card-bg); 
+                padding: 24px; 
+                border-radius: 12px; 
+                border: 1px solid var(--border);
+                box-shadow: 0 4px 6px rgba(0,0,0,0.02);
+              }
+              h2 { margin-top: 0; font-size: 1.1rem; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; }
+              
+              ul { list-style: none; padding: 0; margin: 0; }
+              li { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
+              
+              .route-link { color: var(--primary); text-decoration: none; font-weight: 500; font-family: monospace; font-size: 1rem; }
+              .route-link:hover { text-decoration: underline; }
+              
+              table { width: 100%; border-collapse: collapse; margin-top: 10px; }
+              th { text-align: left; padding: 12px 8px; border-bottom: 2px solid var(--border); font-size: 0.85rem; color: var(--text-light); }
+              td { padding: 12px 8px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
+              
+              .status-badge { 
+                padding: 4px 10px; 
+                border-radius: 6px; 
+                font-size: 0.75rem; 
+                font-weight: bold; 
+                color: #fff;
+              }
+              
+              .env-item { background: #f3f4f6; padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 0.85rem; color: #444; }
+              
+              /* Fix for long error messages/stacks */
+              pre { 
+                white-space: pre-wrap !important; 
+                word-break: break-all !important; 
+                max-height: 300px !important; 
+                overflow-y: auto !important; 
+                margin: 0 !important; 
+              }
             </style>
           </head>
           <body>
-            <h1>🚀 Zerra Dev Dashboard <span class="badge">v1.1.1</span></h1>
-            
-            <section>
-              <h2>📂 Active Routes</h2>
-              <ul>${routeList || '<li>No routes found in /api</li>'}</ul>
-            </section>
-
-            <section>
-              <h2>⚙️ Enabled Features</h2>
-              <ul>${featureList}</ul>
-            </section>
-
-            <section>
-              <h2>🔐 Environment Variables</h2>
-              <ul>${Object.keys(process.env).filter(k => !k.startsWith('npm_') && !k.startsWith('NODE_')).map(k => `<li>${k}</li>`).join('') || '<li>No custom env vars loaded</li>'}</ul>
-            </section>
-
-            <p><small>Zerra Engine is running in development mode.</small></p>
+            <main style="margin-top: 20px;">
+              <div class="grid">
+                <section>
+                  <h2>📂 Active Routes & Playground</h2>
+                  <div style="display: flex; flex-direction: column; gap: 15px;">
+                    ${routes.length > 0 ? routes.map(r => {
+                      const sampleBody = r.schema ? JSON.stringify(Object.fromEntries(
+                        Object.entries(r.schema).map(([k, t]) => [k, t === 'number' ? 0 : t === 'boolean' ? false : 'text'])
+                      )) : '{}';
+                      
+                      return `
+                      <div style="border: 1px solid var(--border); border-radius: 8px; padding: 15px;">
+                        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
+                          <a href="${r.path}" class="route-link" style="font-size: 1.1rem;">${r.path}</a>
+                          ${r.schema ? '<span class="badge" style="background:#eee; color:#666;">Has Schema</span>' : ''}
+                        </div>
+                        
+                        <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;">
+                          <select id="method-${r.path}" style="padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); background: #fff; font-family: inherit;">
+                            <option value="GET">GET</option>
+                            <option value="POST">POST</option>
+                            <option value="PUT">PUT</option>
+                            <option value="PATCH">PATCH</option>
+                            <option value="DELETE">DELETE</option>
+                          </select>
+                          <input type="text" id="body-${r.path}" value='${sampleBody}' placeholder='{"key": "value"}' style="flex-grow: 1; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border); font-family: monospace; font-size: 0.8rem;">
+                          <button onclick="testRoute('${r.path}')" style="background: var(--primary); color: #fff; border: none; padding: 5px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.8rem;">SEND</button>
+                        </div>
+
+                        <div id="res-${r.path}" style="display: none; background: #1e1e1e; color: #d4d4d4; padding: 12px; border-radius: 6px; font-family: monospace; font-size: 0.85rem; overflow-x: auto; margin-top: 10px; position: relative;">
+                          <div id="status-${r.path}" style="position: absolute; top: 8px; right: 8px; font-size: 0.7rem; font-weight: bold;"></div>
+                          <pre style="margin: 0;"></pre>
+                        </div>
+                      </div>
+                    `}).join('') : '<div style="color:#999">No routes found in /api</div>'}
+                  </div>
+                </section>
+
+                <section>
+                  <h2>⚙️ Features</h2>
+                  <div style="display: flex; flex-direction: column; gap: 12px;">
+                    ${Object.entries(config.features).map(([k, v]) => `
+                      <div style="display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; border-bottom: 1px solid #f9f9f9; padding-bottom: 8px;">
+                        <span style="color: ${v ? 'inherit' : '#999'}; font-weight: 500;">${k}</span>
+                        <span>${v ? '✅' : '❌'}</span>
+                      </div>
+                    `).join('')}
+                  </div>
+                </section>
+              </div>
+
+              <section style="margin-bottom: 20px;">
+                <h2>📊 Recent Activity</h2>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>METHOD</th>
+                      <th>PATH</th>
+                      <th>STATUS</th>
+                      <th>TIME</th>
+                      <th>DURATION</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${recentRequests.map(req => {
+                      const color = req.statusCode >= 500 ? 'var(--error)' : req.statusCode >= 400 ? 'var(--warning)' : 'var(--success)';
+                      return `
+                        <tr>
+                          <td><strong>${req.method}</strong></td>
+                          <td style="font-family: monospace; color: #444;">${req.path}</td>
+                          <td><span class="status-badge" style="background: ${color}">${req.statusCode}</span></td>
+                          <td style="color: #888;">${req.timestamp}</td>
+                          <td style="color: #888;">${req.duration}ms</td>
+                        </tr>
+                      `;
+                    }).join('') || '<tr><td colspan="5" style="text-align: center; padding: 40px; color: #999;">Waiting for requests...</td></tr>'}
+                  </tbody>
+                </table>
+              </section>
+
+              <section>
+                <h2>🔐 Environment</h2>
+                <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+                  ${Object.keys(process.env).filter(k => {
+                    const isCustom = customEnvKeys.has(k);
+                    const isImportant = ['PORT', 'NODE_ENV'].includes(k);
+                    const isSystem = /^(ALLUSERSPROFILE|APPDATA|COMPUTERNAME|ComSpec|Common|DriverData|HOMEDRIVE|HOMEPATH|LOCALAPPDATA|LOGONSERVER|NUMBER_OF_PROCESSORS|OS|Path|PATHEXT|PROCESSOR|Program|PSModulePath|PUBLIC|System|TEMP|TMP|USER|windir|ZES_|VSCODE_|ANTIGRAVITY_)/i.test(k);
+                    return (isCustom || isImportant) && !isSystem;
+                  }).map(k => `
+                    <div style="background: #f9f9f9; border: 1px solid #eee; padding: 10px 15px; border-radius: 8px;">
+                      <div style="font-size: 0.7rem; color: #999; margin-bottom: 4px; font-weight: bold;">${k}</div>
+                      <div class="env-item">${process.env[k]}</div>
+                    </div>
+                  `).join('') || '<div style="color:#999">No custom variables loaded</div>'}
+                </div>
+              </section>
+            </main>
+
+            <script>
+              async function testRoute(path) {
+                const method = document.getElementById('method-' + path).value;
+                const bodyStr = document.getElementById('body-' + path).value;
+                const resDiv = document.getElementById('res-' + path);
+                const statusDiv = document.getElementById('status-' + path);
+                const pre = resDiv.querySelector('pre');
+                
+                resDiv.style.display = 'block';
+                pre.innerText = 'Sending request...';
+                statusDiv.innerText = '';
+                
+                try {
+                  const options = { method, headers: {} };
+                  if (['POST', 'PUT', 'PATCH'].includes(method) && bodyStr) {
+                    options.headers['Content-Type'] = 'application/json';
+                    options.body = bodyStr;
+                  }
+                  
+                  const start = Date.now();
+                  const response = await fetch(path, options);
+                  const duration = Date.now() - start;
+                  const data = await response.json().catch(() => null);
+                  
+                  statusDiv.innerText = response.status + ' (' + duration + 'ms)';
+                  statusDiv.style.color = response.status >= 400 ? '#ff4d4f' : '#52c41a';
+                  pre.innerText = JSON.stringify(data, null, 2) || 'No response body';
+                } catch (err) {
+                  statusDiv.innerText = 'ERROR';
+                  statusDiv.style.color = '#ff4d4f';
+                  pre.innerText = err.message;
+                }
+              }
+
+              // Soft refresh every 5 seconds
+              let refreshTimeout = setTimeout(() => {
+                window.location.reload();
+              }, 5000);
+
+              // Pause refresh if user is interacting with playground
+              document.addEventListener('mousedown', () => {
+                clearTimeout(refreshTimeout);
+                refreshTimeout = setTimeout(() => window.location.reload(), 15000);
+              });
+            </script>
           </body>
         </html>
       `);
     }
 
     let filePath = path.join(apiDir, `${cleanPath}.js`);
+    if (!fs.existsSync(filePath)) {
+      filePath = path.join(apiDir, `${cleanPath}.ts`);
+    }
 
     // 6. Enhanced DX: Dynamic Routing ([id].js)
     if (config.features.dynamicRouting && !fs.existsSync(filePath)) {
@@ -266,9 +514,9 @@ function startServer(port = 3000) {
           
           // Look for dynamic parameter [param]
           if (!match) {
-            match = files.find(f => isLast ? (f.startsWith('[') && f.endsWith('].js')) : (f.startsWith('[') && f.endsWith(']') && fs.statSync(path.join(currentDir, f)).isDirectory()));
+            match = files.find(f => isLast ? (f.startsWith('[') && (f.endsWith('].js') || f.endsWith('].ts'))) : (f.startsWith('[') && f.endsWith(']') && fs.statSync(path.join(currentDir, f)).isDirectory()));
             if (match) {
-              const paramName = isLast ? match.slice(1, -4) : match.slice(1, -1);
+              const paramName = isLast ? match.slice(1, match.lastIndexOf('].')) : match.slice(1, -1);
               req.params[paramName] = part;
             }
           }
@@ -301,7 +549,9 @@ function startServer(port = 3000) {
         
         if (config.features.middleware) {
           while (currentPath.length >= apiDir.length && currentPath.startsWith(apiDir)) {
-            const mwPath = path.join(currentPath, '_middleware.js');
+            let mwPath = path.join(currentPath, '_middleware.js');
+            if (!fs.existsSync(mwPath)) mwPath = path.join(currentPath, '_middleware.ts');
+            
             if (fs.existsSync(mwPath)) {
               middlewarePaths.unshift(mwPath); // Run top-down
             }
@@ -326,22 +576,30 @@ function startServer(port = 3000) {
           if (middlewareIndex < middlewarePaths.length) {
             const mwPath = middlewarePaths[middlewareIndex++];
             delete require.cache[require.resolve(mwPath)];
-            const mw = require(mwPath);
-            if (typeof mw === 'function') {
-               await mw(req, res, runNext);
+            const mw = jiti(mwPath);
+            if (typeof mw === 'function' || (mw && typeof mw.default === 'function')) {
+               const actualMw = mw.default || mw;
+               await actualMw(req, res, runNext);
             } else {
                await runNext();
             }
           } else {
             delete require.cache[require.resolve(filePath)];
-            const handler = require(filePath);
+            const handler = jiti(filePath);
 
             if (typeof handler === "function" || (handler && typeof handler.default === "function")) {
               const actualHandler = handler.default || handler;
               
               // 9. Enhanced DX: Input Validation
               const schema = handler.schema;
-              if (config.features.validation && schema && typeof req.body === 'object' && req.body !== null) {
+              if (config.features.validation && schema) {
+                if (!req.body || typeof req.body !== 'object') {
+                  return res.status(400).json({ 
+                    error: "Validation Failed", 
+                    details: ["Request body is required for this route."] 
+                  });
+                }
+
                 const errors = [];
                 for (const [key, type] of Object.entries(schema)) {
                    if (typeof req.body[key] !== type) {
@@ -379,9 +637,10 @@ function startServer(port = 3000) {
           if (fs.existsSync(errorHandlerPath)) {
             try {
               delete require.cache[require.resolve(errorHandlerPath)];
-              const errorHandler = require(errorHandlerPath);
-              if (typeof errorHandler === 'function') {
-                return await errorHandler(err, req, res);
+              const errorHandler = jiti(errorHandlerPath);
+              const actualErrorHandler = errorHandler.default || errorHandler;
+              if (typeof actualErrorHandler === 'function') {
+                return await actualErrorHandler(err, req, res);
               }
             } catch (e) {
               console.error("❌ Error in custom error handler:", e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zerra-core",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,6 +11,7 @@
   "license": "ISC",
   "type": "commonjs",
   "dependencies": {
-    "busboy": "^1.6.0"
+    "busboy": "^1.6.0",
+    "jiti": "^2.6.1"
   }
 }