frontend-hamroun 1.2.80 → 1.2.82

package/templates/wasm/src/client.tsx

@@ -0,0 +1,220 @@
+import { jsx, render } from 'frontend-hamroun';
+import { loadGoWasm } from '../wasm-loader.js';
+
+// WASM Demo Component
+function WasmDemo() {
+  const [wasmReady, setWasmReady] = useState(false);
+  const [result, setResult] = useState('');
+  const [input1, setInput1] = useState('5');
+  const [input2, setInput2] = useState('3');
+  const [fibInput, setFibInput] = useState('10');
+
+  useEffect(() => {
+    loadWasm();
+  }, []);
+
+  const loadWasm = async () => {
+    try {
+      await loadGoWasm('/example.wasm');
+      setWasmReady(true);
+      setResult('✅ Go WASM module loaded successfully!');
+    } catch (error) {
+      setResult(`❌ Failed to load WASM: ${error.message}`);
+    }
+  };
+
+  const testAdd = () => {
+    if (!wasmReady) return;
+    try {
+      const num1 = parseFloat(input1);
+      const num2 = parseFloat(input2);
+      const result = (window as any).add(num1, num2);
+      setResult(`Add result: ${num1} + ${num2} = ${result}`);
+    } catch (error) {
+      setResult(`Error: ${error.message}`);
+    }
+  };
+
+  const testFibonacci = () => {
+    if (!wasmReady) return;
+    try {
+      const n = parseInt(fibInput);
+      const result = (window as any).fibonacci(n);
+      setResult(`Fibonacci(${n}) = ${result}`);
+    } catch (error) {
+      setResult(`Error: ${error.message}`);
+    }
+  };
+
+  const testProcessArray = () => {
+    if (!wasmReady) return;
+    try {
+      const testArray = [1, 2, 3, 4, 5];
+      const result = (window as any).processArray(testArray);
+      const resultArray = Array.from(result);
+      setResult(`Process array [${testArray.join(', ')}] = [${resultArray.join(', ')}]`);
+    } catch (error) {
+      setResult(`Error: ${error.message}`);
+    }
+  };
+
+  const testFormatMessage = () => {
+    if (!wasmReady) return;
+    try {
+      const message = 'Hello from JavaScript!';
+      const result = (window as any).formatMessage(message);
+      setResult(`Formatted: ${result}`);
+    } catch (error) {
+      setResult(`Error: ${error.message}`);
+    }
+  };
+
+  const testPerformance = () => {
+    if (!wasmReady) return;
+    try {
+      const iterations = 100000;
+      const startTime = performance.now();
+      const result = (window as any).performanceBenchmark(iterations);
+      const endTime = performance.now();
+      
+      setResult(
+        `Performance test: ${result.message}\n` +
+        `Result: ${result.result}\n` +
+        `Time: ${(endTime - startTime).toFixed(2)}ms`
+      );
+    } catch (error) {
+      setResult(`Error: ${error.message}`);
+    }
+  };
+
+  const testTypeDemo = () => {
+    if (!wasmReady) return;
+    try {
+      const result = (window as any).typeDemo();
+      setResult(
+        `Type demo results:\n` +
+        `String: ${result.string}\n` +
+        `Number: ${result.number}\n` +
+        `Boolean: ${result.boolean}\n` +
+        `Array: [${Array.from(result.array).join(', ')}]`
+      );
+    } catch (error) {
+      setResult(`Error: ${error.message}`);
+    }
+  };
+
+  return jsx('div', {
+    className: 'wasm-demo',
+    children: [
+      jsx('h1', { children: '🚀 Frontend Hamroun + Go WASM Demo' }),
+      
+      jsx('div', {
+        className: 'status',
+        children: jsx('p', {
+          className: wasmReady ? 'ready' : 'loading',
+          children: wasmReady ? '✅ WASM Ready' : '⏳ Loading WASM...'
+        })
+      }),
+
+      jsx('div', {
+        className: 'controls',
+        children: [
+          jsx('h2', { children: '🧮 Arithmetic Operations' }),
+          jsx('div', {
+            className: 'input-group',
+            children: [
+              jsx('input', {
+                type: 'number',
+                value: input1,
+                onChange: (e: any) => setInput1(e.target.value),
+                placeholder: 'First number'
+              }),
+              jsx('span', { children: ' + ' }),
+              jsx('input', {
+                type: 'number',
+                value: input2,
+                onChange: (e: any) => setInput2(e.target.value),
+                placeholder: 'Second number'
+              }),
+              jsx('button', {
+                onClick: testAdd,
+                disabled: !wasmReady,
+                children: 'Calculate'
+              })
+            ]
+          }),
+
+          jsx('h2', { children: '🔢 Fibonacci Sequence' }),
+          jsx('div', {
+            className: 'input-group',
+            children: [
+              jsx('input', {
+                type: 'number',
+                value: fibInput,
+                onChange: (e: any) => setFibInput(e.target.value),
+                placeholder: 'Fibonacci number'
+              }),
+              jsx('button', {
+                onClick: testFibonacci,
+                disabled: !wasmReady,
+                children: 'Calculate Fibonacci'
+              })
+            ]
+          }),
+
+          jsx('h2', { children: '🔧 Advanced Functions' }),
+          jsx('div', {
+            className: 'button-group',
+            children: [
+              jsx('button', {
+                onClick: testProcessArray,
+                disabled: !wasmReady,
+                children: 'Process Array'
+              }),
+              jsx('button', {
+                onClick: testFormatMessage,
+                disabled: !wasmReady,
+                children: 'Format Message'
+              }),
+              jsx('button', {
+                onClick: testPerformance,
+                disabled: !wasmReady,
+                children: 'Performance Test'
+              }),
+              jsx('button', {
+                onClick: testTypeDemo,
+                disabled: !wasmReady,
+                children: 'Type Demo'
+              })
+            ]
+          })
+        ]
+      }),
+
+      jsx('div', {
+        className: 'result',
+        children: [
+          jsx('h3', { children: '📋 Result:' }),
+          jsx('pre', { children: result })
+        ]
+      })
+    ]
+  });
+}
+
+// App Component
+function App() {
+  return jsx('div', {
+    className: 'app',
+    children: jsx(WasmDemo, {})
+  });
+}
+
+// Render the app
+const appElement = document.getElementById('app');
+if (appElement) {
+  render(jsx(App, {}), appElement);
+}
+
+// Import statements for hooks
+import { useState, useEffect } from 'frontend-hamroun';

