Improve JS workflow

Now we can launch Chrome from vscode and also set breakpoints and have
them be respected.

Work still to be done:

The "Launch Chrome" task should compile the typescript stuff.

It takes too long to rebuild the typescript stuff. It is bothersome
during development. If we can work around that with webpack, that's
great. If generating the gotty bundle is what makes it all time
consuming, we should skip the bundle generation for development and
change the index.html to point to a not-bundled version.

Partially fixes #3

.vscode/launch.json

@@ -7,10 +7,21 @@
         {
             "name": "Launch GoTTY",
             "type": "go",
+            "buildFlags": "-tags=dev",
             "request": "launch",
             "mode": "debug",
             "program": "${workspaceFolder}",
             "args": ["-a", "127.0.0.1", "-w", "bash"]
-        }
+        },
+        {
+            "name": "Launch Chrome",
+            "type": "chrome",
+            "url": "http://127.0.0.1:8080",
+            "webRoot": "${workspaceFolder}/js",
+            "outFiles": [
+                "${workspaceFolder}/**/*.js",
+                "!**/node_modules/**"
+            ],
+        },
     ]
 }

Makefile

@@ -2,7 +2,14 @@ OUTPUT_DIR = ./builds
 GIT_COMMIT = `git rev-parse HEAD | cut -c1-7`
 VERSION = $(shell git describe --tags)
 BUILD_OPTIONS = -ldflags "-X main.Version=$(VERSION)"
+
+ifeq ($(DEV), 1)
+	BUILD_OPTIONS += -tags dev
+	WEBPACK_MODE = development
+else
 	WEBPACK_MODE = production
+endif
+
 export CGO_ENABLED=0
 
 gotty: main.go assets server/*.go webtty/*.go backend/*.go Makefile

bindata/bindata.go

@@ -1,3 +1,5 @@
+//go:build !dev
+
 package bindata
 
 import "embed"

bindata/bindata_dev.go

@@ -0,0 +1,28 @@
+//go:build dev
+
+package bindata
+
+import (
+	"io"
+	"io/fs"
+	"os"
+)
+
+type GottyFS struct {
+	fs.FS
+}
+
+var Fs GottyFS
+
+func (gfs *GottyFS) ReadFile(name string) ([]byte, error) {
+	fp, err := gfs.Open(name)
+	if err != nil {
+		return nil, err
+	}
+
+	return io.ReadAll(fp)
+}
+
+func init() {
+	Fs = GottyFS{os.DirFS("bindata")}
+}

js/package.json

@@ -24,6 +24,7 @@
         "preact": "^10.7.1",
         "react-bootstrap": "^2.2.3",
         "style-loader": "^2.0.0",
+        "webpack-dev-server": "^4.11.1",
         "xterm": "^4.12.0",
         "xterm-addon-fit": "^0.5.0",
         "xterm-addon-web-links": "^0.4.0",

js/webpack.config.js

@@ -10,7 +10,7 @@ module.exports = {
     output: {
         path: path.resolve(__dirname, '../bindata/static/js/'),
     },
-    devtool: "source-map",
+    devtool: "inline-source-map",
     resolve: {
         extensions: [".ts", ".tsx", ".js"],
     },