Getting react working

Author: grantnelson-wf

playground/internal/react/component.go

@@ -0,0 +1,70 @@
+package react
+
+import (
+	"errors"
+	"reflect"
+
+	"github.com/gopherjs/gopherjs/js"
+)
+
+type (
+	// Component is a React component that can be rendered.
+	Component struct{ *js.Object }
+
+	// State represents the state of a React component.
+	// It can be a map, a struct, or a pointer to a struct.
+	State any
+
+	// Renderable is an interface for types that can render React nodes.
+	// This is used to let the Component call the Render method
+	// in the "extending" struct.
+	Renderable interface{ Render() Node }
+)
+
+func NewComponent(props Props, r Renderable, initialState State) *Component {
+	c := &Component{Object: react().Get(`Component`).New(props)}
+	c.Set(`render`, func() Node { return r.Render() })
+	c.Set(`state`, stateToMap(initialState))
+	return c
+}
+
+func (c *Component) Render() Node {
+	return c.Call(`render`)
+}
+
+func (c *Component) GetState(name string) *js.Object {
+	return c.Get(`state`).Get(`state`)
+}
+
+func (c *Component) SetState(state State) {
+	c.Call(`setState`, stateToMap(state))
+}
+
+func stateToMap(v State) map[string]any {
+	if v == nil {
+		return nil
+	}
+	r := reflect.ValueOf(v)
+	if r.Kind() == reflect.Ptr {
+		r = r.Elem()
+	}
+	m := make(map[string]any)
+	switch r.Kind() {
+	case reflect.Map:
+		for _, key := range r.MapKeys() {
+			m[key.String()] = r.MapIndex(key).Interface()
+		}
+	case reflect.Struct:
+		t := r.Type()
+		for i := 0; i < r.NumField(); i++ {
+			name := t.Field(i).Name
+			if tag := t.Field(i).Tag.Get(`js`); tag != `` {
+				name = tag
+			}
+			m[name] = r.Field(i).Interface()
+		}
+	default:
+		panic(errors.New(`states must be a map, a struct, or a pointer to a struct`))
+	}
+	return m
+}

playground/internal/react/elements.go

@@ -0,0 +1,67 @@
+package react
+
+import "github.com/gopherjs/gopherjs/js"
+
+func Fragment(children ...Node) *Element {
+	args := []any{react().Get(`Fragment`), nil}
+	for _, c := range children {
+		args = append(args, checkNode(c))
+	}
+	return &Element{Object: react().Call(`createElement`, args...)}
+}
+
+func Div(props Props, children ...Node) *Element {
+	return CreateElement(`div`, props, children...)
+}
+
+func Span(props Props, children ...Node) *Element {
+	return CreateElement(`span`, props, children...)
+}
+
+func Button(value string, props Props, onClick func()) *Element {
+	props[`value`] = value
+	props[`type`] = `button`
+	props[`onClick`] = onClick
+	return CreateElement(`input`, props)
+}
+
+type Counter struct {
+	*Component
+}
+
+func (c *Counter) handleNameChange(e *js.Object) {
+	c.SetState(map[string]any{
+		`name`: e.Get(`target`).Get(`value`).String(),
+	})
+}
+
+func (c *Counter) handleAgeChange() {
+	c.SetState(map[string]any{
+		`age`: c.GetState(`age`).Int() + 1,
+	})
+}
+
+func (c *Counter) Render() Node {
+	return Fragment(
+		CreateElement(`input`, Props{
+			`value`:    c.GetState(`name`).String(),
+			`onChange`: c.handleNameChange,
+		}),
+		CreateElement(`input`, Props{
+			`type`:    `button`,
+			`value`:   `Increment age`,
+			`onClick`: c.handleAgeChange,
+		}),
+		CreateElement(`p`, nil,
+			`Hello, `, c.GetState(`name`).String(), `. You are `, c.GetState(`age`).Int(), `.`),
+	)
+}
+
+func NewCounter() *Counter {
+	c := &Counter{}
+	c.Component = NewComponent(Props{}, c, map[string]any{
+		`name`: `Taylor`,
+		`age`:  42,
+	})
+	return c
+}