package/templates/wasm/src/index.tsx

@@ -0,0 +1,21 @@
+import { jsx, render } from 'frontend-hamroun';
+import App from './App.tsx';
+
+// Simple render without infinite loops
+function startApp() {
+  const appElement = jsx(App, {});
+  const rootElement = document.getElementById('app');
+  
+  if (rootElement) {
+    render(appElement, rootElement);
+  } else {
+    console.error('Root element not found');
+  }
+}
+
+// Start when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', startApp);
+} else {
+  startApp();
+}

package/templates/wasm/src/server.ts

@@ -0,0 +1,145 @@
+import { createServer } from 'frontend-hamroun';
+import { loadGoWasmFromFile } from 'frontend-hamroun';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Create server instance
+const server = createServer({
+  port: 3000,
+  staticDir: './public',
+  pagesDir: './src/pages',
+  apiDir: './src/api'
+});
+
+// Server-side WASM integration example
+async function initServerWasm() {
+  try {
+    console.log('🔄 Initializing server-side Go WASM...');
+    
+    const wasmPath = path.join(__dirname, '..', 'public', 'example.wasm');
+    const wasmInstance = await loadGoWasmFromFile(wasmPath, {
+      debug: true,
+      onLoad: (instance) => {
+        console.log('✅ Go WASM loaded on server side');
+        
+        // Test server-side WASM functions
+        try {
+          if (instance.functions.add) {
+            const result = instance.functions.add(5, 3);
+            console.log('Server WASM test - add(5, 3):', result);
+          }
+          
+          if (instance.functions.fibonacci) {
+            const fibResult = instance.functions.fibonacci(10);
+            console.log('Server WASM test - fibonacci(10):', fibResult);
+          }
+        } catch (error) {
+          console.log('Server WASM test functions not available:', error.message);
+        }
+      }
+    });
+    
+    // Make WASM instance available to API routes
+    server.getExpressApp().locals.wasm = wasmInstance;
+    
+  } catch (error) {
+    console.error('❌ Failed to initialize server-side WASM:', error);
+  }
+}
+
+// API route example using server-side WASM
+server.getExpressApp().get('/api/wasm/compute', async (req, res) => {
+  try {
+    const { operation, a, b } = req.query;
+    const wasmInstance = req.app.locals.wasm;
+    
+    if (!wasmInstance) {
+      return res.status(500).json({ error: 'WASM not initialized' });
+    }
+    
+    let result;
+    switch (operation) {
+      case 'add':
+        if (wasmInstance.functions.add) {
+          result = wasmInstance.functions.add(Number(a), Number(b));
+        } else {
+          throw new Error('Add function not available');
+        }
+        break;
+      case 'fibonacci':
+        if (wasmInstance.functions.fibonacci) {
+          result = wasmInstance.functions.fibonacci(Number(a));
+        } else {
+          throw new Error('Fibonacci function not available');
+        }
+        break;
+      default:
+        throw new Error('Unknown operation');
+    }
+    
+    res.json({
+      success: true,
+      operation,
+      result,
+      serverTime: new Date().toISOString()
+    });
+  } catch (error) {
+    res.status(400).json({
+      success: false,
+      error: error.message
+    });
+  }
+});
+
+// Health check endpoint
+server.getExpressApp().get('/api/health', (req, res) => {
+  res.json({
+    status: 'healthy',
+    wasm: !!req.app.locals.wasm,
+    timestamp: new Date().toISOString()
+  });
+});
+
+// Start server
+async function startServer() {
+  try {
+    // Initialize WASM first
+    await initServerWasm();
+    
+    // Start the server
+    await server.start();
+    
+    console.log('🚀 Server started successfully!');
+    console.log('📋 Available endpoints:');
+    console.log('   • http://localhost:3000 - Main app');
+    console.log('   • http://localhost:3000/api/health - Health check');
+    console.log('   • http://localhost:3000/api/wasm/compute - WASM compute API');
+    console.log('');
+    console.log('💡 Example API calls:');
+    console.log('   • /api/wasm/compute?operation=add&a=5&b=3');
+    console.log('   • /api/wasm/compute?operation=fibonacci&a=10');
+    
+  } catch (error) {
+    console.error('❌ Failed to start server:', error);
+    process.exit(1);
+  }
+}
+
+// Graceful shutdown
+process.on('SIGTERM', async () => {
+  console.log('🛑 Received SIGTERM, shutting down gracefully...');
+  await server.stop();
+  process.exit(0);
+});
+
+process.on('SIGINT', async () => {
+  console.log('🛑 Received SIGINT, shutting down gracefully...');
+  await server.stop();
+  process.exit(0);
+});
+
+// Start the server
+startServer();

