baraqex 1.0.31 → 1.0.33

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.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Baraqex WASM Template</title>
+    <script src="/wasm_exec.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

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/main.tsx

@@ -0,0 +1,5 @@
+import { jsx, render } from 'frontend-hamroun';
+import App from './App';
+
+// Render the app
+render(jsx(App, {}), document.getElementById('root')!);

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/src/wasm-loader.ts

@@ -0,0 +1,119 @@
+/**
+ * Browser-only WASM loader for the WASM template
+ * This is a simplified version that works in the browser without server dependencies
+ */
+
+export interface WasmOptions {
+  debug?: boolean;
+  onLoad?: () => void;
+}
+
+let wasmReady = false;
+let wasmError: string | null = null;
+
+/**
+ * Load Go WASM module in the browser
+ */
+export async function loadGoWasm(wasmPath: string, options: WasmOptions = {}): Promise<void> {
+  if (wasmReady) return;
+  
+  try {
+    if (options.debug) {
+      console.log('[WASM] Loading WASM from:', wasmPath);
+    }
+
+    // Check if Go runtime is available
+    if (typeof (window as any).Go !== 'function') {
+      throw new Error('Go WASM runtime not found. Make sure wasm_exec.js is loaded.');
+    }
+
+    // Create Go instance
+    const go = new (window as any).Go();
+    
+    if (options.debug) {
+      console.log('[WASM] Go runtime created, loading WASM binary...');
+    }
+    
+    // Load WASM binary
+    const response = await fetch(wasmPath);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch WASM file: ${response.status} ${response.statusText}`);
+    }
+    
+    const wasmBytes = await response.arrayBuffer();
+    const wasmModule = await WebAssembly.instantiate(wasmBytes, go.importObject);
+    
+    if (options.debug) {
+      console.log('[WASM] WASM module instantiated, starting Go runtime...');
+    }
+    
+    // Start Go runtime (this runs main() function)
+    go.run(wasmModule.instance);
+    
+    // Give Go time to initialize and register functions
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    
+    if (options.debug) {
+      console.log('[WASM] Scanning for Go functions...');
+      const goFunctions = Object.keys(window as any).filter(key => 
+        key.startsWith('go') && typeof (window as any)[key] === 'function'
+      );
+      console.log('[WASM] Available functions:', goFunctions);
+    }
+    
+    wasmReady = true;
+    wasmError = null;
+    
+    if (options.onLoad) {
+      options.onLoad();
+    }
+    
+    if (options.debug) {
+      console.log('[WASM] Go WASM loaded successfully!');
+    }
+    
+  } catch (error) {
+    wasmError = error instanceof Error ? error.message : 'Unknown WASM loading error';
+    console.error('[WASM] Failed to load:', error);
+    throw error;
+  }
+}
+
+/**
+ * Call a Go WASM function in the browser
+ */
+export function callWasmFunction(funcName: string, ...args: any[]): any {
+  if (!wasmReady) {
+    throw new Error('WASM not ready. Call loadGoWasm() first.');
+  }
+  
+  const func = (window as any)[funcName];
+  if (typeof func !== 'function') {
+    throw new Error(`Function ${funcName} not found. Available functions: ${getWasmFunctions().join(', ')}`);
+  }
+  
+  return func(...args);
+}
+
+/**
+ * Check if WASM is ready
+ */
+export function isWasmReady(): boolean {
+  return wasmReady;
+}
+
+/**
+ * Get all available Go WASM functions
+ */
+export function getWasmFunctions(): string[] {
+  return Object.keys(window as any).filter(key => 
+    key.startsWith('go') && typeof (window as any)[key] === 'function'
+  );
+}
+
+/**
+ * Get WASM loading error if any
+ */
+export function getWasmError(): string | null {
+  return wasmError;
+}

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,73 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+  root: 'src',
+  publicDir: '../public',
+  build: {
+    outDir: '../dist',
+    emptyOutDir: true,
+    rollupOptions: {
+      input: {
+        main: path.resolve(__dirname, 'src/index.html')
+      }
+    }
+  },
+  server: {
+    port: 3000,
+    open: true
+  },
+  optimizeDeps: {
+    exclude: [
+      // Exclude Node.js-only packages from browser bundling
+      'crypto',
+      'mongodb', 
+      'mysql2',
+      'pg',
+      'bcryptjs',
+      'jsonwebtoken',
+      'cors',
+      'express',
+      'fs',
+      'path',
+      'url',
+      'http',
+      'https',
+      'stream',
+      'util',
+      'events',
+      'buffer',
+      'assert',
+      'child_process',
+      'cluster',
+      'dgram',
+      'dns',
+      'domain',
+      'net',
+      'os',
+      'punycode',
+      'querystring',
+      'readline',
+      'repl',
+      'string_decoder',
+      'sys',
+      'timers',
+      'tls',
+      'tty',
+      'vm',
+      'worker_threads',
+      'zlib'
+    ]
+  },
+  define: {
+    global: 'globalThis',
+    'process.env': {}
+  },
+  resolve: {
+    alias: {
+      // Provide browser-compatible alternatives
+      buffer: 'buffer',
+      process: 'process/browser'
+    }
+  }
+});