baraqex 1.0.45 → 1.0.47

package/templates/fullstack-template/package.json

@@ -1,14 +1,30 @@
 {
   "name": "fullstack-app",
   "version": "1.0.0",
+  "description": "A fullstack application built with Baraqex",
   "type": "module",
+  "main": "server.js",
   "scripts": {
     "dev": "node server.js",
-    "start": "node server.js",
-    "build": "echo \"No build step required\""
+    "start": "NODE_ENV=production node server.js",
+    "build": "echo 'No build step required for this template'",
+    "test": "echo 'No tests specified' && exit 0"
   },
   "dependencies": {
-    "frontend-hamroun": "latest",
-    "baraqex": "latest"
-  }
+    "baraqex": "file:../../",
+    "express": "^4.18.2",
+    "cors": "^2.8.5"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.17",
+    "@types/cors": "^2.8.13"
+  },
+  "keywords": [
+    "baraqex",
+    "fullstack",
+    "express",
+    "api"
+  ],
+  "author": "",
+  "license": "MIT"
 }

package/templates/fullstack-template/public/client.js

@@ -0,0 +1,17 @@
+
+          // Auto-generated hydration script
+          import { hydrate } from 'frontend-hamroun';
+          
+          // Find SSR content and hydrate it
+          document.addEventListener('DOMContentLoaded', () => {
+            const ssrRoots = document.querySelectorAll('[data-ssr-root]');
+            ssrRoots.forEach(root => {
+              const componentPath = root.getAttribute('data-component');
+              if (componentPath) {
+                import(componentPath).then(module => {
+                  hydrate(module.default, root);
+                });
+              }
+            });
+          });
+        

package/templates/fullstack-template/server.js

@@ -1,16 +1,44 @@
-import { createDevServer } from 'baraqex/server';
+import { createDevServer } from 'baraqex';
 
-const server = createDevServer({
-  port: 3000,
-  enableCors: true
+async function startServer() {
+  try {
+    console.log('Starting fullstack server...');
+    
+    const server = createDevServer({
+      port: process.env.PORT || 3000,
+      enableCors: true
+    });
+
+    // 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');
+    
+  } 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');
+    }
+    
+    process.exit(1);
+  }
+}
+
+// Handle graceful shutdown
+process.on('SIGINT', () => {
+  console.log('\n👋 Shutting down server...');
+  process.exit(0);
 });
 
-// Enable SSR with hydration
-server.enableSSR({ hydratable: true });
+process.on('SIGTERM', () => {
+  console.log('\n👋 Server terminated');
+  process.exit(0);
+});
 
 // Start the server
-server.start().then(() => {
-  console.log('Full-stack server started!');
-  console.log('Visit http://localhost:3000');
-  console.log('API available at http://localhost:3000/api');
-});
+startServer();

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

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

package/templates/fullstack-template/src/api/users/index.js

@@ -0,0 +1,43 @@
+// Example API route: /api/users
+
+// Mock user data
+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) {
+  // GET /api/users - Get all users
+  res.json({
+    success: true,
+    data: users,
+    count: users.length
+  });
+}
+
+export async function post(req, res) {
+  // POST /api/users - Create a new user
+  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
+  });
+}

package/templates/fullstack-template/src/pages/index.js

