Making react work

Author: grantnelson-wf

playground/internal/react/elements.go

@@ -25,6 +25,8 @@ func Button(value string, props Props, onClick func()) *Element {
 	return CreateElement(`input`, props)
 }
 
+// =============================================================
+
 type Counter struct {
 	*Component
 }
@@ -65,3 +67,30 @@ func NewCounter() *Counter {
 	})
 	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

@@ -51,20 +51,11 @@ func CreateElement(typ string, props Props, children ...Node) *Element {
 
 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
+	case interface{ Interface() any }:
+		return &Element{Object: react().Call(`createElement`, c.Interface())}
 	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

@@ -21,5 +21,7 @@ func main() {
 	root := react.CreateRoot(`root`)
 	//root.Render(react.CreateElement(`div`, nil, `Hello World!`))
 
-	root.Render(react.NewCounter())
+	//root.Render(react.NewCounter())
+
+	root.Render(react.NewMyComponent())
 }