frontend-hamroun 1.2.80 → 1.2.83

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

@@ -1,153 +0,0 @@
-import { useState, useEffect, jsx, Fragment } from 'frontend-hamroun';
-import { loadGoWasm, createTypedWasmFunction, goValues } from 'frontend-hamroun';
-
-export function GoWasmDemo() {
-  // Track loading state
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [wasm, setWasm] = useState(null);
-  
-  // Track calculation values
-  const [num1, setNum1] = useState(5);
-  const [num2, setNum2] = useState(7);
-  const [result, setResult] = useState(null);
-  
-  // Track JSON example
-  const [jsonInput, setJsonInput] = useState('{"name": "Frontend Hamroun", "version": "1.0"}');
-  const [jsonResult, setJsonResult] = useState(null);
-
-  // Load the WASM module when component mounts
-  useEffect(() => {
-    async function loadWasmModule() {
-      try {
-        setLoading(true);
-        console.log('Loading WASM module...');
-        
-        // Load WASM module using frontend-hamroun's loadGoWasm
-        const wasmInstance = await loadGoWasm('/wasm/example.wasm', {
-          debug: true, // Enable debug logging
-          goWasmPath: '/wasm/wasm_exec.js' // Path to Go's wasm_exec.js
-        });
-        
-        console.log('WASM module loaded successfully!', wasmInstance);
-        setWasm(wasmInstance);
-        
-        // Demonstrate calling a function right away
-        if (wasmInstance.functions.goAdd) {
-          const sum = wasmInstance.functions.goAdd(5, 7);
-          console.log('5 + 7 =', sum);
-          setResult(sum);
-        }
-        
-        setLoading(false);
-      } catch (err) {
-        console.error('Failed to load WASM module:', err);
-        setError(err.toString());
-        setLoading(false);
-      }
-    }
-    
-    loadWasmModule();
-    
-    // Cleanup function
-    return () => {
-      console.log('Cleaning up WASM resources...');
-      // Any cleanup needed for WASM resources
-    };
-  }, []); // Empty dependency array means this runs once on mount
-
-  // Function to calculate using WASM
-  const calculateResult = () => {
-    if (!wasm || !wasm.functions.goAdd) {
-      setError('WASM module not loaded or function not available');
-      return;
-    }
-    
-    try {
-      // Call the WASM function
-      const sum = wasm.functions.goAdd(parseInt(num1), parseInt(num2));
-      setResult(sum);
-      setError(null);
-    } catch (err) {
-      console.error('Error calling WASM function:', err);
-      setError('Error calling WASM function: ' + err);
-    }
-  };
-  
-  // Function to parse JSON using WASM
-  const parseJsonWithWasm = () => {
-    if (!wasm || !wasm.functions.goParseJSON) {
-      setError('WASM module not loaded or JSON parsing function not available');
-      return;
-    }
-    
-    try {
-      // Call the WASM function
-      const parsed = wasm.functions.goParseJSON(jsonInput);
-      setJsonResult(JSON.stringify(parsed, null, 2));
-      setError(null);
-    } catch (err) {
-      console.error('Error parsing JSON with WASM:', err);
-      setError('Error parsing JSON with WASM: ' + err);
-    }
-  };
-
-  // Render the component
-  return (
-    <div className="wasm-demo">
-      <h1>Go WebAssembly Demo</h1>
-      
-      {loading && <p>Loading WASM module...</p>}
-      
-      {error && (
-        <div className="error">
-          <h3>Error:</h3>
-          <pre>{error}</pre>
-        </div>
-      )}
-      
-      {wasm && !loading && (
-        <div className="demo-section">
-          <h2>WASM Addition</h2>
-          <div className="calculator">
-            <input 
-              type="number" 
-              value={num1} 
-              onChange={(e) => setNum1(e.target.value)} 
-            />
-            <span> + </span>
-            <input 
-              type="number" 
-              value={num2} 
-              onChange={(e) => setNum2(e.target.value)} 
-            />
-            <button onClick={calculateResult}>Calculate</button>
-            <span className="result">Result: {result}</span>
-          </div>
-          
-          <h2>WASM JSON Parsing</h2>
-          <div className="json-parser">
-            <textarea
-              rows="5"
-              value={jsonInput}
-              onChange={(e) => setJsonInput(e.target.value)}
-            />
-            <button onClick={parseJsonWithWasm}>Parse JSON</button>
-            {jsonResult && (
-              <pre className="json-result">{jsonResult}</pre>
-            )}
-          </div>
-          
-          <h2>Available WASM Functions</h2>
-          <ul>
-            {wasm && Object.keys(wasm.functions).map(funcName => (
-              <li key={funcName}>{funcName}</li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default GoWasmDemo;

package/templates/go-wasm-app/src/client.js

@@ -1,57 +0,0 @@
-import { hydrate } from 'frontend-hamroun';
-import App from './App.jsx';
-
-// Get initial state from server
-const initialState = window.__INITIAL_STATE__ || {
-  path: window.location.pathname,
-  ssrRendered: false,
-  wasmAvailable: false
-};
-
-// Simple client-side script for hydration
-console.log('Client-side script loaded');
-console.log('Initial state:', window.__INITIAL_STATE__);
-
-// Wait for DOMContentLoaded to ensure the DOM is ready
-document.addEventListener('DOMContentLoaded', () => {
-  // Hydrate the application
-  hydrate(<App initialState={initialState} />, document.getElementById('root'));
-  console.log('Client-side hydration complete');
-
-  if (window.__INITIAL_STATE__) {
-    console.log('Hydrating with initial state:', window.__INITIAL_STATE__);
-    
-    // For now, we'll just display a message that we've loaded on the client
-    const root = document.getElementById('root');
-    
-    // Add a "Client Hydrated" indicator
-    const clientIndicator = document.createElement('div');
-    clientIndicator.className = 'client-indicator';
-    clientIndicator.textContent = 'Client-Side Hydration Active';
-    clientIndicator.style.backgroundColor = '#4caf50';
-    clientIndicator.style.color = 'white';
-    clientIndicator.style.padding = '10px';
-    clientIndicator.style.borderRadius = '4px';
-    clientIndicator.style.margin = '10px 0';
-    clientIndicator.style.textAlign = 'center';
-    
-    root.appendChild(clientIndicator);
-
-    // Load WASM if needed
-    if (typeof window.Go !== 'undefined') {
-      console.log('Go WASM runtime detected, initializing WASM module');
-      
-      // This will be replaced with proper WASM loading in a future step
-      const wasmInfo = document.createElement('div');
-      wasmInfo.textContent = 'WASM runtime loaded successfully';
-      wasmInfo.style.backgroundColor = '#2196f3';
-      wasmInfo.style.color = 'white';
-      wasmInfo.style.padding = '10px';
-      wasmInfo.style.borderRadius = '4px';
-      wasmInfo.style.margin = '10px 0';
-      wasmInfo.style.textAlign = 'center';
-      
-      root.appendChild(wasmInfo);
-    }
-  }
-});

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

@@ -1,13 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,75 +0,0 @@
-//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

@@ -1,18 +0,0 @@
-{
-  "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

@@ -1,34 +0,0 @@
-import { defineConfig } from 'vite';
-import { resolve } from 'path';
-
-export default defineConfig({
-  // Configure JSX
-  esbuild: {
-    jsxFactory: 'createElement',
-    jsxFragment: 'Fragment',
-    jsxInject: `import { createElement, Fragment } from 'frontend-hamroun'`
-  },
-
-  // Configure build
-  build: {
-    outDir: 'dist',
-    emptyOutDir: true,
-    rollupOptions: {
-      input: {
-        client: resolve(__dirname, 'src/client.js')
-      },
-      output: {
-        entryFileNames: 'assets/[name].js',
-        chunkFileNames: 'assets/[name]-[hash].js',
-        assetFileNames: 'assets/[name]-[hash].[ext]'
-      }
-    }
-  },
-
-  // Resolve aliases for better imports
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, 'src')
-    }
-  }
-});