Add hot reloading and a websocket connecting directly to go

Author: ColinChartier

go.mod

@@ -6,5 +6,7 @@ require (
 	github.com/chromedp/cdproto v0.0.0-20211126220118-81fa0469ad77
 	github.com/chromedp/chromedp v0.7.6
 	github.com/evanw/esbuild v0.14.1
+	github.com/fsnotify/fsnotify v1.5.1
+	github.com/gorilla/websocket v1.4.2
 	github.com/pkg/errors v0.9.1
 )

go.sum

@@ -6,12 +6,16 @@ github.com/chromedp/sysutil v1.0.0 h1:+ZxhTpfpZlmchB58ih/LBHX52ky7w2VhQVKQMucy3I
 github.com/chromedp/sysutil v1.0.0/go.mod h1:kgWmDdq8fTzXYcKIBqIYvRRTnYb9aNS9moAV0xufSww=
 github.com/evanw/esbuild v0.14.1 h1:ixWZ3MwLjTZp6WdDNfiZ6QhqgEryN8a0E5a8HDOmc58=
 github.com/evanw/esbuild v0.14.1/go.mod h1:GG+zjdi59yh3ehDn4ZWfPcATxjPDUH53iU4ZJbp7dkY=
+github.com/fsnotify/fsnotify v1.5.1 h1:mZcQUHVQUQWoPXXtuf9yuEXKudkV2sx1E06UadKWpgI=
+github.com/fsnotify/fsnotify v1.5.1/go.mod h1:T3375wBYaZdLLcVNkcVbzGHY7f1l/uK5T5Ai1i3InKU=
 github.com/gobwas/httphead v0.1.0 h1:exrUm0f4YX0L7EBwZHuCF4GDp8aJfVeBrlLQrs6NqWU=
 github.com/gobwas/httphead v0.1.0/go.mod h1:O/RXo79gxV8G+RqlR/otEwx4Q36zl9rqC5u12GKvMCM=
 github.com/gobwas/pool v0.2.1 h1:xfeeEhW7pwmX8nuLVlqbzVc7udMDrwetjEv+TZIz1og=
 github.com/gobwas/pool v0.2.1/go.mod h1:q8bcK0KcYlCgd9e7WYLm9LpyS+YeLd8JVDW6WezmKEw=
 github.com/gobwas/ws v1.1.0 h1:7RFti/xnNkMJnrK7D1yQ/iCIB5OrrY/54/H930kIbHA=
 github.com/gobwas/ws v1.1.0/go.mod h1:nzvNcVha5eUziGrbxFCo6qFIojQHjJV5cLYIbezhfL0=
+github.com/gorilla/websocket v1.4.2 h1:+/TMaTYc4QFitKJxsQ7Yye35DkWvkdLcvGKqM+x0Ufc=
+github.com/gorilla/websocket v1.4.2/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/josharian/intern v1.0.0 h1:vlS4z54oSdjm0bgjRigI+G1HpF+tI+9rE5LLzOg8HmY=
 github.com/josharian/intern v1.0.0/go.mod h1:5DoeVV0s6jJacbCEi61lwdGj/aVlrQvzHFFd8Hwg//Y=
 github.com/mailru/easyjson v0.7.7 h1:UGYAvKxe3sBsEDzO8ZeWOSlIQfWFlxbzLZe7hwFURr0=
@@ -21,6 +25,7 @@ github.com/orisano/pixelmatch v0.0.0-20210112091706-4fa4c7ba91d5/go.mod h1:nZgzb
 github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
 github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 golang.org/x/sys v0.0.0-20201207223542-d4d67f95c62d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20210908233432-aa78b53d3365/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20211124211545-fe61309f8881 h1:TyHqChC80pFkXWraUUf6RuB5IqFdQieMLwwCJokV2pc=
 golang.org/x/sys v0.0.0-20211124211545-fe61309f8881/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=

go/cmd/build.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"github.com/evanw/esbuild/pkg/api"
 	"github.com/webappio/greenjs/go/config"
+	"github.com/webappio/greenjs/go/devserver"
 	"io/ioutil"
 	"log"
 	"net"