package/templates/wasm/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "frontend-hamroun",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/wasm/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.*", "vitest.config.*", "build-wasm.js", "esbuild.config.js"]
+}

package/templates/wasm/tsconfig.server.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "outDir": "dist",
+    "noEmit": false,
+    "jsx": "preserve",
+    "moduleResolution": "bundler",
+    "composite": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "target": "ES2020",
+    "lib": ["ES2020"],
+    "types": ["node"],
+    "esModuleInterop": true,
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["src/server.ts", "**/*.ts", "**/*.js"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/wasm/vite.config.ts

@@ -0,0 +1,56 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      'frontend-hamroun': path.resolve(__dirname, 'node_modules/frontend-hamroun')
+    }
+  },
+  build: {
+    outDir: 'dist',
+    ssr: 'src/server.ts',
+    rollupOptions: {
+      input: {
+        client: './src/client.tsx',
+        server: './src/server.ts'
+      },
+      output: {
+        entryFileNames: '[name].js',
+        chunkFileNames: 'assets/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash].[ext]'
+      },
+      // Exclude WASM build script from hot reload and external dependencies
+      external: ['./build-wasm.js']
+    },
+    target: 'esnext'
+  },
+  esbuild: {
+    jsxFactory: '_jsx',
+    jsxFragment: '_Fragment',
+    jsxInject: `import { jsx as _jsx, Fragment as _Fragment } from 'frontend-hamroun'`
+  },
+  server: {
+    fs: {
+      allow: ['..']
+    },
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp'
+    },
+    watch: {
+      // Prevent watching go directory and wasm files to avoid infinite loops
+      ignored: [
+        '**/go/**',
+        '**/*.wasm',
+        '**/build-wasm.js',
+        '**/wasm_exec.js'
+      ]
+    }
+  },
+  optimizeDeps: {
+    exclude: ['frontend-hamroun']
+  },
+  // Prevent Vite from processing WASM files
+  assetsInclude: ['**/*.wasm']
+});