playground/internal/react/binding.go playground/internal/react/react.goplayground/internal/react/binding.go renamed to playground/internal/react/react.go

@@ -1,11 +1,16 @@
 package react
 
-import "github.com/gopherjs/gopherjs/js"
+import (
+	"fmt"
+
+	"github.com/gopherjs/gopherjs/js"
+)
 
 type (
 	// Node is a React node that can be displayed.
 	// This will usually be a react element constructed with CreateElement(),
-	// a ComponentFunc, a string, a number, null, or undefined.
+	// a string, a number, null, or undefined.
+	// Node may be a slice of Nodes as well.
 	Node any
 
 	// Root is a React root created with CreateRoot().
@@ -33,10 +38,33 @@ func CreateRoot(id string) *Root {
 }
 
 func (r *Root) Render(n Node) {
-	r.Call(`render`, n)
+	r.Call(`render`, checkNode(n))
 }
 
-func CreateElement(typ string, props Props, children ...any) *Element {
-	args := append([]any{typ, props}, children...)
+func CreateElement(typ string, props Props, children ...Node) *Element {
+	args := []any{typ, props}
+	for _, c := range children {
+		args = append(args, checkNode(c))
+	}
 	return &Element{Object: react().Call(`createElement`, args...)}
 }
+
+func checkNode(n Node) Node {
+	switch c := n.(type) {
+	case Renderable:
+		return &Element{Object: react().Call(`createElement`, c.Render)}
+	case *Element, string, int, float64:
+		return c
+	default:
+		panic(fmt.Errorf(`unsupported child type %T`, c))
+	}
+}
+
+func SimpleElement() *Element {
+	c := react().Get(`Component`).New()
+	c.Set(`render`, func() Node {
+		return CreateElement(`div`, nil, `Hello World!`)
+	})
+
+	return &Element{Object: react().Call(`createElement`, c.Get(`render`))}
+}

playground/playground.go

@@ -1,32 +1,25 @@
 package main
 
 import (
-	_ "embed"
-
-	"github.com/neelance/go-angularjs"
-
-	"github.com/gopherjs/gopherjs.github.io/playground/internal/angular"
-	"github.com/gopherjs/gopherjs.github.io/playground/internal/playground"
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/react"
-	"github.com/gopherjs/gopherjs.github.io/playground/internal/runner"
-	"github.com/gopherjs/gopherjs.github.io/playground/internal/snippets"
 )
 
 func main() {
-	if false {
-		app := angularjs.NewModule("playground", nil, nil)
-		app.NewController("PlaygroundCtrl", func(scope *angularjs.Scope) {
-			banner := angular.NewBanner(scope)
-			codeBox := angular.NewCodeBox(scope)
-			output := angular.NewOutputBox(scope)
-			snippetsStore := snippets.NewStore()
-			fetcher := runner.NewFetcher()
-			runner := runner.New(output, fetcher)
-			playground.New(banner, codeBox, output, snippetsStore, runner)
-		})
-	}
+	//if false {
+	//	app := angularjs.NewModule("playground", nil, nil)
+	//	app.NewController("PlaygroundCtrl", func(scope *angularjs.Scope) {
+	//		banner := angular.NewBanner(scope)
+	//		codeBox := angular.NewCodeBox(scope)
+	//		output := angular.NewOutputBox(scope)
+	//		snippetsStore := snippets.NewStore()
+	//		fetcher := runner.NewFetcher()
+	//		runner := runner.New(output, fetcher)
+	//		playground.New(banner, codeBox, output, snippetsStore, runner)
+	//	})
+	//}
 
 	root := react.CreateRoot(`root`)
-	root.Render(react.CreateElement(`div`, nil, `Hello World!`))
+	//root.Render(react.CreateElement(`div`, nil, `Hello World!`))
 
+	root.Render(react.NewCounter())
 }