Go WebAssembly: Building High-Performance Web Applications

package main

import (
	"fmt"
)

// Simple function to demonstrate compilation
func add(a, b int) int {
	return a + b
}

func main() {
	result := add(5, 7)
	fmt.Println("5 + 7 =", result)
}

GOOS=js GOARCH=wasm go build -o main.wasm main.go

package main

import (
	"fmt"
	"reflect"
	"unsafe"
)

// WasmModuleHeader represents a simplified view of a WASM module header
type WasmModuleHeader struct {
	MagicNumber uint32 // Always 0x6d736100 (ASCII for "\0asm")
	Version     uint32 // Current version is 1
	// Followed by sections...
}

// WasmSection represents a section in a WASM module
type WasmSection struct {
	ID      byte
	Size    uint32
	Content []byte
}

// SectionNames maps section IDs to their names
var SectionNames = map[byte]string{
	0:  "Custom",
	1:  "Type",
	2:  "Import",
	3:  "Function",
	4:  "Table",
	5:  "Memory",
	6:  "Global",
	7:  "Export",
	8:  "Start",
	9:  "Element",
	10: "Code",
	11: "Data",
}

// Simplified demonstration of WASM structure analysis
func analyzeWasmStructure(wasmBytes []byte) {
	// Check magic number and version
	if len(wasmBytes) < 8 {
		fmt.Println("Invalid WASM binary: too short")
		return
	}
	
	header := (*WasmModuleHeader)(unsafe.Pointer(&wasmBytes[0]))
	fmt.Printf("Magic number: 0x%x\n", header.MagicNumber)
	fmt.Printf("Version: %d\n", header.Version)
	
	// In a real implementation, we would parse the sections here
	fmt.Println("WASM binary contains these sections:")
	
	// This is simplified - actual parsing would involve proper decoding
	offset := 8 // Skip header
	for offset < len(wasmBytes) {
		if offset+1 >= len(wasmBytes) {
			break
		}
		
		sectionID := wasmBytes[offset]
		offset++
		
		// Read section size (simplified - real implementation would use LEB128)
		size := uint32(wasmBytes[offset])
		offset++
		
		sectionName := "Unknown"
		if name, ok := SectionNames[sectionID]; ok {
			sectionName = name
		}
		
		fmt.Printf("- Section %d (%s): %d bytes\n", sectionID, sectionName, size)
		
		// Skip section content
		offset += int(size)
	}
}

// Note: This is a simplified demonstration and wouldn't work on actual WASM binaries
// without proper LEB128 decoding and section parsing

package main

import (
	"fmt"
	"runtime"
	"unsafe"
)

func main() {
	// Display Go runtime information in WASM environment
	fmt.Println("Go Version:", runtime.Version())
	fmt.Println("GOOS:", runtime.GOOS)
	fmt.Println("GOARCH:", runtime.GOARCH)
	fmt.Println("NumCPU:", runtime.NumCPU())
	fmt.Println("Compiler:", runtime.Compiler)
	
	// Memory model information
	var x int
	fmt.Printf("Size of int: %d bytes\n", unsafe.Sizeof(x))
	
	// Garbage collection still works in WASM
	memStats := runtime.MemStats{}
	runtime.ReadMemStats(&memStats)
	fmt.Printf("Allocated memory: %d bytes\n", memStats.Alloc)
	fmt.Printf("Total memory allocated: %d bytes\n", memStats.TotalAlloc)
	fmt.Printf("System memory: %d bytes\n", memStats.Sys)
	fmt.Printf("Number of GC cycles: %d\n", memStats.NumGC)
}

package main

import (
	"fmt"
)

// TinyGoExample demonstrates code that would be ideal for TinyGo compilation
// TinyGo produces much smaller WASM binaries than standard Go
func TinyGoExample() {
	fmt.Println("Hello from TinyGo!")
}

func main() {
	TinyGoExample()
	
	// Size optimization techniques:
	// 1. Use TinyGo for smaller binaries:
	//    tinygo build -o main.wasm -target wasm main.go
	
	// 2. Use build tags to exclude unnecessary packages
	
	// 3. Use the -ldflags="-s -w" option to strip debug information:
	//    GOOS=js GOARCH=wasm go build -ldflags="-s -w" -o main.wasm main.go
	
	// 4. Use wasm-opt from the Binaryen toolkit for post-compilation optimization:
	//    wasm-opt -Oz main.wasm -o optimized.wasm
	
	fmt.Println("Size optimization techniques for Go WASM:")
	fmt.Println("1. Standard Go WASM binary: ~2-5MB")
	fmt.Println("2. With stripped debug symbols: ~1-3MB")
	fmt.Println("3. TinyGo WASM binary: ~80-600KB")
	fmt.Println("4. TinyGo + wasm-opt: ~70-500KB")
}

package main

import (
	"fmt"
	"os"
	"os/exec"
	"path/filepath"
)

