frontend-hamroun 1.2.79 → 1.2.82

package/templates/wasm/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "frontend-hamroun-wasm-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "description": "Frontend Hamroun + Go WebAssembly integration example",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "build:wasm": "node build-wasm.js",
+    "dev:wasm": "npm run build:wasm && npm run dev",
+    "build:go": "node build-wasm.js",
+    "clean": "rimraf dist public/*.wasm",
+    "test": "echo \"No tests specified\" && exit 0"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "frontend-hamroun": "^1.2.80"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.17",
+    "@types/node": "^20.5.0",
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.19.12",
+    "rimraf": "^5.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "frontend-hamroun",
+    "webassembly",
+    "wasm",
+    "go",
+    "javascript",
+    "ssr",
+    "performance"
+  ]
+}

package/templates/wasm/src/App.tsx

@@ -0,0 +1,564 @@
+import { jsx, useState, useEffect } from 'frontend-hamroun';
+
+export default function App() {
+  const [wasmReady, setWasmReady] = useState(false);
+  const [wasmError, setWasmError] = useState<string | null>(null);
+  const [result, setResult] = useState<any>(null);
+  const [inputA, setInputA] = useState(10);
+  const [inputB, setInputB] = useState(20);
+  const [fibInput, setFibInput] = useState(10);
+  const [primeInput, setPrimeInput] = useState(17);
+  const [name, setName] = useState('World');
+
+  useEffect(() => {
+    let mounted = true;
+    
+    async function loadWasm() {
+      try {
+        // Check if Go WASM runtime is available
+        if (typeof window === 'undefined' || !window.Go) {
+          throw new Error('Go WASM runtime not available. Make sure wasm_exec.js is loaded.');
+        }
+
+        // Load the WASM file
+        const wasmUrl = '/example.wasm';
+        const response = await fetch(wasmUrl);
+        
+        if (!response.ok) {
+          throw new Error(`Failed to fetch WASM file: ${response.status}`);
+        }
+
+        const wasmBytes = await response.arrayBuffer();
+        
+        // Initialize Go runtime
+        const go = new window.Go();
+        const wasmModule = await WebAssembly.instantiate(wasmBytes, go.importObject);
+        
+        // Run the Go program
+        go.run(wasmModule.instance);
+        
+        // Wait a bit for Go functions to be registered
+        await new Promise(resolve => setTimeout(resolve, 100));
+        
+        if (mounted) {
+          setWasmReady(true);
+          setWasmError(null);
+          console.log('WASM module loaded successfully');
+        }
+      } catch (error) {
+        console.error('WASM loading error:', error);
+        if (mounted) {
+          setWasmError(error instanceof Error ? error.message : 'Unknown WASM loading error');
+        }
+      }
+    }
+
+    loadWasm();
+    
+    return () => {
+      mounted = false;
+    };
+  }, []); // Empty dependency array to run only once
+
+  const callWasmFunction = (funcName: string, ...args: any[]) => {
+    try {
+      const func = (window as any)[funcName];
+      if (typeof func !== 'function') {
+        throw new Error(`Function ${funcName} not found. Make sure the WASM module is loaded.`);
+      }
+      return func(...args);
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : 'Function call failed';
+      setWasmError(errorMsg);
+      return null;
+    }
+  };
+
+  const handleHello = () => {
+    const greeting = callWasmFunction('goHello', name);
+    if (greeting !== null) {
+      setResult({ type: 'hello', value: greeting, input: name });
+      setWasmError(null);
+    }
+  };
+
+  const handleAddition = () => {
+    const sum = callWasmFunction('goAdd', inputA, inputB);
+    if (sum !== null) {
+      setResult({ type: 'addition', value: sum, inputs: [inputA, inputB] });
+      setWasmError(null);
+    }
+  };
+
+  const handleMultiplication = () => {
+    const product = callWasmFunction('goMultiply', inputA, inputB);
+    if (product !== null) {
+      setResult({ type: 'multiplication', value: product, inputs: [inputA, inputB] });
+      setWasmError(null);
+    }
+  };
+
+  const handleFibonacci = () => {
+    if (fibInput > 40) {
+      setWasmError('Fibonacci input too large (max 40)');
+      return;
+    }
+    const fibResult = callWasmFunction('goFibonacci', fibInput);
+    if (fibResult !== null) {
+      setResult({ type: 'fibonacci', value: fibResult, input: fibInput });
+      setWasmError(null);
+    }
+  };
+
+  const handlePrimeCheck = () => {
+    const isPrime = callWasmFunction('goIsPrime', primeInput);
+    if (isPrime !== null) {
+      setResult({ type: 'prime', value: isPrime, input: primeInput });
+      setWasmError(null);
+    }
+  };
+
+  if (!wasmReady && !wasmError) {
+    return (
+      <div className="app loading">
+        <div className="spinner"></div>
+        <h2>Loading Go WASM Module...</h2>
+        <p>Initializing WebAssembly runtime...</p>
+      </div>
+    );
+  }
+
+  if (wasmError) {
+    return (
+      <div className="app error">
+        <h2>WASM Error</h2>
+        <p>{wasmError}</p>
+        <button onClick={() => window.location.reload()}>Reload Page</button>
+        <details style={{ marginTop: '20px', textAlign: 'left' }}>
+          <summary>Troubleshooting</summary>
+          <ul>
+            <li>Make sure the WASM file is built: <code>npm run build:wasm</code></li>
+            <li>Check if <code>example.wasm</code> exists in the public folder</li>
+            <li>Verify <code>wasm_exec.js</code> is loaded in the HTML</li>
+            <li>Check browser console for additional errors</li>
+          </ul>
+        </details>
+      </div>
+    );
+  }
+
+  return (
+    <div className="app">
+      <header>
+        <h1>Frontend Hamroun + Go WASM</h1>
+        <p>High-performance computing with WebAssembly</p>
+        <div className="status">
+          <span className="status-indicator ready"></span>
+          WASM Ready
+        </div>
+      </header>
+
+      <main>
+        <section className="demo-grid">
+          {/* Hello Function */}
+          <div className="demo-card">
+            <h3>🌍 Hello Function</h3>
+            <div className="input-group">
+              <input 
+                type="text" 
+                value={name} 
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Enter your name"
+              />
+              <button onClick={handleHello}>Say Hello</button>
+            </div>
+          </div>
+
+          {/* Math Operations */}
+          <div className="demo-card">
+            <h3>🧮 Math Operations</h3>
+            <div className="input-group">
+              <input 
+                type="number" 
+                value={inputA} 
+                onChange={(e) => setInputA(Number(e.target.value))}
+                placeholder="First number"
+              />
+              <input 
+                type="number" 
+                value={inputB} 
+                onChange={(e) => setInputB(Number(e.target.value))}
+                placeholder="Second number"
+              />
+            </div>
+            <div className="button-group">
+              <button onClick={handleAddition}>Add</button>
+              <button onClick={handleMultiplication}>Multiply</button>
+            </div>
+          </div>
+
+          {/* Fibonacci */}
+          <div className="demo-card">
+            <h3>🔢 Fibonacci Sequence</h3>
+            <div className="input-group">
+              <input 
+                type="number" 
+                value={fibInput} 
+                onChange={(e) => setFibInput(Number(e.target.value))}
+                placeholder="Fibonacci number"
+                min="0"
+                max="40"
+              />
+              <button onClick={handleFibonacci}>Calculate</button>
+            </div>
+            <small>Maximum value: 40</small>
+          </div>
+
+          {/* Prime Check */}
+          <div className="demo-card">
+            <h3>🔍 Prime Number Check</h3>
+            <div className="input-group">
+              <input 
+                type="number" 
+                value={primeInput} 
+                onChange={(e) => setPrimeInput(Number(e.target.value))}
+                placeholder="Number to check"
+                min="1"
+              />
+              <button onClick={handlePrimeCheck}>Check Prime</button>
+            </div>
+          </div>
+        </section>
+
+        {/* Results Display */}
+        {result && (
+          <section className="results">
+            <h2>📊 Result</h2>
+            <div className="result-card">
+              {result.type === 'hello' && (
+                <p><strong>Greeting:</strong> <span className="result-value">{result.value}</span></p>
+              )}
+              {result.type === 'addition' && (
+                <p><strong>Addition:</strong> {result.inputs[0]} + {result.inputs[1]} = <span className="result-value">{result.value}</span></p>
+              )}
+              {result.type === 'multiplication' && (
+                <p><strong>Multiplication:</strong> {result.inputs[0]} × {result.inputs[1]} = <span className="result-value">{result.value}</span></p>
+              )}
+              {result.type === 'fibonacci' && (
+                <p><strong>Fibonacci:</strong> F({result.input}) = <span className="result-value">{result.value}</span></p>
+              )}
+              {result.type === 'prime' && (
+                <p><strong>Prime Check:</strong> {result.input} is <span className="result-value">{result.value ? 'prime' : 'not prime'}</span></p>
+              )}
+            </div>
+          </section>
+        )}
+
+        {/* Info Section */}
+        <section className="info-section">
+          <h2>⚡ WebAssembly Benefits</h2>
+          <div className="benefits-grid">
+            <div className="benefit">
+              <h4>🚀 Performance</h4>
+              <p>Near-native execution speed for compute-intensive tasks</p>
+            </div>
+            <div className="benefit">
+              <h4>🔒 Security</h4>
+              <p>Sandboxed execution environment with memory safety</p>
+            </div>
+            <div className="benefit">
+              <h4>🌐 Portability</h4>
+              <p>Run the same code across different platforms and browsers</p>
+            </div>
+            <div className="benefit">
+              <h4>🛠️ Language Choice</h4>
+              <p>Write performance-critical code in Go, Rust, or C++</p>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <style>{`
+        .app {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 20px;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          line-height: 1.6;
+        }
+        
+        .app.loading, .app.error {
+          text-align: center;
+          padding: 60px 20px;
+        }
+        
+        .spinner {
+          width: 50px;
+          height: 50px;
+          border: 4px solid #f3f3f3;
+          border-top: 4px solid #007acc;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+          margin: 0 auto 20px;
+        }
+        
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+        
+        header {
+          text-align: center;
+          margin-bottom: 40px;
+          padding: 30px;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: white;
+          border-radius: 16px;
+          position: relative;
+        }
+        
+        header h1 {
+          margin: 0 0 10px 0;
+          font-size: 2.5rem;
+          font-weight: 700;
+        }
+        
+        header p {
+          margin: 0 0 20px 0;
+          opacity: 0.9;
+          font-size: 1.1rem;
+        }
+        
+        .status {
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+          background: rgba(255, 255, 255, 0.2);
+          padding: 8px 16px;
+          border-radius: 20px;
+          font-size: 0.9rem;
+        }
+        
+        .status-indicator {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: #4ade80;
+          animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+        
+        .demo-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+          gap: 20px;
+          margin-bottom: 30px;
+        }
+        
+        .demo-card {
+          background: white;
+          padding: 24px;
+          border-radius: 12px;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          border: 1px solid #e5e7eb;
+          transition: transform 0.2s, box-shadow 0.2s;
+        }
+        
+        .demo-card:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+        }
+        
+        .demo-card h3 {
+          margin-top: 0;
+          margin-bottom: 16px;
+          color: #374151;
+          font-size: 1.2rem;
+        }
+        
+        .input-group {
+          display: flex;
+          gap: 8px;
+          margin-bottom: 12px;
+          flex-wrap: wrap;
+        }
+        
+        .button-group {
+          display: flex;
+          gap: 8px;
+          flex-wrap: wrap;
+        }
+        
+        input {
+          flex: 1;
+          min-width: 120px;
+          padding: 10px 12px;
+          border: 2px solid #e5e7eb;
+          border-radius: 8px;
+          font-size: 14px;
+          transition: border-color 0.2s;
+        }
+        
+        input:focus {
+          outline: none;
+          border-color: #007acc;
+        }
+        
+        button {
+          background: #007acc;
+          color: white;
+          border: none;
+          padding: 10px 16px;
+          border-radius: 8px;
+          cursor: pointer;
+          font-size: 14px;
+          font-weight: 600;
+          transition: all 0.2s;
+          white-space: nowrap;
+        }
+        
+        button:hover {
+          background: #0056a3;
+          transform: translateY(-1px);
+        }
+        
+        button:active {
+          transform: translateY(0);
+        }
+        
+        small {
+          color: #6b7280;
+          font-size: 0.8rem;
+        }
+        
+        .results {
+          background: #f0f9ff;
+          padding: 24px;
+          border-radius: 12px;
+          border: 2px solid #bae6fd;
+          margin: 30px 0;
+        }
+        
+        .results h2 {
+          margin-top: 0;
+          color: #0369a1;
+        }
+        
+        .result-card {
+          background: white;
+          padding: 16px;
+          border-radius: 8px;
+          border: 1px solid #bae6fd;
+        }
+        
+        .result-value {
+          font-weight: bold;
+          color: #007acc;
+          background: #e0f2fe;
+          padding: 2px 6px;
+          border-radius: 4px;
+        }
+        
+        .info-section {
+          margin-top: 40px;
+        }
+        
+        .info-section h2 {
+          text-align: center;
+          margin-bottom: 30px;
+          color: #374151;
+        }
+        
+        .benefits-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 20px;
+        }
+        
+        .benefit {
+          background: #f9fafb;
+          padding: 20px;
+          border-radius: 12px;
+          border: 1px solid #e5e7eb;
+          text-align: center;
+        }
+        
+        .benefit h4 {
+          margin: 0 0 8px 0;
+          color: #374151;
+          font-size: 1.1rem;
+        }
+        
+        .benefit p {
+          margin: 0;
+          color: #6b7280;
+          font-size: 0.9rem;
+        }
+        
+        .error {
+          color: #dc2626;
+        }
+        
+        .error button {
+          background: #dc2626;
+          margin-top: 20px;
+        }
+        
+        .error button:hover {
+          background: #b91c1c;
+        }
+        
+        details {
+          background: #fef2f2;
+          padding: 16px;
+          border-radius: 8px;
+          border: 1px solid #fecaca;
+        }
+        
+        summary {
+          cursor: pointer;
+          font-weight: 600;
+          margin-bottom: 8px;
+        }
+        
+        code {
+          background: #f3f4f6;
+          padding: 2px 4px;
+          border-radius: 4px;
+          font-family: monospace;
+          font-size: 0.9em;
+        }
+        
+        @media (max-width: 768px) {
+          .app {
+            padding: 10px;
+          }
+          
+          header {
+            padding: 20px;
+          }
+          
+          header h1 {
+            font-size: 2rem;
+          }
+          
+          .demo-grid {
+            grid-template-columns: 1fr;
+          }
+          
+          .input-group {
+            flex-direction: column;
+          }
+          
+          input {
+            min-width: auto;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}