frontend-hamroun 1.2.83 → 1.2.85

package/templates/wasm/src/App.js

@@ -0,0 +1,381 @@
+import { jsx as _jsx, jsxs as _jsxs } from "frontend-hamroun/jsx-runtime";
+import { useState, useEffect } from 'baraqex';
+import { loadGoWasm, callWasmFunction } from 'baraqex';
+export default function App() {
+    const [wasmReady, setWasmReady] = useState(false);
+    const [wasmError, setWasmError] = useState(null);
+    const [result, setResult] = useState(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 {
+                console.log('Loading Go WASM module using baraqex API...');
+                // Use baraqex API to load WASM
+                await loadGoWasm('/example.wasm', {
+                    debug: true,
+                    onLoad: () => {
+                        console.log('WASM module loaded successfully via baraqex');
+                    }
+                });
+                if (mounted) {
+                    setWasmReady(true);
+                    setWasmError(null);
+                    console.log('WASM module ready');
+                }
+            }
+            catch (error) {
+                console.error('WASM loading error:', error);
+                if (mounted) {
+                    setWasmError(error instanceof Error ? error.message : 'Unknown WASM loading error');
+                }
+            }
+        }
+        loadWasm();
+        return () => {
+            mounted = false;
+        };
+    }, []);
+    // Use baraqex callWasmFunction API
+    const callFunction = (funcName, ...args) => {
+        try {
+            // Call using baraqex API
+            return callWasmFunction(funcName, ...args);
+        }
+        catch (error) {
+            const errorMsg = error instanceof Error ? error.message : 'Function call failed';
+            setWasmError(errorMsg);
+            return null;
+        }
+    };
+    const handleHello = () => {
+        const greeting = callFunction('goHello', name);
+        if (greeting !== null) {
+            setResult({ type: 'hello', value: greeting, input: name });
+            setWasmError(null);
+        }
+    };
+    const handleAddition = () => {
+        const sum = callFunction('goAdd', inputA, inputB);
+        if (sum !== null) {
+            setResult({ type: 'addition', value: sum, inputs: [inputA, inputB] });
+            setWasmError(null);
+        }
+    };
+    const handleMultiplication = () => {
+        const product = callFunction('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 = callFunction('goFibonacci', fibInput);
+        if (fibResult !== null) {
+            setResult({ type: 'fibonacci', value: fibResult, input: fibInput });
+            setWasmError(null);
+        }
+    };
+    const handlePrimeCheck = () => {
+        const isPrime = callFunction('goIsPrime', primeInput);
+        if (isPrime !== null) {
+            setResult({ type: 'prime', value: isPrime, input: primeInput });
+            setWasmError(null);
+        }
+    };
+    if (!wasmReady && !wasmError) {
+        return (_jsxs("div", { className: "app loading", children: [_jsx("div", { className: "spinner" }), _jsx("h2", { children: "Loading Go WASM Module..." }), _jsx("p", { children: "Initializing WebAssembly runtime..." })] }));
+    }
+    if (wasmError) {
+        return (_jsxs("div", { className: "app error", children: [_jsx("h2", { children: "WASM Error" }), _jsx("p", { children: wasmError }), _jsx("button", { onClick: () => window.location.reload(), children: "Reload Page" }), _jsxs("details", { style: { marginTop: '20px', textAlign: 'left' }, children: [_jsx("summary", { children: "Troubleshooting" }), _jsxs("ul", { children: [_jsxs("li", { children: ["Make sure the WASM file is built: ", _jsx("code", { children: "npm run build:wasm" })] }), _jsxs("li", { children: ["Check if ", _jsx("code", { children: "example.wasm" }), " exists in the public folder"] }), _jsxs("li", { children: ["Verify ", _jsx("code", { children: "wasm_exec.js" }), " is loaded in the HTML"] }), _jsx("li", { children: "Check browser console for additional errors" })] })] })] }));
+    }
+    return (_jsxs("div", { className: "app", children: [_jsxs("header", { children: [_jsx("h1", { children: "Frontend Hamroun + Go WASM (Baraqex)" }), _jsx("p", { children: "High-performance computing with WebAssembly via Baraqex API" }), _jsxs("div", { className: "status", children: [_jsx("span", { className: "status-indicator ready" }), "WASM Ready via Baraqex"] })] }), _jsxs("main", { children: [_jsxs("section", { className: "demo-grid", children: [_jsxs("div", { className: "demo-card", children: [_jsx("h3", { children: "\uD83C\uDF0D Hello Function" }), _jsxs("div", { className: "input-group", children: [_jsx("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "Enter your name" }), _jsx("button", { onClick: handleHello, children: "Say Hello" })] }), _jsxs("small", { children: ["callWasmFunction('goHello', '", name, "')"] })] }), _jsxs("div", { className: "demo-card", children: [_jsx("h3", { children: "\uD83E\uDDEE Math Operations" }), _jsxs("div", { className: "input-group", children: [_jsx("input", { type: "number", value: inputA, onChange: (e) => setInputA(Number(e.target.value)), placeholder: "First number" }), _jsx("input", { type: "number", value: inputB, onChange: (e) => setInputB(Number(e.target.value)), placeholder: "Second number" })] }), _jsxs("div", { className: "button-group", children: [_jsx("button", { onClick: handleAddition, children: "Add" }), _jsx("button", { onClick: handleMultiplication, children: "Multiply" })] }), _jsxs("small", { children: ["callWasmFunction('goAdd', ", inputA, ", ", inputB, ")"] })] }), _jsxs("div", { className: "demo-card", children: [_jsx("h3", { children: "\uD83D\uDD22 Fibonacci Sequence" }), _jsxs("div", { className: "input-group", children: [_jsx("input", { type: "number", value: fibInput, onChange: (e) => setFibInput(Number(e.target.value)), placeholder: "Fibonacci number", min: "0", max: "40" }), _jsx("button", { onClick: handleFibonacci, children: "Calculate" })] }), _jsx("small", { children: "Maximum value: 40" })] }), _jsxs("div", { className: "demo-card", children: [_jsx("h3", { children: "\uD83D\uDD0D Prime Number Check" }), _jsxs("div", { className: "input-group", children: [_jsx("input", { type: "number", value: primeInput, onChange: (e) => setPrimeInput(Number(e.target.value)), placeholder: "Number to check", min: "1" }), _jsx("button", { onClick: handlePrimeCheck, children: "Check Prime" })] })] })] }), result && (_jsxs("section", { className: "results", children: [_jsx("h2", { children: "\uD83D\uDCCA Baraqex WASM Result" }), _jsxs("div", { className: "result-card", children: [result.type === 'hello' && (_jsxs("p", { children: [_jsx("strong", { children: "Greeting:" }), " ", _jsx("span", { className: "result-value", children: result.value })] })), result.type === 'addition' && (_jsxs("p", { children: [_jsx("strong", { children: "Addition:" }), " ", result.inputs[0], " + ", result.inputs[1], " = ", _jsx("span", { className: "result-value", children: result.value })] })), result.type === 'multiplication' && (_jsxs("p", { children: [_jsx("strong", { children: "Multiplication:" }), " ", result.inputs[0], " \u00D7 ", result.inputs[1], " = ", _jsx("span", { className: "result-value", children: result.value })] })), result.type === 'fibonacci' && (_jsxs("p", { children: [_jsx("strong", { children: "Fibonacci:" }), " F(", result.input, ") = ", _jsx("span", { className: "result-value", children: result.value })] })), result.type === 'prime' && (_jsxs("p", { children: [_jsx("strong", { children: "Prime Check:" }), " ", result.input, " is ", _jsx("span", { className: "result-value", children: result.value ? 'prime' : 'not prime' })] }))] })] })), _jsxs("section", { className: "info-section", children: [_jsx("h2", { children: "\u26A1 Baraqex WASM Benefits" }), _jsxs("div", { className: "benefits-grid", children: [_jsxs("div", { className: "benefit", children: [_jsx("h4", { children: "\uD83D\uDE80 Simple API" }), _jsx("p", { children: "Easy-to-use loadGoWasm() and callWasmFunction() API" })] }), _jsxs("div", { className: "benefit", children: [_jsx("h4", { children: "\uD83D\uDD04 Cross-Platform" }), _jsx("p", { children: "Works in browser and Node.js with same API" })] }), _jsxs("div", { className: "benefit", children: [_jsx("h4", { children: "\uD83D\uDEE0\uFE0F Go Integration" }), _jsx("p", { children: "Seamless Go + JavaScript interoperability" })] }), _jsxs("div", { className: "benefit", children: [_jsx("h4", { children: "\uD83D\uDCCA Debug Support" }), _jsx("p", { children: "Built-in debugging and function discovery" })] })] })] })] }), _jsx("style", { children: `
+        .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;
+          }
+        }
+      ` })] }));
+}

package/templates/wasm/src/client.d.ts

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

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

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

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":""}