// setupWasmDevelopment demonstrates the setup process for Go WASM development
func setupWasmDevelopment() {
	// Step 1: Verify Go installation
	cmd := exec.Command("go", "version")
	output, err := cmd.Output()
	if err != nil {
		fmt.Println("Error: Go is not installed or not in PATH")
		return
	}
	fmt.Printf("Using %s\n", output)
	
	// Step 2: Create project structure
	projectStructure := `
project/
├── main.go         # Go source code
├── index.html      # HTML entry point
├── wasm_exec.js    # Go's WebAssembly support JS
└── server.go       # Simple HTTP server for testing
`
	fmt.Println("Create project structure:")
	fmt.Println(projectStructure)
	
	// Step 3: Copy wasm_exec.js from Go installation
	goRoot := os.Getenv("GOROOT")
	if goRoot == "" {
		fmt.Println("GOROOT environment variable not set")
		return
	}
	
	wasmExecPath := filepath.Join(goRoot, "misc", "wasm", "wasm_exec.js")
	fmt.Printf("Copy %s to your project directory\n", wasmExecPath)
	
	// Step 4: Create a simple HTTP server for testing
	serverCode := `
package main

import (
	"flag"
	"log"
	"net/http"
)

func main() {
	port := flag.String("port", "8080", "Port to serve on")
	dir := flag.String("dir", ".", "Directory to serve")
	flag.Parse()

	fs := http.FileServer(http.Dir(*dir))
	http.Handle("/", fs)

	log.Printf("Serving %s on HTTP port: %s\n", *dir, *port)
	log.Fatal(http.ListenAndServe(":"+*port, nil))
}
`
	fmt.Println("Create server.go with this content:")
	fmt.Println(serverCode)
	
	// Step 5: Compilation command
	fmt.Println("\nCompile your Go code to WebAssembly:")
	fmt.Println("GOOS=js GOARCH=wasm go build -o main.wasm main.go")
	
	// Step 6: Run the server
	fmt.Println("\nRun the server:")
	fmt.Println("go run server.go")
	
	fmt.Println("\nAccess your application at http://localhost:8080")
}

func main() {
	setupWasmDevelopment()
}

// main.go
package main

import (
	"fmt"
	"syscall/js"
)

// Function to be exported to JavaScript
func add(this js.Value, args []js.Value) interface{} {
	if len(args) != 2 {
		return "Error: Expected 2 arguments"
	}
	
	// Convert JS values to Go types
	a := args[0].Int()
	b := args[1].Int()
	
	// Perform calculation
	result := a + b
	
	// Return result to JavaScript
	return result
}

// Function to modify the DOM
func updateDOM(this js.Value, args []js.Value) interface{} {
	// Get the document object
	document := js.Global().Get("document")
	
	// Create a new paragraph element
	p := document.Call("createElement", "p")
	
	// Set its text content
	p.Set("textContent", "This paragraph was created by Go WebAssembly!")
	
	// Append it to the body
	document.Get("body").Call("appendChild", p)
	
	return nil
}

func main() {
	fmt.Println("Go WebAssembly Initialized")
	
	// Create a channel to keep the program running
	c := make(chan struct{}, 0)
	
	// Register functions to be called from JavaScript
	js.Global().Set("goAdd", js.FuncOf(add))
	js.Global().Set("goUpdateDOM", js.FuncOf(updateDOM))
	
	// Keep the program running
	<-c
}

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Go WebAssembly Example</title>
    <script src="wasm_exec.js"></script>
    <script>
        // Initialize Go WASM runtime
        const go = new Go();
        
        // Load and instantiate the WebAssembly module
        WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject)
            .then((result) => {
                // Start the Go WASM instance
                go.run(result.instance);
                
                // Now we can call Go functions
                console.log("2 + 3 =", goAdd(2, 3));
                
                // Add a button to call Go function
                const button = document.createElement("button");
                button.textContent = "Call Go Function";
                button.addEventListener("click", () => {
                    goUpdateDOM();
                });
                document.body.appendChild(button);
            })
            .catch(err => {
                console.error("Failed to load WASM:", err);
            });
    </script>
</head>
<body>
    <h1>Go WebAssembly Example</h1>
    <p>Open the browser console to see output from Go</p>
</body>
</html>

// data_processor.go
package main

import (
	"fmt"
	"math"
	"syscall/js"
)

// DataPoint represents a single data point
type DataPoint struct {
	X float64
	Y float64
}

// DataProcessor handles data processing operations
type DataProcessor struct {
	data []DataPoint
}

// NewDataProcessor creates a new data processor
func NewDataProcessor() *DataProcessor {
	return &DataProcessor{
		data: make([]DataPoint, 0),
	}
}

// AddPoint adds a data point
func (dp *DataProcessor) AddPoint(x, y float64) {
	dp.data = append(dp.data, DataPoint{X: x, Y: y})
}

// CalculateStatistics computes basic statistics on the data
func (dp *DataProcessor) CalculateStatistics() (min, max, avg, stdDev float64) {
	if len(dp.data) == 0 {
		return 0, 0, 0, 0
	}
	
	// Calculate min, max, and sum
	min = dp.data[0].Y
	max = dp.data[0].Y
	sum := 0.0
	
	for _, point := range dp.data {
		if point.Y < min {
			min = point.Y
		}
		if point.Y > max {
			max = point.Y
		}
		sum += point.Y
	}
	
	// Calculate average
	avg = sum / float64(len(dp.data))
	
	// Calculate standard deviation
	sumSquaredDiff := 0.0
	for _, point := range dp.data {
		diff := point.Y - avg
		sumSquaredDiff += diff * diff
	}
	
	stdDev = math.Sqrt(sumSquaredDiff / float64(len(dp.data)))
	
	return min, max, avg, stdDev
}

// ApplyTransformation applies a mathematical transformation to all data points
func (dp *DataProcessor) ApplyTransformation(transformFunc func(float64) float64) {
	for i := range dp.data {
		dp.data[i].Y = transformFunc(dp.data[i].Y)
	}
}

// GetDataAsJSArray returns the data as a JavaScript array
func (dp *DataProcessor) GetDataAsJSArray() js.Value {
	// Create a JavaScript array
	jsArray := js.Global().Get("Array").New(len(dp.data))
	
	// Populate the array with data points
	for i, point := range dp.data {
		jsPoint := js.Global().Get("Object").New()
		jsPoint.Set("x", point.X)
		jsPoint.Set("y", point.Y)
		jsArray.SetIndex(i, jsPoint)
	}
	
	return jsArray
}

// JavaScript wrapper functions
func jsAddPoint(this js.Value, args []js.Value) interface{} {
	if len(args) != 2 {
		return "Error: Expected 2 arguments (x, y)"
	}
	
	x := args[0].Float()
	y := args[1].Float()
	
	processor.AddPoint(x, y)
	return nil
}

