putting react together

Author: grantnelson-wf

playground/go.mod

@@ -4,7 +4,6 @@ go 1.19
 
 require (
 	github.com/gopherjs/gopherjs v1.19.0-beta2.0.20251008200541-113c92b42b18
-	github.com/neelance/go-angularjs v0.0.0-20170205214111-8c6312cca6e2
 	github.com/stretchr/testify v1.11.1
 	golang.org/x/tools v0.16.0
 	honnef.co/go/js/dom v0.0.0-20210725211120-f030747120f2

playground/go.sum

@@ -24,15 +24,20 @@ type banner struct {
 	location *dom.Location
 }
 
+var _ Component = (*banner)(nil)
+
 func NewBanner() common.Banner {
 	return &banner{
+		importChecked:   NewState(true),
+		shareUrl:        NewState(``),
+		shareUrlVisible: NewState(false),
+		version:         NewState(`vx.x.x`),
+
 		// We might be inside an iframe, but want to use the location of topmost window.
 		location: dom.GetWindow().Top().Location(),
 	}
 }
 
-var _ Component = (*banner)(nil)
-
 func invokeCallback(c func()) {
 	if c != nil {
 		c()
@@ -84,10 +89,10 @@ func (b *banner) SetVersion(version string) {
 }
 
 func (b *banner) Render(props Props) *Element {
-	b.importChecked = UseState(true)
-	b.shareUrl = UseState(``)
-	b.shareUrlVisible = UseState(false)
-	b.version = UseState(``)
+	b.importChecked.Use()
+	b.shareUrl.Use()
+	b.shareUrlVisible.Use()
+	b.version.Use()
 	b.shareUrlRef = UseRef()
 
 	UseEffect(func() {

playground/internal/react/banner.go

@@ -1,6 +1,8 @@
 package react
 
-import "github.com/gopherjs/gopherjs/js"
+import (
+	"github.com/gopherjs/gopherjs/js"
+)
 
 type (
 	// Node is a React node that can be displayed.
@@ -31,7 +33,10 @@ type (
 	// NOTE: `State[int]` should be `State[float64]` because of
 	// how the underlying React hook works.
 	// See: https://react.dev/reference/react/useState
-	State[T any] struct{ getter, setter *js.Object }
+	State[T any] struct {
+		initial        T
+		getter, setter *js.Object
+	}
 
 	// ComponentFunc is a function that defines a React component.
 	// It takes props as input and returns a React element.
@@ -109,21 +114,33 @@ func Button(value string, props Props, onClick func(e *js.Object)) *Element {
 	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 NewState[T any](initial T) *State[T] {
+	return &State[T]{initial: initial}
+}
+
+func (s *State[T]) Use() {
+	r := react().Call(`useState`, s.initial)
+	s.getter = r.Index(0)
+	s.setter = r.Index(1)
 }
 
-func (s *State[T]) Get() (zero T) {
-	if s != nil && s.getter != nil {
-		return s.getter.Interface().(T)
+func (s *State[T]) Get() (v T) {
+	if s != nil {
+		if s.getter != nil {
+			return s.getter.Interface().(T)
+		}
+		return s.initial
 	}
 	return
 }
 
 func (s *State[T]) Set(v T) {
-	if s != nil && s.setter != nil {
-		s.setter.Invoke(v)
+	if s != nil {
+		if s.setter != nil {
+			s.setter.Invoke(v)
+			return
+		}
+		s.initial = v
 	}
 }
 

playground/internal/react/bindings.go

@@ -17,9 +17,17 @@ type codeBox struct {
 	codeAreaRef *js.Object
 }
 
-func NewCodeBox() common.CodeBox { return &codeBox{} }
+var _ Component = (*codeBox)(nil)
 
-func (c *codeBox) onInput(e *js.Object) { invokeCallback(c.onInputCallback) }
+func NewCodeBox() common.CodeBox {
+	return &codeBox{
+		code: NewState(``),
+	}
+}
+
+func (c *codeBox) onInput(e *js.Object) {
+	invokeCallback(c.onInputCallback)
+}
 
 func (c *codeBox) onKeyDown(e *js.Object) {
 	if c.onKeydownCallback != nil && c.onKeydownCallback(e.Get(`keyCode`).Int()) {
@@ -41,12 +49,11 @@ func (c *codeBox) SetSelection(start, end int) {
 	c.codeAreaRef.Set(`selectionEnd`, end)
 }
 
-func (c *codeBox) GetCode() string { return c.code.Get() }
-
+func (c *codeBox) GetCode() string     { return c.code.Get() }
 func (c *codeBox) SetCode(code string) { c.code.Set(code) }
 
 func (c *codeBox) Render(props Props) *Element {
-	c.code = UseState(``)
+	c.code.Use()
 	c.codeAreaRef = UseRef()
 
 	return Div(Props{
@@ -57,7 +64,7 @@ func (c *codeBox) Render(props Props) *Element {
 		`id`:        `input`,
 	}, CreateElement(`textarea`, Props{
 		`ref`:            c.codeAreaRef,
-		`value`:          c.code.Get(),
+		`defaultValue`:   c.code.Get(),
 		`onInput`:        c.onInput,
 		`onKeyDown`:      c.onKeyDown,
 		`id`:             `code`,

playground/internal/react/codeBox.go

@@ -43,10 +43,14 @@ type outputBox struct {
 	boxRef      *js.Object
 }
 
-func NewOutputBox() common.OutputBox { return &outputBox{} }
-
 var _ Component = (*outputBox)(nil)
 
+func NewOutputBox() common.OutputBox {
+	return &outputBox{
+		outputState: NewState[any](nil),
+	}
+}
+
 // scrollToBottom scrolls the output box to the bottom
 // after the current digest cycle completes so that the new output is visible.
 func (ob *outputBox) scrollToBottom() {
@@ -99,7 +103,7 @@ func (ob *outputBox) AddOutput(out string) {
 }
 
 func (ob *outputBox) Render(props Props) *Element {
-	ob.outputState = UseState[any](nil)
+	ob.outputState.Use()
 	ob.boxRef = UseRef()
 
 	output := ob.output

playground/internal/react/outputBox.go

@@ -8,17 +8,18 @@ import (
 )
 
 func main() {
+	// Setup the React components and render the app.
 	banner := react.NewBanner()
 	codeBox := react.NewCodeBox()
 	output := react.NewOutputBox()
+	root := react.CreateRoot(`root`)
+	root.Render(react.StrictMode(
+		banner, codeBox, output,
+	))
 
+	// Setup the playground logic and networking.
 	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.StrictMode(
-		banner, codeBox, output,
-	))
 }