@@ -27,7 +28,7 @@ func Build(args []string) {
 	prerenderer := &Prerenderer{
 		Config: conf,
 	}
-	var greenJsServer *GreenJsServer
+	var greenJsServer *devserver.GreenJsServer
 	var listener net.Listener
 
 	wg := sync.WaitGroup{}
@@ -40,7 +41,7 @@ func Build(args []string) {
 		}
 
 		prerenderer.URI = "http://127.0.0.1:" + fmt.Sprint(listener.Addr().(*net.TCPAddr).Port)
-		greenJsServer = &GreenJsServer{
+		greenJsServer = &devserver.GreenJsServer{
 			PageIsRoute: func(s string) bool {
 			_, ok := prerenderer.pagesVisited.Load(s)
 			return ok

go/cmd/start.go

@@ -3,15 +3,13 @@ package cmd
 import (
 	"flag"
 	"fmt"
-	"github.com/pkg/errors"
 	"github.com/webappio/greenjs/go/config"
+	"github.com/webappio/greenjs/go/devserver"
 	"log"
 	"net"
 	"os"
 )
 
-var errNotFound = errors.New("not found")
-
 func Start(args []string) {
 	flags := flag.NewFlagSet(os.Args[0], flag.ExitOnError)
 
@@ -39,9 +37,10 @@ func Start(args []string) {
 		log.Fatal(err)
 	}
 	fmt.Println("Server is listening at", listenAddr)
-	err = (&GreenJsServer{
+	err = (&devserver.GreenJsServer{
 		UpstreamHost: upstreamAddr,
 		BuildOpts: &buildOpts,
+		InjectDevSidebar: true,
 	}).Serve(listener)
 	if err != nil {
 		log.Fatal(err)

go/cmd/server.go go/devserver/server.go

@@ -1,22 +1,32 @@
-package cmd
+package devserver
 
 import (
 	"context"
 	"fmt"
 	"github.com/evanw/esbuild/pkg/api"
 	"github.com/pkg/errors"
 	"github.com/webappio/greenjs/go/resources"
+	"github.com/fsnotify/fsnotify"
+	"io/fs"
+	"log"
 	"net"
 	"net/http"
 	"net/http/httputil"
 	"net/url"
+	"path/filepath"
+	"strings"
 	"sync"
 )
 
+var errNotFound = errors.New("not found")
+
 type GreenJsServer struct {
 	UpstreamHost string
 	BuildOpts *api.BuildOptions
 	PageIsRoute func(string) bool
+	InjectDevSidebar bool
+
+	fileChangeListeners sync.Map
 
 	server *http.Server
 
@@ -38,14 +48,14 @@ func (srv *GreenJsServer) Serve(listener net.Listener) error {
 		Setup: func(build api.PluginBuild) {
 			build.OnEnd(func(result *api.BuildResult) {
 				srv.errMessagesMutex.Lock()
-				defer srv.errMessagesMutex.Unlock()
 				srv.errMessages = result.Errors
+				srv.errMessagesMutex.Unlock()
 			})
 		},
 	})
 
 	result, err := api.Serve(api.ServeOptions{
-		Servedir: srv.BuildOpts.Outdir,
+		Servedir: opts.Outdir,
 	}, opts)
 	if err != nil {
 		return errors.Wrap(err, "could not start eslint server")
@@ -82,6 +92,41 @@ func (srv *GreenJsServer) Serve(listener net.Listener) error {
 		rw.Write([]byte("error")) //TODO make prettier
 	}
 
+	watcher, err := fsnotify.NewWatcher()
+	if err != nil {
+		log.Fatal(err)
+	}
+	defer watcher.Close()
+	go func() {
+		for {
+			select {
+			case event, ok := <-watcher.Events:
+				if !ok {
+					return
+				}
+				if event.Op&fsnotify.Write == fsnotify.Write {
+					srv.fileChangeListeners.Range(func(key, value interface{}) bool {
+						value.(func())()
+						return true
+					})
+				} else if event.Op&fsnotify.Create == fsnotify.Create {
+					watcher.Add(event.Name)
+				}
+			case err, ok := <-watcher.Errors:
+				if !ok {
+					return
+				}
+				log.Println("error:", err)
+			}
+		}
+	}()
+	err = filepath.WalkDir(filepath.Dir(srv.BuildOpts.EntryPoints[0]), func(path string, d fs.DirEntry, err error) error {
+		return watcher.Add(path)
+	})
+	if err != nil {
+		log.Print(err)
+	}
+
 	server := http.Server{Handler: srv}
 	err = server.Serve(listener)
 	if srv.stopped {
@@ -103,6 +148,31 @@ func (srv *GreenJsServer) Stop() {
 }
 
 func (srv *GreenJsServer) ServeHTTP(rw http.ResponseWriter, req *http.Request) {
+	if req.URL.Path == "/greenjs-dev-connection" {
+		srv.HandleWS(rw, req)
+		return
+	}
+	if req.URL.Path == "/greenjs-devserver-client.js" {
+		rw.Header().Set("Content-Type", "text/javascript")
+		res := api.Build(api.BuildOptions{
+			Write: false,
+			Bundle: true,
+			MinifySyntax: true,
+			MinifyWhitespace: true,
+			Stdin: &api.StdinOptions{
+				Contents:   string(resources.DevserverClientContents),
+				Loader: api.LoaderJSX,
+			},
+		})
+		for _, err := range res.Errors {
+			log.Println(err.Text)
+			log.Println(err.Notes)
+		}
+		if len(res.OutputFiles) == 1 {
+			rw.Write(res.OutputFiles[0].Contents)
+		}
+		return
+	}
 	isIndex := req.URL.Path == "/"
 	if srv.PageIsRoute != nil {
 		isIndex = isIndex || srv.PageIsRoute(req.URL.Path)
@@ -112,9 +182,16 @@ func (srv *GreenJsServer) ServeHTTP(rw http.ResponseWriter, req *http.Request) {
 		srv.errMessagesMutex.Lock()
 		hasErrors = len(srv.errMessages) > 0
 		srv.errMessagesMutex.Unlock()
-		rw.Header().Set("Content-Type", "text/html")
 		if !hasErrors {
-			rw.Write(resources.IndexHTML)
+			devScript := ""
+			if srv.InjectDevSidebar {
+				devScript = `<div id="greenjs-client-element"></div><script src="/greenjs-devserver-client.js" type="module"></script>`
+			}
+			rw.Header().Set("Content-Type", "text/html")
+			rw.Write([]byte(strings.NewReplacer(
+				"<!-- dev script-->", devScript,
+				"App.js", srv.BuildOpts.EntryPoints[0],
+				).Replace(string(resources.IndexHTML))))
 			return
 		}
 	}

go/devserver/sidebar.go

@@ -0,0 +1,47 @@
+package devserver
+
+import (
+	"log"
+	"net/http"
+	"sync/atomic"
+	"time"
+)
+import "github.com/gorilla/websocket"
+
+var upgrader = websocket.Upgrader{}
+
+var wsId = int32(0)
+
+func (srv *GreenJsServer) HandleWS(rw http.ResponseWriter, req *http.Request) {
+	log.Println("Got websocket connection")
+	ws, err := upgrader.Upgrade(rw, req, nil)
+	if err != nil {
+		log.Println("Could not handle websocket request:", err)
+		return
+	}
+	defer ws.Close()
+
+	protoState := struct{
+		ReloadMode string `json:"reloadMode,omitempty"`
+		LastChange time.Time `json:"lastChange,omitempty"`
+	}{}
+
+	ourId := atomic.AddInt32(&wsId, 1)
+	srv.fileChangeListeners.Store(ourId, func() {
+		log.Print("New change detected")
+		protoState.LastChange = time.Now()
+		ws.WriteJSON(&protoState)
+	})
+
+	defer func() {
+		srv.fileChangeListeners.Delete(ourId)
+	}()
+
+	for {
+		err := ws.ReadJSON(&protoState)
+		if err != nil {
+			log.Println(err)
+			return
+		}
+	}
+}

go/resources/000_server.js

@@ -0,0 +1,2 @@
+node_modules
+dist