func jsCalculateStatistics(this js.Value, args []js.Value) interface{} {
	min, max, avg, stdDev := processor.CalculateStatistics()
	
	result := js.Global().Get("Object").New()
	result.Set("min", min)
	result.Set("max", max)
	result.Set("average", avg)
	result.Set("standardDeviation", stdDev)
	
	return result
}

func jsApplyTransformation(this js.Value, args []js.Value) interface{} {
	if len(args) != 1 || !args[0].InstanceOf(js.Global().Get("Function")) {
		return "Error: Expected a function argument"
	}
	
	jsTransformFunc := args[0]
	
	// Create a Go function that calls the JavaScript function
	transformFunc := func(value float64) float64 {
		result := jsTransformFunc.Invoke(value)
		return result.Float()
	}
	
	processor.ApplyTransformation(transformFunc)
	return nil
}

func jsGetData(this js.Value, args []js.Value) interface{} {
	return processor.GetDataAsJSArray()
}

// Global processor instance
var processor *DataProcessor

func main() {
	fmt.Println("Data Processor WebAssembly Module Initialized")
	
	// Initialize the processor
	processor = NewDataProcessor()
	
	// Register JavaScript functions
	js.Global().Set("addDataPoint", js.FuncOf(jsAddPoint))
	js.Global().Set("calculateStatistics", js.FuncOf(jsCalculateStatistics))
	js.Global().Set("applyTransformation", js.FuncOf(jsApplyTransformation))
	js.Global().Set("getProcessedData", js.FuncOf(jsGetData))
	
	// Keep the program running
	<-make(chan struct{})
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Go WASM Data Processor</title>
    <script src="wasm_exec.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .chart-container { height: 400px; }
        .controls { margin: 20px 0; }
        .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }
        .stat-box { border: 1px solid #ddd; padding: 10px; border-radius: 4px; }
        .stat-value { font-size: 1.5em; font-weight: bold; }
    </style>
    <script>
        let chart;
        
        // Initialize Go WASM
        const go = new Go();
        WebAssembly.instantiateStreaming(fetch("data_processor.wasm"), go.importObject)
            .then((result) => {
                go.run(result.instance);
                initializeApp();
            });
        
        function initializeApp() {
            // Create chart
            const ctx = document.getElementById('dataChart').getContext('2d');
            chart = new Chart(ctx, {
                type: 'line',
                data: {
                    datasets: [{
                        label: 'Data Points',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        data: []
                    }]
                },
                options: {
                    scales: {
                        x: { type: 'linear', position: 'bottom' }
                    }
                }
            });
            
            // Add event listeners
            document.getElementById('addRandomData').addEventListener('click', addRandomData);
            document.getElementById('calculateStats').addEventListener('click', updateStatistics);
            document.getElementById('applySquareRoot').addEventListener('click', () => applyTransformation(Math.sqrt));
            document.getElementById('applySquare').addEventListener('click', () => applyTransformation(x => x * x));
        }
        
        function addRandomData() {
            const count = parseInt(document.getElementById('dataCount').value);
            
            for (let i = 0; i < count; i++) {
                const x = Math.random() * 100;
                const y = Math.random() * 100;
                addDataPoint(x, y);
            }
            
            updateChart();
            updateStatistics();
        }
        
        function addDataPoint(x, y) {
            // Call Go function to add data point
            addDataPoint(x, y);
        }
        
        function updateStatistics() {
            // Call Go function to calculate statistics
            const stats = calculateStatistics();
            
            document.getElementById('minValue').textContent = stats.min.toFixed(2);
            document.getElementById('maxValue').textContent = stats.max.toFixed(2);
            document.getElementById('avgValue').textContent = stats.average.toFixed(2);
            document.getElementById('stdDevValue').textContent = stats.standardDeviation.toFixed(2);
        }
        
        function applyTransformation(func) {
            // Call Go function to apply transformation
            applyTransformation(func);
            updateChart();
            updateStatistics();
        }
        
        function updateChart() {
            // Get data from Go
            const data = getProcessedData();
            
            // Update chart
            chart.data.datasets[0].data = data.map(point => ({
                x: point.x,
                y: point.y
            }));
            
            chart.update();
        }
    </script>
</head>
<body>
    <h1>Go WebAssembly Data Processor</h1>
    
    <div class="chart-container">
        <canvas id="dataChart"></canvas>
    </div>
    
    <div class="controls">
        <label for="dataCount">Number of random data points:</label>
        <input type="number" id="dataCount" value="50" min="1" max="1000">
        <button id="addRandomData">Add Random Data</button>
        <button id="calculateStats">Calculate Statistics</button>
        <button id="applySquareRoot">Apply Square Root</button>
        <button id="applySquare">Apply Square</button>
    </div>
    
    <div class="stats">
        <div class="stat-box">
            <div>Minimum</div>
            <div id="minValue" class="stat-value">0.00</div>
        </div>
        <div class="stat-box">
            <div>Maximum</div>
            <div id="maxValue" class="stat-value">0.00</div>
        </div>
        <div class="stat-box">
            <div>Average</div>
            <div id="avgValue" class="stat-value">0.00</div>
        </div>
        <div class="stat-box">
            <div>Std Deviation</div>
            <div id="stdDevValue" class="stat-value">0.00</div>
        </div>
    </div>
</body>
</html>

package main

import (
	"encoding/json"
	"fmt"
	"sync"
	"syscall/js"
)

// AppState represents the application state
type AppState struct {
	mu            sync.RWMutex
	counter       int
	items         []string
	isInitialized bool
	userData      map[string]interface{}
}

// Global state instance
var state = &AppState{
	counter:       0,
	items:         make([]string, 0),
	isInitialized: false,
	userData:      make(map[string]interface{}),
}

// Initialize the application state
func (s *AppState) Initialize(initialData js.Value) {
	s.mu.Lock()
	defer s.mu.Unlock()
	
	if initialData.Type() == js.TypeObject {
		// Extract counter if present
		if counterVal := initialData.Get("counter"); counterVal.Type() == js.TypeNumber {
			s.counter = counterVal.Int()
		}
		
		// Extract items if present
		if itemsVal := initialData.Get("items"); itemsVal.Type() == js.TypeObject && itemsVal.InstanceOf(js.Global().Get("Array")) {
			length := itemsVal.Length()
			s.items = make([]string, length)
			for i := 0; i < length; i++ {
				s.items[i] = itemsVal.Index(i).String()
			}
		}
		
		// Extract userData if present
		if userDataVal := initialData.Get("userData"); userDataVal.Type() == js.TypeObject {
			// Convert JavaScript object to Go map
			keys := js.Global().Get("Object").Call("keys", userDataVal)
			length := keys.Length()
			for i := 0; i < length; i++ {
				key := keys.Index(i).String()
				value := userDataVal.Get(key)
				
				// Handle different types
				switch value.Type() {
				case js.TypeBoolean:
					s.userData[key] = value.Bool()
				case js.TypeNumber:
					s.userData[key] = value.Float()
				case js.TypeString:
					s.userData[key] = value.String()
				default:
					// For complex objects, store as JSON string
					jsonStr := js.Global().Get("JSON").Call("stringify", value).String()
					s.userData[key] = jsonStr
				}
			}
		}
	}
	
	s.isInitialized = true
	fmt.Println("State initialized:", s)
}

// GetState returns the current state as a JavaScript object
func (s *AppState) GetState() js.Value {
	s.mu.RLock()
	defer s.mu.RUnlock()
	
	result := js.Global().Get("Object").New()
	result.Set("counter", s.counter)
	
	// Convert items to JS array
	itemsArray := js.Global().Get("Array").New(len(s.items))
	for i, item := range s.items {
		itemsArray.SetIndex(i, item)
	}
	result.Set("items", itemsArray)
	
	// Convert userData to JS object
	userData := js.Global().Get("Object").New()
	for k, v := range s.userData {
		switch val := v.(type) {
		case string:
			userData.Set(k, val)
		case int:
			userData.Set(k, val)
		case float64:
			userData.Set(k, val)
		case bool:
			userData.Set(k, val)
		default:
			// Try to convert to JSON string
			if jsonBytes, err := json.Marshal(val); err == nil {
				userData.Set(k, string(jsonBytes))
			} else {
				userData.Set(k, fmt.Sprintf("%v", val))
			}
		}
	}
	result.Set("userData", userData)
	
	return result
}

// IncrementCounter increases the counter and returns the new value
func (s *AppState) IncrementCounter() int {
	s.mu.Lock()
	defer s.mu.Unlock()
	
	s.counter++
	return s.counter
}

// AddItem adds an item to the items list
func (s *AppState) AddItem(item string) {
	s.mu.Lock()
	defer s.mu.Unlock()
	
	s.items = append(s.items, item)
}

// SetUserData sets a value in the userData map
func (s *AppState) SetUserData(key string, value interface{}) {
	s.mu.Lock()
	defer s.mu.Unlock()
	
	s.userData[key] = value
}

// JavaScript wrapper functions
func jsInitializeState(this js.Value, args []js.Value) interface{} {
	if len(args) > 0 {
		state.Initialize(args[0])
	} else {
		state.Initialize(js.Null())
	}
	return nil
}

func jsGetState(this js.Value, args []js.Value) interface{} {
	return state.GetState()
}

func jsIncrementCounter(this js.Value, args []js.Value) interface{} {
	return state.IncrementCounter()
}

func jsAddItem(this js.Value, args []js.Value) interface{} {
	if len(args) > 0 && args[0].Type() == js.TypeString {
		state.AddItem(args[0].String())
	}
	return nil
}

func jsSetUserData(this js.Value, args []js.Value) interface{} {
	if len(args) >= 2 && args[0].Type() == js.TypeString {
		key := args[0].String()
		value := args[1]
		
		// Convert JS value to Go value
		var goValue interface{}
		
		switch value.Type() {
		case js.TypeBoolean:
			goValue = value.Bool()
		case js.TypeNumber:
			goValue = value.Float()
		case js.TypeString:
			goValue = value.String()
		default:
			// For complex objects, store as JSON string
			jsonStr := js.Global().Get("JSON").Call("stringify", value).String()
			goValue = jsonStr
		}
		
		state.SetUserData(key, goValue)
	}
	return nil
}

func main() {
	fmt.Println("State Management WebAssembly Module Initialized")
	
	// Register JavaScript functions
	js.Global().Set("initializeState", js.FuncOf(jsInitializeState))
	js.Global().Set("getState", js.FuncOf(jsGetState))
	js.Global().Set("incrementCounter", js.FuncOf(jsIncrementCounter))
	js.Global().Set("addItem", js.FuncOf(jsAddItem))
	js.Global().Set("setUserData", js.FuncOf(jsSetUserData))
	
	// Keep the program running
	<-make(chan struct{})
}

package main

import (
	"fmt"
	"syscall/js"
)

// Component represents a UI component with its own state and behavior
type Component interface {
	Render() js.Value
	HandleEvent(event string, args []js.Value) interface{}
	Mount(parent js.Value)
	Unmount()
}

// BaseComponent provides common functionality for components
type BaseComponent struct {
	ID       string
	Element  js.Value
	Children []Component
}

// Counter is a simple counter component
type Counter struct {
	BaseComponent
	Count int
}

// NewCounter creates a new counter component
func NewCounter(id string) *Counter {
	return &Counter{
		BaseComponent: BaseComponent{
			ID:       id,
			Children: make([]Component, 0),
		},
		Count: 0,
	}
}

// Render creates the DOM elements for the counter
func (c *Counter) Render() js.Value {
	document := js.Global().Get("document")
	
	// Create container div
	div := document.Call("createElement", "div")
	div.Set("id", c.ID)
	
	// Create count display
	countDisplay := document.Call("createElement", "span")
	countDisplay.Set("textContent", fmt.Sprintf("Count: %d", c.Count))
	countDisplay.Set("id", c.ID+"-display")
	
	// Create increment button
	incButton := document.Call("createElement", "button")
	incButton.Set("textContent", "Increment")
	incButton.Set("id", c.ID+"-increment")
	
	// Add event listener
	incButton.Call("addEventListener", "click", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		return c.HandleEvent("increment", args)
	}))
	
	// Assemble component
	div.Call("appendChild", countDisplay)
	div.Call("appendChild", document.Call("createElement", "br"))
	div.Call("appendChild", incButton)
	
	c.Element = div
	return div
}

