fixing runner and linking title

Author: grantnelson-wf

playground/go.mod

@@ -4,7 +4,7 @@ go 1.20
 
 require (
 	github.com/google/go-cmp v0.5.8
-	github.com/gopherjs/gopherjs v1.19.0-beta2.0.20260119142308-2cf5f59df243
+	github.com/gopherjs/gopherjs v1.20.1-0.20260123155143-346e3e9e6759
 	golang.org/x/tools v0.16.0
 	honnef.co/go/js/xhr v0.0.0-20150307031022-00e3346113ae
 )

playground/go.sum

@@ -28,6 +28,15 @@ import (
 	log "github.com/sirupsen/logrus"
 )
 
+const (
+	pkgPath = `pkg/`
+	pkgExt  = `.zip`
+
+	jsPkgPath         = `github.com/gopherjs/gopherjs/js`
+	nosyncPkgPath     = `github.com/gopherjs/gopherjs/nosync`
+	playgroundPkgPath = `github.com/gopherjs/gopherjs.github.io/playground`
+)
+
 type logLevelFlag struct{ log.Level }
 
 func (l *logLevelFlag) Set(raw string) error { return l.UnmarshalText([]byte(raw)) }
@@ -53,7 +62,7 @@ func run() error {
 		return fmt.Errorf("failed to enumerate standard library packages")
 	}
 	packages = importable(packages)
