connecting it up

Author: grantnelson-wf

playground/internal/react/bannerTitle.go

@@ -15,7 +15,14 @@ func bannerTitleComponent(props Props) *Element {
 		Span(Props{
 			`id`: `banner-title-sub`,
 		},
-			`GopherJS (`, version, `)`,
+			// TODO(grantnelson-wf): Make this a link to the gopherjs repo
+			`GopherJS `,
+		),
+		Span(Props{
+			`id`: `banner-title-version`,
+		},
+			// TODO(grantnelson-wf): Make this version a link to release notes
+			`(`+version+`)`,
 		),
 	)
 }

playground/internal/react/bindings.go

@@ -197,40 +197,26 @@ 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 dependency are provided, the effect is only run once after the initial render.
+//
+// If nil is given for the dependencies, the effect is re-run after every render.
+// If an empty `[]any{}` is given for the dependencies, the effect is only run once after the initial render.
+//
 // See: https://react.dev/reference/react/useEffect
-func UseEffect(effect func(), deps ...any) {
-	if len(deps) == 0 {
-		deps = []any{}
-	}
+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.
+//
+// If nil is given for the dependencies, the effect is re-run after every render.
+// If an empty `[]any{}` is given for the dependencies, 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) {
-	if len(deps) == 0 {
-		deps = []any{}
-	}
 	react().Call(`useEffect`, effect, deps)
 }

playground/internal/react/codeBox.go

@@ -64,6 +64,10 @@ func (cba *codeBoxAssistant) onInput(e *js.Object) {
 }
 
 func (cba *codeBoxAssistant) onKeyDown(e *js.Object) {
+	// TODO(grantnelson-wf): Maybe handle Shift+Tab for un-indenting the current line.
+	// TODO(grantnelson-wf): Handle Ctrl+/ for commenting/uncommenting the current line or selection.
+	// TODO(grantnelson-wf): Handle Ctrl+S for saving the code, just run formatting, or just ignore it.
+	// TODO(grantnelson-wf): Maybe handle auto-text like `/*` adds `*/`, `"` adds another `"`, `[` adds `]`, etc.
 	if cba.handleKeyDown(e.Get(`keyCode`).Int()) {
 		e.Call(`preventDefault`)
 	}

playground/internal/react/playground.go

@@ -30,16 +30,16 @@ func Playground() *Element {
 
 		UseEffect(func() {
 			setDataTheme(lightTheme)
-		}, lightTheme)
+		}, []any{lightTheme})
 
 		UseEffect(func() {
 			// code changed so clear share URL
 			setShareUrl(``)
 			getLocation().Set(`hash`, ``)
 			println("Code changed, cleared share URL") // TODO(grantnelson-wf): Remove debug
-		}, code)
+		}, []any{code})
 
-		UseEffect(pa.initCode)
+		UseEffect(pa.initCode, []any{})
 
 		/* TODO(grantnelson-wf): Implement hashchange loading
 		dom.GetWindow().Top().AddEventListener("hashchange", false, func(event dom.Event) {

playground/internal/react/shareUrlControl.go

@@ -40,7 +40,7 @@ func shareUrlComponent(props Props) *Element {
 			`type`:      `text`,
 			`className`: className,
 			`ref`:       shareUrlRef,
-			`value`:     `Hello!`, //shareUrl, // TODO(grantnelson): Fix
+			`value`:     shareUrl,
 			`readOnly`:  true,
 			`onFocus`:   onShareUrlFocus,
 		}),

playground/playground.css

@@ -1,39 +1,46 @@
 :root {
 	--color-banner-title-text: black;
 	--color-banner-background: white;
+
 	--color-code-text: black;
-	--color-code-background: #ebdac7;
+	--color-code-background: #EBDAC7;
 	--color-code-box-borders: black;
 	--color-line-nums-text: #888;
-	--color-line-nums-background: #ebdac7;
+	--color-line-nums-background: #EBDAC7;
 	--color-code-line-nums-border: black;
+
 	--color-output-normal-text: black;
-	--color-output-normal-background: #ddd;
+	--color-output-normal-background: #DDD;
 	--color-output-error-text: #800;
-	--color-output-error-background: #fcc;
-	--color-run-button-background: #eee;
-	--color-run-button-boarder: #ccc;
-	--color-run-button-text: #222;
-	--color-run-button-hover-background: #666;
-	--color-run-button-hover-boarder: #ccc;
-	--color-run-button-hover-text: #fff;
-	--color-buttons-background: #eee;
-	--color-buttons-boarder: #ccc;
+	--color-output-error-background: #FCC;
+
+	--color-run-button-background: #FFF5D5;
+	--color-run-button-boarder: #0E6A8A;
+	--color-run-button-text: #0E6A8A;
+	--color-run-button-hover-background: #0E6A8A;
+	--color-run-button-hover-boarder: #0E6A8A;
+	--color-run-button-hover-text: #FFF5D5;
+
+	--color-buttons-background: #EEE;
+	--color-buttons-boarder: #CCC;
 	--color-buttons-text: #222;
-	--color-buttons-hover-background: #666;
-	--color-buttons-hover-boarder: #ccc;
-	--color-buttons-hover-text: #fff;
-	--color-share-url-background: #eee;
-	--color-share-url-boarder: #ccc;
+	--color-buttons-hover-background: #0E6A8A;
+	--color-buttons-hover-boarder: #0E6A8A;
+	--color-buttons-hover-text: #FFF5D5;
+
+	--color-share-url-background: #EEE;
+	--color-share-url-boarder: #CCC;
 	--color-share-url-text: black;
-	--color-toggle-background: #ccc;
-	--color-toggle-background-checked: #ccc;
-	--color-toggle-foreground: #333;
-	--color-toggle-foreground-checked: #333;
+
+	--color-toggle-background: #CCC;
+	--color-toggle-background-checked: #0E6A8A;
+	--color-toggle-foreground: #0E6A8A;
+	--color-toggle-foreground-checked: #FFF5D5;
 
 	--font-family-banner-title: Arial, sans;
 	--font-size-banner-title: 32px;
 	--font-size-banner-title-sub: 24px;
+	--font-size-banner-title-version: 24px;
 	--font-family-controls: sans-serif;
 	--font-size-controls: 16px;
 	--size-toggle-box: 30px;
@@ -88,6 +95,10 @@ html, body {
 	font-size: var(--font-size-banner-title-sub);
 }
 
+#banner-title-version {
+	font-size: var(--font-size-banner-title-version);
+}
+
 /* The part of the banner containing the buttons and controls */
 #controls {
 	display: flex;
@@ -104,6 +115,7 @@ html, body {
 	border-radius: 5px;
 	font-family: var(--font-family-controls);
 	font-size: var(--font-size-controls);
+	/* TODO(grantnelson-wf): Add some shadow, like box-shadow: 5px 10px 10px #888888;*/
 }
 
 /* The run code button */