// HandleEvent handles component events
func (c *Counter) HandleEvent(event string, args []js.Value) interface{} {
	switch event {
	case "increment":
		c.Count++
		// Update the display
		document := js.Global().Get("document")
		display := document.Call("getElementById", c.ID+"-display")
		if display.Truthy() {
			display.Set("textContent", fmt.Sprintf("Count: %d", c.Count))
		}
	}
	return nil
}

// Mount adds the component to the DOM
func (c *Counter) Mount(parent js.Value) {
	element := c.Render()
	parent.Call("appendChild", element)
}

// Unmount removes the component from the DOM
func (c *Counter) Unmount() {
	if c.Element.Truthy() {
		c.Element.Call("remove")
	}
}

// TodoList is a more complex component
type TodoList struct {
	BaseComponent
	Items []string
}

// NewTodoList creates a new todo list component
func NewTodoList(id string) *TodoList {
	return &TodoList{
		BaseComponent: BaseComponent{
			ID:       id,
			Children: make([]Component, 0),
		},
		Items: make([]string, 0),
	}
}

// Render creates the DOM elements for the todo list
func (t *TodoList) Render() js.Value {
	document := js.Global().Get("document")
	
	// Create container div
	div := document.Call("createElement", "div")
	div.Set("id", t.ID)
	
	// Create title
	title := document.Call("createElement", "h3")
	title.Set("textContent", "Todo List")
	
	// Create input field
	input := document.Call("createElement", "input")
	input.Set("type", "text")
	input.Set("id", t.ID+"-input")
	input.Set("placeholder", "Add new item...")
	
	// Create add button
	addButton := document.Call("createElement", "button")
	addButton.Set("textContent", "Add")
	addButton.Set("id", t.ID+"-add")
	
	// Add event listener
	addButton.Call("addEventListener", "click", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		return t.HandleEvent("add", args)
	}))
	
	// Create list
	list := document.Call("createElement", "ul")
	list.Set("id", t.ID+"-list")
	
	// Add existing items
	for _, item := range t.Items {
		li := document.Call("createElement", "li")
		li.Set("textContent", item)
		list.Call("appendChild", li)
	}
	
	// Assemble component
	div.Call("appendChild", title)
	div.Call("appendChild", input)
	div.Call("appendChild", addButton)
	div.Call("appendChild", list)
	
	t.Element = div
	return div
}