package/templates/wasm/wasm-loader.js

@@ -0,0 +1,103 @@
+/**
+ * WASM Loader for Frontend Hamroun Go WASM integration
+ */
+
+let wasmInstance = null;
+let wasmReady = false;
+
+export async function loadGoWasm(wasmPath, options = {}) {
+  if (wasmReady) {
+    return wasmInstance;
+  }
+
+  try {
+    console.log('🔄 Loading Go WASM module from:', wasmPath);
+
+    // Load the Go WASM runtime
+    if (!window.Go) {
+      await loadWasmExecJs();
+    }
+
+    // Create Go instance
+    const go = new window.Go();
+    
+    // Fetch and instantiate WASM
+    const wasmModule = await WebAssembly.instantiateStreaming(
+      fetch(wasmPath),
+      go.importObject
+    );
+
+    // Run the Go program
+    go.run(wasmModule.instance);
+
+    wasmInstance = {
+      instance: wasmModule.instance,
+      module: wasmModule.module,
+      go: go
+    };
+
+    wasmReady = true;
+    
+    console.log('✅ Go WASM module loaded successfully!');
+    
+    if (options.onLoad) {
+      options.onLoad(wasmInstance);
+    }
+
+    return wasmInstance;
+    
+  } catch (error) {
+    console.error('❌ Failed to load Go WASM module:', error);
+    throw error;
+  }
+}
+
+async function loadWasmExecJs() {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = '/wasm_exec.js';
+    script.onload = resolve;
+    script.onerror = () => reject(new Error('Failed to load wasm_exec.js'));
+    document.head.appendChild(script);
+  });
+}
+
+export function isWasmReady() {
+  return wasmReady;
+}
+
+export function getWasmInstance() {
+  return wasmInstance;
+}
+
+// Utility functions for calling Go functions safely
+export function callGoFunction(functionName, ...args) {
+  if (!wasmReady) {
+    throw new Error('WASM module not ready');
+  }
+  
+  if (typeof window[functionName] !== 'function') {
+    throw new Error(`Go function '${functionName}' not found`);
+  }
+  
+  return window[functionName](...args);
+}
+
+export async function waitForWasm(timeout = 10000) {
+  if (wasmReady) return wasmInstance;
+  
+  return new Promise((resolve, reject) => {
+    const checkInterval = setInterval(() => {
+      if (wasmReady) {
+        clearInterval(checkInterval);
+        clearTimeout(timeoutId);
+        resolve(wasmInstance);
+      }
+    }, 100);
+    
+    const timeoutId = setTimeout(() => {
+      clearInterval(checkInterval);
+      reject(new Error('WASM loading timeout'));
+    }, timeout);
+  });
+}