frontend-hamroun 1.2.24 → 1.2.26

package/templates/fullstack-app/package.json

@@ -3,29 +3,18 @@
   "version": "0.1.0",
   "type": "module",
   "scripts": {
-    "dev": "node --loader ts-node/esm server.ts",
-    "build": "vite build && tsc --emitDeclarationOnly",
-    "start": "node dist/server.js"
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
+    "dev:server": "node server.js",
+    "dev:client": "vite",
+    "build": "vite build",
+    "start": "node server.js"
   },
   "dependencies": {
-    "bcryptjs": "^2.4.3",
-    "cors": "^2.8.5",
     "express": "^4.18.2",
-    "frontend-hamroun": "latest",
-    "jsonwebtoken": "^9.0.2",
-    "mongodb": "^5.7.0"
+    "frontend-hamroun": "latest"
   },
   "devDependencies": {
-    "@types/bcryptjs": "^2.4.4",
-    "@types/cors": "^2.8.14",
-    "@types/express": "^4.17.18",
-    "@types/jsonwebtoken": "^9.0.3",
-    "@types/node": "^18.16.19",
-    "autoprefixer": "^10.4.15",
-    "postcss": "^8.4.29",
-    "tailwindcss": "^3.3.3",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "concurrently": "^8.0.1",
+    "vite": "^4.3.9"
   }
 }

package/templates/fullstack-app/server.js