@@ -1,206 +1,124 @@
-import { jsx, useState } from 'frontend-hamroun';
+import { jsx } from 'baraqex';
 
 export default function HomePage(props) {
-  const [count, setCount] = useState(0);
-  
-  return jsx('div', { 
-    style: { 
-      padding: '2rem', 
-      textAlign: 'center', 
-      fontFamily: 'system-ui',
+  return jsx('div', {
+    style: {
+      fontFamily: 'Arial, sans-serif',
       maxWidth: '800px',
-      margin: '0 auto'
-    } 
-  },
-    jsx('h1', { 
-      style: { 
-        color: '#2c3e50',
-        marginBottom: '1rem',
-        fontSize: '2.5rem'
-      } 
-    }, 'Welcome to Your Baraqex Full-Stack App! 🚀'),
-    
-    jsx('div', { 
-      style: { 
-        background: '#f8f9fa',
-        padding: '2rem',
-        borderRadius: '12px',
-        margin: '2rem 0',
-        border: '1px solid #dee2e6'
-      } 
+      margin: '0 auto',
+      padding: '20px',
+      lineHeight: '1.6'
     },
-      jsx('p', { 
-        style: { 
-          fontSize: '1.5rem',
-          fontWeight: 'bold',
-          color: '#495057',
-          margin: '0 0 1rem 0'
-        } 
-      }, `Counter: ${count}`),
+    children: [
+      jsx('h1', {
+        style: { color: '#333', textAlign: 'center' },
+        children: '🚀 Baraqex Fullstack App'
+      }),
       
-      jsx('div', { style: { margin: '1rem 0' } },
-        jsx('button', { 
-          onclick: () => setCount(count + 1),
-          style: { 
-            padding: '0.75rem 1.5rem', 
-            margin: '0.5rem',
-            background: '#007acc',
-            color: 'white',
-            border: 'none',
-            borderRadius: '6px',
-            cursor: 'pointer',
-            fontSize: '1rem',
-            fontWeight: '500',
-            transition: 'all 0.2s ease'
-          }
-        }, 'Increment'),
-        jsx('button', { 
-          onclick: () => setCount(count - 1),
-          style: { 
-            padding: '0.75rem 1.5rem', 
-            margin: '0.5rem',
-            background: '#e74c3c',
-            color: 'white',
-            border: 'none',
-            borderRadius: '6px',
-            cursor: 'pointer',
-            fontSize: '1rem',
-            fontWeight: '500',
-            transition: 'all 0.2s ease'
-          }
-        }, 'Decrement'),
-        jsx('button', { 
-          onclick: () => setCount(0),
-          style: { 
-            padding: '0.75rem 1.5rem', 
-            margin: '0.5rem',
-            background: '#95a5a6',
-            color: 'white',
-            border: 'none',
-            borderRadius: '6px',
-            cursor: 'pointer',
-            fontSize: '1rem',
-            fontWeight: '500',
-            transition: 'all 0.2s ease'
-          }
-        }, 'Reset')
-      )
-    ),
-    
-    jsx('div', { 
-      style: { 
-        marginTop: '2rem', 
-        padding: '1.5rem', 
-        background: '#e8f5e8', 
-        borderRadius: '8px',
-        border: '1px solid #c3e6c3'
-      } 
-    },
-      jsx('h3', { 
-        style: { 
-          margin: '0 0 1rem 0',
-          color: '#155724'
-        } 
-      }, '🎯 Features Included:'),
-      jsx('ul', { 
-        style: { 
-          textAlign: 'left', 
-          maxWidth: '500px', 
-          margin: '0 auto',
-          listStyle: 'none',
-          padding: 0
-        } 
-      },
-        jsx('li', { 
-          style: { 
-            padding: '0.5rem 0',
-            borderBottom: '1px solid rgba(0,0,0,0.1)'
-          } 
-        }, '✅ Server-side rendering with ESBuild'),
-        jsx('li', { 
-          style: { 
-            padding: '0.5rem 0',
-            borderBottom: '1px solid rgba(0,0,0,0.1)'
-          } 
-        }, '✅ API routes in src/api/'),
-        jsx('li', { 
-          style: { 
-            padding: '0.5rem 0',
-            borderBottom: '1px solid rgba(0,0,0,0.1)'
-          } 
-        }, '✅ Page-based routing'),
-        jsx('li', { 
-          style: { 
-            padding: '0.5rem 0',
-            borderBottom: '1px solid rgba(0,0,0,0.1)'
-          } 
-        }, '✅ Client-side hydration'),
-        jsx('li', { 
-          style: { 
-            padding: '0.5rem 0'
-          } 
-        }, '✅ Frontend Hamroun hooks')
-      )
-    ),
-    
-    jsx('div', {
-      style: {
-        marginTop: '2rem',
-        padding: '1.5rem',
-        background: '#fff3cd',
-        borderRadius: '8px',
-        border: '1px solid #ffeaa7'
-      }
-    },
-      jsx('h3', {
+      jsx('p', {
+        style: { textAlign: 'center', color: '#666', fontSize: '18px' },
+        children: 'Welcome to your fullstack application!'
+      }),
+      
+      jsx('div', {
         style: {
-          margin: '0 0 1rem 0',
-          color: '#856404'
-        }
-      }, '🔗 Quick Links:'),
+          display: 'grid',
+          gap: '20px',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+          marginTop: '30px'
+        },
+        children: [
+          jsx('div', {
+            style: {
+              border: '1px solid #ddd',
+              borderRadius: '8px',
+              padding: '20px',
+              backgroundColor: '#f9f9f9'
+            },
+            children: [
+              jsx('h3', { children: '📡 API Routes' }),
+              jsx('p', { children: 'Your API endpoints are ready:' }),
+              jsx('ul', {
+                children: [
+                  jsx('li', { children: jsx('code', { children: 'GET /api/hello' }) }),
+                  jsx('li', { children: jsx('code', { children: 'POST /api/hello' }) }),
+                  jsx('li', { children: jsx('code', { children: 'GET /api/users' }) }),
+                  jsx('li', { children: jsx('code', { children: 'POST /api/users' }) })
+                ]
+              })
+            ]
+          }),
+          
+          jsx('div', {
+            style: {
+              border: '1px solid #ddd',
+              borderRadius: '8px',
+              padding: '20px',
+              backgroundColor: '#f9f9f9'
+            },
+            children: [
+              jsx('h3', { children: '📄 Server-Side Rendering' }),
+              jsx('p', { children: 'This page is rendered on the server!' }),
+              jsx('p', { 
+                children: `Server time: ${props.api?.serverTime || 'N/A'}` 
+              })
+            ]
+          }),
+          
+          jsx('div', {
+            style: {
+              border: '1px solid #ddd',
+              borderRadius: '8px',
+              padding: '20px',
+              backgroundColor: '#f9f9f9'
+            },
+            children: [
+              jsx('h3', { children: '🛠️ Features' }),
+              jsx('ul', {
+                children: [
+                  jsx('li', { children: 'Express.js backend' }),
+                  jsx('li', { children: 'File-based API routing' }),
+                  jsx('li', { children: 'Server-side rendering' }),
+                  jsx('li', { children: 'Static file serving' }),
+                  jsx('li', { children: 'CORS enabled' })
+                ]
+              })
+            ]
+          })
+        ]
+      }),
+      
       jsx('div', {
         style: {
-          display: 'flex',
-          gap: '1rem',
-          justifyContent: 'center',
-          flexWrap: 'wrap'
-        }
-      },
-        jsx('a', {
-          href: '/api/hello',
-          style: {
-            padding: '0.5rem 1rem',
-            background: '#17a2b8',
-            color: 'white',
-            textDecoration: 'none',
-            borderRadius: '4px',
-            fontSize: '0.9rem'
-          }
-        }, 'API Hello'),
-        jsx('a', {
-          href: '/api-docs',
-          style: {
-            padding: '0.5rem 1rem',
-            background: '#6f42c1',
-            color: 'white',
-            textDecoration: 'none',
-            borderRadius: '4px',
-            fontSize: '0.9rem'
-          }
-        }, 'API Docs')
-      )
-    ),
-    
-    jsx('p', { 
-      style: { 
-        marginTop: '2rem', 
-        color: '#6c757d',
-        fontSize: '0.9rem'
-      } 
-    }, 'Edit src/pages/index.js to customize this page')
-  );
+          marginTop: '40px',
+          textAlign: 'center',
+          padding: '20px',
+          backgroundColor: '#e3f2fd',
+          borderRadius: '8px'
+        },
+        children: [
+          jsx('h3', { children: '🧪 Test Your API' }),
+          jsx('p', { children: 'Try these commands in your terminal:' }),
+          jsx('pre', {
+            style: {
+              backgroundColor: '#333',
+              color: '#fff',
+              padding: '10px',
+              borderRadius: '4px',
+              textAlign: 'left',
+              overflow: 'auto'
+            },
+            children: `curl http://localhost:3000/api/hello
+curl -X POST http://localhost:3000/api/hello \\
+  -H "Content-Type: application/json" \\
+  -d '{"name":"Developer"}'`
+          })
+        ]
+      })
+    ]
+  });
 }
 
-// Optional: Add metadata for SEO
-HomePage.title = 'Baraqex Full-Stack App';
-HomePage.description = 'A complete full-stack application built with Baraqex framework';
+// Optional: Add metadata for the page
+HomePage.getTitle = () => 'Baraqex Fullstack App';
+HomePage.getDescription = () => 'A fullstack application with API routes and server-side rendering';

package/templates/wasm/package.json

@@ -14,7 +14,8 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "frontend-hamroun": "^1.0.0"
+    "frontend-hamroun": "^1.0.35" ,
+    "baraqex": "1.0.45"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",