// HandleEvent handles component events
func (t *TodoList) HandleEvent(event string, args []js.Value) interface{} {
	switch event {
	case "add":
		document := js.Global().Get("document")
		input := document.Call("getElementById", t.ID+"-input")
		if input.Truthy() {
			text := input.Get("value").String()
			if text != "" {
				// Add to items
				t.Items = append(t.Items, text)
				
				// Add to DOM
				list := document.Call("getElementById", t.ID+"-list")
				if list.Truthy() {
					li := document.Call("createElement", "li")
					li.Set("textContent", text)
					list.Call("appendChild", li)
				}
				
				// Clear input
				input.Set("value", "")
			}
		}
	}
	return nil
}

// Mount adds the component to the DOM
func (t *TodoList) Mount(parent js.Value) {
	element := t.Render()
	parent.Call("appendChild", element)
}

// Unmount removes the component from the DOM
func (t *TodoList) Unmount() {
	if t.Element.Truthy() {
		t.Element.Call("remove")
	}
}

// Application is the main application component
type Application struct {
	BaseComponent
	Counter  *Counter
	TodoList *TodoList
}

// NewApplication creates a new application
func NewApplication(id string) *Application {
	app := &Application{
		BaseComponent: BaseComponent{
			ID:       id,
			Children: make([]Component, 0),
		},
	}
	
	// Create child components
	app.Counter = NewCounter(id + "-counter")
	app.TodoList = NewTodoList(id + "-todo")
	
	// Add to children
	app.Children = append(app.Children, app.Counter)
	app.Children = append(app.Children, app.TodoList)
	
	return app
}

// Render creates the DOM elements for the application
func (a *Application) Render() js.Value {
	document := js.Global().Get("document")
	
	// Create container div
	div := document.Call("createElement", "div")
	div.Set("id", a.ID)
	
	// Create title
	title := document.Call("createElement", "h2")
	title.Set("textContent", "Go WebAssembly Component Demo")
	
	// Assemble component
	div.Call("appendChild", title)
	
	a.Element = div
	return div
}

// HandleEvent handles component events
func (a *Application) HandleEvent(event string, args []js.Value) interface{} {
	// No events at application level
	return nil
}

// Mount adds the application and its children to the DOM
func (a *Application) Mount(parent js.Value) {
	element := a.Render()
	parent.Call("appendChild", element)
	
	// Mount children
	for _, child := range a.Children {
		child.Mount(element)
	}
}

// Unmount removes the application and its children from the DOM
func (a *Application) Unmount() {
	// Unmount children first
	for _, child := range a.Children {
		child.Unmount()
	}
	
	// Unmount self
	if a.Element.Truthy() {
		a.Element.Call("remove")
	}
}