@@ -0,0 +1,210 @@
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+import dotenv from 'dotenv';
+import { createServer } from 'http';
+import { Server as SocketServer } from 'socket.io';
+import compression from 'compression';
+import cors from 'cors';
+
+// Load environment variables
+dotenv.config();
+
+// Get __dirname equivalent in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Create Express app
+const app = express();
+const PORT = process.env.PORT || 3000;
+const httpServer = createServer(app);
+
+// Create socket.io server
+const io = new SocketServer(httpServer, {
+  cors: {
+    origin: process.env.NODE_ENV === 'production' ? false : '*',
+    methods: ['GET', 'POST']
+  }
+});
+
+// Middleware setup
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+app.use(compression()); // Add compression for better performance
+app.use(cors()); // Enable CORS for API access
+
+// Add request logging in development mode
+if (process.env.NODE_ENV !== 'production') {
+  app.use((req, res, next) => {
+    console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
+    next();
+  });
+}
+
+// For production, serve the built files
+if (process.env.NODE_ENV === 'production') {
+  app.use(express.static(path.join(__dirname, 'dist')));
+} else {
+  // In development, we'll let Vite handle the frontend
+  console.log('Running in development mode - Vite handles the frontend');
+}
+
+// Global in-memory store for demo purposes
+// In a real app, you would use a database
+const store = {
+  users: [
+    { id: 1, name: 'User 1', email: 'user1@example.com' },
+    { id: 2, name: 'User 2', email: 'user2@example.com' },
+    { id: 3, name: 'User 3', email: 'user3@example.com' }
+  ],
+  posts: [
+    { id: 1, title: 'Post 1', content: 'Content for post 1', authorId: 1 },
+    { id: 2, title: 'Post 2', content: 'Content for post 2', authorId: 2 },
+    { id: 3, title: 'Post 3', content: 'Content for post 3', authorId: 1 }
+  ]
+};
+
+// API endpoints - Core data
+app.get('/api/hello', (req, res) => {
+  res.json({
+    message: "Hello from the API!",
+    time: new Date().toISOString(),
+    features: [
+      "Server-side rendering",
+      "API routes",
+      "Component-based UI",
+      "React-like development experience",
+      "WebSocket integration",
+      "Database connectivity",
+      "Authentication"
+    ]
+  });
+});
+
+// Dynamic API route loading
+const apiDir = path.join(__dirname, 'api');
+if (fs.existsSync(apiDir)) {
+  console.log('Loading API routes from directory...');
+  
+  // Function to map file paths to API routes
+  const registerApiRoutes = async (dir, routePrefix = '') => {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+      
+      if (entry.isDirectory()) {
+        // Process directories recursively
+        await registerApiRoutes(fullPath, `${routePrefix}/${entry.name}`);
+      } else if (entry.name.endsWith('.js') || entry.name.endsWith('.ts')) {
+        // Process API file
+        try {
+          const fileName = entry.name.replace(/\.[^/.]+$/, ""); // Remove extension
+          const routePath = fileName === 'index' 
+            ? routePrefix 
+            : fileName.startsWith('[') && fileName.endsWith(']')
+              ? `${routePrefix}/:${fileName.slice(1, -1)}` // Convert [param] to :param
+              : `${routePrefix}/${fileName}`;
+              
+          // Import the route module
+          const module = await import(`file://${fullPath}`);
+          
+          // Register handlers for HTTP methods
+          ['get', 'post', 'put', 'delete', 'patch'].forEach(method => {
+            if (typeof module[method] === 'function') {
+              console.log(`  Registered ${method.toUpperCase()} ${routePath}`);
+              app[method](`/api${routePath}`, module[method]);
+            }
+          });
+          
+          // Special case for 'delete' which might be named 'delete_' in some files
+          if (typeof module['delete_'] === 'function') {
+            console.log(`  Registered DELETE ${routePath}`);
+            app.delete(`/api${routePath}`, module['delete_']);
+          }
+        } catch (err) {
+          console.error(`Error loading API route ${fullPath}:`, err);
+        }
+      }
+    }
+  };
+  
+  // Start registering API routes
+  try {
+    await registerApiRoutes(apiDir);
+    console.log('API routes loaded successfully');
+  } catch (err) {
+    console.error('Error loading API routes:', err);
+  }
+} else {
+  console.log('API directory not found, skipping API route loading');
+}
+
+// WebSocket setup
+io.on('connection', (socket) => {
+  console.log('Client connected:', socket.id);
+  
+  // Send welcome message
+  socket.emit('welcome', { 
+    message: 'Connected to WebSocket server',
+    time: new Date().toISOString()
+  });
+  
+  // Handle client messages
+  socket.on('message', (data) => {
+    console.log('Received message:', data);
+    // Broadcast to all clients
+    io.emit('broadcast', {
+      from: socket.id,
+      data,
+      time: new Date().toISOString()
+    });
+  });
+  
+  // Handle disconnect
+  socket.on('disconnect', () => {
+    console.log('Client disconnected:', socket.id);
+  });
+});
+
+// In production or if using SSR, handle all requests
+app.get('*', (req, res, next) => {
+  // Skip API routes
+  if (req.path.startsWith('/api/')) {
+    return next();
+  }
+  
+  // In production, serve the index.html
+  if (process.env.NODE_ENV === 'production') {
+    const indexPath = path.join(__dirname, 'dist', 'index.html');
+    if (fs.existsSync(indexPath)) {
+      res.sendFile(indexPath);
+    } else {
+      res.status(404).send('Not found');
+    }
+  } else {
+    // In development, redirect to Vite dev server
+    res.redirect(`http://localhost:5173${req.path}`);
+  }
+});
+
+// Error handling middleware
+app.use((err, req, res, next) => {
+  console.error('Server error:', err);
+  res.status(500).json({
+    error: process.env.NODE_ENV === 'production' 
+      ? 'Internal server error' 
+      : err.message
+  });
+});
+
+// Start server
+httpServer.listen(PORT, () => {
+  console.log(`Server running on http://localhost:${PORT}`);
+  
+  if (process.env.NODE_ENV !== 'production') {
+    console.log(`Frontend development server will run on http://localhost:5173`);
+    console.log(`Run 'npm run dev' to start both servers`);
+  }
+});

package/templates/fullstack-app/server.ts

