Updated css

Author: grantnelson-wf

playground/internal/react/bindings.go

@@ -89,6 +89,13 @@ func AsFunc(props Props, name string) Func {
 	panic(ErrUndefinedPropKey)
 }
 
+// AsSetter retrieves the property with the given name from the Props
+// and converts it to a setter function of type func(any).
+func AsSetter(props Props, name string) func(any) {
+	fn := AsFunc(props, name)
+	return func(v any) { fn(v) }
+}
+
 // CreateElement creates a React element of the given type with the given props and children.
 //
 // The type can be a string for HTML elements (e.g. `div`, `span`, etc.),
@@ -143,17 +150,21 @@ func Button(value string, props Props, onClick func(e *js.Object)) *Element {
 }
 
 // UseState creates a state for the current component render.
+// Returns the current state value and a setter function to update the state.
+// The setter accepts any value, which will be the new state at the next render,
+// or a function that takes the current state and returns the new state.
 //
 // It must be called unconditionally at the top level of the component function.
 // See: https://react.dev/reference/react/useState
 //
-// NOTE: Some types like `State[int]` must instead be `State[float64]`,
-// and instead of `State[[]*foo]` it must be `State[[]any]`,
-// because of how the underlying React hook works.
-func UseState[T any](initial T) (T, func(T)) {
+// NOTE: Some types like `State[int]` might be `State[float64]`,
+// and instead of `State[[]*foo]` it might be `State[[]any]`,
+// because of how the underlying React hook and GopherJS works.
+func UseState[T any](initial T) (T, func(any)) {
 	r := react().Call(`useState`, initial)
 	current := r.Index(0).Interface().(T)
-	setter := func(v T) { r.Index(1).Invoke(v) }
+	setFn := r.Index(1)
+	setter := func(v any) { setFn.Invoke(v) }
 	return current, setter
 }
 

playground/internal/react/codeBox.go

@@ -1,15 +1,17 @@
 package react
 
 import (
-	"fmt"
+	"strconv"
 	"strings"
 
 	"github.com/gopherjs/gopherjs/js"
 )
 
+const tabWidth = 4
+
 // CodeBox creates a code editor box React element for editing
 // the given code state.
-func CodeBox(code string, setCode func(string)) *Element {
+func CodeBox(code string, setCode func(any)) *Element {
 	return CreateElement(codeBoxComponent, Props{
 		`curCode`: code,
 		`setCode`: setCode,
@@ -19,53 +21,46 @@ func CodeBox(code string, setCode func(string)) *Element {
 func codeBoxComponent(props Props) *Element {
 	cba := &codeBoxAssistant{
 		curCode:     As[string](props, `curCode`),
-		setCode:     AsFunc(props, `setCode`),
+		setCode:     AsSetter(props, `setCode`),
 		textAreaRef: UseRef(),
 		lineNumsRef: UseRef(),
 	}
 
 	return Div(Props{
-		`className`: `box`,
-		`id`:        `content`,
+		`id`: `code-box`,
 	},
-		Div(Props{
-			`className`: `box yellow`,
-			`id`:        `input`,
-		},
-			CreateElement(`textarea`, Props{
-				`id`:       `line-nums`,
-				`ref`:      cba.lineNumsRef,
-				`value`:    cba.getLineNumbers(),
-				`readOnly`: true,
-				`disable`:  `true`,
-			}),
-			CreateElement(`textarea`, Props{
-				`id`:             `code`,
-				`ref`:            cba.textAreaRef,
-				`value`:          cba.curCode,
-				`onInput`:        cba.onInput,
-				`onKeyDown`:      cba.onKeyDown,
-				`onScroll`:       cba.onScroll,
-				`autoFocus`:      true,
-				`autoCorrect`:    `off`,
-				`autoComplete`:   `off`,
-				`autoCapitalize`: `off`,
-				`spellCheck`:     false,
-			}),
-		),
+		CreateElement(`textarea`, Props{
+			`id`:       `line-nums`,
+			`ref`:      cba.lineNumsRef,
+			`value`:    cba.getLineNumbers(),
+			`readOnly`: true,
+			`disable`:  `true`,
+		}),
+		CreateElement(`textarea`, Props{
+			`id`:             `code`,
+			`ref`:            cba.textAreaRef,
+			`value`:          cba.curCode,
+			`onInput`:        cba.onInput,
+			`onKeyDown`:      cba.onKeyDown,
+			`onScroll`:       cba.onScroll,
+			`autoFocus`:      true,
+			`autoCorrect`:    `off`,
+			`autoComplete`:   `off`,
+			`autoCapitalize`: `off`,
+			`spellCheck`:     false,
+		}),
 	)
 }
 
 type codeBoxAssistant struct {
 	curCode     string
-	setCode     Func
+	setCode     func(any)
 	textAreaRef *Ref
 	lineNumsRef *Ref
 }
 
 func (cba *codeBoxAssistant) onInput(e *js.Object) {
-	code := e.Get(`target`).Get(`value`).String()
-	cba.setCode(code)
+	cba.setCode(e.Get(`target`).Get(`value`).String())
 }
 
 func (cba *codeBoxAssistant) onKeyDown(e *js.Object) {
@@ -117,6 +112,11 @@ func (cba *codeBoxAssistant) handleKeyDown(keyCode int) bool {
 }
 
 func (cba *codeBoxAssistant) currentIndent(start int, code string) string {
+	if start < 0 || start > len(code) {
+		return ``
+	}
+
+	// get prior line's indent
 	par := strings.LastIndex(code[:start], "\n") + 1
 	i := par
 	for i < start {
@@ -126,15 +126,21 @@ func (cba *codeBoxAssistant) currentIndent(start int, code string) string {
 		}
 		i++
 	}
-	return code[par:i]
+	indent := code[par:i]
+
+	// adjust indent based on prior line's last character
+	switch code[start] {
+	case '{', '(', '[':
+		indent += "\t"
+	}
+	return indent
 }
 
 func (cba *codeBoxAssistant) getLineNumbers() string {
 	lines := strings.Count(cba.curCode, "\n") + 1
-	size := len(fmt.Sprintf(`%d`, lines))
 	var sb strings.Builder
 	for i := 1; i <= lines; i++ {
-		sb.WriteString(fmt.Sprintf(`%*d`, size, i))
+		sb.WriteString(strconv.Itoa(i))
 		if i < lines {
 			sb.WriteString("\n")
 		}
@@ -194,23 +200,22 @@ func (cba *codeBoxAssistant) horizontallyAutoScroll(caret int, code string) {
 	scrollLeft := int(float64(curLine) * float64(totalWidth) / float64(longestLine))
 
 	curLeft := cba.textAreaRef.Get(`scrollLeft`).Int()
-
-	println(fmt.Sprintf("HScroll: total=%d visible=%d longest=%d curLine=%d scrollLeft=%d curLeft=%d",
-		totalWidth, visibleWidth, longestLine, curLine, scrollLeft, curLeft))
-
 	if scrollLeft < curLeft {
 		cba.textAreaRef.Set(`scrollLeft`, scrollLeft)
 	} else if scrollLeft -= visibleWidth; scrollLeft > curLeft {
 		cba.textAreaRef.Set(`scrollLeft`, scrollLeft)
 	}
 }
 
+// measureLineLength returns the length of the line.
+// This counts tabs as multiple spaces so that the horizontal scrolling works correctly.
 func measureLineLength(line string) int {
-	const tabWidth = 4
 	tabAdjust := strings.Count(line, "\t") * (tabWidth - 1)
 	return len(line) + tabAdjust
 }
 
+// longestLineLength returns the length of the longest line in the given code.
+// This counts tabs as multiple spaces so that the horizontal scrolling works correctly.
 func longestLineLength(code string) int {
 	longest := 0
 	for {

playground/internal/react/outputBox.go

@@ -0,0 +1,69 @@
+package react
+
+import (
+	"fmt"
+	"go/scanner"
+)
+
+func ClearOutput(outputUpdater func(any)) {
+	outputUpdater(func(items []any) []any {
+		return []any{}
+	})
+}
+
+func WriteError(outputUpdater func(any), err error) {
+	outputUpdater(func(items []any) []any {
+		if list, ok := err.(scanner.ErrorList); ok {
+			for _, entry := range list {
+				items = append(items, map[string]any{`type`: `err`, `context`: entry.Error()})
+			}
+			return items
+		}
+		return append(items, map[string]any{`type`: `err`, `context`: err.Error()})
+	})
+}
+
+func WriteString(outputUpdater func(any), s string) {
+	outputUpdater(func(items []any) []any {
+		if maxItem := len(items) - 1; maxItem >= 0 {
+			lastItem := items[maxItem].(map[string]any)
+			if lastItem[`type`] == `text` {
+				lastItem[`context`] = lastItem[`context`].(string) + s
+				return items
+			}
+		}
+		return append(items, map[string]any{`type`: `text`, `context`: s})
+	})
+}
+
+// OutputBox creates a box React element for displaying output strings and errors.
+func OutputBox(output []any) *Element {
+	return CreateElement(outputBoxComponent, Props{
+		`output`: output,
+	})
+}
+
+func outputBoxComponent(props Props) *Element {
+	output := As[[]any](props, `output`)
+
+	children := make([]Node, 0, len(output))
+	for _, item := range output {
+		itemMap := item.(map[string]any)
+
+		classType := `output-text`
+		if itemMap[`type`] == `err` {
+			classType = `output-err`
+		}
+		id := fmt.Sprintf(`output-item-%d`, len(children))
+
+		child := CreateElement(`pre`, Props{
+			`className`: classType,
+			`id`:        id,
+		}, itemMap[`context`])
+		children = append(children, child)
+	}
+
+	return Div(Props{
+		`id`: `output-box`,
+	}, children...)
+}

playground/internal/react/playground.go

@@ -17,14 +17,20 @@ var initText = func() string {
 
 func playgroundComponent() *Element {
 	code, setCode := UseState(initText)
+	output, setOutput := UseState([]any{})
 
-	//UseEffect(func() {
-	//	println(fmt.Sprintf(`Code: %q`, code))
-	//}, code)
+	UseEffect(func() { // TODO(grantnelson-wf): REMOVE
+		if len(code)%10 == 0 {
+			WriteError(setOutput, fmt.Errorf("code changed: %d", len(code)))
+		} else {
+			WriteString(setOutput, fmt.Sprintf("Code changed: %d\n", len(code)))
+		}
+	}, code)
 
 	return Div(Props{
 		`id`: `playground`,
 	},
 		CodeBox(code, setCode),
+		OutputBox(output),
 	)
 }