cleared up some URL interactions

Author: grantnelson-wf

playground/internal/react/bindings.go

@@ -243,16 +243,12 @@ func (r *Ref) Current() *js.Object {
 	panic(ErrRefNotInitialized)
 }
 
-func (r *Ref) Get(key string) *js.Object {
-	return r.Current().Get(key)
-}
-
-func (r *Ref) Set(key string, value any) {
-	r.Current().Set(key, value)
-}
-
-func (r *Ref) Call(name string, args ...any) {
-	r.Current().Call(name, args...)
+func (r *Ref) SetCurrent(value any) {
+	if r != nil && r.holder != nil {
+		r.holder.Set(`current`, value)
+		return
+	}
+	panic(ErrRefNotInitialized)
 }
 
 // UseEffect registers an effect function that is called after rendering.

playground/internal/react/codeBox.go

@@ -55,7 +55,7 @@ func codeBoxComponent(props Props) *Element {
 
 	onScroll := UseCallback(func(e *js.Object) {
 		scrollTop := e.Get(`target`).Get(`scrollTop`).Int()
-		lineNumsRef.Set(`scrollTop`, scrollTop)
+		lineNumsRef.Current().Set(`scrollTop`, scrollTop)
 	}, []any{lineNumsRef})
 
 	onSelect := UseCallback(func(e *js.Object) {
@@ -69,7 +69,7 @@ func codeBoxComponent(props Props) *Element {
 
 	UseEffect(func() {
 		// On first render, focus the code textarea.
-		textAreaRef.Call(`focus`)
+		textAreaRef.Current().Call(`focus`)
 		setSelection(textAreaRef, common.Selection{})
 	}, []any{})
 
@@ -151,7 +151,7 @@ func (cba *codeBoxAssistant) SetCode(sel common.Selection, code string) {
 
 	// Pre-update the textarea value so that the caret and scroll can be set
 	// correctly before the next render so that the next render doesn't reset them.
-	cba.textAreaRef.Set(`value`, code)
+	cba.textAreaRef.Current().Set(`value`, code)
 
 	// Match the diretionallity of the prior selection.
 	if getSelection(cba.textAreaRef).Reversed() {
@@ -167,8 +167,9 @@ func (cba *codeBoxAssistant) SetCode(sel common.Selection, code string) {
 }
 
 func verticallyAutoScroll(textAreaRef *Ref, caret int, code string) {
-	totalHeight := textAreaRef.Get(`scrollHeight`).Int()
-	visibleHeight := textAreaRef.Get(`clientHeight`).Int()
+	textArea := textAreaRef.Current()
+	totalHeight := textArea.Get(`scrollHeight`).Int()
+	visibleHeight := textArea.Get(`clientHeight`).Int()
 	if totalHeight <= visibleHeight {
 		return // No vertical scrolling needed.
 	}
@@ -177,17 +178,18 @@ func verticallyAutoScroll(textAreaRef *Ref, caret int, code string) {
 	curLine := strings.Count(code[:caret], "\n") + 1
 	scrollTop := int(float64(curLine) * float64(totalHeight) / float64(lineCount))
 
-	curTop := textAreaRef.Get(`scrollTop`).Int()
+	curTop := textArea.Get(`scrollTop`).Int()
 	if scrollTop < curTop {
-		textAreaRef.Set(`scrollTop`, scrollTop)
+		textArea.Set(`scrollTop`, scrollTop)
 	} else if scrollTop -= visibleHeight; scrollTop > curTop {
-		textAreaRef.Set(`scrollTop`, scrollTop)
+		textArea.Set(`scrollTop`, scrollTop)
 	}
 }
 
 func horizontallyAutoScroll(textAreaRef *Ref, caret int, code string) {
-	totalWidth := textAreaRef.Get(`scrollWidth`).Int()
-	visibleWidth := textAreaRef.Get(`clientWidth`).Int()
+	textArea := textAreaRef.Current()
+	totalWidth := textArea.Get(`scrollWidth`).Int()
+	visibleWidth := textArea.Get(`clientWidth`).Int()
 	if totalWidth <= visibleWidth {
 		return // No horizontal scrolling needed.
 	}
@@ -197,24 +199,26 @@ func horizontallyAutoScroll(textAreaRef *Ref, caret int, code string) {
 	curLine := editor.MeasureLineLength(code[par:caret])
 	scrollLeft := int(float64(curLine) * float64(totalWidth) / float64(longestLine))
 
-	curLeft := textAreaRef.Get(`scrollLeft`).Int()
+	curLeft := textArea.Get(`scrollLeft`).Int()
 	if scrollLeft < curLeft {
-		textAreaRef.Set(`scrollLeft`, scrollLeft)
+		textArea.Set(`scrollLeft`, scrollLeft)
 	} else if scrollLeft -= visibleWidth; scrollLeft > curLeft {
-		textAreaRef.Set(`scrollLeft`, scrollLeft)
+		textArea.Set(`scrollLeft`, scrollLeft)
 	}
 }
 
 func getSelection(textAreaRef *Ref) common.Selection {
-	start := textAreaRef.Get(`selectionStart`).Int()
-	end := textAreaRef.Get(`selectionEnd`).Int()
+	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) {
-	textAreaRef.Set(`selectionStart`, sel.Start)
-	textAreaRef.Set(`selectionEnd`, sel.End)
+	textArea := textAreaRef.Current()
+	textArea.Set(`selectionStart`, sel.Start)
+	textArea.Set(`selectionEnd`, sel.End)
 }
 
 func getLineNumbers(lineCount int) string {

playground/internal/react/playground.go

@@ -1,8 +1,6 @@
 package react
 
 import (
-	"fmt"
-
 	"github.com/gopherjs/gopherjs/compiler"
 	"github.com/gopherjs/gopherjs/js"
 )
@@ -19,45 +17,63 @@ func playgroundComponent(props Props) *Element {
 		fmtImports, setFmtImports = UseState(true)
 		lightTheme, setLightTheme = UseStateLazy(getDefaultToLightTheme)
 		runButtonRef              = UseRef()
+		isLoadingSnippet          = UseRef()
+		settingUrlHash            = UseRef()
 	)
 
 	UseEffect(func() {
 		setDataTheme(lightTheme)
 	}, []any{lightTheme})
 
 	UseEffect(func() {
+		if isLoadingSnippet.Current().Bool() {
+			isLoadingSnippet.SetCurrent(false)
+			return
+		}
+
 		// code changed so clear share URL
+		settingUrlHash.SetCurrent(true)
 		setShareUrl.Invoke(``)
 		getLocation().Set(`hash`, ``)
 	}, []any{code})
 
-	UseEffect(func() {
-		hash := getLocation().Get(`hash`).String()
-		globals.SnippetsStore().Read(hash, func(snippet string, err error) {
-			if err != nil {
+	UseEffectWithCleanup(func() func() {
+		hashChanged := func() {
+			// if the hash is being set programmatically, ignore this event
+			if settingUrlHash.Current().Bool() {
+				settingUrlHash.SetCurrent(false)
+				return
+			}
+
+			hash := getLocation().Get(`hash`).String()
+			isLoadingSnippet.SetCurrent(true)
+			globals.SnippetsStore().Read(hash, func(snippet string, err error) {
 				o := Output(setOutput)
 				o.Clear()
-				o.AddError(err)
-			}
-			// even on error, set the code so the default code is shown.
-			setCode.Invoke(snippet)
-		})
+				if err != nil {
+					setShareUrl.Invoke(``)
+					o.AddError(err)
+				} else {
+					setShareUrl.Invoke(hash)
+				}
+				// even on error, set the code so the default code is shown.
+				setCode.Invoke(snippet)
+			})
+		}
+		getTopWindow().Call(`addEventListener`, `hashchange`, hashChanged)
+		hashChanged() // Load initial hash
+		return func() {
+			getTopWindow().Call(`removeEventListener`, `hashchange`, hashChanged)
+		}
 	}, []any{})
 
-	/* TODO(grantnelson-wf): Implement hashchange loading
-	dom.GetWindow().Top().AddEventListener("hashchange", false, func(event dom.Event) {
-		event.PreventDefault()
-		callback()
-	})
-	*/
-
 	onEscapeCode := UseCallback(func() {
 		// Escape will move focus to the run button.
 		// This is for eccessability so that users can easily run the
 		// code after editing. Or at minimum, users can exit the text area
 		// like they would be able to with tab stops but our editor is consuming
 		// tab key presses so tab stops won't work when in the text area.
-		runButtonRef.Call(`focus`)
+		runButtonRef.Current().Call(`focus`)
 	}, []any{runButtonRef})
 
 	onSaveKeyPress := UseCallback(func() {
@@ -73,16 +89,18 @@ func playgroundComponent(props Props) *Element {
 	}, []any{fmtImports})
 
 	onShareClick := UseCallback(func() {
-		fmt.Printf(">> Code to share: %q\n", code) // TODO(grantnelson-wf): REMOVE
 		globals.SnippetsStore().Write(code, func(url string, err error) {
+			settingUrlHash.SetCurrent(true)
+			output := Output(setOutput)
+			output.Clear()
 			if err != nil {
 				setShareUrl.Invoke(``)
-				output := Output(setOutput)
-				output.Clear()
+				getLocation().Set(`hash`, ``)
 				output.AddError(err)
 				return
 			}
 			setShareUrl.Invoke(url)
+			getLocation().Set(`hash`, url)
 		})
 	}, []any{code, setOutput, setShareUrl})
 
@@ -127,6 +145,10 @@ func setDataTheme(lightTheme bool) {
 	js.Global.Get(`document`).Get(`documentElement`).Call(`setAttribute`, `data-theme`, theme)
 }
 
+func getTopWindow() *js.Object {
+	return js.Global.Get(`window`).Get(`top`)
+}
+
 func getLocation() *js.Object {
-	return js.Global.Get(`window`).Get(`top`).Get(`location`)
+	return getTopWindow().Get(`location`)
 }

playground/internal/react/shareUrlControl.go

@@ -18,7 +18,7 @@ func shareUrlComponent(props Props) *Element {
 
 	UseEffect(func() {
 		if len(shareUrl) > 0 {
-			shareUrlRef.Call(`focus`)
+			shareUrlRef.Current().Call(`focus`)
 		}
 	}, []any{shareUrl})