@@ -1,38 +1,77 @@
-import { Server, Database, AuthService } from 'frontend-hamroun/server';
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
 
-async function startServer() {
+// Get __dirname equivalent in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Create Express app
+const app = express();
+const PORT = process.env.PORT ? parseInt(process.env.PORT) : 3000;
+
+// Serve static files from current directory
+app.use(express.static(__dirname));
+
+// Parse JSON and URL-encoded data
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+// Basic API endpoint
+app.get('/api/hello', (req, res) => {
+  res.json({
+    message: 'Hello from the API!',
+    time: new Date().toISOString(),
+    environment: process.env.NODE_ENV || 'development'
+  });
+});
+
+// Serve index.html for all other routes
+app.get('*', (req, res) => {
   try {
-    // Create and configure the server
-    const app = new Server({
-      port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
-      apiDir: './api',
-      staticDir: './public',
-      
-      // Enable CORS
-      enableCors: true,
-      corsOptions: {
-        origin: process.env.CORS_ORIGIN || '*',
-        methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
-        allowedHeaders: ['Content-Type', 'Authorization']
-      }
-    });
+    // Read index.html
+    const indexPath = path.join(__dirname, 'index.html');
+    const html = fs.readFileSync(indexPath, 'utf8');
+    
+    // Add server-rendered content
+    const serverContent = `
+      <div class="server-content">
+        <h1>Frontend Hamroun Fullstack</h1>
+        <p>Server-side rendered content</p>
+        <div class="timestamp">Rendered at: ${new Date().toISOString()}</div>
+        <div class="api-container"></div>
+      </div>
+    `;
     
-    // Start the server
-    await app.start();
+    // Replace placeholder with server content
+    const modifiedHtml = html.replace(
+      /<div class="placeholder">[\s\S]*?<\/div>/,
+      serverContent
+    );
     
-    console.log('Server running at http://localhost:' + 
-      (process.env.PORT || 3000));
-      
-    // Handle graceful shutdown
-    process.on('SIGINT', async () => {
-      console.log('Shutting down server...');
-      await app.stop();
-      process.exit(0);
-    });
+    res.send(modifiedHtml);
   } catch (error) {
-    console.error('Failed to start server:', error);
-    process.exit(1);
+    console.error('Error serving HTML:', error);
+    res.status(500).send(`
+      <html>
+        <head><title>Server Error</title></head>
+        <body>
+          <h1>500 - Server Error</h1>
+          <p>${error.message}</p>
+        </body>
+      </html>
+    `);
   }
-}
+});
+
+// Start the server
+app.listen(PORT, () => {
+  console.log(`Server running at http://localhost:${PORT}`);
+});
 
-startServer();
+// Handle graceful shutdown
+process.on('SIGINT', () => {
+  console.log('Shutting down server...');
+  process.exit(0);
+});

package/templates/fullstack-app/src/client.js

@@ -0,0 +1,20 @@
+import { hydrate, createElement } from 'frontend-hamroun';
+
+// Simple component for testing
+function App() {
+  return createElement('div', null, [
+    createElement('h1', null, 'Hello from Frontend Hamroun'),
+    createElement('p', null, 'This is a fullstack app with SSR')
+  ]);
+}
+
+// Wait for DOM to be ready
+document.addEventListener('DOMContentLoaded', () => {
+  const root = document.getElementById('root');
+  
+  // Hydrate the application
+  if (root) {
+    hydrate(createElement(App), root);
+    console.log('App hydrated successfully');
+  }
+});

package/templates/fullstack-app/src/main.tsx

@@ -0,0 +1,9 @@
+import { jsx, render } from 'frontend-hamroun';
+import HomePage from './pages/index.tsx';
+
+// Add global jsx for Vite to use
+window.jsx = jsx;
+
+// Fix: Pass the component properly to render
+// Don't call HomePage() directly - pass it as a component
+render(jsx(HomePage, {}, null), document.getElementById('root'));

