frontend-hamroun 1.2.74 → 1.2.77

package/templates/complete-app/src/pages/WasmDemo.js

@@ -0,0 +1,136 @@
+import { jsx, useState, useEffect, useContext } from '../client.js';
+import { AppContext } from '../components/App.js';
+
+export default function WasmDemo() {
+  const { wasm } = useContext(AppContext);
+  
+  // State for error display
+  const [error, setError] = useState(null);
+  
+  // State for calculation form
+  const [num1, setNum1] = useState(5);
+  const [num2, setNum2] = useState(7);
+  const [result, setResult] = useState(null);
+  
+  // State for JSON form
+  const [jsonInput, setJsonInput] = useState('{"name": "Baraqex", "version": "1.0"}');
+  const [jsonResult, setJsonResult] = useState(null);
+  
+  useEffect(() => {
+    document.title = 'WebAssembly Demo - Baraqex Complete App';
+    
+    // Demonstrate a calculation on mount if WASM is available
+    if (wasm && wasm.functions.goAdd) {
+      try {
+        const sum = wasm.functions.goAdd(5, 7);
+        setResult(sum);
+      } catch (err) {
+        console.error('Error in initial WASM calculation:', err);
+      }
+    }
+  }, [wasm]);
+  
+  // Function to calculate using WASM
+  const calculateResult = () => {
+    if (!wasm || !wasm.functions.goAdd) {
+      setError('WASM module not loaded or function not available');
+      return;
+    }
+    
+    try {
+      // Call the WASM function
+      const sum = wasm.functions.goAdd(parseInt(num1), parseInt(num2));
+      setResult(sum);
+      setError(null);
+    } catch (err) {
+      console.error('Error calling WASM function:', err);
+      setError('Error calling WASM function: ' + err);
+    }
+  };
+  
+  // Function to parse JSON using WASM
+  const parseJsonWithWasm = () => {
+    if (!wasm || !wasm.functions.goParseJSON) {
+      setError('WASM module not loaded or JSON parsing function not available');
+      return;
+    }
+    
+    try {
+      // Call the WASM function
+      const parsed = wasm.functions.goParseJSON(jsonInput);
+      setJsonResult(JSON.stringify(parsed, null, 2));
+      setError(null);
+    } catch (err) {
+      console.error('Error parsing JSON with WASM:', err);
+      setError('Error parsing JSON with WASM: ' + err);
+    }
+  };
+
+  return (
+    <div className="wasm-demo-page">
+      <h1>WebAssembly Integration Demo</h1>
+      
+      {!wasm && (
+        <div className="wasm-status error">
+          <h3>WASM Not Available</h3>
+          <p>WebAssembly module could not be loaded. Please check the console for details.</p>
+        </div>
+      )}
+      
+      {error && (
+        <div className="wasm-status error">
+          <h3>Error:</h3>
+          <pre>{error}</pre>
+        </div>
+      )}
+      
+      {wasm && (
+        <div className="wasm-status success">
+          <h3>WASM Module Loaded Successfully</h3>
+          <p>The Go WebAssembly module has been loaded and is ready to use.</p>
+        </div>
+      )}
+      
+      <div className="demo-section">
+        <h2>WASM Addition</h2>
+        <div className="calculator">
+          <input 
+            type="number" 
+            value={num1} 
+            onChange={(e) => setNum1(e.target.value)} 
+          />
+          <span> + </span>
+          <input 
+            type="number" 
+            value={num2} 
+            onChange={(e) => setNum2(e.target.value)} 
+          />
+          <button onClick={calculateResult}>Calculate</button>
+          <div className="result">
+            Result: <strong>{result}</strong>
+          </div>
+        </div>
+        
+        <h2>WASM JSON Parsing</h2>
+        <div className="json-parser">
+          <textarea
+            rows="5"
+            value={jsonInput}
+            onChange={(e) => setJsonInput(e.target.value)}
+          />
+          <button onClick={parseJsonWithWasm}>Parse JSON</button>
+          {jsonResult && (
+            <pre className="json-result">{jsonResult}</pre>
+          )}
+        </div>
+        
+        <h2>Available WASM Functions</h2>
+        <ul className="function-list">
+          {wasm && Object.keys(wasm.functions).map(funcName => (
+            <li key={funcName}>{funcName}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/templates/complete-app/src/server.js

@@ -0,0 +1,186 @@
+import express from 'express';
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import compression from 'compression';
+import cors from 'cors';
+import { Server as SocketServer } from 'socket.io';
+import http from 'http';
+import dotenv from 'dotenv';
+
+// Import from frontend-hamroun
+import { 
+  renderToString, 
+  loadGoWasmFromFile,
+  initNodeWasm
+} from 'frontend-hamroun/server';
+
+// Import components
+import App from './components/App.js';
+import { ApiRouter } from './api/index.js';
+
+// Load environment variables
+dotenv.config();
+
+// Get __dirname equivalent in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Server configuration
+const PORT = process.env.PORT || 3000;
+const PUBLIC_DIR = path.join(__dirname, 'public');
+const isProd = process.env.NODE_ENV === 'production';
+
+// Initialize the express app
+const app = express();
+const server = http.createServer(app);
+const io = new SocketServer(server);
+
+// WASM state
+let wasmInstance = null;
+
+// Middleware
+app.use(compression()); // Compress responses
+app.use(express.json()); // Parse JSON request bodies
+app.use(express.urlencoded({ extended: true })); // Parse URL-encoded request bodies
+app.use(cors()); // Enable CORS
+
+// Serve static files
+app.use(express.static(PUBLIC_DIR));
+
+// Setup API routes
+app.use('/api', ApiRouter);
+
+// Setup Socket.IO
+io.on('connection', (socket) => {
+  console.log('New client connected');
+  
+  socket.on('message', (data) => {
+    console.log('Message received:', data);
+    io.emit('message', data); // Broadcast to all clients
+  });
+  
+  socket.on('disconnect', () => {
+    console.log('Client disconnected');
+  });
+});
+
+// Initialize WASM
+async function initWasm() {
+  try {
+    // Initialize Node WASM environment
+    await initNodeWasm();
+    
+    // Check if WASM file exists
+    const wasmPath = path.join(__dirname, 'public/wasm/example.wasm');
+    if (fs.existsSync(wasmPath)) {
+      // Load WASM module
+      wasmInstance = await loadGoWasmFromFile(wasmPath, {
+        debug: false,
+        goWasmPath: path.join(__dirname, 'public/wasm/wasm_exec.js')
+      });
+      
+      console.log('Server WASM module loaded successfully');
+    } else {
+      console.log('WASM file not found, skipping WASM initialization');
+    }
+  } catch (error) {
+    console.error('Failed to initialize WASM:', error);
+  }
+}
+
+// Handle all other requests with SSR
+app.get('*', async (req, res) => {
+  try {
+    // Prepare context for rendering
+    const context = {
+      url: req.url,
+      wasm: wasmInstance,
+      initialData: {
+        // Add any data needed for initial render
+        path: req.path,
+        query: req.query,
+        timestamp: new Date().toISOString()
+      }
+    };
+    
+    // Render app to string
+    const appHtml = renderToString(<App context={context} />);
+    
+    // Format the initial data as JSON for client hydration
+    const initialDataScript = `
+      <script id="__INITIAL_DATA__" type="application/json">
+        ${JSON.stringify(context.initialData).replace(/</g, '\\u003c')}
+      </script>
+    `;
+    
+    // Generate full HTML
+    const html = `
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Complete Baraqex App</title>
+        <link rel="stylesheet" href="/styles.css">
+      </head>
+      <body>
+        <div id="app" data-ssr>${appHtml}</div>
+        ${initialDataScript}
+        <script type="module" src="/client.js"></script>
+      </body>
+      </html>
+    `;
+    
+    res.send(html);
+  } catch (error) {
+    console.error('Error rendering page:', error);
+    
+    // Send error page
+    res.status(500).send(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>Server Error</title>
+          <style>
+            body { font-family: system-ui, sans-serif; padding: 2rem; line-height: 1.5; }
+            .error { background: #fff0f0; border: 1px solid #ffcaca; border-radius: 4px; padding: 1rem; }
+            pre { background: #f5f5f5; padding: 1rem; overflow: auto; border-radius: 4px; }
+          </style>
+        </head>
+        <body>
+          <h1>Server Error</h1>
+          <div class="error">
+            <p>${error.message}</p>
+            ${isProd ? '' : `<pre>${error.stack}</pre>`}
+          </div>
+        </body>
+      </html>
+    `);
+  }
+});
+
+// Start the server
+async function startServer() {
+  // Initialize WASM
+  await initWasm();
+  
+  // Start listening
+  server.listen(PORT, () => {
+    console.log(`
+┌─────────────────────────────────────────────────────┐
+│                                                     │
+│   Complete Baraqex App Server running!              │
+│                                                     │
+│   - Local:            http://localhost:${PORT}         │
+│   - API:              http://localhost:${PORT}/api     │
+│                                                     │
+│   Mode: ${isProd ? 'production' : 'development'}                                │
+│                                                     │
+└─────────────────────────────────────────────────────┘
+`);
+  });
+}
+
+// Run the server
+startServer().catch(console.error);

package/templates/complete-app/src/wasm/build.bat

@@ -0,0 +1,16 @@
+@echo off
+echo Building Go WASM module...
+
+set GOOS=js
+set GOARCH=wasm
+go build -o example.wasm example.go
+
+if %ERRORLEVEL% NEQ 0 (
+    echo Error: Failed to build Go WASM module
+    exit /b 1
+)
+
+for /f "tokens=*" %%g in ('go env GOROOT') do (set GOROOT=%%g)
+copy "%GOROOT%\misc\wasm\wasm_exec.js" .
+
+echo Build complete!

package/templates/complete-app/src/wasm/build.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+echo "Building Go WASM module..."
+
+# Set environment variables for Go to compile to WASM
+GOOS=js GOARCH=wasm go build -o example.wasm example.go
+
+if [ $? -ne 0 ]; then
+    echo "Error: Failed to build Go WASM module"
+    exit 1
+fi
+
+# Get Go WASM exec runtime
+GOROOT=$(go env GOROOT)
+cp "$GOROOT/misc/wasm/wasm_exec.js" .
+
+echo "Build completed!"

package/templates/complete-app/src/wasm/example.go

@@ -0,0 +1,101 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"syscall/js"
+)
+
+// These functions will be exposed to JavaScript
+func main() {
+	// Set up functions we want to expose to JavaScript
+	js.Global().Set("goAdd", js.FuncOf(add))
+	js.Global().Set("goSubtract", js.FuncOf(subtract))
+	js.Global().Set("goMultiply", js.FuncOf(multiply))
+	js.Global().Set("goDivide", js.FuncOf(divide))
+	js.Global().Set("goParseJSON", js.FuncOf(parseJSON))
+
+	// Print to browser console
+	fmt.Println("Go WASM module initialized")
+
+	// Keep the program running
+	<-make(chan bool)
+}
+
+// add adds two numbers and returns the result
+func add(this js.Value, args []js.Value) interface{} {
+	if len(args) != 2 {
+		return js.Error{Message: "Invalid number of arguments passed to add"}
+	}
+
+	// Convert the JavaScript values to Go values
+	a := args[0].Int()
+	b := args[1].Int()
+
+	return a + b
+}
+
+// subtract subtracts the second number from the first and returns the result
+func subtract(this js.Value, args []js.Value) interface{} {
+	if len(args) != 2 {
+		return js.Error{Message: "Invalid number of arguments passed to subtract"}
+	}
+
+	a := args[0].Int()
+	b := args[1].Int()
+
+	return a - b
+}
+
+// multiply multiplies two numbers and returns the result
+func multiply(this js.Value, args []js.Value) interface{} {
+	if len(args) != 2 {
+		return js.Error{Message: "Invalid number of arguments passed to multiply"}
+	}
+
+	a := args[0].Int()
+	b := args[1].Int()
+
+	return a * b
+}
+
+// divide divides the first number by the second and returns the result
+func divide(this js.Value, args []js.Value) interface{} {
+	if len(args) != 2 {
+		return js.Error{Message: "Invalid number of arguments passed to divide"}
+	}
+
+	a := args[0].Int()
+	b := args[1].Int()
+
+	if b == 0 {
+		return js.Error{Message: "Division by zero"}
+	}
+
+	return a / b
+}
+
+// parseJSON parses a JSON string and returns a JavaScript object
+func parseJSON(this js.Value, args []js.Value) interface{} {
+	if len(args) != 1 {
+		return js.Error{Message: "Invalid number of arguments passed to parseJSON"}
+	}
+
+	// Get the JSON string from JavaScript
+	jsonStr := args[0].String()
+
+	// Parse the JSON string into a map
+	var data map[string]interface{}
+	if err := json.Unmarshal([]byte(jsonStr), &data); err != nil {
+		return js.Error{Message: "Error parsing JSON: " + err.Error()}
+	}
+
+	// Convert the map to a JavaScript object
+	result := make(map[string]interface{})
+	for k, v := range data {
+		result[k] = v
+	}
+
+	// Return the JavaScript object
+	return result
+}