🍱 all: Implement output UI initialisation (#106)

Implement output UI initialisation from evy source code analysis:
* show/hide canvas if there are some/no drawing functions in evy code.
* show/hide read input text field
* show/hide sliders

Update the parser.Program ast node to expose `CalledBuiltinFuncs` which
determine UI changes. Include eventhandler implementation in code analysis.

Note: there is a race condition when navigating back/forwards between
stopping the program and reinstantiating wasmInst for formatting / ui initialisation of new code.
wasmInst is asynchronously set to undefined after the wasm
execution has finished and called afterStop function.

This merges the following commits:
* frontend: Expose jsActions as evy command
* all: Implement output UI initialisation
* wasm: Add forceYield utility

     frontend/index.js          | 71 +++++++++++++++++++++++++++--------
     pkg/evaluator/evaluator.go |  6 +--
     pkg/parser/ast.go          |  7 +++-
     pkg/parser/expression.go   |  4 +-
     pkg/parser/parser.go       | 22 ++++++++++-
     pkg/parser/parser_test.go  | 12 ++++++
     pkg/wasm/imports.go        |  7 +++-
     pkg/wasm/main.go           | 77 ++++++++++++++++++++++++++------------
     8 files changed, 157 insertions(+), 49 deletions(-)

Pull-Request: #106

Author: juliaogris

frontend/index.js

@@ -10,6 +10,7 @@ let jsReadInitialised = false
 let stopped = true
 let animationStart
 let courses
+let actions = "fmt,ui,eval"
 
 // --- Initialise ------------------------------------------------------
 
@@ -37,6 +38,8 @@ function newEvyGo() {
   const evyEnv = {
     jsPrint,
     jsRead,
+    jsActions,
+    jsPrepareUI,
     evySource,
     setEvySource,
     move,
@@ -52,6 +55,25 @@ function newEvyGo() {
   go.importObject.env = Object.assign(go.importObject.env, evyEnv)
   return go
 }
+// jsActions returns the comma separated evy actions to executed, e.g.
+// fmt,ui,eval. The result string is written to wasm memory
+// bytes. jsActions return the pointer and length of these bytes
+// encoded into a single 64 bit number
+function jsActions() {
+  return stringToMemAddr(actions)
+}
+
+function jsPrepareUI(ptr, len) {
+  const arr = memToString(ptr, len).split(",")
+  const names = Object.fromEntries(arr.map((k) => [k, true]))
+  names["read"] ? showElements(".read") : hideElements(".read")
+  names["input"] ? showElements(".input") : hideElements(".input")
+  needsCanvas(names) ? showElements(".canvas") : hideElements(".canvas")
+}
+
+function needsCanvas(f) {
+  return f.move || f.line || f.width || f.circle || f.rect || f.color || f.colour
+}
 
 // jsPrint converts wasmInst memory bytes from ptr to ptr+len to string and
 // writes it to the output textarea.
@@ -125,18 +147,6 @@ function ptrLenToBigInt({ ptr, len }) {
   return ptrLenNum
 }
 
-function getElements(q) {
-  if (!q) {
-    return []
-  }
-  try {
-    return Array.from(document.querySelectorAll(q))
-  } catch (error) {
-    consol.error("getElements", error)
-    return []
-  }
-}
-
 // --- UI: handle run --------------------------------------------------
 
 async function handleRun() {
@@ -163,8 +173,8 @@ async function handleMobRun() {
   stop()
 }
 
-// start calls the evy main() wasm/go code parsing, formatting and
-// evaluating evy code.
+// start calls evy wasm/go main(). It parses, formats and evaluates evy
+// code and initialises the output ui.
 async function start() {
   stopped = false
   wasmInst = await WebAssembly.instantiate(wasmModule, go.importObject)
@@ -176,6 +186,14 @@ async function start() {
   runButton.classList.add("running")
   runButtonMob.innerText = "Stop"
   runButtonMob.classList.add("running")
+  actions = "fmt,ui,eval"
+  go.run(wasmInst)
+}
+
+// format calls evy wasm/go main() but doesn't evaluate.
+async function format() {
+  wasmInst = await WebAssembly.instantiate(wasmModule, go.importObject)
+  actions = "fmt,ui"
   go.run(wasmInst)
 }
 
@@ -264,6 +282,7 @@ function ctrlEnterListener(e) {
 
 async function handleHashChange() {
   hideModal()
+  await stopAndSlide() // go to code screen for new code
   let opts = parseHash()
   if (!opts.source && !opts.unit) {
     opts = { unit: "welcome" }
@@ -283,7 +302,7 @@ async function handleHashChange() {
     document.querySelector("#code").value = source
     updateBreadcrumbs(crumbs)
     clearOutput()
-    await stopAndSlide() // go to code screen for new code
+    format()
   } catch (err) {
     console.error(err)
   }
@@ -593,3 +612,25 @@ function showConfetti() {
     confettiDivs.forEach((div) => div.classList.add("fadeout"))
   }, 8500)
 }
+
+// --- Utilities -------------------------------------------------------
+
+function getElements(q) {
+  if (!q) {
+    return []
+  }
+  try {
+    return Array.from(document.querySelectorAll(q))
+  } catch (error) {
+    consol.error("getElements", error)
+    return []
+  }
+}
+
+function showElements(q) {
+  getElements(q).map((el) => el.classList.remove("hidden"))
+}
+
+function hideElements(q) {
+  getElements(q).map((el) => el.classList.add("hidden"))
+}

pkg/evaluator/evaluator.go

@@ -139,11 +139,7 @@ func (e *Evaluator) Eval(node parser.Node) (Value, error) {
 }
 
 func (e *Evaluator) EventHandlerNames() []string {
-	names := make([]string, 0, len(e.eventHandlers))
-	for name := range e.eventHandlers {
-		names = append(names, name)
-	}
-	return names
+	return parser.EventHandlerNames(e.eventHandlers)
 }
 
 func (e *Evaluator) HandleEvent(ev Event) error {

pkg/parser/ast.go

@@ -13,8 +13,9 @@ type Node interface {
 }
 
 type Program struct {
-	Statements    []Node
-	EventHandlers map[string]*EventHandlerStmt
+	Statements         []Node
+	EventHandlers      map[string]*EventHandlerStmt
+	CalledBuiltinFuncs []string
 
 	alwaysTerminates bool
 	formatting       *formatting
@@ -116,6 +117,8 @@ type FuncDeclStmt struct {
 	VariadicParam *Var
 	ReturnType    *Type
 	Body          *BlockStatement
+
+	isCalled bool
 }
 
 type IfStmt struct {

pkg/parser/expression.go

@@ -57,7 +57,9 @@ func (p *parser) parseTopLevelExpr(scope *scope) Node {
 func (p *parser) parseFuncCall(scope *scope) Node {
 	fc := &FuncCall{Token: p.cur, Name: p.cur.Literal}
 	p.advance() // advance past function name IDENT
-	fc.FuncDecl = p.funcs[fc.Name]
+	funcDecl := p.funcs[fc.Name]
+	funcDecl.isCalled = true
+	fc.FuncDecl = funcDecl
 	fc.Arguments = p.parseExprList(scope)
 	p.assertArgTypes(fc.FuncDecl, fc.Arguments)
 	return fc

pkg/parser/parser.go

@@ -94,7 +94,8 @@ func newParser(input string, builtins Builtins) *parser {
 		formatting:    newFormatting(),
 	}
 	for name, funcDecl := range builtins.Funcs {
-		p.funcs[name] = funcDecl
+		fd := *funcDecl
+		p.funcs[name] = &fd
 	}
 
 	// Read all tokens, collect function declaration tokens by index
@@ -178,6 +179,7 @@ func (p *parser) parseProgram() *Program {
 	}
 	p.validateScope(scope)
 	program.EventHandlers = p.eventHandlers
+	program.CalledBuiltinFuncs = p.calledBuiltinFuncs()
 	return program
 }
 
@@ -973,3 +975,21 @@ func (p *parser) curComment() string {
 	}
 	return ""
 }
+
+func (p *parser) calledBuiltinFuncs() []string {
+	var funcs []string
+	for name, funcDecl := range p.funcs {
+		if _, ok := p.builtins.Funcs[name]; ok && funcDecl.isCalled {
+			funcs = append(funcs, name)
+		}
+	}
+	return funcs
+}
+
+func EventHandlerNames(eventHandlers map[string]*EventHandlerStmt) []string {
+	names := make([]string, 0, len(eventHandlers))
+	for name := range eventHandlers {
+		names = append(names, name)
+	}
+	return names
+}

pkg/parser/parser_test.go

@@ -1,6 +1,7 @@
 package parser
 
 import (
+	"sort"
 	"strings"
 	"testing"
 
@@ -1178,6 +1179,17 @@ end
 	}
 }
 
+func TestCalledBuiltinFuncs(t *testing.T) {
+	input := `print (len "ABC")`
+	parser := newParser(input, testBuiltins())
+	prog := parser.Parse()
+	assertNoParseError(t, parser, input)
+	got := prog.CalledBuiltinFuncs
+	sort.Strings(got)
+	want := []string{"len", "print"}
+	assert.Equal(t, want, got)
+}
+
 func TestDemo(t *testing.T) {
 	input := `
 move 10 10

pkg/wasm/imports.go

@@ -52,11 +52,14 @@ func newSleepingYielder() *sleepingYielder {
 func (y *sleepingYielder) Yield() {
 	y.count++
 	if y.count > 1000 && time.Since(y.start) > 100*time.Millisecond {
-		time.Sleep(minSleepDur)
-		y.Reset()
+		y.ForceYield()
 	}
 }
 
+func (y *sleepingYielder) ForceYield() {
+	y.Sleep(minSleepDur)
+}
+
 func (y *sleepingYielder) Sleep(dur time.Duration) {
 	time.Sleep(dur)
 	y.Reset()

pkg/wasm/main.go

@@ -3,6 +3,8 @@
 package main
 
 import (
+	"strings"
+
 	"foxygo.at/evy/pkg/evaluator"
 	"foxygo.at/evy/pkg/parser"
 )
@@ -14,43 +16,72 @@ var (
 )
 
 func main() {
-	rt := newJSRuntime()
-	builtins := evaluator.DefaultBuiltins(rt)
-
 	defer afterStop()
-	source, err := format(builtins)
+	actions := getActions()
+
+	rt := newJSRuntime()
+	input := getEvySource()
+	ast, err := parse(input, rt)
 	if err != nil {
 		rt.Print(err.Error())
 		return
 	}
-	evaluate(source, builtins, rt.yielder)
+	if actions["fmt"] {
+		formattedInput := ast.Format()
+		if formattedInput != input {
+			setEvySource(formattedInput)
+		}
+	}
+	if actions["ui"] {
+		prepareUI(ast)
+	}
+	if actions["eval"] {
+		// The ast does not correspond to the formatted source code. For
+		// now this is acceptable because evaluator errors don't output
+		// source code locations.
+		evaluate(ast, rt)
+	}
 }
 
-func format(evalBuiltins evaluator.Builtins) (string, error) {
-	input := getEvySource()
+func getActions() map[string]bool {
+	m := map[string]bool{}
+	addr := jsActions()
+	s := getStringFromAddr(addr)
+	actions := strings.Split(s, ",")
+	for _, action := range actions {
+		if action != "" {
+			m[action] = true
+		}
+	}
+	return m
+}
 
-	builtins := evalBuiltins.ParserBuiltins()
+func getEvySource() string {
+	addr := evySource()
+	return getStringFromAddr(addr)
+}
+
+func parse(input string, rt evaluator.Runtime) (*parser.Program, error) {
+	builtins := evaluator.DefaultBuiltins(rt).ParserBuiltins()
 	prog, err := parser.Parse(input, builtins)
 	if err != nil {
-		return "", parser.TruncateError(err, 8)
-	}
-	formattedInput := prog.Format()
-	if formattedInput != input {
-		setEvySource(formattedInput)
+		return nil, parser.TruncateError(err, 8)
 	}
-	return formattedInput, nil
+	return prog, nil
 }
 
-func evaluate(input string, builtins evaluator.Builtins, yielder *sleepingYielder) {
-	eval = evaluator.NewEvaluator(builtins)
-
-	eval.Run(input)
-	handleEvents(yielder)
+func prepareUI(prog *parser.Program) {
+	funcNames := prog.CalledBuiltinFuncs
+	eventHandlerNames := parser.EventHandlerNames(prog.EventHandlers)
+	names := append(funcNames, eventHandlerNames...)
+	jsPrepareUI(strings.Join(names, ","))
 }
 
-func getEvySource() string {
-	addr := evySource()
-	return getStringFromAddr(addr)
+func evaluate(prog *parser.Program, rt *jsRuntime) {
+	builtins := evaluator.DefaultBuiltins(rt)
+	eval = evaluator.NewEvaluator(builtins)
+	eval.Eval(prog)
+	handleEvents(rt.yielder)
 }
 
 func handleEvents(yielder *sleepingYielder) {
@@ -71,7 +102,7 @@ func handleEvents(yielder *sleepingYielder) {
 			yielder.Reset()
 			eval.HandleEvent(event)
 		} else {
-			yielder.Sleep(minSleepDur)
+			yielder.ForceYield()
 		}
 	}
 }