frontend-hamroun 1.2.79 → 1.2.80

package/templates/go-wasm-app/public/wasm/wasm_exec_node.js

@@ -1,39 +1,39 @@
-// Copyright 2021 The Go Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-"use strict";
-
-if (process.argv.length < 3) {
-	console.error("usage: go_js_wasm_exec [wasm binary] [arguments]");
-	process.exit(1);
-}
-
-globalThis.require = require;
-globalThis.fs = require("fs");
-globalThis.TextEncoder = require("util").TextEncoder;
-globalThis.TextDecoder = require("util").TextDecoder;
-
-globalThis.performance ??= require("performance");
-
-globalThis.crypto ??= require("crypto");
-
-require("./wasm_exec");
-
-const go = new Go();
-go.argv = process.argv.slice(2);
-go.env = Object.assign({ TMPDIR: require("os").tmpdir() }, process.env);
-go.exit = process.exit;
-WebAssembly.instantiate(fs.readFileSync(process.argv[2]), go.importObject).then((result) => {
-	process.on("exit", (code) => { // Node.js exits if no event handler is pending
-		if (code === 0 && !go.exited) {
-			// deadlock, make Go print error and stack traces
-			go._pendingEvent = { id: 0 };
-			go._resume();
-		}
-	});
-	return go.run(result.instance);
-}).catch((err) => {
-	console.error(err);
-	process.exit(1);
-});
+// Copyright 2021 The Go Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+"use strict";
+
+if (process.argv.length < 3) {
+	console.error("usage: go_js_wasm_exec [wasm binary] [arguments]");
+	process.exit(1);
+}
+
+globalThis.require = require;
+globalThis.fs = require("fs");
+globalThis.TextEncoder = require("util").TextEncoder;
+globalThis.TextDecoder = require("util").TextDecoder;
+
+globalThis.performance ??= require("performance");
+
+globalThis.crypto ??= require("crypto");
+
+require("./wasm_exec");
+
+const go = new Go();
+go.argv = process.argv.slice(2);
+go.env = Object.assign({ TMPDIR: require("os").tmpdir() }, process.env);
+go.exit = process.exit;
+WebAssembly.instantiate(fs.readFileSync(process.argv[2]), go.importObject).then((result) => {
+	process.on("exit", (code) => { // Node.js exits if no event handler is pending
+		if (code === 0 && !go.exited) {
+			// deadlock, make Go print error and stack traces
+			go._pendingEvent = { id: 0 };
+			go._resume();
+		}
+	});
+	return go.run(result.instance);
+}).catch((err) => {
+	console.error(err);
+	process.exit(1);
+});

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

@@ -1,70 +1,521 @@
-// 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');
+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
+        })
+      }
+    };
+  }
 }
 
-// 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');
+// 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 || {}));
+    }
+
+    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;
 
-  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}          │
-│                                                    │
-└────────────────────────────────────────────────────┘
-`);
-  });
+// 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;
+  }
 }
 
-startServer();
+// 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'
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    });
 
-// Module export for both ESM and CommonJS
-const server = { startServer };
+    // Render the app
+    const content = renderToString(App({ initialState }));
 
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = server;
+    // 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>
+    `);
+  }
 }
 
-export default server;
+// Start the server
+startServer().catch(err => {
+  console.error('Failed to start server:', err);
+  process.exit(1);
+});

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

@@ -1,19 +1,5 @@
-// Support both ESM and CommonJS importing styles
-const frontendHamroun = 
-  typeof require !== 'undefined' 
-    ? require('frontend-hamroun') 
-    : await import('frontend-hamroun');
-
-// Destructure the imports from either ESM or CJS modules
-const { 
-  useState, 
-  useEffect, 
-  jsx, 
-  Fragment, 
-  loadGoWasm, 
-  createTypedWasmFunction, 
-  goValues 
-} = frontendHamroun;
+import { useState, useEffect, jsx, Fragment } from 'frontend-hamroun';
+import { loadGoWasm, createTypedWasmFunction, goValues } from 'frontend-hamroun';
 
 export function GoWasmDemo() {
   // Track loading state
@@ -164,10 +150,4 @@ export function GoWasmDemo() {
   );
 }
 
-// Support both CommonJS and ESM exports
 export default GoWasmDemo;
-
-// Add CommonJS compatibility
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { GoWasmDemo };
-}