frontend-hamroun 1.2.69 → 1.2.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.69",
+  "version": "1.2.70",
   "description": "A lightweight full-stack JavaScript framework",
   "type": "module",
   "main": "./dist/index.js",

package/templates/go-wasm-app/README.md

@@ -0,0 +1,22 @@
+# Frontend Hamroun - Go WebAssembly Template with SSR
+
+This template demonstrates integration between Frontend Hamroun, Go WebAssembly, and Server-Side Rendering for high-performance web applications.
+
+## Features
+
+- 🔄 Go + WebAssembly integration
+- 🌐 Server-Side Rendering with client hydration
+- ⚡ High-performance computation in both browser and server
+- 🚀 Same Go code runs in both environments
+- 🔍 SEO-friendly with pre-rendered HTML
+- 🧩 Example Go WASM modules and usage patterns
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/) (v14+)
+- [Go](https://golang.org/dl/) (v1.16+)
+
+## Getting Started
+
+1. Install dependencies:
+   

package/templates/go-wasm-app/build-wasm.js

@@ -45,13 +45,19 @@ async function buildWasmModules() {
   // Get the Go root directory
   const goRoot = execSync('go env GOROOT', { encoding: 'utf8' }).trim();
   
-  // Copy the wasm_exec.js file to the output directory
+  // Copy the wasm_exec.js files to the output directory (for both browser and Node.js)
   const wasmExecJsPath = join(goRoot, 'misc', 'wasm', 'wasm_exec.js');
   const wasmExecJsDest = join(wasmOutputDir, 'wasm_exec.js');
   
+  const wasmExecNodeJsPath = join(goRoot, 'misc', 'wasm', 'wasm_exec_node.js');
+  const wasmExecNodeJsDest = join(wasmOutputDir, 'wasm_exec_node.js');
+  
   console.log(`Copying ${wasmExecJsPath} to ${wasmExecJsDest}`);
   fs.copyFileSync(wasmExecJsPath, wasmExecJsDest);
   
+  console.log(`Copying ${wasmExecNodeJsPath} to ${wasmExecNodeJsDest}`);
+  fs.copyFileSync(wasmExecNodeJsPath, wasmExecNodeJsDest);
+  
   // Build all Go files in the WASM directory
   if (fs.existsSync(goSourceDir)) {
     const goFiles = fs.readdirSync(goSourceDir)

package/templates/go-wasm-app/package.json

@@ -1,20 +1,26 @@
 {
   "name": "go-wasm-app",
   "version": "1.0.0",
-  "description": "WebAssembly integration with Go for Frontend Hamroun",
+  "description": "WebAssembly integration with Go for Frontend Hamroun with SSR",
   "type": "module",
   "main": "index.js",
   "scripts": {
     "build:wasm": "node build-wasm.js",
-    "dev": "npm run build:wasm && vite",
-    "build": "npm run build:wasm && vite build",
-    "serve": "vite preview",
+    "dev": "npm run build:wasm && concurrently \"node --watch server.js\" \"vite\"",
+    "build": "npm run build:wasm && vite build && tsc -p tsconfig.server.json",
+    "serve": "NODE_ENV=production node server.js",
+    "start": "npm run build && npm run serve",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "frontend-hamroun": "^1.2.68"
+    "express": "^4.18.2",
+    "frontend-hamroun": "^1.2.69"
   },
   "devDependencies": {
+    "@types/express": "^4.17.18",
+    "@types/node": "^18.16.19",
+    "concurrently": "^8.2.1",
+    "typescript": "^5.0.0",
     "vite": "^4.4.9"
   }
 }

package/templates/go-wasm-app/public/styles.css

@@ -0,0 +1,197 @@
+:root {
+  --primary-color: #0070f3;
+  --secondary-color: #0051cc;
+  --background: #f9f9f9;
+  --text-color: #333;
+  --card-background: #fff;
+  --border-color: #eaeaea;
+  --error-color: #f44336;
+  --success-color: #4caf50;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: var(--background);
+  color: var(--text-color);
+  margin: 0;
+  padding: 0;
+  line-height: 1.6;
+}
+
+.app {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+header h1 {
+  margin-bottom: 0.5rem;
+  color: var(--primary-color);
+}
+
+header p {
+  color: #666;
+}
+
+.rendering-info {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.badge {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background-color: #eaeaea;
+  color: #666;
+  font-size: 0.8rem;
+}
+
+.badge.active {
+  background-color: var(--success-color);
+  color: white;
+}
+
+footer {
+  margin-top: 3rem;
+  text-align: center;
+  color: #666;
+  padding: 1rem 0;
+  border-top: 1px solid var(--border-color);
+}
+
+footer a {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+.loading {
+  text-align: center;
+  padding: 2rem;
+}
+
+.error {
+  background-color: rgba(244, 67, 54, 0.1);
+  border: 1px solid var(--error-color);
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.error-message {
+  background-color: rgba(244, 67, 54, 0.1);
+  color: var(--error-color);
+  padding: 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+}
+
+.card {
+  background-color: var(--card-background);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.demo-section {
+  background-color: var(--card-background);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.input-row input {
+  width: 80px;
+  padding: 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
+.input-row .operator {
+  font-size: 1.5rem;
+  margin: 0 0.5rem;
+}
+
+button {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.2s;
+}
+
+button:hover {
+  background-color: var(--secondary-color);
+}
+
+.json-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.json-editor textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.9rem;
+  resize: vertical;
+}
+
+.result {
+  background-color: #f0f7ff;
+  padding: 1rem;
+  border-radius: 4px;
+  margin-top: 1rem;
+}
+
+.result pre {
+  margin: 0;
+  white-space: pre-wrap;
+  font-family: monospace;
+  font-size: 0.9rem;
+}
+
+.info-section {
+  background-color: #f0f7ff;
+  border: 1px solid #e1e7fd;
+  border-radius: 8px;
+  padding: 1.5rem;
+}
+
+.info-section h2 {
+  color: var(--primary-color);
+  margin-top: 0;
+}
+
+.info-section ol {
+  padding-left: 1.5rem;
+}

package/templates/go-wasm-app/server.js

@@ -0,0 +1,123 @@
+import express from 'express';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { renderToString } from 'frontend-hamroun/ssr';
+import { loadGoWasmFromFile } from 'frontend-hamroun/server/wasm';
+
+// ESM __dirname equivalent
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Configuration
+const PORT = process.env.PORT || 3000;
+const isProduction = process.env.NODE_ENV === 'production';
+const WASM_PATH = path.join(__dirname, isProduction ? 'dist' : 'public', 'wasm', 'example.wasm');
+const WASM_EXEC_PATH = path.join(__dirname, isProduction ? 'dist' : 'public', 'wasm', 'wasm_exec_node.js');
+
+// Express app setup
+const app = express();
+
+// Serve static assets
+if (isProduction) {
+  app.use(express.static('dist', { index: false }));
+} else {
+  app.use(express.static('public', { index: false }));
+}
+
+// Setup a route to serve wasm files with correct MIME type
+app.get('*.wasm', (req, res, next) => {
+  res.set('Content-Type', 'application/wasm');
+  next();
+});
+
+// Initialize WASM for server-side processing
+let serverWasmInstance = null;
+
+async function initServerWasm() {
+  try {
+    // Check if WASM file exists
+    if (fs.existsSync(WASM_PATH)) {
+      serverWasmInstance = await loadGoWasmFromFile(WASM_PATH, {
+        goWasmPath: WASM_EXEC_PATH,
+        debug: !isProduction
+      });
+      console.log('✅ Server WASM module loaded successfully');
+    } else {
+      console.warn('⚠️ WASM file not found at:', WASM_PATH);
+    }
+  } catch (error) {
+    console.error('❌ Failed to load server WASM module:', error);
+  }
+}
+
+// Handle all requests with server-side rendering
+app.get('*', async (req, res) => {
+  try {
+    // In production, use the pre-built App; in dev, dynamically import
+    const AppModule = isProduction 
+      ? await import('./dist/server/App.js')
+      : { default: (props) => ({ type: 'div', props: { children: 'Loading...' } }) };
+
+    // Initial state to hydrate the app
+    const initialState = {
+      path: req.path,
+      wasmAvailable: serverWasmInstance !== null,
+      ssrRendered: true
+    };
+
+    // Process data with WASM if available
+    if (serverWasmInstance) {
+      try {
+        // Example of server-side WASM processing
+        const processDataFn = serverWasmInstance.functions.goProcessData;
+        const processedData = processDataFn({
+          source: 'server',
+          timestamp: new Date().toISOString(),
+          values: [10, 20, 30, 40, 50]
+        });
+        
+        initialState.processedData = JSON.parse(processedData);
+      } catch (error) {
+        console.error('Error using WASM on server:', error);
+        initialState.wasmError = error.message;
+      }
+    }
+
+    // Render the app to HTML
+    const content = renderToString(AppModule.default({ initialState }));
+
+    // Read the HTML template
+    let html = fs.readFileSync(
+      path.resolve(__dirname, isProduction ? './dist/index.html' : './public/index.html'),
+      'utf8'
+    );
+
+    // Inject rendered content and initial state
+    html = html.replace(
+      '<div id="root"></div>',
+      `<div id="root">${content}</div>
+      <script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};</script>`
+    );
+
+    res.setHeader('Content-Type', 'text/html');
+    res.send(html);
+  } catch (error) {
+    console.error('Server rendering error:', error);
+    res.status(500).send(`
+      <h1>Server Error</h1>
+      <p>${error.message}</p>
+      <pre>${error.stack}</pre>
+    `);
+  }
+});
+
+// Initialize server
+async function startServer() {
+  await initServerWasm();
+  app.listen(PORT, () => {
+    console.log(`\n🚀 Server running at http://localhost:${PORT}\n`);
+  });
+}
+
+startServer();

package/templates/go-wasm-app/src/App.jsx

@@ -0,0 +1,79 @@
+import { jsx, useState, useEffect } from 'frontend-hamroun';
+import { loadGoWasm } from 'frontend-hamroun';
+import WasmDemo from './components/WasmDemo';
+import Header from './components/Header';
+import Footer from './components/Footer';
+
+export default function App({ initialState }) {
+  const [wasmLoaded, setWasmLoaded] = useState(initialState?.wasmAvailable || false);
+  const [wasmInstance, setWasmInstance] = useState(null);
+  const [error, setError] = useState(initialState?.wasmError || null);
+  const [ssrProcessedData, setSsrProcessedData] = useState(initialState?.processedData || null);
+  const [isClientSide, setIsClientSide] = useState(false);
+  
+  // Detect client-side rendering
+  useEffect(() => {
+    setIsClientSide(true);
+  }, []);
+  
+  // Load the WASM module on client-side only
+  useEffect(() => {
+    if (typeof window === 'undefined') return; // Skip on server
+    
+    async function loadWasm() {
+      try {
+        console.log('Loading WASM module in browser...');
+        const instance = await loadGoWasm('/wasm/example.wasm', {
+          goWasmPath: '/wasm/wasm_exec.js',
+          debug: true
+        });
+        
+        console.log('WASM module loaded successfully');
+        setWasmInstance(instance);
+        setWasmLoaded(true);
+      } catch (err) {
+        console.error('Failed to load WASM:', err);
+        setError(err.message);
+      }
+    }
+    
+    if (!wasmLoaded || !wasmInstance) {
+      loadWasm();
+    }
+  }, [wasmLoaded, wasmInstance]);
+  
+  return (
+    <div className="app">
+      <Header 
+        isSSR={initialState?.ssrRendered} 
+        isHydrated={isClientSide} 
+      />
+      
+      <main>
+        {ssrProcessedData && (
+          <div className="card">
+            <h2>Server-Processed Data</h2>
+            <p>This data was processed by Go WASM on the server:</p>
+            <pre className="result">{JSON.stringify(ssrProcessedData, null, 2)}</pre>
+          </div>
+        )}
+        
+        {error ? (
+          <div className="error">
+            <h2>Failed to load WebAssembly</h2>
+            <p>{error}</p>
+            <p>Make sure you've built the WASM modules with <code>npm run build:wasm</code></p>
+          </div>
+        ) : wasmLoaded && wasmInstance ? (
+          <WasmDemo wasm={wasmInstance} />
+        ) : (
+          <div className="loading">
+            <p>Loading WebAssembly module{isClientSide ? '...' : ' on client after hydration'}</p>
+          </div>
+        )}
+      </main>
+      
+      <Footer />
+    </div>
+  );
+}

package/templates/go-wasm-app/src/components/Footer.jsx

@@ -0,0 +1,13 @@
+import { jsx } from 'frontend-hamroun';
+
+export default function Footer() {
+  return (
+    <footer>
+      <p>
+        Built with <a href="https://github.com/hamroun/frontend-hamroun" target="_blank" rel="noopener noreferrer">
+          Frontend Hamroun
+        </a> and Go WebAssembly
+      </p>
+    </footer>
+  );
+}

package/templates/go-wasm-app/src/components/Header.jsx

@@ -0,0 +1,19 @@
+import { jsx } from 'frontend-hamroun';
+
+export default function Header({ isSSR, isHydrated }) {
+  return (
+    <header>
+      <h1>Frontend Hamroun + Go WebAssembly</h1>
+      <p>A powerful combination for high-performance web applications</p>
+      
+      <div className="rendering-info">
+        <span className={`badge ${isSSR ? 'active' : ''}`}>
+          Server Rendered
+        </span>
+        <span className={`badge ${isHydrated ? 'active' : ''}`}>
+          Hydrated
+        </span>
+      </div>
+    </header>
+  );
+}

package/templates/go-wasm-app/src/components/WasmDemo.jsx

@@ -0,0 +1,120 @@
+import { jsx, useState } from 'frontend-hamroun';
+
+export default function WasmDemo({ wasm }) {
+  // Addition demo state
+  const [num1, setNum1] = useState(5);
+  const [num2, setNum2] = useState(7);
+  const [sum, setSum] = useState(null);
+  
+  // Data processing demo state
+  const [processInput, setProcessInput] = useState(JSON.stringify({
+    name: 'Test data',
+    source: 'client',
+    values: [10, 20, 30, 40, 50],
+    timestamp: new Date().toISOString()
+  }, null, 2));
+  const [processResult, setProcessResult] = useState(null);
+  
+  // Error state
+  const [error, setError] = useState(null);
+  
+  // Handle addition with Go WASM
+  const handleCalculate = () => {
+    try {
+      setError(null);
+      // Get the goAdd function from the WASM instance
+      const goAdd = wasm.functions.goAdd;
+      // Call the Go function and get the result
+      const result = goAdd(parseInt(num1), parseInt(num2));
+      setSum(result);
+    } catch (err) {
+      console.error('Error calling Go function:', err);
+      setError(`Error: ${err.message}`);
+    }
+  };
+  
+  // Handle complex data processing with Go WASM
+  const handleProcessData = () => {
+    try {
+      setError(null);
+      // Parse the input JSON
+      const inputData = JSON.parse(processInput);
+      // Get the goProcessData function from the WASM instance
+      const goProcessData = wasm.functions.goProcessData;
+      // Call the Go function with the data
+      const result = goProcessData(inputData);
+      // Parse the returned JSON and format it
+      setProcessResult(JSON.parse(result));
+    } catch (err) {
+      console.error('Error processing data with Go:', err);
+      setError(`Error: ${err.message}`);
+    }
+  };
+  
+  return (
+    <div className="wasm-demo">
+      {error && (
+        <div className="error-message">
+          {error}
+        </div>
+      )}
+      
+      <section className="demo-section">
+        <h2>Simple Addition with Go</h2>
+        <p>Call a Go WASM function to add two numbers:</p>
+        <div className="input-row">
+          <input 
+            type="number" 
+            value={num1} 
+            onChange={(e) => setNum1(e.target.value)} 
+          />
+          <span className="operator">+</span>
+          <input 
+            type="number" 
+            value={num2} 
+            onChange={(e) => setNum2(e.target.value)} 
+          />
+          <button onClick={handleCalculate}>Calculate</button>
+        </div>
+        
+        {sum !== null && (
+          <div className="result">
+            <h3>Result:</h3>
+            <pre>{sum}</pre>
+          </div>
+        )}
+      </section>
+      
+      <section className="demo-section">
+        <h2>Complex Data Processing with Go</h2>
+        <p>Process JSON data using a Go WASM function:</p>
+        <div className="json-editor">
+          <textarea 
+            value={processInput} 
+            onChange={(e) => setProcessInput(e.target.value)}
+            rows={10}
+          />
+          <button onClick={handleProcessData}>Process Data</button>
+        </div>
+        
+        {processResult && (
+          <div className="result">
+            <h3>Processed Result:</h3>
+            <pre>{JSON.stringify(processResult, null, 2)}</pre>
+          </div>
+        )}
+      </section>
+      
+      <section className="info-section">
+        <h2>How It Works</h2>
+        <p>This demo demonstrates the integration between Frontend Hamroun and Go WebAssembly with SSR:</p>
+        <ol>
+          <li>Server renders the initial HTML using the same React-like components</li>
+          <li>Server can process data with Go WASM before sending the response</li>
+          <li>Browser hydrates the app and loads its own WASM module</li>
+          <li>The same Go code runs in both server and browser environments</li>
+        </ol>
+      </section>
+    </div>
+  );
+}

package/templates/go-wasm-app/src/main.jsx

@@ -0,0 +1,12 @@
+import { hydrate } from 'frontend-hamroun';
+import App from './App';
+
+// Get initial state from server
+const initialState = window.__INITIAL_STATE__ || {
+  path: window.location.pathname,
+  ssrRendered: false,
+  wasmAvailable: false
+};
+
+// Hydrate the application
+hydrate(<App initialState={initialState} />, document.getElementById('root'));

package/templates/go-wasm-app/tsconfig.server.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "outDir": "dist/server",
+    "jsx": "react",
+    "jsxFactory": "jsx",
+    "jsxFragmentFactory": "Fragment",
+    "allowJs": true,
+    "declaration": false
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
+  "exclude": ["node_modules"]
+}