web-ui: init type API checks

pkgs/webview-ui/app/package.json

@@ -5,10 +5,11 @@
   "scripts": {
     "start": "vite",
     "dev": "vite",
-    "build": "npm run check && vite build && npm run convert-html",
+    "build": "npm run check && npm run test && vite build && npm run convert-html",
     "convert-html": "node gtk.webview.js",
     "serve": "vite preview",
-    "check": "tsc --noEmit --skipLibCheck && eslint ./src"
+    "check": "tsc --noEmit --skipLibCheck && eslint ./src",
+    "test": "vitest run --typecheck"
   },
   "license": "MIT",
   "devDependencies": {
@@ -21,6 +22,7 @@
     "daisyui": "^4.11.1",
     "eslint": "^8.57.0",
     "eslint-plugin-tailwindcss": "^3.17.0",
+    "jsdom": "^24.1.0",
     "json-schema-faker": "^0.5.6",
     "json-schema-to-ts": "^3.1.0",
     "postcss": "^8.4.38",
@@ -31,7 +33,8 @@
     "typescript": "^5.4.5",
     "typescript-eslint": "^7.10.0",
     "vite": "^5.0.11",
-    "vite-plugin-solid": "^2.8.2"
+    "vite-plugin-solid": "^2.8.2",
+    "vitest": "^1.6.0"
   },
   "dependencies": {
     "material-icons": "^1.13.12",

pkgs/webview-ui/app/tests/types.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import { OperationNames, pyApi } from "@/src/message";
+
+describe.concurrent("API types work properly", () => {
+  // Test some basic types
+  it("distinct success/error unions", async () => {
+    const k: OperationNames = "create_clan" as OperationNames; // Just a random key, since
+    expectTypeOf(pyApi[k].receive).toBeFunction();
+    expectTypeOf(pyApi[k].receive).parameter(0).toBeFunction();
+    // receive is a function that takes a function, which takes the response parameter
+    expectTypeOf(pyApi[k].receive)
+      .parameter(0)
+      .parameter(0)
+      .toMatchTypeOf<
+        { status: "success"; data?: any } | { status: "error"; errors: any[] }
+      >();
+  });
+
+  it("Cannot access data of error response", async () => {
+    const k: OperationNames = "create_clan" as OperationNames; // Just a random key, since
+    expectTypeOf(pyApi[k].receive).toBeFunction();
+    expectTypeOf(pyApi[k].receive).parameter(0).toBeFunction();
+    expectTypeOf(pyApi[k].receive).parameter(0).parameter(0).toMatchTypeOf<
+      // @ts-expect-error: data is not defined in error responses
+      | { status: "success"; data?: any }
+      | { status: "error"; errors: any[]; data: any }
+    >();
+  });
+
+  it("Machine list receives a list of names/id string", async () => {
+    expectTypeOf(pyApi.list_machines.receive)
+      .parameter(0)
+      .parameter(0)
+      .toMatchTypeOf<
+        { status: "success"; data: string[] } | { status: "error"; errors: any }
+      >();
+  });
+
+  it("Machine show receives an object with at least: machine_name, machine_description and machine_icon", async () => {
+    expectTypeOf(pyApi.show_machine.receive)
+      .parameter(0)
+      .parameter(0)
+      .toMatchTypeOf<
+        | {
+            status: "success";
+            data: {
+              machine_name: string;
+              machine_icon?: string | null;
+              machine_description?: string | null;
+            };
+          }
+        | { status: "error"; errors: any }
+      >();
+  });
+});

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

@@ -10,7 +10,7 @@ export default defineConfig({
     },
   },
   plugins: [
-    /* 
+    /*
     Uncomment the following line to enable solid-devtools.
     For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
     */

pkgs/webview-ui/flake-module.nix

@@ -11,7 +11,7 @@
 
         npmDeps = pkgs.fetchNpmDeps {
           src = ./app;
-          hash = "sha256-EadzSkIsV/cJtdxpIUvvpQhu5h3VyF8bLMpwfksNmWQ=";
+          hash = "sha256-AwBrTnS/GAND/eogBic96kIQAJ4gdHorB8hEdpnGe5s=";
         };
         # The prepack script runs the build script, which we'd rather do in the build phase.
         npmPackFlags = [ "--ignore-scripts" ];