Making react work

Author: grantnelson-wf

playground/internal/react/elements.go

@@ -1,28 +1,40 @@
 package react
 
-import "github.com/gopherjs/gopherjs/js"
+import (
+	"time"
+
+	"github.com/gopherjs/gopherjs/js"
+)
 
 func NewCounter(initName string, initAge int) *Element {
-	return NewComponent(Props{}, map[string]any{
-		`name`: initName,
-		`age`:  initAge,
-	}, func(c *Component) Node {
+	var name *State[string]
+	var age *State[float64]
+
+	gnCounter := func(props Props) *Element {
+		name = UseState(initName)
+		age = UseState(float64(initAge))
+
 		return StrictMode(
 			CreateElement(`input`, Props{
-				`value`: c.GetState(`name`).String(),
+				`value`: name.Get(),
 				`onChange`: func(e *js.Object) {
-					c.SetState(map[string]any{
-						`name`: e.Get(`target`).Get(`value`).String(),
-					})
+					name.Set(e.Get(`target`).Get(`value`).String())
 				},
 			}),
 			Button(`Increment age`, nil, func() {
-				c.SetState(map[string]any{
-					`age`: c.GetState(`age`).Int() + 1,
-				})
+				age.Set(age.Get() + 1)
 			}),
 			CreateElement(`p`, nil,
-				`Hello, `, c.GetState(`name`).String(), `. You are `, c.GetState(`age`).Int(), `.`),
+				`Hello, `, name.Get(), `. You are `, age.Get(), `.`),
 		)
-	})
+	}
+
+	go func() {
+		t := time.NewTicker(2 * time.Second)
+		for range t.C {
+			age.Set(age.Get() + 1)
+		}
+	}()
+
+	return CreateElement(gnCounter, nil)
 }

playground/internal/react/react.go

@@ -1,8 +1,6 @@
 package react
 
 import (
-	"fmt"
-
 	"github.com/gopherjs/gopherjs/js"
 )
 
@@ -58,12 +56,13 @@ func CreateElement(typ any, props Props, children ...Node) *Element {
 }
 
 func checkNode(n Node) Node {
-	switch c := n.(type) {
-	case *Element, string, int, float64:
-		return c
-	default:
-		panic(fmt.Errorf(`unsupported child type %T`, c))
-	}
+	//switch c := n.(type) {
+	//case *Element, string, int, float64:
+	//	return c
+	//default:
+	//	panic(fmt.Errorf(`unsupported child type %T`, c))
+	//}
+	return n
 }
 
 func StrictMode(children ...Node) *Element {
@@ -92,14 +91,24 @@ func Button(value string, props Props, onClick func()) *Element {
 	return CreateElement(`input`, props)
 }
 
-func UseState[T any](initial T) State[T] {
+func UseState[T string | float64](initial T) *State[T] {
 	s := react().Call(`useState`, initial)
-	return State[T]{getter: s.Index(0), setter: s.Index(1)}
+	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]) Get() T {
+	if s == nil || s.getter == nil {
+		var zero T
+		return zero
+	}
+	return s.getter.Interface().(T)
+}
 
-func (s State[T]) Set(v T) { s.setter.Invoke(v) }
+func (s *State[T]) Set(v T) {
+	if s != nil && s.setter != nil {
+		s.setter.Invoke(v)
+	}
+}
 
 func NewComponent(props Props, init StateMap, render func(*Component) Node) *Element {
 	reactComp := react().Get("Component")