GUI/devshell: hot reload python API

This change speeds up the development workflow on the GUI when modifying the python api

The GUI started from the devshell already hot reloads itself on any change of the typescript codebase.

But python api changes were not caught bu the hot reload and required a reload of the devshell which is slow.

This change implements a custom vite plugin to also listen to changes coming from the clan-cli python code and re-generate the python-ts api on any change.

pkgs/webview-ui/app/vite.config.ts

@@ -3,6 +3,26 @@ import solidPlugin from "vite-plugin-solid";
 import solidSvg from "vite-plugin-solid-svg";
 import devtools from "solid-devtools/vite";
 import path from "node:path";
+import { exec } from "child_process";
+
+// watch also clan-cli to catch api changes
+const clanCliDir = path.resolve(__dirname, "../../clan-cli");
+
+function regenPythonApiOnFileChange() {
+  return {
+    name: "run-python-script-on-change",
+    handleHotUpdate({}) {
+      exec("reload-python-api.sh", (err, stdout, stderr) => {
+        if (err) {
+          console.error(`reload-python-api.sh error:\n${stderr}`);
+        }
+      });
+    },
+    configureServer(server: import("vite").ViteDevServer) {
+      server.watcher.add([clanCliDir]);
+    },
+  };
+}
 
 export default defineConfig({
   resolve: {
@@ -18,6 +38,7 @@ export default defineConfig({
     devtools(),
     solidPlugin(),
     solidSvg(),
+    regenPythonApiOnFileChange(),
   ],
   server: {
     port: 3000,

pkgs/webview-ui/bin/reload-python-api.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+
+script_dir=$(dirname "$(readlink -f "$0")")
+
+clan_cli="$script_dir/../../clan-cli"
+
+trap 'rm -rf "$tmpdir"' EXIT
+tmpdir=$(mktemp -d)
+
+set -x
+python "$clan_cli/api.py" > "$tmpdir/API.json"
+json2ts --input "$tmpdir/API.json" > "$tmpdir/API.ts"
+
+# compare sha256 sums of old and new API.ts
+old_api_hash=$(sha256sum "$script_dir/../app/api/API.ts" | cut -d ' ' -f 1)
+new_api_hash=$(sha256sum "$tmpdir/API.ts" | cut -d ' ' -f 1)
+if [ "$old_api_hash" != "$new_api_hash" ]; then
+  cp "$tmpdir/API.json" "$script_dir/../app/api/API.json"
+  cp "$tmpdir/API.ts" "$script_dir/../app/api/API.ts"
+fi

pkgs/webview-ui/flake-module.nix

@@ -53,11 +53,18 @@
           config.packages.webview-ui
           self'.devShells.default
         ];
+        packages = [
+          # required for reload-python-api.sh script
+          pkgs.python3
+          pkgs.json2ts
+        ];
         shellHook = ''
           export GIT_ROOT="$(git rev-parse --show-toplevel)"
           export PKG_ROOT="$GIT_ROOT/pkgs/webview-ui"
           export NODE_PATH="$PKG_ROOT/app/node_modules"
-          export PATH="$NODE_PATH/.bin:$PATH"
+
+          scriptsPath="$PKG_ROOT/bin"
+          export PATH="$NODE_PATH/.bin:$scriptsPath:$PATH"
 
           cp -r ${self'.packages.fonts} "$PKG_ROOT/app/.fonts"
           chmod -R +w "$PKG_ROOT/app/.fonts"