baraqex 1.0.47 → 1.0.49

package/templates/fullstack-template/package.json

@@ -11,19 +11,21 @@
     "test": "echo 'No tests specified' && exit 0"
   },
   "dependencies": {
-    "baraqex": "file:../../",
+    "baraqex": "^1.0.48",
+    "cors": "^2.8.5",
     "express": "^4.18.2",
-    "cors": "^2.8.5"
+    "frontend-hamroun": "latest"
   },
   "devDependencies": {
-    "@types/express": "^4.17.17",
-    "@types/cors": "^2.8.13"
+    "@types/cors": "^2.8.13",
+    "@types/express": "^4.17.17"
   },
   "keywords": [
     "baraqex",
     "fullstack",
     "express",
-    "api"
+    "api",
+    "ssr"
   ],
   "author": "",
   "license": "MIT"

package/templates/fullstack-template/server.js

@@ -1,34 +1,567 @@
-import { createDevServer } from 'baraqex';
+import express from 'express';
+import cors from 'cors';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 async function startServer() {
   try {
-    console.log('Starting fullstack server...');
+    console.log('🚀 Starting Baraqex fullstack server...');
+    
+    const app = express();
+    const port = process.env.PORT || 3000;
     
-    const server = createDevServer({
-      port: process.env.PORT || 3000,
-      enableCors: true
+    // Basic middleware
+    app.use(express.json());
+    app.use(express.urlencoded({ extended: true }));
+    app.use(cors());
+    
+    // Request logging
+    app.use((req, res, next) => {
+      console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
+      next();
     });
-
-    // Wait for server to start
-    await server.start();
     
-    console.log('✅ Fullstack server is running!');
-    console.log('📁 API routes available at /api/*');
-    console.log('📄 Pages available at /*');
-    console.log('📂 Static files served from /public');
+    // Serve static files from public directory
+    const publicDir = path.join(process.cwd(), 'public');
+    if (fs.existsSync(publicDir)) {
+      app.use(express.static(publicDir));
+      console.log('📂 Serving static files from /public');
+    }
+    
+    // Auto-discover and register API routes
+    await setupApiRoutes(app);
+    
+    // Auto-discover and register page routes (SSR)
+    await setupPageRoutes(app);
+    
+    // Root route fallback
+    app.get('/', async (req, res) => {
+      try {
+        // Try to render the index page component if it exists
+        const indexPagePath = path.join(process.cwd(), 'src/pages/index.js');
+        if (fs.existsSync(indexPagePath)) {
+          const pageHtml = await renderPageComponent(indexPagePath, {
+            path: '/',
+            query: req.query
+          });
+          res.send(pageHtml);
+        } else {
+          // Fallback to basic HTML
+          res.send(generateWelcomePage());
+        }
+      } catch (error) {
+        console.error('Error rendering root page:', error);
+        res.status(500).send(generateErrorPage(500, 'Server Error'));
+      }
+    });
+    
+    // 404 handler
+    app.use((req, res) => {
+      res.status(404).json({
+        error: 'Not Found',
+        message: `Route ${req.method} ${req.path} not found`,
+        timestamp: new Date().toISOString()
+      });
+    });
+    
+    // Error handler
+    app.use((err, req, res, next) => {
+      console.error('Server Error:', err);
+      res.status(500).json({
+        error: 'Internal Server Error',
+        message: process.env.NODE_ENV === 'production' ? 'Something went wrong' : err.message,
+        timestamp: new Date().toISOString()
+      });
+    });
+    
+    // Start server
+    app.listen(port, () => {
+      console.log('✅ Fullstack server is running!');
+      console.log(`📍 Server: http://localhost:${port}`);
+      console.log('📁 API routes available at /api/*');
+      console.log('📄 Pages available at /*');
+      console.log('📂 Static files served from /public');
+      console.log('\n🔗 Quick links:');
+      console.log(`   - Homepage: http://localhost:${port}`);
+      console.log(`   - API Hello: http://localhost:${port}/api/hello`);
+      console.log(`   - API Users: http://localhost:${port}/api/users`);
+    });
     
   } catch (error) {
     console.error('❌ Failed to start server:', error.message);
     
-    // Provide helpful error messages
-    if (error.message.includes('Express not installed')) {
-      console.error('\n💡 Quick fix: npm install express @types/express');
+    if (error.code === 'MODULE_NOT_FOUND') {
+      console.error('\n💡 Please install dependencies: npm install express cors');
     }
     
     process.exit(1);
   }
 }
 
+// Auto-discover API routes in src/api
+async function setupApiRoutes(app) {
+  const apiDir = path.join(process.cwd(), 'src/api');
+  
+  if (!fs.existsSync(apiDir)) {
+    console.log('📁 Creating src/api directory...');
+    fs.mkdirSync(apiDir, { recursive: true });
+    
+    // Create example API files
+    await createExampleApiFiles(apiDir);
+  }
+  
+  console.log('🔄 Scanning for API routes...');
+  await scanApiDirectory(app, apiDir, '/api');
+}
+
+// Recursively scan API directory and register routes
+async function scanApiDirectory(app, dirPath, routePrefix) {
+  const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+  
+  for (const entry of entries) {
+    const fullPath = path.join(dirPath, entry.name);
+    
+    if (entry.isDirectory()) {
+      await scanApiDirectory(app, fullPath, `${routePrefix}/${entry.name}`);
+    } else if (entry.name.endsWith('.js')) {
+      const routePath = getApiRoutePath(entry.name, routePrefix);
+      await registerApiRoute(app, fullPath, routePath);
+    }
+  }
+}
+
+// Convert filename to route path
+function getApiRoutePath(filename, routePrefix) {
+  const baseName = path.basename(filename, '.js');
+  
+  if (baseName === 'index') {
+    return routePrefix === '/api' ? '/api' : routePrefix;
+  }
+  
+  // Handle dynamic routes [param]
+  const paramMatch = baseName.match(/^\[(.+)\]$/);
+  if (paramMatch) {
+    return `${routePrefix}/:${paramMatch[1]}`;
+  }
+  
+  return `${routePrefix}/${baseName}`;
+}
+
+// Register API route handlers
+async function registerApiRoute(app, filePath, routePath) {
+  try {
+    // Import the API module with cache busting
+    const apiModule = await import(`${filePath}?t=${Date.now()}`);
+    
+    const methods = ['get', 'post', 'put', 'delete', 'patch', 'options'];
+    let registeredMethods = [];
+    
+    for (const method of methods) {
+      if (typeof apiModule[method] === 'function') {
+        app[method](routePath, async (req, res, next) => {
+          try {
+            await apiModule[method](req, res, next);
+          } catch (error) {
+            console.error(`Error in ${method.toUpperCase()} ${routePath}:`, error);
+            next(error);
+          }
+        });
+        registeredMethods.push(method.toUpperCase());
+      }
+    }
+    
+    if (registeredMethods.length > 0) {
+      console.log(`📡 API: ${routePath} [${registeredMethods.join(', ')}]`);
+    }
+  } catch (error) {
+    console.error(`Error registering API route ${routePath}:`, error.message);
+  }
+}
+
+// Setup page routes for SSR
+async function setupPageRoutes(app) {
+  const pagesDir = path.join(process.cwd(), 'src/pages');
+  
+  if (!fs.existsSync(pagesDir)) {
+    console.log('📁 Creating src/pages directory...');
+    fs.mkdirSync(pagesDir, { recursive: true });
+    
+    // Create example page
+    await createExamplePageFile(pagesDir);
+  }
+  
+  console.log('🔄 Scanning for page routes...');
+  await scanPagesDirectory(app, pagesDir, '');
+}
+
+// Scan pages directory for SSR routes
+async function scanPagesDirectory(app, dirPath, routePrefix) {
+  const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+  
+  for (const entry of entries) {
+    const fullPath = path.join(dirPath, entry.name);
+    
+    if (entry.isDirectory()) {
+      await scanPagesDirectory(app, fullPath, `${routePrefix}/${entry.name}`);
+    } else if (entry.name.endsWith('.js')) {
+      const routePath = getPageRoutePath(entry.name, routePrefix);
+      await registerPageRoute(app, fullPath, routePath);
+    }
+  }
+}
+
+// Convert page filename to route path
+function getPageRoutePath(filename, routePrefix) {
+  const baseName = path.basename(filename, '.js');
+  
+  if (baseName === 'index') {
+    return routePrefix || '/';
+  }
+  
+  // Handle dynamic routes [param]
+  const paramMatch = baseName.match(/^\[(.+)\]$/);
+  if (paramMatch) {
+    return `${routePrefix}/:${paramMatch[1]}`;
+  }
+  
+  return `${routePrefix}/${baseName}`;
+}
+
+// Register page route for SSR
+async function registerPageRoute(app, filePath, routePath) {
+  try {
+    // Only register if not root route (we handle that separately)
+    if (routePath !== '/') {
+      app.get(routePath, async (req, res) => {
+        try {
+          const pageHtml = await renderPageComponent(filePath, {
+            path: req.path,
+            query: req.query,
+            params: req.params
+          });
+          res.send(pageHtml);
+        } catch (error) {
+          console.error(`Error rendering page ${routePath}:`, error);
+          res.status(500).send(generateErrorPage(500, 'Page rendering error'));
+        }
+      });
+      
+      console.log(`📄 Page: ${routePath}`);
+    }
+  } catch (error) {
+    console.error(`Error registering page route ${routePath}:`, error.message);
+  }
+}
+
+// Render page component to HTML
+async function renderPageComponent(filePath, props) {
+  try {
+    const pageModule = await import(`${filePath}?t=${Date.now()}`);
+    const PageComponent = pageModule.default;
+    
+    if (typeof PageComponent !== 'function') {
+      throw new Error('Page component must export a default function');
+    }
+    
+    // Simple JSX to HTML conversion
+    const componentResult = PageComponent(props);
+    let htmlContent = '';
+    
+    if (typeof componentResult === 'string') {
+      htmlContent = componentResult;
+    } else {
+      // Convert JSX-like structure to HTML
+      htmlContent = jsxToHtml(componentResult);
+    }
+    
+    // Get page metadata
+    const title = PageComponent.title || 'Baraqex App';
+    const description = PageComponent.description || 'A Baraqex fullstack application';
+    
+    return generateDocument(htmlContent, { title, description, props });
+    
+  } catch (error) {
+    console.error('Error rendering page component:', error);
+    return generateErrorPage(500, 'Failed to render page component');
+  }
+}
+
+// Simple JSX to HTML converter
+function jsxToHtml(jsx) {
+  if (typeof jsx === 'string') {
+    return jsx;
+  }
+  
+  if (typeof jsx === 'number') {
+    return jsx.toString();
+  }
+  
+  if (jsx === null || jsx === undefined || jsx === false) {
+    return '';
+  }
+  
+  if (Array.isArray(jsx)) {
+    return jsx.map(item => jsxToHtml(item)).join('');
+  }
+  
+  if (jsx && typeof jsx === 'object') {
+    const { type, props } = jsx;
+    
+    if (!type) return '';
+    
+    const { children, ...attrs } = props || {};
+    
+    // Convert attributes to HTML
+    const attrStr = Object.entries(attrs)
+      .filter(([key, value]) => value != null && key !== 'children')
+      .map(([key, value]) => {
+        // Handle special attributes
+        if (key === 'className') key = 'class';
+        if (key === 'htmlFor') key = 'for';
+        if (key.startsWith('on')) return ''; // Skip event handlers
+        if (typeof value === 'object') {
+          // Handle style objects
+          if (key === 'style') {
+            const styleStr = Object.entries(value)
+              .map(([prop, val]) => `${prop.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${val}`)
+              .join('; ');
+            return `style="${styleStr}"`;
+          }
+          return '';
+        }
+        return `${key}="${String(value)}"`;
+      })
+      .filter(Boolean)
+      .join(' ');
+    
+    const attrString = attrStr ? ` ${attrStr}` : '';
+    
+    // Handle self-closing tags
+    if (['img', 'br', 'hr', 'input', 'meta', 'link'].includes(type)) {
+      return `<${type}${attrString} />`;
+    }
+    
+    const childrenHtml = children ? jsxToHtml(children) : '';
+    return `<${type}${attrString}>${childrenHtml}</${type}>`;
+  }
+  
+  return String(jsx);
+}
+
+// Create example API files
+async function createExampleApiFiles(apiDir) {
+  // Create hello.js
+  const helloApiContent = `// Example API endpoint: GET/POST /api/hello
+
+export async function get(req, res) {
+  res.json({
+    message: 'Hello from Baraqex API!',
+    timestamp: new Date().toISOString(),
+    method: 'GET',
+    path: req.path
+  });
+}
+
+export async function post(req, res) {
+  const { name = 'World' } = req.body;
+  
+  res.json({
+    message: \`Hello \${name} from Baraqex API!\`,
+    timestamp: new Date().toISOString(),
+    method: 'POST',
+    body: req.body
+  });
+}
+`;
+
+  // Create users/index.js
+  const usersDir = path.join(apiDir, 'users');
+  fs.mkdirSync(usersDir, { recursive: true });
+  
+  const usersApiContent = `// Example API endpoint: /api/users
+
+const users = [
+  { id: 1, name: 'John Doe', email: 'john@example.com' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
+  { id: 3, name: 'Bob Johnson', email: 'bob@example.com' }
+];
+
+export async function get(req, res) {
+  res.json({
+    success: true,
+    data: users,
+    count: users.length
+  });
+}
+
+export async function post(req, res) {
+  const { name, email } = req.body;
+  
+  if (!name || !email) {
+    return res.status(400).json({
+      success: false,
+      message: 'Name and email are required'
+    });
+  }
+  
+  const newUser = {
+    id: users.length + 1,
+    name,
+    email
+  };
+  
+  users.push(newUser);
+  
+  res.status(201).json({
+    success: true,
+    message: 'User created successfully',
+    data: newUser
+  });
+}
+`;
+
+  fs.writeFileSync(path.join(apiDir, 'hello.js'), helloApiContent);
+  fs.writeFileSync(path.join(usersDir, 'index.js'), usersApiContent);
+  
+  console.log('📝 Created example API files');
+}
+
+// Create example page file
+async function createExamplePageFile(pagesDir) {
+  // Use the existing index.js content but ensure it's properly formatted
+  const indexPagePath = path.join(pagesDir, 'index.js');
+  if (!fs.existsSync(indexPagePath)) {
+    // Copy from the existing file or create a new one
+    const existingIndexPath = path.join(process.cwd(), 'src/pages/index.js');
+    if (fs.existsSync(existingIndexPath)) {
+      fs.copyFileSync(existingIndexPath, indexPagePath);
+    }
+    console.log('📝 Page component ready at src/pages/index.js');
+  }
+}
+
+// Generate complete HTML document
+function generateDocument(content, options = {}) {
+  const { title = 'Baraqex App', description = '', props = {} } = options;
+  
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)}</title>
+  ${description ? `<meta name="description" content="${escapeHtml(description)}">` : ''}
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f5f5f5;
+    }
+    .app-container {
+      min-height: 100vh;
+    }
+  </style>
+</head>
+<body>
+  <div id="app-root" class="app-container">
+    ${content}
+  </div>
+  
+  <!-- Initial props for hydration -->
+  <script id="__APP_DATA__" type="application/json">
+    ${JSON.stringify(props)}
+  </script>
+  
+  <!-- Add any client-side scripts here -->
+</body>
+</html>`;
+}
+
+// Generate welcome page
+function generateWelcomePage() {
+  const content = `
+    <div style="text-align: center; padding: 2rem; max-width: 800px; margin: 0 auto;">
+      <h1 style="color: #2c3e50; font-size: 2.5rem; margin-bottom: 1rem;">
+        🚀 Welcome to Baraqex!
+      </h1>
+      
+      <p style="font-size: 1.2rem; color: #666; margin-bottom: 2rem;">
+        Your fullstack application is running successfully!
+      </p>
+      
+      <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 2rem 0;">
+        <div style="background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+          <h3 style="margin-top: 0; color: #3498db;">📡 API Routes</h3>
+          <p>Your API endpoints are ready to use.</p>
+          <ul style="text-align: left;">
+            <li><a href="/api/hello" style="color: #3498db;">GET /api/hello</a></li>
+            <li><a href="/api/users" style="color: #3498db;">GET /api/users</a></li>
+          </ul>
+        </div>
+        
+        <div style="background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+          <h3 style="margin-top: 0; color: #e74c3c;">📄 Pages</h3>
+          <p>Create pages in <code>src/pages/</code></p>
+          <p style="font-size: 0.9rem; color: #666;">
+            Each .js file becomes a route automatically.
+          </p>
+        </div>
+        
+        <div style="background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+          <h3 style="margin-top: 0; color: #27ae60;">🛠️ Development</h3>
+          <p>Edit files and see changes instantly.</p>
+          <p style="font-size: 0.9rem; color: #666;">
+            Server automatically reloads on file changes.
+          </p>
+        </div>
+      </div>
+      
+      <div style="margin-top: 2rem; padding: 1rem; background: #fff3cd; border-radius: 8px; border-left: 4px solid #ffc107;">
+        <p style="margin: 0; color: #856404;">
+          <strong>Next steps:</strong> Create your first page component in <code>src/pages/index.js</code>
+        </p>
+      </div>
+    </div>
+  `;
+  
+  return generateDocument(content, {
+    title: 'Welcome to Baraqex',
+    description: 'A fullstack application framework'
+  });
+}
+
+// Generate error page
+function generateErrorPage(statusCode, message) {
+  const content = `
+    <div style="text-align: center; padding: 2rem;">
+      <h1 style="font-size: 4rem; color: #e74c3c; margin: 0;">${statusCode}</h1>
+      <h2 style="color: #333; margin: 1rem 0;">Something went wrong</h2>
+      <p style="color: #666; font-size: 1.1rem;">${escapeHtml(message)}</p>
+      <a href="/" style="color: #3498db; text-decoration: none; font-weight: bold;">← Back to Home</a>
+    </div>
+  `;
+  
+  return generateDocument(content, {
+    title: `Error ${statusCode}`,
+    description: 'An error occurred'
+  });
+}
+
+// Escape HTML special characters
+function escapeHtml(text) {
+  return String(text)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
 // Handle graceful shutdown
 process.on('SIGINT', () => {
   console.log('\n👋 Shutting down server...');

package/templates/fullstack-template/src/api/hello.js

@@ -1,19 +1,17 @@
-export async function get(req, res) {
-  res.json({
-    message: 'Hello from Baraqex API!',
+export function get(req, res) {
+  res.json({ 
+    message: 'Hello from API!',
     timestamp: new Date().toISOString(),
-    method: 'GET',
-    path: req.path
+    method: 'GET'
   });
 }
 
-export async function post(req, res) {
-  const { name = 'World' } = req.body;
-  
-  res.json({
-    message: `Hello ${name} from Baraqex API!`,
+export function post(req, res) {
+  const { name } = req.body;
+  res.json({ 
+    message: `Hello ${name || 'World'}!`,
     timestamp: new Date().toISOString(),
     method: 'POST',
-    body: req.body
+    received: req.body
   });
 }