frontend-hamroun 1.2.84 → 1.2.85

package/templates/wasm/src/client.js

@@ -0,0 +1,210 @@
+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.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.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.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.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.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.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) => setInput1(e.target.value),
+                                placeholder: 'First number'
+                            }),
+                            jsx('span', { children: ' + ' }),
+                            jsx('input', {
+                                type: 'number',
+                                value: input2,
+                                onChange: (e) => 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) => 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.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/templates/wasm/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":""}

package/templates/wasm/src/index.js

@@ -0,0 +1,20 @@
+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.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=server.d.ts.map

package/templates/wasm/src/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["server.ts"],"names":[],"mappings":""}

package/templates/wasm/src/server.js

@@ -0,0 +1,131 @@
+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/vite.config.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("vite").UserConfig;
+export default _default;
+//# sourceMappingURL=vite.config.d.ts.map

package/templates/wasm/vite.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["vite.config.ts"],"names":[],"mappings":";AAGA,wBAkCG"}

package/templates/wasm/vite.config.js

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite';
+export default defineConfig({
+    esbuild: {
+        jsx: 'transform',
+        jsxFactory: 'jsx',
+        jsxFragment: 'Fragment',
+        jsxImportSource: 'frontend-hamroun',
+    },
+    optimizeDeps: {
+        include: ['frontend-hamroun'],
+        exclude: []
+    },
+    server: {
+        fs: {
+            allow: ['..', '../..']
+        },
+        headers: {
+            'Cross-Origin-Embedder-Policy': 'require-corp',
+            'Cross-Origin-Opener-Policy': 'same-origin'
+        }
+    },
+    build: {
+        target: 'esnext',
+        rollupOptions: {
+            output: {
+                format: 'es'
+            }
+        }
+    },
+    resolve: {
+        alias: {
+            'frontend-hamroun/jsx-dev-runtime': 'frontend-hamroun',
+            'frontend-hamroun/jsx-runtime': 'frontend-hamroun'
+        }
+    }
+});

package/templates/wasm/wasm-loader.d.ts

@@ -0,0 +1,6 @@
+export function loadGoWasm(wasmPath: any, options?: {}): Promise<any>;
+export function isWasmReady(): boolean;
+export function getWasmInstance(): any;
+export function callGoFunction(functionName: any, ...args: any[]): any;
+export function waitForWasm(timeout?: number): Promise<any>;
+//# sourceMappingURL=wasm-loader.d.ts.map

package/templates/wasm/wasm-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wasm-loader.d.ts","sourceRoot":"","sources":["wasm-loader.js"],"names":[],"mappings":"AAOA,sEA6CC;AAYD,uCAEC;AAED,uCAEC;AAGD,uEAUC;AAED,4DAiBC"}