// JavaScript wrapper functions
func jsCreateApplication(this js.Value, args []js.Value) interface{} {
	id := "wasm-app"
	if len(args) > 0 && args[0].Type() == js.TypeString {
		id = args[0].String()
	}
	
	app := NewApplication(id)
	
	// Get the mount point
	document := js.Global().Get("document")
	mountPoint := document.Get("body")
	if len(args) > 1 && args[1].Type() == js.TypeString {
		mountPointID := args[1].String()
		element := document.Call("getElementById", mountPointID)
		if element.Truthy() {
			mountPoint = element
		}
	}
	
	// Mount the application
	app.Mount(mountPoint)
	
	return nil
}

func main() {
	fmt.Println("Component Architecture WebAssembly Module Initialized")
	
	// Register JavaScript functions
	js.Global().Set("createApplication", js.FuncOf(jsCreateApplication))
	
	// Keep the program running
	<-make(chan struct{})
}

package main

import (
	"fmt"
	"syscall/js"
)

// CallbackRegistry manages JavaScript callbacks from Go
type CallbackRegistry struct {
	callbacks map[string]js.Func
}

// NewCallbackRegistry creates a new callback registry
func NewCallbackRegistry() *CallbackRegistry {
	return &CallbackRegistry{
		callbacks: make(map[string]js.Func),
	}
}

// Register adds a JavaScript callback function
func (r *CallbackRegistry) Register(name string, callback js.Func) {
	// Release any existing callback with the same name
	if existing, ok := r.callbacks[name]; ok {
		existing.Release()
	}
	
	r.callbacks[name] = callback
}

// Call invokes a registered callback
func (r *CallbackRegistry) Call(name string, args ...interface{}) js.Value {
	if callback, ok := r.callbacks[name]; ok {
		// Convert Go values to JS values
		jsArgs := make([]interface{}, len(args))
		for i, arg := range args {
			jsArgs[i] = arg
		}
		
		return callback.Invoke(jsArgs...)
	}
	
	fmt.Printf("Warning: Callback '%s' not registered\n", name)
	return js.Undefined()
}

// Release releases all callbacks
func (r *CallbackRegistry) Release() {
	for name, callback := range r.callbacks {
		callback.Release()
		delete(r.callbacks, name)
	}
}

// Global callback registry
var registry = NewCallbackRegistry()

// RegisterCallback registers a JavaScript function as a callback
func RegisterCallback(this js.Value, args []js.Value) interface{} {
	if len(args) != 2 || args[0].Type() != js.TypeString || !args[1].InstanceOf(js.Global().Get("Function")) {
		return "Error: Expected (string, function) arguments"
	}
	
	name := args[0].String()
	callback := js.FuncOf(func(this js.Value, callbackArgs []js.Value) interface{} {
		// Convert args to a slice of interface{} for easier handling
		goArgs := make([]interface{}, len(callbackArgs))
		for i, arg := range callbackArgs {
			// Convert JS values to Go values based on type
			switch arg.Type() {
			case js.TypeBoolean:
				goArgs[i] = arg.Bool()
			case js.TypeNumber:
				goArgs[i] = arg.Float()
			case js.TypeString:
				goArgs[i] = arg.String()
			default:
				goArgs[i] = arg
			}
		}
		
		// Call the JavaScript function
		return args[1].Invoke(goArgs...)
	})
	
	registry.Register(name, callback)
	return nil
}

// CallJavaScript calls a registered JavaScript function
func CallJavaScript(name string, args ...interface{}) js.Value {
	return registry.Call(name, args...)
}

// Example Go function that will call back to JavaScript
func ProcessDataWithCallback(this js.Value, args []js.Value) interface{} {
	if len(args) < 1 {
		return "Error: Expected at least one argument"
	}
	
	// Process the data in Go
	data := args[0]
	
	// Prepare result object
	result := js.Global().Get("Object").New()
	
	if data.Type() == js.TypeObject && data.InstanceOf(js.Global().Get("Array")) {
		length := data.Length()
		sum := 0.0
		
		// Calculate sum
		for i := 0; i < length; i++ {
			sum += data.Index(i).Float()
		}
		
		// Calculate average
		avg := sum / float64(length)
		
		// Set properties on result object
		result.Set("sum", sum)
		result.Set("average", avg)
		result.Set("count", length)
		
		// Call back to JavaScript with the result
		CallJavaScript("onProcessingComplete", result)
	}
	
	return result
}

// Example of passing functions from Go to JavaScript
func CreateCalculator(this js.Value, args []js.Value) interface{} {
	// Create a calculator object
	calculator := js.Global().Get("Object").New()
	
	// Add methods to the calculator
	calculator.Set("add", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		if len(args) < 2 {
			return "Error: Expected two arguments"
		}
		return args[0].Float() + args[1].Float()
	}))
	
	calculator.Set("subtract", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		if len(args) < 2 {
			return "Error: Expected two arguments"
		}
		return args[0].Float() - args[1].Float()
	}))
	
	calculator.Set("multiply", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		if len(args) < 2 {
			return "Error: Expected two arguments"
		}
		return args[0].Float() * args[1].Float()
	}))
	
	calculator.Set("divide", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		if len(args) < 2 {
			return "Error: Expected two arguments"
		}
		if args[1].Float() == 0 {
			return "Error: Division by zero"
		}
		return args[0].Float() / args[1].Float()
	}))
	
	return calculator
}

func main() {
	fmt.Println("JavaScript Interoperability WebAssembly Module Initialized")
	
	// Register functions to be called from JavaScript
	js.Global().Set("registerCallback", js.FuncOf(RegisterCallback))
	js.Global().Set("processDataWithCallback", js.FuncOf(ProcessDataWithCallback))
	js.Global().Set("createCalculator", js.FuncOf(CreateCalculator))
	
	// Keep the program running
	<-make(chan struct{})
}

// Register a callback function
registerCallback("onProcessingComplete", function(result) {
    console.log("Processing complete!");
    console.log("Sum:", result.sum);
    console.log("Average:", result.average);
    console.log("Count:", result.count);
});

