Working on periodic updates and fixes

Author: grantnelson-wf

playground/gen.go

@@ -1,3 +1,6 @@
+// If you do not have go1.20.14 or a version supported by gopherjs,
+// see https://go.dev/doc/manage-install#installing-multiple
+//
 //go:generate go1.20.14 run ./internal/cmd/precompile
 //go:generate go1.20.14 install github.com/gopherjs/gopherjs
 //go:generate env GOOS=js GOARCH=ecmascript gopherjs build -m .

playground/internal/common/throttle.go

@@ -0,0 +1,19 @@
+package common
+
+// Throttle will reduce the amount of time that some event occurs.
+//
+// Calling update with a callback function to call will start a timer,
+// unless a timer has already been started. After a specific amount of time
+// since the timer was first started, the most recent callback is called and
+// the timer is stopped.
+//
+// This is useful for handling things like periodically evaluating some value
+// where the update may occur rapidly but we only want to occationally
+// perform the evaluation in the most up-to-date value.
+//
+// This interface allows the timers of the throttle to be replaced
+// with a mock implementation for testing.
+type Throttle interface {
+	Update(callback func())
+	Stop()
+}

playground/internal/common/undoRedo.go

@@ -2,7 +2,6 @@ package common
 
 type UndoRedoStack interface {
 	PerformUndo(cb CodeBoxWrapper)
-
 	PerformRedo(cb CodeBoxWrapper)
 
 	// AddBreak makes any prior changes not joined into any future changes.

playground/internal/page/globals.go

@@ -2,13 +2,19 @@ package page
 
 import (
 	"sync"
+	"time"
 
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/common"
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/runner"
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/snippets"
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/undoRedo"
 )
 
+const (
+	verbose     = false
+	prefetchDur = 3 * time.Second
+)
+
 // globals are the global objects used by the react components.
 //
 // Since passing Go structs through React props will cause problems
@@ -19,13 +25,15 @@ import (
 // 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
-	Runner        func() common.Runner
+	UndoRedo         func() common.UndoRedoStack
+	SnippetsStore    func() common.SnippetStore
+	Runner           func() common.Runner
+	PrefetchThrottle func() common.Throttle
 }{
-	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(false)) }),
+	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(verbose, runner.NewFetcher(verbose)) }),
+	PrefetchThrottle: OnceValue(func() common.Throttle { return runner.NewThrottle(prefetchDur) }),
 }
 
 // OnceValue initializes a value on the first call

playground/internal/page/outputBox.go

@@ -133,6 +133,9 @@ func outputBoxComponent(props react.Props) *react.Element {
 		children[i] = outputLine(i, classType, content)
 	}
 
+	// TODO(grantnelson-wf): Check if the output-box-inner div is what is causing
+	// a lot of output to suddenly cause the page to resize.
+
 	return react.Div(react.Props{
 		`id`:  `output-box`,
 		`ref`: outputBoxRef,

playground/internal/page/playground.go

@@ -140,7 +140,12 @@ func playgroundComponent(props react.Props) *react.Element {
 		println("Save key pressed") // TODO(grantnelson-wf): Implement by running format or just do nothing?
 	}, []any{})
 
-	// TODO(grantnelson-wf): Implement a periodic read of the code after a change to preload packages.
+	// Whenever the code is changed wait a little bit then try to preload imported packages.
+	react.UseEffect(func() {
+		globals.PrefetchThrottle().Update(func() {
+			globals.Runner().Preload(code)
+		})
+	}, []any{code})
 
 	// Create a callback for when the run button is pressed.
 	onRun := react.UseCallback(func() {

playground/internal/runner/runner.go

@@ -21,12 +21,14 @@ import (
 const pseudoFileName = `prog.go`
 
 type runner struct {
-	cache *packageCache
+	verbose bool
+	cache   *packageCache
 }
 
-func New(fetcher common.Fetcher) common.Runner {
+func New(verbose bool, fetcher common.Fetcher) common.Runner {
 	return &runner{
-		cache: newPackageCache(fetcher),
+		verbose: verbose,
+		cache:   newPackageCache(fetcher),
 	}
 }
 
@@ -67,13 +69,18 @@ func (r *runner) Compile(goCode string, then func(string, error)) {
 }
 
 func (r *runner) syncCompile(goCode string) (string, error) {
+	if r.verbose {
+		println(`starting compile`)
+	}
+
 	fileSet := token.NewFileSet()
 	file, err := parser.ParseFile(fileSet, pseudoFileName, goCode, parser.ParseComments)
 	if err != nil {
 		return ``, err
 	}
 
-	// TODO: Need to detect if [goCode] has no main method but instead has Test, Bench, or Example, methods.
+	// TODO(grantnelson-wf): Idea: We could detect if [goCode] has no main method and
+	// instead has Test, Bench, or Example, methods, then run the code as a test.
 
 	root := &sources.Sources{
 		ImportPath: `main`,
@@ -88,15 +95,24 @@ func (r *runner) syncCompile(goCode string) (string, error) {
 
 	allSources, err := r.collectAllSources(root)
 	if err != nil {
+		if r.verbose {
+			println(`compile failed`)
+		}
 		return ``, err
 	}
 
 	archives, err := r.prepareAndCompilePackages(root.ImportPath, allSources)
 	if err != nil {
+		if r.verbose {
+			println(`compile failed`)
+		}
 		return ``, err
 	}
 
 	jsCode := r.write(archives)
+	if r.verbose {
+		println(`done compiling`)
+	}
 	return jsCode, nil
 }
 
@@ -187,6 +203,9 @@ func (r *runner) write(allPkgs []*compiler.Archive) string {
 }
 
 func (r *runner) Run(jsCode string) {
+	if r.verbose {
+		println(`running compiled code`)
+	}
 	js.Global.Set("$checkForDeadlock", true)
 	js.Global.Call("eval", js.InternalObject(jsCode))
 }

playground/internal/runner/throttle.go

@@ -0,0 +1,61 @@
+package runner
+
+import (
+	"sync"
+	"time"
+
+	"github.com/gopherjs/gopherjs.github.io/playground/internal/common"
+)
+
+type throttleImp struct {
+	lock     *sync.Mutex
+	dur      time.Duration
+	timer    *time.Timer
+	pending  bool
+	callback func()
+}
+
+func NewThrottle(dur time.Duration) common.Throttle {
+	return &throttleImp{
+		lock:     &sync.Mutex{},
+		dur:      dur,
+		timer:    nil,
+		pending:  false,
+		callback: nil,
+	}
+}
+
+func (t *throttleImp) Update(callback func()) {
+	t.lock.Lock()
+	defer t.lock.Unlock()
+
+	t.callback = callback
+	if t.timer == nil {
+		t.timer = time.AfterFunc(t.dur, t.timeout)
+	} else if !t.pending {
+		t.timer.Reset(t.dur)
+	}
+	t.pending = true
+}
+
+func (t *throttleImp) timeout() {
+	t.lock.Lock()
+	defer t.lock.Unlock()
+
+	if t.callback != nil {
+		t.callback()
+		t.callback = nil
+	}
+	t.pending = false
+}
+
+func (t *throttleImp) Stop() {
+	t.lock.Lock()
+	defer t.lock.Unlock()
+
+	if t.timer != nil {
+		t.timer.Stop()
+		t.timer = nil
+	}
+	t.callback = nil
+}