Making react work

Author: grantnelson-wf

playground/internal/react/component.go

@@ -1,70 +1,62 @@
 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 }
+	Component  struct{ *js.Object }
+	State      map[string]any
+	RenderFunc func(*Component) 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 NewComponent(props Props, init State, render RenderFunc) *Element {
+	reactComp := react().Get("Component")
+	ctor := js.MakeFunc(func(this *js.Object, args []*js.Object) any {
+		reactComp.Call(`call`, props)
+		this.Set(`state`, init)
+		return nil
+	})
+	rf := js.MakeFunc(func(this *js.Object, args []*js.Object) any {
+		return render(&Component{Object: this})
+	})
+	ctor.Set(`prototype`, reactComp.Get(`prototype`))
+	ctor.Get(`prototype`).Set(`constructor`, ctor)
+	ctor.Get("prototype").Set("render", rf)
+	return &Element{Object: react().Call(`createElement`, ctor)}
 }
 
-func (c *Component) GetState(name string) *js.Object {
-	return c.Get(`state`).Get(`state`)
+func (c *Component) GetState(key string) *js.Object {
+	return c.Get("state").Get(key)
 }
 
-func (c *Component) SetState(state State) {
-	c.Call(`setState`, stateToMap(state))
+func (c *Component) SetState(newState State) {
+	c.Call("setState", newState)
 }
 
-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
+//============================================
+
+func NewCounter(initName string, initAge int) *Element {
+	return NewComponent(Props{}, map[string]any{
+		`name`: initName,
+		`age`:  initAge,
+	}, func(c *Component) Node {
+		return Fragment(
+			CreateElement(`input`, Props{
+				`value`: c.GetState(`name`).String(),
+				`onChange`: func(e *js.Object) {
+					c.SetState(State{`name`: e.Get(`target`).Get(`value`).String()})
+				},
+			}),
+			CreateElement(`input`, Props{
+				`type`:  `button`,
+				`value`: `Increment age`,
+				`onClick`: func() {
+					c.SetState(State{`age`: c.GetState(`age`).Int() + 1})
+				},
+			}),
+			CreateElement(`p`, nil,
+				`Hello, `, c.GetState(`name`).String(), `. You are `, c.GetState(`age`).Int(), `.`),
+		)
+	})
 }

playground/internal/react/elements.go

@@ -1,7 +1,5 @@
 package react
 
-import "github.com/gopherjs/gopherjs/js"
-
 func Fragment(children ...Node) *Element {
 	args := []any{react().Get(`Fragment`), nil}
 	for _, c := range children {
@@ -24,73 +22,3 @@ func Button(value string, props Props, onClick func()) *Element {
 	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
-}
-
-// =============================================================
-
-// Returns a JS class (constructor) for a React component
-func NewReactComponentClass(renderFunc func() Node) *js.Object {
-	reactComp := react().Get("Component")
-	// Create a constructor function
-	ctor := js.MakeFunc(func(this *js.Object, args []*js.Object) any {
-		// Call React.Component constructor
-		reactComp.Call(`call`, this)
-		return nil
-	})
-	proto := ctor.Get("prototype")
-	// Set up inheritance: ctor.prototype = Object.create(React.Component.prototype)
-	proto.Set("__proto__", reactComp.Get("prototype"))
-	// Set the render method on the prototype
-	proto.Set("render", renderFunc)
-	return ctor
-}
-
-func NewMyComponent() *Element {
-	MyComponentClass := NewReactComponentClass(func() Node {
-		return Div(nil, `Hello from GopherJS (2)!`)
-	})
-	args := []any{MyComponentClass, nil}
-	return &Element{Object: react().Call(`createElement`, args...)}
-}

playground/internal/react/react.go

@@ -53,8 +53,6 @@ func checkNode(n Node) Node {
 	switch c := n.(type) {
 	case *Element, string, int, float64:
 		return c
-	case interface{ Interface() any }:
-		return &Element{Object: react().Call(`createElement`, c.Interface())}
 	default:
 		panic(fmt.Errorf(`unsupported child type %T`, c))
 	}

playground/playground.go

@@ -23,5 +23,5 @@ func main() {
 
 	//root.Render(react.NewCounter())
 
-	root.Render(react.NewMyComponent())
+	root.Render(react.NewCounter(`grant`, 48))
 }