frontend-hamroun 1.2.66 → 1.2.68

package/README.md

@@ -19,6 +19,7 @@ A lightweight full-stack JavaScript framework with Virtual DOM and hooks impleme
 - [Core Concepts](#-core-concepts)
 - [Frontend Features](#-frontend-features)
 - [Backend Features](#-backend-features)
+- [WebAssembly Integration](#-webassembly-integration)
 - [API Reference](#-api-reference)
 - [CLI Tools](#-cli-tools)
 - [Advanced Usage](#-advanced-usage)
@@ -37,6 +38,7 @@ Frontend Hamroun is a lightweight (~5KB gzipped) JavaScript framework designed f
 - **Complete Hooks API**: useState, useEffect, useRef, useMemo, and more
 - **Full-Stack Solution**: Unified frontend and backend development
 - **Server-Side Rendering**: Optimized SSR with hydration
+- **WebAssembly Integration**: Built-in Go WASM support for high-performance computing
 - **File-Based Routing**: Intuitive API endpoint creation
 - **Database Integration**: Built-in support for MongoDB, MySQL, PostgreSQL
 - **TypeScript Support**: Full type definitions and excellent DX
@@ -159,6 +161,44 @@ function Greeting({ name }) {
 }
 ```
 
+### WebAssembly Integration
+
+Frontend Hamroun provides first-class support for WebAssembly, particularly with Go:
+
+```jsx
+import { useEffect, useState, loadGoWasm } from 'frontend-hamroun';
+
+function GoCalculator() {
+  const [result, setResult] = useState(0);
+  const [wasm, setWasm] = useState(null);
+  
+  // Load the Go WASM module
+  useEffect(() => {
+    async function loadModule() {
+      const instance = await loadGoWasm('/calculator.wasm');
+      setWasm(instance);
+    }
+    loadModule();
+  }, []);
+  
+  // Call Go functions from JavaScript
+  const calculate = () => {
+    if (wasm) {
+      // Call the Add function defined in Go
+      const sum = wasm.functions.goAdd(5, 7);
+      setResult(sum);
+    }
+  };
+  
+  return (
+    <div>
+      <button onClick={calculate}>Calculate 5 + 7</button>
+      <p>Result: {result}</p>
+    </div>
+  );
+}
+```
+
 ## 🎨 Frontend Features
 
 ### Hooks System
@@ -781,6 +821,276 @@ export async function get(req, res) {
 ```
 </details>
 
+## 📦 WebAssembly Integration
+
+Frontend Hamroun includes built-in support for Go WebAssembly modules, allowing you to leverage Go's performance benefits in your JavaScript applications:
+
+<details>
+<summary><b>Loading Go WASM Modules</b></summary>
+
+```jsx
+import { useState, useEffect } from 'frontend-hamroun';
+import { loadGoWasm } from 'frontend-hamroun';
+
+function GoWasmComponent() {
+  const [wasmModule, setWasmModule] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [result, setResult] = useState(null);
+  
+  // Load the WASM module on component mount
+  useEffect(() => {
+    async function loadWasmModule() {
+      try {
+        const instance = await loadGoWasm('/go-module.wasm', {
+          goWasmPath: '/wasm_exec.js',  // Path to the Go runtime JS
+          debug: true                   // Enable debug logging
+        });
+        
+        setWasmModule(instance);
+        setLoading(false);
+      } catch (err) {
+        console.error('Failed to load WASM module:', err);
+        setError(err.message);
+        setLoading(false);
+      }
+    }
+    
+    loadWasmModule();
+  }, []);
+  
+  // Call a Go function
+  const handleCalculate = () => {
+    if (!wasmModule) return;
+    
+    // Call the Go function
+    const sum = wasmModule.functions.goAdd(5, 7);
+    setResult(sum);
+  };
+  
+  if (loading) return <div>Loading WebAssembly module...</div>;
+  if (error) return <div>Error: {error}</div>;
+  
+  return (
+    <div>
+      <h2>Go WebAssembly Example</h2>
+      <button onClick={handleCalculate}>Calculate 5 + 7</button>
+      {result !== null && <p>Result: {result}</p>}
+    </div>
+  );
+}
+```
+</details>
+
+<details>
+<summary><b>Creating Go WASM Modules</b></summary>
+
+```go
+// example.go
+//go:build js && wasm
+// +build js,wasm
+
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"syscall/js"
+)
+
+// Function to be called from JavaScript
+func add(this js.Value, args []js.Value) interface{} {
+	if len(args) != 2 {
+		return js.ValueOf("Error: Expected two arguments")
+	}
+	
+	a := args[0].Int()
+	b := args[1].Int()
+	return js.ValueOf(a + b)
+}
+
+// Processing complex data
+func processData(this js.Value, args []js.Value) interface{} {
+	if len(args) == 0 {
+		return js.ValueOf("Error: Expected at least one argument")
+	}
+
+	// Get input data as JS object
+	data := args[0]
+	jsonStr := js.Global().Get("JSON").Call("stringify", data).String()
+	
+	// Parse JSON into Go structure
+	var inputMap map[string]interface{}
+	json.Unmarshal([]byte(jsonStr), &inputMap)
+	
+	// Process data
+	inputMap["processed"] = true
+	inputMap["processor"] = "Go WASM"
+	
+	// Add computed values
+	if values, ok := inputMap["values"].([]interface{}); ok {
+		sum := 0.0
+		for _, v := range values {
+			if num, ok := v.(float64); ok {
+				sum += num
+			}
+		}
+		inputMap["sum"] = sum
+	}
+	
+	// Convert back to JSON
+	resultJSON, _ := json.Marshal(inputMap)
+	return js.ValueOf(string(resultJSON))
+}
+
+func main() {
+	// Register functions to be callable from JavaScript
+	js.Global().Set("goAdd", js.FuncOf(add))
+	js.Global().Set("goProcessData", js.FuncOf(processData))
+	
+	// Keep the program running
+	<-make(chan bool)
+}
+```
+
+```bash
+# Compile the Go code to WebAssembly
+GOOS=js GOARCH=wasm go build -o public/go-module.wasm example.go
+
+# On Windows
+set GOOS=js
+set GOARCH=wasm
+go build -o public/go-module.wasm example.go
+```
+
+```bash
+# Copy the necessary Go WASM runtime
+cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" public/
+```
+</details>
+
+<details>
+<summary><b>Handling Complex Data with Go WASM</b></summary>
+
+```jsx
+import { useState, useEffect } from 'frontend-hamroun';
+import { loadGoWasm, createTypedWasmFunction } from 'frontend-hamroun';
+
+function DataProcessor() {
+  const [wasmModule, setWasmModule] = useState(null);
+  const [inputData, setInputData] = useState({
+    name: 'Test Data',
+    values: [10, 20, 30, 40, 50],
+    timestamp: new Date().toISOString()
+  });
+  const [processedData, setProcessedData] = useState(null);
+  
+  // Load WASM module
+  useEffect(() => {
+    async function loadModule() {
+      const instance = await loadGoWasm('/go-module.wasm');
+      setWasmModule(instance);
+    }
+    loadModule();
+  }, []);
+  
+  // Process data using Go
+  const handleProcessData = () => {
+    if (!wasmModule) return;
+    
+    // Create a typed function wrapper for better TypeScript support
+    const processData = createTypedWasmFunction<(data: any) => string>(
+      wasmModule,
+      'goProcessData'
+    );
+    
+    // Call the Go function
+    const result = processData(inputData);
+    setProcessedData(JSON.parse(result));
+  };
+  
+  return (
+    <div>
+      <h2>Data Processing with Go WASM</h2>
+      <div>
+        <h3>Input Data</h3>
+        <pre>{JSON.stringify(inputData, null, 2)}</pre>
+      </div>
+      
+      <button 
+        onClick={handleProcessData}
+        disabled={!wasmModule}
+      >
+        Process Data
+      </button>
+      
+      {processedData && (
+        <div>
+          <h3>Processed Result</h3>
+          <pre>{JSON.stringify(processedData, null, 2)}</pre>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+</details>
+
+<details>
+<summary><b>Server-Side WASM Integration</b></summary>
+
+```js
+import { loadGoWasmFromFile } from 'frontend-hamroun/server';
+import path from 'path';
+
+// API endpoint using Go WASM for computation
+export async function get(req, res) {
+  try {
+    // Load the WASM module on the server
+    const wasmPath = path.join(process.cwd(), 'wasm', 'calculator.wasm');
+    const wasm = await loadGoWasmFromFile(wasmPath);
+    
+    // Process data using the Go WASM module
+    const input = {
+      values: [10, 20, 30, 40, 50],
+      operation: 'sum'
+    };
+    
+    const result = wasm.functions.goProcessData(input);
+    
+    // Return the processed data
+    res.json(JSON.parse(result));
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+}
+```
+</details>
+
+<details>
+<summary><b>CLI for Go WASM Development</b></summary>
+
+```bash
+# Create a new Go WASM module
+npx frontend-hamroun add:wasm calculator
+
+# This will:
+# 1. Create calculator.go with basic functions
+# 2. Add build scripts for compiling to WASM
+# 3. Display usage instructions
+
+# Then compile and use your module
+cd src/wasm
+./build.sh  # or build.bat on Windows
+
+# Import in your code
+import { loadGoWasm } from 'frontend-hamroun';
+
+const wasm = await loadGoWasm('/wasm/calculator.wasm');
+const result = wasm.functions.goAdd(5, 7);
+```
+</details>
+
 ## 🔄 Server-Side Rendering
 
 Frontend Hamroun provides built-in server-side rendering capabilities to improve performance and SEO:
@@ -851,6 +1161,7 @@ Available templates:
 - `basic-app`: Minimal client-side setup
 - `ssr-template`: Server-side rendering with hydration
 - `fullstack-app`: Complete solution with frontend, backend, auth, and DB
+- `go-wasm-app`: Application with Go WebAssembly integration
 </details>
 
 <details>
@@ -880,6 +1191,22 @@ npx frontend-hamroun add:api orders --methods=get,post --auth
 ```
 </details>
 
+<details>
+<summary><b>WebAssembly Generation</b></summary>
+
+```bash
+# Generate a new Go WASM module
+npx frontend-hamroun add:wasm calculator
+
+# Specify path
+npx frontend-hamroun add:wasm data-processor --path=src/wasm
+
+# Select module capabilities
+npx frontend-hamroun add:wasm math-lib
+# (Interactive prompt will ask for module features)
+```
+</details>
+
 ## 🧩 Advanced Usage
 
 <details>
@@ -1236,6 +1563,32 @@ While Frontend Hamroun's API is similar to React's, they have different internal
 Yes, Frontend Hamroun provides tools for static site generation. Use the `renderToString` API to pre-render pages at build time.
 </details>
 
+<details>
+<summary><b>Why integrate Go with WebAssembly?</b></summary>
+
+Go with WebAssembly provides several benefits:
+- **Performance**: Computation-heavy tasks run much faster than in JavaScript
+- **Reuse existing code**: Leverage Go libraries and codebases in the browser
+- **Type safety**: Go's strong typing helps prevent runtime errors
+- **Concurrency**: Utilize Go's powerful concurrency features
+- **Consistent behavior**: Same code runs identically in browser and on server
+
+Frontend Hamroun makes this integration seamless with dedicated APIs to load and interact with Go WASM modules.
+</details>
+
+<details>
+<summary><b>What's the performance impact of using Go WASM?</b></summary>
+
+While WebAssembly is generally faster than JavaScript for CPU-intensive tasks, there are considerations:
+
+- **Initial load**: WASM modules add to your bundle size (though they can be loaded on-demand)
+- **Memory usage**: Go's runtime in WASM uses more memory than hand-written WASM
+- **Startup time**: The Go runtime has some initialization overhead
+- **Computation speed**: For heavy calculations, Go WASM can be 2-10x faster than equivalent JS
+
+Best practice is to use Go WASM for specific performance-critical parts of your application rather than for the entire application.
+</details>
+
 ## 📄 License
 
 MIT © Hamroun

package/bin/cli.js

@@ -149,15 +149,13 @@ async function chooseTemplate() {
     'basic-app': '🚀',
     'ssr-template': '🌐',
     'fullstack-app': '⚡',
-    'go-wasm-app': '🔄',
   };
 
   // Detailed descriptions
   const templateDescriptions = {
     'basic-app': 'Single-page application with just the essentials. Perfect for learning the framework or building simple apps.',
     'ssr-template': 'Server-side rendered application with hydration. Optimized for SEO and fast initial load.',
-    'fullstack-app': 'Complete solution with API routes, authentication, and database integration ready to go.',
-    'go-wasm-app': 'WebAssembly integration with Go for high-performance computing in the browser and Node.js.'
+    'fullstack-app': 'Complete solution with API routes, authentication, and database integration ready to go.'
   };
   
   console.log(boxen(
@@ -167,8 +165,7 @@ async function chooseTemplate() {
       const shortDesc = {
         'basic-app': 'Simple client-side application',
         'ssr-template': 'Server-side rendering with hydration',
-        'fullstack-app': 'Complete fullstack application with API',
-        'go-wasm-app': 'Go WebAssembly application'
+        'fullstack-app': 'Complete fullstack application with API'
       }[template] || 'Application template';
       
       return `${icon} ${chalk.cyan(template)}\n   ${chalk.dim(shortDesc)}`;
@@ -256,23 +253,6 @@ async function chooseTemplate() {
         '• Full production applications',
         '• Apps needing authentication',
         '• Projects requiring database integration'
-      ],
-      'go-wasm-app': [
-        `${chalk.bold('Go WASM App Template')} ${templateIcons['go-wasm-app']}`,
-        '',
-        `${chalk.dim('WebAssembly integration with Go programming language.')}`,
-        '',
-        `${chalk.yellow('Features:')}`,
-        '• Go + WebAssembly integration',
-        '• High-performance computation in browser',
-        '• Server-side WASM processing',
-        '• Shared code between Go and JavaScript',
-        '• Optimized build pipeline',
-        '',
-        `${chalk.yellow('Best for:')}`,
-        '• Computation-heavy applications',
-        '• Projects requiring Go libraries',
-        '• Performance-critical features'
       ]
     }[answers.template] || ['No detailed information available for this template'];
     

package/dist/index.d.ts

@@ -4,11 +4,11 @@ export { batchUpdates } from './batch';
 export { jsx, jsxs, Fragment } from './jsx-runtime';
 export { render, hydrate } from './renderer';
 export { renderToString } from './server-renderer';
-export { loadGoWasm, createTypedWasmFunction, goValues } from './wasm';
-export type { GoWasmInstance, GoWasmOptions } from './wasm';
 export type { Context } from './context';
 export type { VNode } from './types';
 export type { Server, ServerConfig, User, DbConfig, MiddlewareFunction } from './server-types';
+export { loadGoWasm, createTypedWasmFunction, goValues } from './wasm';
+export type { GoWasmInstance, GoWasmOptions } from './wasm';
 export declare const server: {
-    getServer(): Promise<typeof import("./server/index.js")>;
+    getServer(): Promise<any>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.66",
+  "version": "1.2.68",
   "description": "A lightweight full-stack JavaScript framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -69,6 +69,16 @@
       "types": "./dist/renderer.d.ts",
       "import": "./dist/renderer.js",
       "require": "./dist/renderer.js"
+    },
+    "./wasm": {
+      "types": "./dist/wasm.d.ts",
+      "import": "./dist/wasm.js",
+      "require": "./dist/wasm.js"
+    },
+    "./server/wasm": {
+      "types": "./dist/server/wasm.d.ts",
+      "import": "./dist/server/wasm.js",
+      "require": "./dist/server/wasm.js"
     }
   },
   "bin": {

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

@@ -1,20 +0,0 @@
-{
-  "name": "go-wasm-app",
-  "version": "1.0.0",
-  "description": "WebAssembly integration with Go for Frontend Hamroun",
-  "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",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "dependencies": {
-    "frontend-hamroun": "^1.2.0"
-  },
-  "devDependencies": {
-    "vite": "^4.4.9"
-  }
-}

package/templates/go/README.md

@@ -1,150 +0,0 @@
-# Go WebAssembly Integration
-
-This directory contains tools and examples for integrating Go with Frontend Hamroun via WebAssembly (WASM).
-
-## Getting Started
-
-### Prerequisites
-
-1. Go 1.16+ installed on your system
-2. Basic understanding of Go programming language
-
-### Compiling Go to WebAssembly
-
-To compile a Go file to WebAssembly for browser usage:
-
-```bash
-GOOS=js GOARCH=wasm go build -o mymodule.wasm myfile.go
-```
-
-For optimized production builds:
-
-```bash
-GOOS=js GOARCH=wasm go build -ldflags="-s -w" -o mymodule.wasm myfile.go
-```
-
-### Required Files
-
-Copy these files to your project:
-
-1. `wasm_exec.js` - for browser usage
-2. `wasm_exec_node.js` - for Node.js (server-side) usage
-
-You can find these files in your Go installation:
-- Browser: `$(go env GOROOT)/misc/wasm/wasm_exec.js`
-- Node.js: `$(go env GOROOT)/misc/wasm/wasm_exec_node.js`
-
-## Usage Examples
-
-### Browser Usage
-
-```jsx
-import { loadGoWasm, createTypedWasmFunction } from 'frontend-hamroun';
-
-function GoCalculator() {
-  const [result, setResult] = useState(0);
-  const [wasmInstance, setWasmInstance] = useState(null);
-  
-  useEffect(() => {
-    async function loadWasm() {
-      const instance = await loadGoWasm('/mymodule.wasm', {
-        goWasmPath: '/wasm_exec.js', // Path to the Go runtime JS file
-        debug: true
-      });
-      
-      setWasmInstance(instance);
-    }
-    
-    loadWasm();
-  }, []);
-  
-  const handleCalculate = () => {
-    if (wasmInstance) {
-      // Call Go function from WASM
-      const goAdd = createTypedWasmFunction<(a: number, b: number) => number>(
-        wasmInstance,
-        'goAdd'
-      );
-      
-      const sum = goAdd(5, 7);
-      setResult(sum);
-    }
-  };
-  
-  return (
-    <div>
-      <button onClick={handleCalculate}>Calculate 5 + 7</button>
-      <p>Result: {result}</p>
-    </div>
-  );
-}
-```
-
-### Server Usage
-
-```js
-import { loadGoWasmFromFile } from 'frontend-hamroun/server';
-import path from 'path';
-
-export async function get(req, res) {
-  const wasmPath = path.join(process.cwd(), 'lib', 'mymodule.wasm');
-  
-  try {
-    const wasm = await loadGoWasmFromFile(wasmPath);
-    
-    // Call Go function
-    const result = wasm.functions.goProcessData({
-      values: [1, 2, 3, 4, 5],
-      operation: 'sum'
-    });
-    
-    res.json(JSON.parse(result));
-  } catch (error) {
-    res.status(500).json({ error: error.message });
-  }
-}
-```
-
-## Advanced Usage
-
-### Passing Complex Data Between JavaScript and Go
-
-For complex data types, use JSON serialization:
-
-```go
-// In Go
-func processData(this js.Value, args []js.Value) interface{} {
-  // Get JSON string from JS
-  jsonStr := args[0].String()
-  
-  // Parse JSON
-  var data map[string]interface{}
-  json.Unmarshal([]byte(jsonStr), &data)
-  
-  // Process data...
-  
-  // Return as JSON string
-  resultJSON, _ := json.Marshal(result)
-  return js.ValueOf(string(resultJSON))
-}
-```
-
-```js
-// In JavaScript
-const dataToProcess = { items: [1, 2, 3], config: { name: "test" } };
-const jsonStr = JSON.stringify(dataToProcess);
-const resultJson = wasmInstance.functions.processData(jsonStr);
-const result = JSON.parse(resultJson);
-```
-
-## Performance Considerations
-
-- WebAssembly functions run in the same thread as JavaScript
-- For CPU-intensive tasks, consider using Web Workers
-- Go's garbage collector can cause occasional pauses
-- Large WASM files can increase initial load time
-
-## Resources
-
-- [Go WebAssembly Wiki](https://github.com/golang/go/wiki/WebAssembly)
-- [Frontend Hamroun Documentation](https://github.com/hamroun/frontend-hamroun)