frontend-hamroun 1.2.75 → 1.2.77

package/templates/go-wasm-app/server.js

@@ -1,521 +1,70 @@
-import express from 'express';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { execSync } from 'child_process';
-import os from 'os';
-
-// ESM __dirname equivalent
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// Configuration
-const PORT = process.env.PORT || 3000;
-const isProduction = process.env.NODE_ENV === 'production';
-
-// Path to WASM files
-const WASM_PATH = path.join(__dirname, isProduction ? 'dist' : 'public', 'wasm', 'example.wasm');
-const WASM_EXEC_NODE_PATH = path.join(__dirname, isProduction ? 'dist' : 'public', 'wasm', 'wasm_exec_node.js');
-
-// Express app setup
-const app = express();
-
-// IMPORTANT: Configure routes in correct order for Express
-
-// 1. Special route for WASM files to set correct MIME type
-app.get('*.wasm', (req, res, next) => {
-  res.set('Content-Type', 'application/wasm');
-  next();
-});
-
-// 2. Serve static files EXCEPT index.html (this prevents the static index.html from being served)
-app.use(express.static(path.join(__dirname, 'public'), {
-  index: false  // Don't serve index.html automatically
-}));
-
-// Setup WASM support on the server - this needs to be done before defining routes
-async function setupWasmSupport() {
-  try {
-    // Add WebAssembly support for Node.js
-    global.WebAssembly = WebAssembly;
-    
-    // Check if WASM file exists
-    if (!fs.existsSync(WASM_PATH)) {
-      console.warn(`⚠️ WASM file not found at: ${WASM_PATH}`);
-    }
-    
-    // Since we're having issues with direct WASM loading in Node.js,
-    // use the mock implementation for template development
-    console.log('Using mock WASM implementation for template development');
-    return {
-      functions: {
-        goAdd: (a, b) => Number(a) + Number(b),
-        goProcessData: (data) => JSON.stringify({
-          ...data,
-          processed: true,
-          processor: "Mock Go WASM (Server)",
-          timestamp: new Date().toISOString(),
-          sum: Array.isArray(data.values) ? 
-            data.values.reduce((sum, val) => sum + Number(val), 0) : 0
-        })
-      }
-    };
-  } catch (error) {
-    console.error('Setup WASM error:', error);
-    // Return mock implementation as fallback
-    return {
-      functions: {
-        goAdd: (a, b) => Number(a) + Number(b),
-        goProcessData: (data) => JSON.stringify({
-          ...data,
-          processed: true,
-          processor: "Mock Go WASM (Server)",
-          error: error.message
-        })
-      }
-    };
-  }
+// Server script with dual module support (ESM/CommonJS)
+
+// Dynamically import dependencies based on module system
+const isESM = typeof require === 'undefined';
+let express, path, fs;
+
+if (isESM) {
+  // ESM imports
+  import('express').then(module => express = module.default);
+  import('path').then(module => path = module);
+  import('fs').then(module => fs = module);
+} else {
+  // CommonJS requires
+  express = require('express');
+  path = require('path');
+  fs = require('fs');
 }
 
-// Simple JSX-like renderer for server-side rendering
-function renderToString(component) {
-  // Simple JSX-like rendering
-  const renderElement = (el) => {
-    if (typeof el === 'string' || typeof el === 'number' || el == null) {
-      return String(el);
-    }
-
-    if (Array.isArray(el)) {
-      return el.map(renderElement).join('');
-    }
-
-    if (!el.type) return '';
-    
-    if (typeof el.type === 'function') {
-      return renderElement(el.type(el.props || {}));
+// Wait for all imports to resolve
+async function startServer() {
+  // Ensure all modules are loaded
+  if (!express || !path || !fs) {
+    if (isESM) {
+      express = (await import('express')).default;
+      path = await import('path');
+      fs = await import('fs');
     }
-
-    const { children, ...props } = el.props || {};
-    const attrs = Object.entries(props || {})
-      .filter(([_, v]) => v !== undefined)
-      .map(([k, v]) => {
-        if (k === 'className') k = 'class';
-        if (k === 'style' && typeof v === 'object') {
-          const styleStr = Object.entries(v)
-            .map(([sk, sv]) => `${sk.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)}:${sv}`)
-            .join(';');
-          return `${k}="${styleStr}"`;
-        }
-        return `${k}="${v}"`;
-      })
-      .join(' ');
-
-    const childrenContent = children 
-      ? (Array.isArray(children) ? children : [children]).map(renderElement).join('')
-      : '';
-
-    return `<${el.type}${attrs ? ' ' + attrs : ''}>${childrenContent}</${el.type}>`;
-  };
-
-  try {
-    return renderElement(component);
-  } catch (error) {
-    console.error('Render error:', error);
-    return `<div>Render error: ${error.message}</div>`;
   }
-}
-
-// Global WASM instance for server-side processing
-let serverWasmInstance = null;
 
-// Initialize server and WASM
-async function startServer() {
-  try {
-    // Set up WASM support before defining routes
-    serverWasmInstance = await setupWasmSupport();
-    
-    // 3. Handle root path with server-side rendering
-    app.get('/', (req, res) => {
-      renderPage(req, res);
-    });
-    
-    // 4. Handle all other routes with server-side rendering
-    app.get('*', (req, res) => {
-      renderPage(req, res);
-    });
-    
-    // Start the server
-    const server = app.listen(PORT, () => {
-      console.log(`\n🚀 Server running at http://localhost:${PORT}\n`);
-    });
-    
-    return server;
-  } catch (error) {
-    console.error('Failed to start server:', error);
-    throw error;
-  }
+  const app = express();
+  const PORT = process.env.PORT || 3000;
+  
+  // Serve static files from public directory
+  app.use(express.static(path.join(__dirname, 'public')));
+
+  // Special handling for wasm files to ensure correct MIME type
+  app.get('*.wasm', (req, res, next) => {
+    res.set('Content-Type', 'application/wasm');
+    next();
+  });
+  
+  // Always return index.html for client-side routing
+  app.get('*', (req, res) => {
+    res.sendFile(path.join(__dirname, 'public', 'index.html'));
+  });
+  
+  // Start the server
+  app.listen(PORT, () => {
+    console.log(`
+┌────────────────────────────────────────────────────┐
+│                                                    │
+│   Go WASM Demo Server running on port ${PORT}          │
+│                                                    │
+│   Local:            http://localhost:${PORT}          │
+│                                                    │
+└────────────────────────────────────────────────────┘
+`);
+  });
 }
 
-// Function to render the page with server-side rendering
-function renderPage(req, res) {
-  try {
-    // Initial state
-    const initialState = {
-      path: req.path,
-      wasmAvailable: serverWasmInstance !== null && Object.keys(serverWasmInstance.functions || {}).length > 0,
-      ssrRendered: true,
-      timestamp: new Date().toISOString()
-    };
-
-    // Process data with WASM if available
-    if (serverWasmInstance && serverWasmInstance.functions.goProcessData) {
-      try {
-        const processDataFn = serverWasmInstance.functions.goProcessData;
-        const processedData = processDataFn({
-          source: 'server',
-          timestamp: new Date().toISOString(),
-          values: [10, 20, 30, 40, 50]
-        });
-        
-        initialState.processedData = typeof processedData === 'string' 
-          ? JSON.parse(processedData)
-          : processedData;
-      } catch (error) {
-        console.error('Error using WASM on server:', error);
-        initialState.wasmError = error.message;
-      }
-    }
-
-    // Component for SSR
-    const App = ({ initialState }) => ({
-      type: 'div',
-      props: {
-        className: 'app',
-        children: [
-          {
-            type: 'header',
-            props: {
-              children: [
-                { type: 'h1', props: { children: 'Frontend Hamroun + Go WebAssembly' } },
-                { type: 'p', props: { children: 'Server-side rendered template' } },
-                { 
-                  type: 'div',
-                  props: {
-                    className: 'rendering-info',
-                    children: [
-                      {
-                        type: 'span',
-                        props: {
-                          className: 'badge active',
-                          children: 'Server Rendered'
-                        }
-                      },
-                      {
-                        type: 'span',
-                        props: {
-                          className: 'badge',
-                          children: 'Hydrated'
-                        }
-                      }
-                    ]
-                  }
-                }
-              ]
-            }
-          },
-          {
-            type: 'main',
-            props: {
-              children: [
-                {
-                  type: 'div',
-                  props: {
-                    className: 'card',
-                    children: [
-                      { type: 'h2', props: { children: 'WebAssembly Status' } },
-                      { type: 'p', props: { 
-                        children: initialState.wasmAvailable 
-                          ? '✅ WebAssembly module loaded and ready' 
-                          : '⚠️ WebAssembly module not available'
-                      } },
-                      initialState.wasmAvailable && { 
-                        type: 'p', 
-                        props: { 
-                          children: [
-                            'Available functions: ',
-                            Object.keys(serverWasmInstance?.functions || {}).join(', ')
-                          ]
-                        } 
-                      },
-                      initialState.wasmError && { 
-                        type: 'div', 
-                        props: { 
-                          className: 'error',
-                          children: initialState.wasmError
-                        } 
-                      }
-                    ].filter(Boolean)
-                  }
-                },
-                initialState.processedData && {
-                  type: 'div',
-                  props: {
-                    className: 'card',
-                    children: [
-                      { type: 'h2', props: { children: 'WASM-Processed Data' } },
-                      { type: 'p', props: { children: 'This data was processed by Go WASM on the server:' } },
-                      { 
-                        type: 'pre', 
-                        props: { 
-                          className: 'result',
-                          children: JSON.stringify(initialState.processedData, null, 2) 
-                        } 
-                      }
-                    ]
-                  }
-                }
-              ].filter(Boolean)
-            }
-          },
-          {
-            type: 'footer',
-            props: {
-              children: [
-                {
-                  type: 'p',
-                  props: {
-                    children: [
-                      'Built with ',
-                      {
-                        type: 'a',
-                        props: {
-                          href: 'https://github.com/hamroun/frontend-hamroun',
-                          target: '_blank',
-                          rel: 'noopener noreferrer',
-                          children: 'Frontend Hamroun'
-                        }
-                      },
-                      ' and Go WebAssembly'
-                    ]
-                  }
-                }
-              ]
-            }
-          }
-        ]
-      }
-    });
+startServer();
 
-    // Render the app
-    const content = renderToString(App({ initialState }));
+// Module export for both ESM and CommonJS
+const server = { startServer };
 
-    // Send HTML with server-side rendered content
-    res.send(`<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Frontend Hamroun + Go WebAssembly</title>
-  <style>
-    :root {
-      --primary-color: #0070f3;
-      --secondary-color: #0051cc;
-      --background: #f9f9f9;
-      --text-color: #333;
-      --card-background: #fff;
-      --border-color: #eaeaea;
-      --error-color: #f44336;
-      --success-color: #4caf50;
-    }
-    
-    * {
-      box-sizing: border-box;
-    }
-    
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background-color: var(--background);
-      color: var(--text-color);
-      margin: 0;
-      padding: 0;
-      line-height: 1.6;
-    }
-    
-    .app {
-      max-width: 900px;
-      margin: 0 auto;
-      padding: 20px;
-    }
-    
-    header {
-      text-align: center;
-      margin-bottom: 2rem;
-    }
-    
-    header h1 {
-      margin-bottom: 0.5rem;
-      color: var(--primary-color);
-    }
-    
-    .rendering-info {
-      display: flex;
-      gap: 10px;
-      justify-content: center;
-      margin-top: 10px;
-    }
-    
-    .badge {
-      display: inline-block;
-      padding: 4px 8px;
-      border-radius: 4px;
-      background-color: #eaeaea;
-      color: #666;
-      font-size: 0.8rem;
-    }
-    
-    .badge.active {
-      background-color: var(--success-color);
-      color: white;
-    }
-    
-    .card {
-      background-color: var(--card-background);
-      border: 1px solid var(--border-color);
-      border-radius: 8px;
-      padding: 1.5rem;
-      margin-bottom: 2rem;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    }
-    
-    .result {
-      background-color: #f0f7ff;
-      padding: 1rem;
-      border-radius: 4px;
-      margin-top: 1rem;
-      white-space: pre-wrap;
-      overflow-x: auto;
-      font-family: monospace;
-      font-size: 0.9rem;
-    }
-    
-    .error {
-      background-color: #ffebee;
-      color: #c62828;
-      padding: 0.75rem;
-      border-radius: 4px;
-      margin-top: 0.5rem;
-    }
-    
-    footer {
-      margin-top: 3rem;
-      text-align: center;
-      color: #666;
-      padding: 1rem 0;
-      border-top: 1px solid var(--border-color);
-    }
-    
-    footer a {
-      color: var(--primary-color);
-      text-decoration: none;
-    }
-  </style>
-</head>
-<body>
-  <div id="root">${content}</div>
-  <script>
-    // Store initial state from server
-    window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
-    
-    // Client-side hydration script
-    document.addEventListener('DOMContentLoaded', function() {
-      // Mark the app as hydrated
-      const badges = document.querySelectorAll('.badge');
-      if (badges.length >= 2) {
-        badges[0].classList.remove('active');
-        badges[1].classList.add('active');
-      }
-      
-      // Load WebAssembly if available
-      if (typeof WebAssembly !== 'undefined') {
-        const wasmExecScript = document.createElement('script');
-        wasmExecScript.src = '/wasm/wasm_exec.js';
-        wasmExecScript.onload = loadWasmModule;
-        document.head.appendChild(wasmExecScript);
-      }
-      
-      function loadWasmModule() {
-        if (typeof Go !== 'function') return;
-        
-        const go = new Go();
-        fetch('/wasm/example.wasm')
-          .then(response => response.arrayBuffer())
-          .then(bytes => WebAssembly.instantiate(bytes, go.importObject))
-          .then(result => {
-            // Run the Go instance
-            go.run(result.instance);
-            
-            // Add demo component when WebAssembly is loaded
-            addWasmDemo();
-          })
-          .catch(err => {
-            console.error('Error loading WebAssembly:', err);
-          });
-      }
-      
-      function addWasmDemo() {
-        if (typeof window.goAdd !== 'function') return;
-        
-        const mainElement = document.querySelector('main');
-        const demoCard = document.createElement('div');
-        demoCard.className = 'card';
-        demoCard.innerHTML = \`
-          <h2>Client-Side WebAssembly Demo</h2>
-          <div>
-            <p>Try using the WebAssembly module in the browser:</p>
-            <div style="display:flex;gap:8px;align-items:center;margin-bottom:16px;">
-              <input type="number" id="num1" value="10" style="padding:8px;width:80px;">
-              <span>+</span>
-              <input type="number" id="num2" value="5" style="padding:8px;width:80px;">
-              <button onclick="calculateSum()" style="background-color:var(--primary-color);color:white;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;">Calculate</button>
-            </div>
-            <div id="result"></div>
-          </div>
-        \`;
-        
-        mainElement.appendChild(demoCard);
-        
-        // Add calculation function
-        window.calculateSum = function() {
-          const num1 = parseInt(document.getElementById('num1').value) || 0;
-          const num2 = parseInt(document.getElementById('num2').value) || 0;
-          
-          try {
-            // Call Go function
-            const sum = window.goAdd(num1, num2);
-            document.getElementById('result').innerHTML = 
-              \`<p>Result: <strong>\${sum}</strong> (calculated by Go WebAssembly)</p>\`;
-          } catch (error) {
-            document.getElementById('result').innerHTML = 
-              \`<p class="error">Error: \${error.message}</p>\`;
-          }
-        };
-      }
-    });
-  </script>
-</body>
-</html>`);
-  } catch (error) {
-    console.error('Server rendering error:', error);
-    res.status(500).send(`
-      <h1>Server Error</h1>
-      <p>${error.message}</p>
-      <pre>${error.stack}</pre>
-    `);
-  }
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = server;
 }
 
-// Start the server
-startServer().catch(err => {
-  console.error('Failed to start server:', err);
-  process.exit(1);
-});
+export default server;