package/templates/fullstack-app/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'frontend-hamroun';
+import { jsx, useState, useEffect } from 'frontend-hamroun';
 
 export default function HomePage() {
   const [apiData, setApiData] = useState(null);
@@ -21,39 +21,43 @@ export default function HomePage() {
     fetchData();
   }, []);
 
-  return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-3xl font-bold mb-4">Frontend Hamroun Full Stack</h1>
-      
-      <div className="mb-6">
-        <h2 className="text-xl font-semibold mb-2">API Response:</h2>
-        {loading ? (
-          <p>Loading...</p>
-        ) : error ? (
-          <p className="text-red-500">Error: {error}</p>
-        ) : (
-          <pre className="bg-gray-100 p-4 rounded">
-            {JSON.stringify(apiData, null, 2)}
-          </pre>
-        )}
-      </div>
-      
-      <div className="mb-6">
-        <h2 className="text-xl font-semibold mb-2">Features:</h2>
-        <ul className="list-disc pl-6">
-          <li>Server-side rendering</li>
-          <li>API routes with Express</li>
-          <li>Database integration</li>
-          <li>Authentication and authorization</li>
-          <li>File-based routing</li>
-        </ul>
-      </div>
-      
-      <div>
-        <h2 className="text-xl font-semibold mb-2">Get Started:</h2>
-        <p>Edit <code className="bg-gray-100 px-2 py-1 rounded">src/pages/index.tsx</code> to customize this page</p>
-        <p>API routes are in the <code className="bg-gray-100 px-2 py-1 rounded">api</code> directory</p>
-      </div>
-    </div>
-  );
+  return jsx('div', { className: "container mx-auto p-4" }, [
+    jsx('h1', { className: "text-3xl font-bold mb-4" }, "Frontend Hamroun Full Stack"),
+    
+    jsx('div', { className: "mb-6" }, [
+      jsx('h2', { className: "text-xl font-semibold mb-2" }, "API Response:"),
+      loading 
+        ? jsx('p', {}, "Loading...")
+        : error 
+          ? jsx('p', { className: "text-red-500" }, `Error: ${error}`)
+          : jsx('pre', { className: "bg-gray-100 p-4 rounded" }, 
+              JSON.stringify(apiData, null, 2)
+            )
+    ]),
+    
+    jsx('div', { className: "mb-6" }, [
+      jsx('h2', { className: "text-xl font-semibold mb-2" }, "Features:"),
+      jsx('ul', { className: "list-disc pl-6" }, [
+        jsx('li', {}, "Server-side rendering"),
+        jsx('li', {}, "API routes with Express"),
+        jsx('li', {}, "Database integration"),
+        jsx('li', {}, "Authentication and authorization"),
+        jsx('li', {}, "File-based routing")
+      ])
+    ]),
+    
+    jsx('div', {}, [
+      jsx('h2', { className: "text-xl font-semibold mb-2" }, "Get Started:"),
+      jsx('p', {}, [
+        "Edit ",
+        jsx('code', { className: "bg-gray-100 px-2 py-1 rounded" }, "src/pages/index.tsx"),
+        " to customize this page"
+      ]),
+      jsx('p', {}, [
+        "API routes are in the ",
+        jsx('code', { className: "bg-gray-100 px-2 py-1 rounded" }, "api"),
+        " directory"
+      ])
+    ])
+  ]);
 }

package/templates/fullstack-app/vite.config.js

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  // Server configuration
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': 'http://localhost:3000'
+    }
+  },
+  
+  // Using jsx transform with a different configuration
+  esbuild: {
+    jsxFactory: 'jsx',
+    jsxFragment: 'Fragment' 
+  },
+  
+  // Build configuration
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html')
+      }
+    }
+  },
+  
+  // Resolve aliases
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  
+  // Optimize dependencies
+  optimizeDeps: {
+    include: ['frontend-hamroun']
+  }
+});