broke out react from page

Author: grantnelson-wf

playground/internal/react/bannerTitle.go playground/internal/page/bannerTitle.goplayground/internal/react/bannerTitle.go renamed to playground/internal/page/bannerTitle.go

@@ -1,25 +1,27 @@
-package react
+package page
 
-func BannerTitle(version string) *Element {
-	return CreateElement(bannerTitleComponent, Props{
+import "github.com/gopherjs/gopherjs.github.io/playground/internal/react"
+
+func BannerTitle(version string) *react.Element {
+	return react.CreateElement(bannerTitleComponent, react.Props{
 		`version`: version,
 	})
 }
 
-func bannerTitleComponent(props Props) *Element {
+func bannerTitleComponent(props react.Props) *react.Element {
 	version := props.GetString(`version`)
-	return Span(Props{
+	return react.Span(react.Props{
 		`id`: `banner-title`,
 	},
 		`playground `,
-		Span(Props{
+		react.Span(react.Props{
 			`id`: `banner-title-sub`,
 		},
 			// TODO(grantnelson-wf): Make this a link to the gopherjs repo
 			//     https://github.com/gopherjs/gopherjs
 			`GopherJS `,
 		),
-		Span(Props{
+		react.Span(react.Props{
 			`id`: `banner-title-version`,
 		},
 			// TODO(grantnelson-wf): Make this version a link to release notes

playground/internal/react/codeBox.go playground/internal/page/codeBox.goplayground/internal/react/codeBox.go renamed to playground/internal/page/codeBox.go

@@ -1,4 +1,4 @@
-package react
+package page
 
 import (
 	"strconv"
@@ -8,35 +8,36 @@ import (
 
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/common"
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/editor"
+	"github.com/gopherjs/gopherjs.github.io/playground/internal/react"
 )
 
-func CodeBox(code string, setCode Setter, onSave Setter, onEscape Setter) *Element {
-	return CreateElement(codeBoxComponent, Props{
+func CodeBox(code string, setCode react.Setter, onSave react.Setter, onEscape react.Setter) *react.Element {
+	return react.CreateElement(codeBoxComponent, react.Props{
 		`curCode`:  code,
 		`setCode`:  setCode,
 		`onSave`:   onSave,
 		`onEscape`: onEscape,
 	})
 }
 
-func codeBoxComponent(props Props) *Element {
+func codeBoxComponent(props react.Props) *react.Element {
 	var (
 		curCode     = props.GetString(`curCode`)
 		setCode     = props.GetFunc(`setCode`)
 		onSave      = props.GetFunc(`onSave`)
 		onEscape    = props.GetFunc(`onEscape`)
-		textAreaRef = UseRef()
-		lineNumsRef = UseRef()
+		textAreaRef = react.UseRef()
+		lineNumsRef = react.UseRef()
 	)
 
-	onInput := UseCallback(func(e *js.Object) {
+	onInput := react.UseCallback(func(e *js.Object) {
 		newCode := e.Get(`target`).Get(`value`).String()
 		sel := getSelection(textAreaRef)
 		globals.UndoRedo().RecordCodeChange(sel, curCode, newCode)
 		setCode(newCode)
 	}, []any{curCode, setCode, textAreaRef})
 
-	onKeyDown := UseCallback(func(e *js.Object) {
+	onKeyDown := react.UseCallback(func(e *js.Object) {
 		key := e.Get(`key`).String()
 		shift := e.Get(`shiftKey`).Bool()
 		ctrl := e.Get(`metaKey`).Bool() || e.Get(`ctrlKey`).Bool()
@@ -53,12 +54,12 @@ func codeBoxComponent(props Props) *Element {
 		}
 	}, []any{curCode, setCode, onSave, onEscape, textAreaRef})
 
-	onScroll := UseCallback(func(e *js.Object) {
+	onScroll := react.UseCallback(func(e *js.Object) {
 		scrollTop := e.Get(`target`).Get(`scrollTop`).Int()
 		lineNumsRef.Current().Set(`scrollTop`, scrollTop)
 	}, []any{lineNumsRef})
 
-	onSelect := UseCallback(func(e *js.Object) {
+	onSelect := react.UseCallback(func(e *js.Object) {
 		// Don't normalize the selection so that the direction is preserved.
 		globals.UndoRedo().RecordSelectionChange(getSelection(textAreaRef))
 	}, []any{textAreaRef})
@@ -67,28 +68,28 @@ func codeBoxComponent(props Props) *Element {
 	// then maybe we could indent the pasted code automatically to match
 	// the indent of where it is being pasted.
 
-	UseEffect(func() {
+	react.UseEffect(func() {
 		// On first render, focus the code textarea.
 		textAreaRef.Current().Call(`focus`)
 		setSelection(textAreaRef, common.Selection{})
 	}, []any{})
 
 	lineCount := strings.Count(curCode, "\n") + 1
-	lineNumbers := UseMemo(func() string {
+	lineNumbers := react.UseMemo(func() string {
 		return getLineNumbers(lineCount)
 	}, []any{lineCount})
 
-	return Div(Props{
+	return react.Div(react.Props{
 		`id`: `code-box`,
 	},
-		TextArea(Props{
+		react.TextArea(react.Props{
 			`id`:       `line-nums`,
 			`ref`:      lineNumsRef,
 			`value`:    lineNumbers,
 			`readOnly`: true,
 			`disable`:  `true`,
 		}),
-		TextArea(Props{
+		react.TextArea(react.Props{
 			`id`:             `code`,
 			`ref`:            textAreaRef,
 			`value`:          curCode,
@@ -107,10 +108,10 @@ func codeBoxComponent(props Props) *Element {
 
 type codeBoxAssistant struct {
 	curCode     string
-	setCode     Func
-	onSave      Func
-	onEscape    Func
-	textAreaRef *Ref
+	setCode     react.Func
+	onSave      react.Func
+	onEscape    react.Func
+	textAreaRef *react.Ref
 }
 
 var _ common.CodeBoxWrapper = (*codeBoxAssistant)(nil)
@@ -166,7 +167,7 @@ func (cba *codeBoxAssistant) SetCode(sel common.Selection, code string) {
 	horizontallyAutoScroll(cba.textAreaRef, sel.End, code)
 }
 
-func verticallyAutoScroll(textAreaRef *Ref, caret int, code string) {
+func verticallyAutoScroll(textAreaRef *react.Ref, caret int, code string) {
 	textArea := textAreaRef.Current()
 	totalHeight := textArea.Get(`scrollHeight`).Int()
 	visibleHeight := textArea.Get(`clientHeight`).Int()
@@ -186,7 +187,7 @@ func verticallyAutoScroll(textAreaRef *Ref, caret int, code string) {
 	}
 }
 
-func horizontallyAutoScroll(textAreaRef *Ref, caret int, code string) {
+func horizontallyAutoScroll(textAreaRef *react.Ref, caret int, code string) {
 	textArea := textAreaRef.Current()
 	totalWidth := textArea.Get(`scrollWidth`).Int()
 	visibleWidth := textArea.Get(`clientWidth`).Int()
@@ -207,15 +208,15 @@ func horizontallyAutoScroll(textAreaRef *Ref, caret int, code string) {
 	}
 }
 
-func getSelection(textAreaRef *Ref) common.Selection {
+func getSelection(textAreaRef *react.Ref) common.Selection {
 	textArea := textAreaRef.Current()
 	start := textArea.Get(`selectionStart`).Int()
 	end := textArea.Get(`selectionEnd`).Int()
 	return common.Selection{Start: start, End: end}
 }
 
 // setSelection sets the selection on the given textarea ref.
-func setSelection(textAreaRef *Ref, sel common.Selection) {
+func setSelection(textAreaRef *react.Ref, sel common.Selection) {
 	textArea := textAreaRef.Current()
 	textArea.Set(`selectionStart`, sel.Start)
 	textArea.Set(`selectionEnd`, sel.End)

playground/internal/react/globals.go playground/internal/page/globals.goplayground/internal/react/globals.go renamed to playground/internal/page/globals.go

@@ -1,13 +1,4 @@
-// The globals are the global objects used by the react components.
-//
-// Since passing Go structs through React props will cause problems
-// because of how React serializes props, even if we wrap it in a Ref
-// the GopherJS will convert structs to JS objects,
-// instead we use a global singleton instead to pass around global state.
-//
-// This could be problematic if we ever want to have multiple code editors
-// on the same page, but that is not a use case we currently have to support.
-package react
+package page
 
 import (
 	"sync"
@@ -18,6 +9,15 @@ import (
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/undoRedo"
 )
 
+// globals are the global objects used by the react components.
+//
+// Since passing Go structs through React props will cause problems
+// because of how React serializes props, even if we wrap it in a Ref
+// the GopherJS will convert structs to JS objects,
+// instead we use a global singleton instead to pass around global state.
+//
+// This could be problematic if we ever want to have multiple code editors
+// on the same page, but that is not a use case we currently have to support.
 var globals = struct {
 	UndoRedo      func() common.UndoRedoStack
 	SnippetsStore func() common.SnippetStore

playground/internal/react/outputBox.go playground/internal/page/outputBox.goplayground/internal/react/outputBox.go renamed to playground/internal/page/outputBox.go

@@ -1,10 +1,11 @@
-package react
+package page
 
 import (
 	"fmt"
 	"go/scanner"
 
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/common"
+	"github.com/gopherjs/gopherjs.github.io/playground/internal/react"
 )
 
 const (
@@ -14,11 +15,11 @@ const (
 	contextKey = `context`
 )
 
-func Output(setOutput Setter) common.Output {
+func Output(setOutput react.Setter) common.Output {
 	return &outputImpl{setOutput: setOutput}
 }
 
-type outputImpl struct{ setOutput Setter }
+type outputImpl struct{ setOutput react.Setter }
 
 func (o *outputImpl) Clear() {
 	o.setOutput.Invoke([]any{})
@@ -50,19 +51,19 @@ func (o *outputImpl) AddOutput(out string) {
 }
 
 // OutputBox creates a box React element for displaying output strings and errors.
-func OutputBox(output []any) *Element {
-	return CreateElement(outputBoxComponent, Props{
+func OutputBox(output []any) *react.Element {
+	return react.CreateElement(outputBoxComponent, react.Props{
 		`output`: output,
 	})
 }
 
-func outputBoxComponent(props Props) *Element {
+func outputBoxComponent(props react.Props) *react.Element {
 	var (
 		output       = props.Get(`output`).([]any)
-		outputBoxRef = UseRef()
+		outputBoxRef = react.UseRef()
 	)
 
-	UseEffect(func() {
+	react.UseEffect(func() {
 		// If there are only errors, scroll to the top,
 		// otherwise scroll to the bottom.
 		outputBox := outputBoxRef.Current()
@@ -73,7 +74,7 @@ func outputBoxComponent(props Props) *Element {
 		outputBox.Set(`scrollTop`, scrollTop)
 	}, []any{output})
 
-	children := make([]Node, 0, len(output))
+	children := make([]react.Node, 0, len(output))
 	for i, item := range output {
 		itemMap := item.(map[string]any)
 		children = append(children, outputLine(
@@ -82,7 +83,7 @@ func outputBoxComponent(props Props) *Element {
 		))
 	}
 
-	return Div(Props{
+	return react.Div(react.Props{
 		`id`:  `output-box`,
 		`ref`: outputBoxRef,
 	}, children...)
@@ -102,15 +103,15 @@ func hasNonErrors(output []any) bool {
 // outputLine creates a React element for a single output line.
 // The index is used to create a unique ID for the line so it should
 // be the line's position in the output list.
-func outputLine(index int, isError bool, content string) *Element {
-	return CreateElement(outputLineComponent, Props{
+func outputLine(index int, isError bool, content string) *react.Element {
+	return react.CreateElement(outputLineComponent, react.Props{
 		`index`:   index,
 		`isError`: isError,
 		`content`: content,
 	})
 }
 
-func outputLineComponent(props Props) *Element {
+func outputLineComponent(props react.Props) *react.Element {
 	var (
 		index   = props.GetInt(`index`)
 		isError = props.GetBool(`isError`)
@@ -123,7 +124,7 @@ func outputLineComponent(props Props) *Element {
 	}
 	id := fmt.Sprintf(`output-item-%d`, index)
 
-	return Pre(Props{
+	return react.Pre(react.Props{
 		`className`: classType,
 		`id`:        id,
 	}, content)