frontend-hamroun 1.2.69 → 1.2.71

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/src/wasm/example.go

@@ -0,0 +1,75 @@
+//go:build js && wasm
+// +build js,wasm
+
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"syscall/js"
+)
+
+// Example Go 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)
+}
+
+// Process complex data in Go
+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
+	data := args[0]
+	if data.Type() != js.TypeObject {
+		return js.ValueOf("Error: Expected JSON object")
+	}
+
+	// Convert JS object to Go map
+	jsonStr := js.Global().Get("JSON").Call("stringify", data).String()
+	var inputMap map[string]interface{}
+	if err := json.Unmarshal([]byte(jsonStr), &inputMap); err != nil {
+		return js.ValueOf(fmt.Sprintf("Error parsing JSON: %s", err.Error()))
+	}
+
+	// Add new fields
+	inputMap["processed"] = true
+	inputMap["processor"] = "Go WASM"
+
+	// Add some computed fields
+	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 JS
+	resultJSON, err := json.Marshal(inputMap)
+	if err != nil {
+		return js.ValueOf(fmt.Sprintf("Error generating JSON: %s", err.Error()))
+	}
+
+	return js.ValueOf(string(resultJSON))
+}
+
+func main() {
+	fmt.Println("Go WASM Module initialized")
+	
+	// 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)
+}

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"]
+}

package/templates/go-wasm-app/vite.config.js

@@ -4,8 +4,9 @@ import { resolve } from 'path';
 export default defineConfig({
   // Configure JSX
   esbuild: {
-    jsxFactory: 'jsx',
-    jsxFragment: 'Fragment'
+    jsxFactory: 'createElement',
+    jsxFragment: 'Fragment',
+    jsxInject: `import { createElement, Fragment } from 'frontend-hamroun'`
   },
 
   // Configure build
@@ -14,12 +15,17 @@ export default defineConfig({
     emptyOutDir: true,
     rollupOptions: {
       input: {
-        main: resolve(__dirname, 'public/index.html')
+        client: resolve(__dirname, 'src/client.js')
+      },
+      output: {
+        entryFileNames: 'assets/[name].js',
+        chunkFileNames: 'assets/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash].[ext]'
       }
     }
   },
 
-  // Resolve aliases
+  // Resolve aliases for better imports
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src')