Making react work

Author: grantnelson-wf

playground/internal/react/component.go

@@ -2,38 +2,6 @@ package react
 
 import "github.com/gopherjs/gopherjs/js"
 
-func StrictMode(children ...Node) *Element {
-	return CreateElement(react().Get(`StrictMode`), nil, children...)
-}
-
-func Fragment(children ...Node) *Element {
-	return CreateElement(react().Get(`Fragment`), nil, children...)
-}
-
-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 P(props Props, children ...Node) *Element {
-	return CreateElement(`p`, props, children...)
-}
-
-func Button(value string, props Props, onClick func()) *Element {
-	if props == nil {
-		props = Props{}
-	}
-	props[`value`] = value
-	props[`type`] = `button`
-	props[`onClick`] = onClick
-	return CreateElement(`input`, props)
-}
-
-//============================================
-
 func NewCounter(initName string, initAge int) *Element {
 	return NewComponent(Props{}, map[string]any{
 		`name`: initName,
@@ -43,11 +11,15 @@ func NewCounter(initName string, initAge int) *Element {
 			CreateElement(`input`, Props{
 				`value`: c.GetState(`name`).String(),
 				`onChange`: func(e *js.Object) {
-					c.SetState(State{`name`: e.Get(`target`).Get(`value`).String()})
+					c.SetState(map[string]any{
+						`name`: e.Get(`target`).Get(`value`).String(),
+					})
 				},
 			}),
 			Button(`Increment age`, nil, func() {
-				c.SetState(State{`age`: c.GetState(`age`).Int() + 1})
+				c.SetState(map[string]any{
+					`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

@@ -27,6 +27,14 @@ type (
 	// e.g. { `className`: `greeting` }.
 	// See: https://react.dev/reference/react/createElement
 	Props map[string]any
+
+	StateMap map[string]any
+
+	// Component is a React component used when rendering with state.
+	// See: https://react.dev/reference/react/Component
+	Component struct{ *js.Object }
+
+	State[T any] struct{ getter, setter *js.Object }
 )
 
 func reactDom() *js.Object { return js.Global.Get(`ReactDOM`) }
@@ -57,3 +65,62 @@ func checkNode(n Node) Node {
 		panic(fmt.Errorf(`unsupported child type %T`, c))
 	}
 }
+
+func NewComponent(props Props, init StateMap, render func(*Component) Node) *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(key string) *js.Object {
+	return c.Get("state").Get(key)
+}
+
+func (c *Component) SetState(newState StateMap) {
+	c.Call("setState", newState)
+}
+
+func StrictMode(children ...Node) *Element {
+	return CreateElement(react().Get(`StrictMode`), nil, children...)
+}
+
+func Fragment(children ...Node) *Element {
+	return CreateElement(react().Get(`Fragment`), nil, children...)
+}
+
+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 {
+	if props == nil {
+		props = Props{}
+	}
+	props[`value`] = value
+	props[`type`] = `button`
+	props[`onClick`] = onClick
+	return CreateElement(`input`, props)
+}
+
+func UseState[T any](initial T) State[T] {
+	s := react().Call(`useState`, initial)
+	return State[T]{getter: s.Index(0), setter: s.Index(1)}
+}
+
+func (s State[T]) Get() T { return s.getter.Interface().(T) }
+
+func (s State[T]) Set(v T) { s.setter.Invoke(v) }