// Call Go function with data
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = processDataWithCallback(data);

// Create and use a calculator object from Go
const calculator = createCalculator();
console.log("5 + 3 =", calculator.add(5, 3));
console.log("10 - 4 =", calculator.subtract(10, 4));
console.log("6 * 7 =", calculator.multiply(6, 7));
console.log("20 / 5 =", calculator.divide(20, 5));

package main

import (
	"fmt"
	"syscall/js"
	"time"
)

// DOM manipulation functions
func CreateElement(tagName string) js.Value {
	document := js.Global().Get("document")
	return document.Call("createElement", tagName)
}

func GetElementById(id string) js.Value {
	document := js.Global().Get("document")
	return document.Call("getElementById", id)
}

func QuerySelector(selector string) js.Value {
	document := js.Global().Get("document")
	return document.Call("querySelector", selector)
}

func QuerySelectorAll(selector string) js.Value {
	document := js.Global().Get("document")
	return document.Call("querySelectorAll", selector)
}

// Example: Create a canvas-based animation
func CreateCanvasAnimation(this js.Value, args []js.Value) interface{} {
	// Get container element
	containerId := "animation-container"
	if len(args) > 0 && args[0].Type() == js.TypeString {
		containerId = args[0].String()
	}
	
	container := GetElementById(containerId)
	if !container.Truthy() {
		fmt.Println("Container element not found")
		return nil
	}
	
	// Create canvas element
	canvas := CreateElement("canvas")
	canvas.Set("width", 400)
	canvas.Set("height", 300)
	canvas.Set("style", "border: 1px solid black;")
	
	// Append canvas to container
	container.Call("appendChild", canvas)
	
	// Get canvas context
	ctx := canvas.Call("getContext", "2d")
	
	// Animation variables
	x := 50.0
	y := 50.0
	dx := 2.0
	dy := 1.5
	radius := 20.0
	
	// Create animation frame callback
	var animationCallback js.Func
	animationCallback = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		// Clear canvas
		ctx.Call("clearRect", 0, 0, canvas.Get("width").Int(), canvas.Get("height").Int())
		
		// Draw circle
		ctx.Call("beginPath")
		ctx.Call("arc", x, y, radius, 0, 2*3.14159)
		ctx.Set("fillStyle", "blue")
		ctx.Call("fill")
		ctx.Call("closePath")
		
		// Update position
		x += dx
		y += dy
		
		// Bounce off walls
		if x+radius > canvas.Get("width").Float() || x-radius < 0 {
			dx = -dx
		}
		if y+radius > canvas.Get("height").Float() || y-radius < 0 {
			dy = -dy
		}
		
		// Request next frame
		js.Global().Call("requestAnimationFrame", animationCallback)
		return nil
	})
	
	// Start animation
	js.Global().Call("requestAnimationFrame", animationCallback)
	
	// Return a function to stop the animation
	return js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		animationCallback.Release()
		return nil
	})
}

// Example: Working with browser APIs
func FetchData(this js.Value, args []js.Value) interface{} {
	if len(args) < 2 || args[0].Type() != js.TypeString || !args[1].InstanceOf(js.Global().Get("Function")) {
		return "Error: Expected (url, callback) arguments"
	}
	
	url := args[0].String()
	callback := args[1]
	
	// Create a Promise
	fetch := js.Global().Call("fetch", url)
	
	// Handle response
	then := fetch.Call("then", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		response := args[0]
		return response.Call("json")
	}))
	
	// Handle JSON data
	then.Call("then", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		data := args[0]
		callback.Invoke(data)
		return nil
	}))
	
	// Handle errors
	then.Call("catch", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		err := args[0]
		fmt.Println("Fetch error:", err.Get("message").String())
		return nil
	}))
	
	return nil
}

// Example: Using browser storage
func StorageExample(this js.Value, args []js.Value) interface{} {
	// Get localStorage
	localStorage := js.Global().Get("localStorage")
	
	// Set item
	localStorage.Call("setItem", "goWasmTimestamp", time.Now().String())
	
	// Get item
	timestamp := localStorage.Call("getItem", "goWasmTimestamp").String()
	fmt.Println("Stored timestamp:", timestamp)
	
	// Create a result object
	result := js.Global().Get("Object").New()
	result.Set("timestamp", timestamp)
	result.Set("storageAvailable", true)
	
	return result
}