-	packages = append(packages, "github.com/gopherjs/gopherjs/js", "github.com/gopherjs/gopherjs/nosync")
+	packages = append(packages, jsPkgPath, nosyncPkgPath)
 
 	for _, path := range packages {
 		pkg, err := s.XContext().Import(path, ``, 0)
@@ -84,7 +93,7 @@ func run() error {
 }
 
 func writePackage(target string, srcs *sources.Sources) (err error) {
-	path := filepath.Join(target, filepath.FromSlash(srcs.ImportPath)+".a.js")
+	path := filepath.Join(target, filepath.FromSlash(srcs.ImportPath)+pkgExt)
 	if err := os.MkdirAll(filepath.Dir(path), 0755); err != nil {
 		return fmt.Errorf("failed to create precompiled package directory %q: %w", filepath.Dir(path), err)
 	}
@@ -113,11 +122,11 @@ func writePackage(target string, srcs *sources.Sources) (err error) {
 // targetDir returns path to the directory where precompiled packages must be
 // stored.
 func targetDir(s *build.Session) (string, error) {
-	pkg, err := s.XContext().Import("github.com/gopherjs/gopherjs.github.io/playground", "", gobuild.FindOnly)
+	pkg, err := s.XContext().Import(playgroundPkgPath, "", gobuild.FindOnly)
 	if err != nil {
 		return "", fmt.Errorf("failed to find playground package directory: %w", err)
 	}
-	target := filepath.Join(pkg.Dir, "pkg")
+	target := filepath.Join(pkg.Dir, pkgPath)
 	if _, err := os.Stat(target); os.IsNotExist(err) {
 		return "", fmt.Errorf("target directory %q not found", target)
 	}

playground/internal/cmd/precompile/precompile.go

@@ -3,20 +3,33 @@ package common
 // Output is the interface describing the functions for GUI output box.
 // This interface is to separate the playground logic from the actual GUI implementation.
 type Output interface {
-
 	// Clear clears all output.
 	Clear()
 
 	// AddError adds an error message to the output.
+	// This will stop scrolling the output since typically
+	// this for compiler errors where we want to have the top
+	// of the error in view.
 	//
 	// All text including new lines will be escaped for HTML.
 	AddError(err error)
 
-	// AddOutput adds output text to the output.
+	// AppendOut appends output text to the output.
+	// This is typically used like appending new content from os.Stdout.
 	// This will also scroll the output box to the bottom.
 	//
-	// If a form feed ("\0c") is encountered in the output,
+	// If a form feed ("\x0c") is encountered in the output,
 	// the output box is cleared before adding the remaining output.
 	// All text including new lines will be escaped for HTML.
-	AddOutput(out string)
+	AppendOut(out string)
+
+	// AppendErr appends error text to the output.
+	// This is similar to AppendOut but for os.Stdout
+	// so the text will be red and the auto-scrolling will stop.
+	AppendErr(err string)
+
+	// AddSystem appends system text to the output on its own line.
+	// This is similar to AppendOut but for messages about the
+	// build and run of GopherJS. The text will be gray.
+	AddSystem(err string)
 }

playground/internal/common/output.go

@@ -1,37 +1,51 @@
 package page
 
 import (
+	"strings"
+
 	"github.com/gopherjs/gopherjs/compiler"
 
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/react"
 )
 
+const (
+	repoUrl = `https://github.com/gopherjs/gopherjs`
+	version = compiler.Version
+)
+
+var tagUrl = func() string {
+	if index := strings.IndexByte(version, '+'); index >= 0 {
+		return repoUrl + `/releases/tag/v` + version[:index]
+	}
+	return repoUrl
+}()
+
 func BannerTitle() *react.Element {
 	return react.CreateElement(bannerTitleComponent, react.Props{})
 }
 
 func bannerTitleComponent(props react.Props) *react.Element {
-	version := react.UseMemo(func() string {
-		return compiler.Version
-	}, []any{})
-
 	return react.Span(react.Props{
 		`id`: `banner-title`,
-	},
-		`playground `,
+	}, `playground `,
 		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 `,
+			react.CreateElement(`a`, react.Props{
+				`href`:   repoUrl,
+				`target`: `_blank`,
+			}, `GopherJS`),
+			` `,
 		),
 		react.Span(react.Props{
 			`id`: `banner-title-version`,
 		},
-			// TODO(grantnelson-wf): Make this version a link to release notes
-			//     https://github.com/gopherjs/gopherjs/releases/tag/v1.19.0-beta2
-			`(`+version+`)`,
+			`(`,
+			react.CreateElement(`a`, react.Props{
+				`href`:   tagUrl,
+				`target`: `_blank`,
+			}, version),
+			`)`,
 		),
 	)
 }

playground/internal/page/bannerTitle.go

@@ -9,8 +9,6 @@ import (
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/undoRedo"
 )
 
-const verbose = true
-
 // globals are the global objects used by the react components.
 //
 // Since passing Go structs through React props will cause problems
@@ -27,7 +25,7 @@ var globals = struct {
 }{
 	UndoRedo:      OnceValue(undoRedo.NewStack),
 	SnippetsStore: OnceValue(snippets.NewLocalStore), // TODO(grantnelson-wf): Switch to snippets.NewStore before deploying
-	Runner:        OnceValue(func() common.Runner { return runner.New(runner.NewFetcher(verbose)) }),
+	Runner:        OnceValue(func() common.Runner { return runner.New(runner.NewFetcher(false)) }),
 }
 
 // OnceValue initializes a value on the first call

playground/internal/page/globals.go

@@ -3,16 +3,20 @@ package page
 import (
 	"fmt"
 	"go/scanner"
+	"strings"
+
+	"github.com/gopherjs/gopherjs/compiler/errlist"
 
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/common"
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/react"
 )
 
 const (
-	errType    = `err`
-	textType   = `text`
+	stderrType = `stderr`
+	stdoutType = `stdout`
+	systemType = `system`
 	typeKey    = `type`
-	contextKey = `context`
+	contentKey = `content`
 )
 
 func Output(setOutput react.Func) common.Output {
@@ -25,29 +29,77 @@ func (o *outputImpl) Clear() {
 	o.setOutput.Invoke([]any{})
 }
 
+func ungroupError(err error) []error {
+	switch t := err.(type) {
+	case scanner.ErrorList:
+		errs := make([]error, len(t))
+		for i, entry := range t {
+			errs[i] = entry
+		}
+		return errs
+	case errlist.ErrorList:
+		return t
+	default:
+		return []error{err}
+	}
+}
+
+func appendContent(items []any, itemTyp, content string, startNewLine bool) []any {
+	// Check for a form feed ("\x0c") to clear the output.
+	if index := strings.LastIndexByte(content, '\x0c'); index >= 0 {
+		items = []any{}
+		content = content[index:]
+	}
+
+	// Attempt to append the content to a prior item if the type matches,
+	// also prepend a new line to the content if needed and requested.
+	if maxItem := len(items) - 1; maxItem >= 0 {
+		lastItem := items[maxItem].(map[string]any)
+
+		lastContent := lastItem[contentKey].(string)
+		if startNewLine && !strings.HasSuffix(lastContent, "\n") {
+			content = "\n" + content
+		}
+
+		if lastItem[typeKey] == itemTyp {
+			lastItem[contentKey] = lastContent + content
+			return items
+		}
+	}
+
+	// Append new type of content.
+	return append(items, map[string]any{typeKey: itemTyp, contentKey: content})
+}
+
 func (o *outputImpl) AddError(err error) {
 	o.setOutput.Invoke(func(items []any) []any {
-		// TODO(grantnelson-wf): Need to move errlist.ErrorList out of internal so that we can split it out here
-		if list, ok := err.(scanner.ErrorList); ok {
-			for _, entry := range list {
-				items = append(items, map[string]any{typeKey: errType, contextKey: entry.Error()})
+		content := ``
+		for _, entry := range ungroupError(err) {
+			text := entry.Error()
+			content += text
+			if !strings.HasSuffix(text, "\n") {
+				content += "\n"
 			}
-			return items
 		}
-		return append(items, map[string]any{typeKey: errType, contextKey: err.Error()})
+		return appendContent(items, stderrType, content, true)
 	})
 }
 
-func (o *outputImpl) AddOutput(out string) {
+func (o *outputImpl) AppendOut(out string) {
 	o.setOutput.Invoke(func(items []any) []any {
-		if maxItem := len(items) - 1; maxItem >= 0 {
-			lastItem := items[maxItem].(map[string]any)
-			if lastItem[typeKey] == textType {
-				lastItem[contextKey] = lastItem[contextKey].(string) + out
-				return items
-			}
-		}
-		return append(items, map[string]any{typeKey: textType, contextKey: out})
+		return appendContent(items, stdoutType, out, false)
+	})
+}
+
+func (o *outputImpl) AppendErr(err string) {
+	o.setOutput.Invoke(func(items []any) []any {
+		return appendContent(items, stderrType, err, false)
+	})
+}
+
+func (o *outputImpl) AddSystem(sys string) {
+	o.setOutput.Invoke(func(items []any) []any {
+		return appendContent(items, systemType, sys+"\n", true)
 	})
 }
 
@@ -64,24 +116,21 @@ func outputBoxComponent(props react.Props) *react.Element {
 		outputBoxRef = react.UseRef()
 	)
 
+	// Add effect so that if there are no stderr's in the output, scroll to the bottom.
 	react.UseEffect(func() {
-		// If there are only errors, scroll to the top,
-		// otherwise scroll to the bottom.
-		outputBox := outputBoxRef.Current()
-		scrollTop := 0
-		if hasNonErrors(output) {
-			scrollTop = outputBox.Get(`scrollHeight`).Int()
+		if !hasErrors(output) {
+			outputBox := outputBoxRef.Current()
+			scrollTop := outputBox.Get(`scrollHeight`).Int()
+			outputBox.Set(`scrollTop`, scrollTop)
 		}
-		outputBox.Set(`scrollTop`, scrollTop)
 	}, []any{output})
 
-	children := make([]react.Node, 0, len(output))
+	children := make([]react.Node, len(output))
 	for i, item := range output {
 		itemMap := item.(map[string]any)
-		children = append(children, outputLine(
-			i, itemMap[typeKey] == errType,
-			itemMap[contextKey].(string),
-		))
+		classType := itemMap[typeKey].(string)
+		content := itemMap[contentKey].(string)
+		children[i] = outputLine(i, classType, content)
 	}
 
 	return react.Div(react.Props{
@@ -92,42 +141,35 @@ func outputBoxComponent(props react.Props) *react.Element {
 	}, children...))
 }
 
-// hasNonErrors determines if any output is not an error,
-// otherwise the list is empty or only contains errors.
-func hasNonErrors(output []any) bool {
+// hasErrors determines if any output is an error.
+func hasErrors(output []any) bool {
 	for _, item := range output {
-		if item.(map[string]any)[typeKey] != errType {
+		if item.(map[string]any)[typeKey] == stderrType {
 			return true
 		}
 	}
 	return false
 }
 
-// outputLine creates a React element for a single output line.
+// outputLine creates a React element for a span of output content.
 // 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) *react.Element {
+func outputLine(index int, classType string, content string) *react.Element {
 	return react.CreateElement(outputLineComponent, react.Props{
-		`index`:   index,
-		`isError`: isError,
-		`content`: content,
+		`index`:     index,
+		`classType`: classType,
+		`content`:   content,
 	})
 }
 
 func outputLineComponent(props react.Props) *react.Element {
 	var (
-		index   = props.GetInt(`index`)
-		isError = props.GetBool(`isError`)
-		content = props.GetString(`content`)
+		index     = props.GetInt(`index`)
+		classType = props.GetString(`classType`)
+		content   = props.GetString(`content`)
 	)
-
-	classType := `output-text`
-	if isError {
-		classType = `output-err`
-	}
 	id := fmt.Sprintf(`output-item-%d`, index)
-
-	return react.Pre(react.Props{
+	return react.Span(react.Props{
 		`className`: classType,
 		`id`:        id,
 	}, content)