working on react

Author: grantnelson-wf

playground/internal/playground/playground.go

@@ -79,6 +79,8 @@ func (p *Playground) onCodeInput() {
 func (p *Playground) currentIndent() string {
 	start, _ := p.code.GetSelection()
 	code := p.code.GetCode()
+	fmt.Printf("Code len: %d, start: %d\n", len(code), start) // TODO(grantnelson-wf): REMOVE
+
 	par := strings.LastIndex(code[:start], "\n") + 1
 	i := par
 	for i < start {
@@ -153,6 +155,7 @@ func (p *Playground) onFormat() {
 		p.output.AddError(err)
 		return
 	}
+	out = append(out, []byte("// FORMATTED\n")...) // TODO(grantnelson-wf): REMOVE
 	p.code.SetCode(string(out))
 }
 

playground/internal/react/banner.go

@@ -28,11 +28,6 @@ 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(),
 	}
@@ -89,21 +84,21 @@ func (b *banner) SetVersion(version string) {
 }
 
 func (b *banner) Render(props Props) *Element {
-	b.importChecked.Use()
-	b.shareUrl.Use()
-	b.shareUrlVisible.Use()
-	b.version.Use()
+	b.importChecked = UseState(true)
+	b.shareUrl = UseState(``)
+	b.shareUrlVisible = UseState(false)
+	b.version = UseState(`vx.x.x`)
 	b.shareUrlRef = UseRef()
 
 	UseEffect(func() {
 		if b.shareUrlVisible.Get() {
 			b.shareUrlRef.Call(`select`)
 		}
-	}, b.shareUrlVisible, b.shareUrlRef)
+	}, []any{b.shareUrlVisible, b.shareUrlRef})
 