func main() {
	fmt.Println("DOM and Browser API WebAssembly Module Initialized")
	
	// Register functions to be called from JavaScript
	js.Global().Set("createCanvasAnimation", js.FuncOf(CreateCanvasAnimation))
	js.Global().Set("fetchData", js.FuncOf(FetchData))
	js.Global().Set("storageExample", js.FuncOf(StorageExample))
	
	// Keep the program running
	<-make(chan struct{})
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Go WASM DOM Example</title>
    <script src="wasm_exec.js"></script>
    <script>
        // Initialize Go WASM
        const go = new Go();
        WebAssembly.instantiateStreaming(fetch("dom_api.wasm"), go.importObject)
            .then((result) => {
                go.run(result.instance);
                
                // Create animation
                const stopAnimation = createCanvasAnimation("animation-container");
                
                // Fetch data example
                fetchData("https://jsonplaceholder.typicode.com/todos/1", function(data) {
                    console.log("Fetched data:", data);
                    document.getElementById("fetch-result").textContent =
                        JSON.stringify(data, null, 2);
                });
                
                // Storage example
                const storageResult = storageExample();
                document.getElementById("storage-result").textContent =
                    "Timestamp: " + storageResult.timestamp;
                
                // Add stop button functionality
                document.getElementById("stop-button").addEventListener("click", function() {
                    stopAnimation();
                    this.disabled = true;
                });
            });
    </script>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .section { margin: 20px 0; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
        pre { background-color: #f5f5f5; padding: 10px; border-radius: 4px; overflow: auto; }
    </style>
</head>
<body>
    <h1>Go WebAssembly DOM and Browser API Examples</h1>
    
    <div class="section">
        <h2>Canvas Animation</h2>
        <div id="animation-container"></div>
        <button id="stop-button">Stop Animation</button>
    </div>
    
    <div class="section">
        <h2>Fetch API Example</h2>
        <pre id="fetch-result">Loading...</pre>
    </div>
    
    <div class="section">
        <h2>Storage API Example</h2>
        <div id="storage-result"></div>
    </div>
</body>
</html>

This component architecture demonstrates how to structure larger WebAssembly applications using a component-based approach similar to modern JavaScript frameworks.

---

### JavaScript Interoperability

One of the most powerful aspects of WebAssembly is its ability to interoperate with JavaScript. This section explores advanced techniques for seamless integration between Go and JavaScript.

#### Bidirectional Function Calls

Effective communication between Go and JavaScript is essential for WebAssembly applications:

```go
package main

import (
	"fmt"
	"syscall/js"
)

// CallbackRegistry manages JavaScript callbacks from Go
type CallbackRegistry struct {
	callbacks map[string]js.Func
}

// NewCallbackRegistry creates a new callback registry
func NewCallbackRegistry() *CallbackRegistry {
	return &CallbackRegistry{
		callbacks: make(map[string]js.Func),
	}
}

// Register adds a JavaScript callback function
func (r *CallbackRegistry) Register(name string, callback js.Func) {
	// Release any existing callback with the same name
	if existing, ok := r.callbacks[name]; ok {
		existing.Release()
	}
	
	r.callbacks[name] = callback
}

// Call invokes a registered callback
func (r *CallbackRegistry) Call(name string, args ...interface{}) js.Value {
	if callback, ok := r.callbacks[name]; ok {
		// Convert Go values to JS values
		jsArgs := make([]interface{}, len(args))
		for i, arg := range args {
			jsArgs[i] = arg
		}
		
		return callback.Invoke(jsArgs...)
	}
	
	fmt.Printf("Warning: Callback '%s' not registered\n", name)
	return js.Undefined()
}

// Release releases all callbacks
func (r *CallbackRegistry) Release() {
	for name, callback := range r.callbacks {
		callback.Release()
		delete(r.callbacks, name)
	}
}

// Global callback registry
var registry = NewCallbackRegistry()

// RegisterCallback registers a JavaScript function as a callback
func RegisterCallback(this js.Value, args []js.Value) interface{} {
	if len(args) != 2 || args[0].Type() != js.TypeString || !args[1].InstanceOf(js.Global().Get("Function")) {
		return "Error: Expected (string, function) arguments"
	}
	
	name := args[0].String()
	callback := js.FuncOf(func(this js.Value, callbackArgs []js.Value) interface{} {
		// Convert args to a slice of interface{} for easier handling
		goArgs := make([]interface{}, len(callbackArgs))
		for i, arg := range callbackArgs {
			// Convert JS values to Go values based on type
			switch arg.Type() {
			case js.TypeBoolean:
				goArgs[i] = arg.Bool()
			case js.TypeNumber:
				goArgs[i] = arg.Float()
			case js.TypeString:
				goArgs[i] = arg.String()
			default:
				goArgs[i] = arg
			}
		}
		
		// Call the JavaScript function
		return args[1].Invoke(goArgs...)
	})
	
	registry.Register(name, callback)
	return nil
}

// CallJavaScript calls a registered JavaScript function
func CallJavaScript(name string, args ...interface{}) js.Value {
	return registry.Call(name, args...)
}

// Example Go function that will call back to JavaScript
func ProcessDataWithCallback(this js.Value, args []js.Value) interface{} {
	if len(args) < 1 {
		return "Error: Expected at least one argument"
	}
	
	// Process the data in Go
	data := args[0]
	
	// Prepare result object
	result := js.Global().Get("Object").New()
	
	if data.Type() == js.TypeObject && data.InstanceOf(js.Global().Get("Array")) {
		length := data.Length()
		sum := 0.0
		
		// Calculate sum
		for i := 0; i < length; i++ {
			sum += data.Index(i).Float()
		}
		
		// Calculate average
		avg := sum / float64(length)
		
		// Set properties on result object
		result.Set("sum", sum)
		result.Set("average", avg)
		result.Set("count", length)
		
		// Call back to JavaScript with the result
		CallJavaScript("onProcessingComplete", result)
	}
	
	return result
}

// Example of passing functions from Go to JavaScript
func CreateCalculator(this js.Value, args []js.Value) interface{} {
	// Create a calculator object
	calculator := js.Global().Get("Object").New()
	
	// Add methods to the calculator
	calculator.Set("add", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		if len(args) < 2 {
			return "Error: Expected two arguments"
		}
		return args[0].Float() + args[1].Float()
	}))
	
	calculator.Set("subtract", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		if len(args) < 2 {
			return "Error: Expected two arguments"
		}
		return args[0].Float() - args[1].Float()
	}))
	
	calculator.Set("multiply", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		if len(args) < 2 {
			return "Error: Expected two arguments"
		}
		return args[0].Float() * args[1].Float()
	}))
	
	calculator.Set("divide", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		if len(args) < 2 {
			return "Error: Expected two arguments"
		}
		if args[1].Float() == 0 {
			return "Error: Division by zero"
		}
		return args[0].Float() / args[1].Float()
	}))
	
	return calculator
}

func main() {
	fmt.Println("JavaScript Interoperability WebAssembly Module Initialized")
	
	// Register functions to be called from JavaScript
	js.Global().Set("registerCallback", js.FuncOf(RegisterCallback))
	js.Global().Set("processDataWithCallback", js.FuncOf(ProcessDataWithCallback))
	js.Global().Set("createCalculator", js.FuncOf(CreateCalculator))
	
	// Keep the program running
	<-make(chan struct{})
}