frontend-hamroun 1.2.84 → 1.2.85

package/templates/fullstack-app/server.js

@@ -1,267 +1,429 @@
-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 }
-  ]
-};
-
-// Core API routes (available without file-based routing)
-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"
-    ]
-  });
-});
-
-// REST API endpoints for store data
-app.get('/api/users', (req, res) => {
-  res.json(store.users);
-});
-
-app.get('/api/users/:id', (req, res) => {
-  const user = store.users.find(u => u.id === parseInt(req.params.id));
-  if (user) {
-    res.json(user);
-  } else {
-    res.status(404).json({ error: 'User not found' });
-  }
-});
-
-app.get('/api/posts', (req, res) => {
-  const { authorId } = req.query;
-  
-  if (authorId) {
-    const filteredPosts = store.posts.filter(p => p.authorId === parseInt(authorId));
-    return res.json(filteredPosts);
-  }
-  
-  res.json(store.posts);
-});
-
-// Improved dynamic API route loading with better error handling
-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 = '') => {
-    try {
-      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);
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs/promises';
+import { existsSync } 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';
+import * as esbuild from 'esbuild';
+// Setup environment
+dotenv.config();
+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;
+const httpServer = createServer(app);
+// Set development mode
+if (process.env.NODE_ENV === undefined) {
+    process.env.NODE_ENV = 'development';
+}
+const isDev = process.env.NODE_ENV !== 'production';
+// Create socket.io server
+const io = new SocketServer(httpServer, {
+    cors: {
+        origin: isDev ? '*' : false,
+        methods: ['GET', 'POST']
+    }
+});
+// Middleware setup
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+app.use(compression());
+app.use(cors());
+if (isDev) {
+    app.use((req, res, next) => {
+        console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
+        next();
+    });
+}
+// Sample data store
+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 Routes
+app.get('/api/hello', (req, res) => {
+    res.json({
+        message: 'Hello from the API!',
+        time: new Date().toISOString()
+    });
+});
+app.get('/api/users', (req, res) => {
+    res.json(store.users);
+});
+app.get('/api/users/:id', (req, res) => {
+    const user = store.users.find(u => u.id === parseInt(req.params.id));
+    if (user) {
+        res.json(user);
+    }
+    else {
+        res.status(404).json({ error: 'User not found' });
+    }
+});
+// Setup esbuild
+let esbuildContext;
+async function setupEsbuild() {
+    const buildDir = path.join(__dirname, 'build');
+    if (!existsSync(buildDir)) {
+        await fs.mkdir(buildDir, { recursive: true });
+    }
+    // Import PostCSS, Tailwind and Autoprefixer when in development mode
+    let postcssPlugin = null;
+    if (isDev) {
+        try {
+            const postcss = (await import('postcss')).default;
+            const tailwindcss = (await import('tailwindcss')).default;
+            const autoprefixer = (await import('autoprefixer')).default;
+            // Create a plugin to process CSS with Tailwind
+            postcssPlugin = {
+                name: 'postcss-tailwind',
+                setup(build) {
+                    build.onLoad({ filter: /\.css$/ }, async (args) => {
+                        const css = await fs.readFile(args.path, 'utf8');
+                        try {
+                            // Process CSS with PostCSS + Tailwind
+                            const result = await postcss([
+                                tailwindcss,
+                                autoprefixer
+                            ]).process(css, {
+                                from: args.path,
+                                to: path.join(buildDir, 'styles.css')
+                            });
+                            return {
+                                contents: result.css,
+                                loader: 'css'
+                            };
+                        }
+                        catch (error) {
+                            console.error('Error processing CSS with Tailwind:', error);
+                            return { contents: css, loader: 'css' };
+                        }
+                    });
+                }
+            };
+        }
+        catch (error) {
+            console.warn('PostCSS plugins not available, CSS will not be processed with Tailwind:', error);
+        }
+    }
+    esbuildContext = await esbuild.context({
+        entryPoints: [
+            path.join(__dirname, 'src', 'main.tsx'),
+        ],
+        bundle: true,
+        format: 'esm',
+        outdir: buildDir,
+        sourcemap: isDev,
+        minify: !isDev,
+        jsx: 'transform',
+        jsxFactory: 'jsx',
+        jsxFragment: 'Fragment',
+        external: ['react', 'react/jsx-runtime', 'react-dom'],
+        define: {
+            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+        },
+        loader: {
+            '.tsx': 'tsx',
+            '.ts': 'ts',
+            '.jsx': 'jsx',
+            '.js': 'js',
+            '.css': 'css',
+            '.json': 'json',
+            '.png': 'file',
+            '.jpg': 'file',
+            '.svg': 'file'
+        },
+        plugins: [
+            {
+                name: 'jsx-runtime-import',
+                setup(build) {
+                    build.onLoad({ filter: /\.(tsx|jsx)$/ }, async (args) => {
+                        const source = await fs.readFile(args.path, 'utf8');
+                        const content = `import { jsx, Fragment } from 'frontend-hamroun';\n${source}`;
+                        return { contents: content, loader: args.path.endsWith('tsx') ? 'tsx' : 'jsx' };
+                    });
+                }
+            },
+            ...(postcssPlugin ? [postcssPlugin] : [])
+        ]
+    });
+    if (isDev) {
+        await esbuildContext.rebuild();
+        console.log('esbuild: Initial build complete');
+    }
+    else {
+        await esbuildContext.rebuild();
+        await esbuildContext.dispose();
+        console.log('esbuild: Production build complete');
+    }
+}
+// Initialize esbuild
+setupEsbuild().catch(err => {
+    console.error('Failed to setup esbuild:', err);
+    process.exit(1);
+});
+// Serve static files
+app.use('/build', express.static(path.join(__dirname, 'build')));
+app.use(express.static(path.join(__dirname, 'public')));
+// Development mode file serving
+if (isDev) {
+    app.get('/src/*', async (req, res, next) => {
+        try {
+            const filePath = path.join(__dirname, req.path);
+            // Check if file exists
+            if (!existsSync(filePath)) {
+                return next();
+            }
+            // Read the file
+            const source = await fs.readFile(filePath, 'utf8');
+            // Determine content type based on file extension
+            const ext = path.extname(filePath);
+            let contentType = 'application/javascript';
+            let loader = 'js';
+            switch (ext) {
+                case '.ts':
+                    loader = 'ts';
+                    break;
+                case '.tsx':
+                    loader = 'tsx';
+                    break;
+                case '.jsx':
+                    loader = 'jsx';
+                    break;
+                case '.css':
+                    contentType = 'text/css';
+                    loader = 'css';
+                    break;
+                case '.json':
+                    contentType = 'application/json';
+                    loader = 'json';
+                    break;
+            }
+            // Transform the file with esbuild
+            const result = await esbuild.transform(source, {
+                loader: loader,
+                sourcemap: 'inline',
+                jsxFactory: 'jsx',
+                jsxFragment: 'Fragment'
+            });
+            res.setHeader('Content-Type', contentType);
+            res.send(result.code);
+        }
+        catch (error) {
+            console.error(`Error serving ${req.path}:`, error);
+            next(error);
+        }
+    });
+}
+// Helper function to check if file exists
+async function fileExists(filepath) {
+    try {
+        await fs.access(filepath);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+// Import server utilities directly without WASM functionality
+import { renderToString } from 'frontend-hamroun';
+// Simple renderComponent implementation
+async function renderComponent(Component, props = {}) {
+    try {
+        // Create HTML string from component
+        const html = renderToString(Component(props));
+        return {
+            html,
+            success: true
+        };
+    }
+    catch (error) {
+        console.error('Error rendering component:', error);
+        return {
+            html: `<div class="error">Error rendering component</div>`,
+            success: false,
+            error
+        };
+    }
+}
+// SSR handler for all routes except /api and static files
+app.get('*', async (req, res, next) => {
+    // Skip API routes, static assets, and build/src files
+    if (req.path.startsWith('/api/') ||
+        req.path.startsWith('/build/') ||
+        req.path.startsWith('/src/') ||
+        req.path.match(/\.(js|css|ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/)) {
+        return next();
+    }
+    console.log(`[SSR] Processing request for: ${req.path}`);
+    try {
+        // Normalize the path
+        const pagePath = req.path === '/' ? 'index' : req.path.slice(1);
+        // Create initial state
+        const initialState = {
+            route: req.path,
+            timestamp: new Date().toISOString(),
+            serverRendered: true,
+            data: {
+                users: store.users || [],
+                posts: store.posts || []
+            }
+        };
+        // Generate HTML content directly as a string instead of JSX
+        const rootContent = `
+      <div style="padding: 20px; max-width: 800px; margin: 0 auto;">
+        <h1>Loading Application...</h1>
+        <p>The application is initializing. If you continue to see this message, please ensure JavaScript is enabled in your browser.</p>
+      </div>
+    `;
+        // Create HTML template with properly structured content
+        const html = `<!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Frontend Hamroun App</title>
+        <!-- Include the processed Tailwind CSS file -->
+        <link rel="stylesheet" href="/styles.css">
+        <style>
+          body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            line-height: 1.6;
+            color: #333;
+            margin: 0;
+            padding: 0;
           }
-        }
-      }
-    } catch (err) {
-      console.error(`Error reading directory ${dir}:`, err);
-    }
-  };
-  
-  // Start registering API routes
-  registerApiRoutes(apiDir).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 routes
-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)) {
-      try {
-        // Read the index.html file
-        let html = fs.readFileSync(indexPath, 'utf8');
-        
-        // Create initial state for client hydration
-        const initialState = {
-          route: req.path,
-          timestamp: new Date().toISOString()
-        };
-        
-        // Inject initial state for hydration
-        html = html.replace(
-          '</head>',
-          `<script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};</script></head>`
-        );
-        
-        res.send(html);
-      } catch (error) {
-        console.error('Error serving HTML:', error);
-        res.status(500).send('Server Error');
-      }
-    } else {
-      res.status(404).send('Not found');
-    }
-  } else {
-    // In development, use Vite's dev server
-    // Instead of redirecting, proxy the request to maintain the URL path
-    // This allows Vite to handle the route properly
-    const viteDevServerUrl = 'http://localhost:5173';
-    
-    // Tell the client which route to handle via response headers
-    res.setHeader('x-original-route', req.path);
-    
-    // Forward the request to the Vite dev server with the original path
-    res.redirect(302, `${viteDevServerUrl}${req.path}`);
-    
-    // Note: If the above still causes 404s, you can try this alternative
-    // res.redirect(302, `${viteDevServerUrl}/?_path=${encodeURIComponent(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`);
-  }
-});
+          a {
+            color: #0066cc;
+            text-decoration: none;
+          }
+          a:hover {
+            text-decoration: underline;
+          }
+          pre {
+            white-space: pre-wrap;
+            word-break: break-word;
+          }
+        </style>
+        <script>
+          window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
+        </script>
+      </head>
+      <body>
+        <div id="root">${rootContent}</div>
+        <script src="/build/main.js" type="module"></script>
+        <script src="/socket.io/socket.io.js"></script>
+      </body>
+      </html>`;
+        // Send the rendered HTML
+        res.send(html);
+    }
+    catch (error) {
+        console.error('[SSR] Server error:', error);
+        next(error);
+    }
+});
+// Error handler
+app.use((err, req, res, next) => {
+    console.error('Server error:', err);
+    res.status(500).send(`
+    <!DOCTYPE html>
+    <html>
+      <head><title>Server Error</title></head>
+      <body>
+        <h1>500 - Server Error</h1>
+        <p>${err.message}</p>
+        ${isDev ? `<pre>${err.stack}</pre>` : ''}
+      </body>
+    </html>
+  `);
+});
+// 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);
+    });
+});
+// Handle file changes for live reload in development
+if (isDev) {
+    const { watch } = await import('chokidar');
+    const watcher = watch([
+        path.join(__dirname, 'src/**/*'),
+        path.join(__dirname, 'public/**/*')
+    ]);
+    watcher.on('change', async (changedPath) => {
+        console.log(`[Watcher] File changed: ${changedPath}`);
+        // Rebuild if source files changed
+        if (changedPath.startsWith(path.join(__dirname, 'src'))) {
+            try {
+                await esbuildContext.rebuild();
+                console.log('[Watcher] Rebuild complete');
+                // Notify clients to reload
+                io.emit('reload');
+            }
+            catch (error) {
+                console.error('[Watcher] Rebuild failed:', error);
+            }
+        }
+        // Notify clients of public file changes without rebuild
+        if (changedPath.startsWith(path.join(__dirname, 'public'))) {
+            io.emit('reload');
+        }
+    });
+    console.log('[Watcher] File watching enabled for development');
+}
+// API routes
+app.get('/api/posts', (req, res) => {
+    const { authorId } = req.query;
+    if (authorId) {
+        const filteredPosts = store.posts.filter(p => p.authorId === parseInt(authorId));
+        return res.json(filteredPosts);
+    }
+    res.json(store.posts);
+});
+// Start the server
+httpServer.listen(PORT, () => {
+    console.log(`Server running at http://localhost:${PORT}`);
+    console.log(`Server-side rendering enabled with direct esbuild compilation`);
+    if (isDev) {
+        console.log(`Development mode with live reload active`);
+    }
+});
+// Handle graceful shutdown
+process.on('SIGINT', async () => {
+    console.log('Shutting down server...');
+    // Dispose esbuild context if active
+    if (esbuildContext) {
+        await esbuildContext.dispose();
+    }
+    process.exit(0);
+});