-	return Div(Props{
+	return Div(props.Add(Props{
 		`id`: `banner`,
-	}, Span(Props{
+	}), Span(Props{
 		`id`: `head`,
 	}, `playground `,
 		CreateElement(`small`, nil, `GopherJS (`, b.version.Get(), `)`),

playground/internal/react/bindings.go

@@ -1,7 +1,7 @@
 package react
 
 import (
-	"fmt"
+	"errors"
 
 	"github.com/gopherjs/gopherjs/js"
 )
@@ -29,18 +29,12 @@ type (
 	Props map[string]any
 
 	// State is a value managed by React's useState hook.
-	// If the component function hasn't been called yet,
-	// the initial value is used and updated until the component is rendered.
-	// After the component is rendered, the value is managed by React.
 	// See: https://react.dev/reference/react/useState
 	//
 	// NOTE: Some types like `State[int]` must instead be `State[float64]`,
 	// and `State[[]*foo]` must instead be `State[[]any]`, because of
 	// how the underlying React hook works.
-	State[T any] struct {
-		initial        T
-		getter, setter *js.Object
-	}
+	State[T any] struct{ getter, setter *js.Object }
 
 	// Ref is a React ref created with UseRef().
 	// It is a mutable object with a `current` property that can hold any value.
@@ -63,6 +57,11 @@ type (
 	// See: https://react.dev/reference/react-dom/client/createRoot
 )
 
+var (
+	ErrStateNotInitialized = errors.New("react: State not initialized")
+	ErrRefNotInitialized   = errors.New("react: Ref not initialized")
+)
+
 func reactDom() *js.Object { return js.Global.Get(`ReactDOM`) }
 func react() *js.Object    { return js.Global.Get(`React`) }
 
@@ -128,51 +127,38 @@ func Button(value string, props Props, onClick func(e *js.Object)) *Element {
 	return CreateElement(`input`, props)
 }
 
-// NewState creates a new State with the given initial value.
-// The initial value is only used before the component function is called
-// for the first time. After that, the value is managed by React.
-// See: https://react.dev/reference/react/useState
-func NewState[T any](initial T) *State[T] {
-	fmt.Printf("NewState called [%T]\n", initial) // TODO(grantnelson-wf): REMOVE
-	return &State[T]{initial: initial}
+// Add merges another Props into this one.
+func (p Props) Add(other Props) Props {
+	if p == nil {
+		p = Props{}
+	}
+	for k, v := range other {
+		p[k] = v
+	}
+	return p
 }
 
-// Use initializes the state for the current component render.
+// UseState creates a state for the current component render.
 // It must be called unconditionally at the top level of the component function.
-// This takes the place of calling React's UseState so that the state can be
-// created outside of the component function.
 // See: https://react.dev/reference/react/useState
-func (s *State[T]) Use() {
-	fmt.Printf("Use called [%T]\n", s.initial) // TODO(grantnelson-wf): REMOVE
-	r := react().Call(`useState`, s.initial)
-	s.getter = r.Index(0)
-	s.setter = r.Index(1)
+func UseState[T any](initial T) *State[T] {
+	r := react().Call(`useState`, initial)
+	return &State[T]{getter: r.Index(0), setter: r.Index(1)}
 }
 
 func (s *State[T]) Get() T {
-	if s != nil {
-		if s.getter != nil {
-			fmt.Printf("Get called via getter [%T]\n", s.initial) // TODO(grantnelson-wf): REMOVE
-			return s.getter.Interface().(T)
-		}
-		fmt.Printf("Get called without getter [%T]\n", s.initial) // TODO(grantnelson-wf): REMOVE
-		return s.initial
+	if s != nil && s.getter != nil {
+		return s.getter.Interface().(T)
 	}
-	var zero T
-	fmt.Printf("Get called on nil [%T]\n", zero) // TODO(grantnelson-wf): REMOVE
-	return zero
+	panic(ErrStateNotInitialized)
 }
 
 func (s *State[T]) Set(v T) {
-	if s != nil {
-		if s.setter != nil {
-			fmt.Printf("Set called with setter [%T]\n", s.initial) // TODO(grantnelson-wf): REMOVE
-			s.setter.Invoke(v)
-			return
-		}
-		fmt.Printf("Set called without setter [%T]\n", s.initial) // TODO(grantnelson-wf): REMOVE
-		s.initial = v
+	if s != nil && s.setter != nil {
+		s.setter.Invoke(v)
+		return
 	}
+	panic(ErrStateNotInitialized)
 }
 
 // UseRef creates a mutable ref object that persists for the lifetime of the component.
@@ -183,7 +169,10 @@ func UseRef() *Ref {
 }
 
 func (r *Ref) Current() *js.Object {
-	return r.holder.Get(`current`)
+	if r != nil && r.holder != nil {
+		return r.holder.Get(`current`)
+	}
+	panic(ErrRefNotInitialized)
 }
 
 func (r *Ref) Get(key string) *js.Object {
@@ -198,10 +187,34 @@ func (r *Ref) Call(name string, args ...any) {
 	r.Current().Call(name, args...)
 }
 
+// UseEffectNoDeps registers an effect function that is called after every render.
+// See: https://react.dev/reference/react/useEffect
+func UseEffectNoDeps(effect func()) {
+	react().Call(`useEffect`, effect)
+}
+
 // UseEffect registers an effect function that is called after rendering.
 // The effect is re-run whenever any of the dependencies change.
-// If no dependencies are provided, the effect is only run once after the initial render.
+// If no dependency are provided, the effect is only run once after the initial render.
 // See: https://react.dev/reference/react/useEffect
 func UseEffect(effect func(), deps ...any) {
 	react().Call(`useEffect`, effect, deps)
 }
+
+// UseEffectNoDepsWithCleanup registers an effect function that is called after every render.
+// The effect function returns a cleanup function that is called before the effect
+// is re-run or when the component is unmounted.
+// See: https://react.dev/reference/react/useEffect
+func UseEffectNoDepsWithCleanup(effect func() func()) {
+	react().Call(`useEffect`, effect)
+}
+
+// UseEffectWithCleanup registers an effect function that is called after rendering.
+// The effect is re-run whenever any of the dependencies change.
+// If no dependency are provided, the effect is only run once after the initial render.
+// The effect function returns a cleanup function that is called before the effect
+// is re-run or when the component is unmounted.
+// See: https://react.dev/reference/react/useEffect
+func UseEffectWithCleanup(effect func() func(), deps ...any) {
+	react().Call(`useEffect`, effect, deps)
+}

playground/internal/react/codeBox.go

@@ -19,11 +19,7 @@ type codeBox struct {
 
 var _ Component = (*codeBox)(nil)
 
-func NewCodeBox() common.CodeBox {
-	return &codeBox{
-		code: NewState(``),
-	}
-}
+func NewCodeBox() common.CodeBox { return &codeBox{} }
 
 func (c *codeBox) onInput(e *js.Object) {
 	invokeCallback(c.onInputCallback)
@@ -55,13 +51,13 @@ 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.Use()
+	c.code = UseState(``)
 	c.codeAreaRef = UseRef()
 
-	return Div(Props{
+	return Div(props.Add(Props{
 		`className`: `box`,
 		`id`:        `content`,
-	}, Div(Props{
+	}), Div(Props{
 		`className`: `box yellow`,
 		`id`:        `input`,
 	}, CreateElement(`textarea`, Props{

playground/internal/react/outputBox.go

@@ -12,25 +12,13 @@ const outputBoxId = `output`
 
 type line map[string]string
 
-func newLine(typ, content string) line {
-	return line{`type`: typ, `content`: content}
-}
+func newLine(typ, content string) line { return line{`type`: typ, `content`: content} }
 
-func newOutLine(content string) line {
-	return newLine(`out`, content)
-}
+func newOutLine(content string) line { return newLine(`out`, content) }
+func newErrLine(content string) line { return newLine(`err`, content) }
 
-func newErrLine(content string) line {
-	return newLine(`err`, content)
-}
-
-func (l line) isOut() bool {
-	return l[`type`] == `out`
-}
-
-func (l line) appendContent(content string) {
-	l[`content`] += content
-}
+func (l line) isOut() bool                  { return l[`type`] == `out` }
+func (l line) appendContent(content string) { l[`content`] += content }
 
 // outputBox implements playground.OutputBox using AngularJS.
 //
@@ -43,11 +31,7 @@ type outputBox struct {
 
 var _ Component = (*outputBox)(nil)
 
-func NewOutputBox() common.OutputBox {
-	return &outputBox{
-		outputState: NewState[any](nil),
-	}
-}
+func NewOutputBox() common.OutputBox { return &outputBox{} }
 
 // scrollToBottom scrolls the output box to the bottom
 // after the current digest cycle completes so that the new output is visible.
@@ -101,7 +85,7 @@ func (ob *outputBox) AddOutput(out string) {
 }
 
 func (ob *outputBox) Render(props Props) *Element {
-	ob.outputState.Use()
+	ob.outputState = UseState[any](nil)
 	ob.boxRef = UseRef()
 
 	output := ob.output
@@ -111,8 +95,8 @@ func (ob *outputBox) Render(props Props) *Element {
 			`class`: line[`type`],
 		}, line[`content`], ` `)
 	}
-	return Div(Props{
+	return Div(props.Add(Props{
 		`className`: `box`,
 		`id`:        outputBoxId,
-	}, messages...)
+	}), messages...)
 }

playground/playground.go

@@ -8,18 +8,30 @@ import (
 )
 
 func main() {
+	root := react.CreateRoot(`root`)
+	root.Render(react.StrictMode(pg{}))
+}
+
+type pg struct{}
+
+func (pg) Render(props react.Props) *react.Element {
+
 	// 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)
+
+	return react.Div(react.Props{
+		`className`: `playground`,
+	},
+		banner,
+		codeBox,
+		output,
+	)
 }