api: improve message serialisation

pkgs/webview-ui/app/src/Config.tsx

@@ -1,8 +1,16 @@
-import { createSignal, createContext, useContext, JSXElement } from "solid-js";
-import { pyApi } from "./message";
+import {
+  createSignal,
+  createContext,
+  useContext,
+  JSXElement,
+  createEffect,
+} from "solid-js";
+import { OperationResponse, pyApi } from "./message";
 
 export const makeCountContext = () => {
-  const [machines, setMachines] = createSignal<string[]>([]);
+  const [machines, setMachines] = createSignal<
+    OperationResponse<"list_machines">
+  >({});
   const [loading, setLoading] = createSignal(false);
 
   pyApi.list_machines.receive((machines) => {
@@ -10,6 +18,10 @@ export const makeCountContext = () => {
     setMachines(machines);
   });
 
+  createEffect(() => {
+    console.log("The count is now", machines());
+  });
+
   return [
     { loading, machines },
     {
@@ -25,7 +37,10 @@ export const makeCountContext = () => {
 type CountContextType = ReturnType<typeof makeCountContext>;
 
 export const CountContext = createContext<CountContextType>([
-  { loading: () => false, machines: () => [] },
+  {
+    loading: () => false,
+    machines: () => ({}),
+  },
   {
     getMachines: () => {},
   },

pkgs/webview-ui/app/src/message.ts

@@ -1,11 +1,11 @@
 import { FromSchema } from "json-schema-to-ts";
 import { schema } from "@/api";
 
-type API = FromSchema<typeof schema>;
+export type API = FromSchema<typeof schema>;
 
-type OperationNames = keyof API;
-type OperationArgs<T extends OperationNames> = API[T]["argument"];
-type OperationResponse<T extends OperationNames> = API[T]["return"];
+export type OperationNames = keyof API;
+export type OperationArgs<T extends OperationNames> = API[T]["argument"];
+export type OperationResponse<T extends OperationNames> = API[T]["return"];
 
 declare global {
   interface Window {
@@ -40,7 +40,7 @@ function createFunctions<K extends OperationNames>(
       });
     },
     receive: (fn: (response: OperationResponse<K>) => void) => {
-      window.clan.list_machines = deserialize(fn);
+      window.clan[operationName] = deserialize(fn);
     },
   };
 }
@@ -59,6 +59,7 @@ const deserialize =
   <T>(fn: (response: T) => void) =>
   (str: string) => {
     try {
+      console.debug("Received data: ", str);
       fn(JSON.parse(str) as T);
     } catch (e) {
       alert(`Error parsing JSON: ${e}`);

pkgs/webview-ui/app/src/nested.tsx

@@ -1,24 +1,34 @@
-import { For, Match, Switch, type Component } from "solid-js";
+import { For, Match, Switch, createEffect, type Component } from "solid-js";
 import { useCountContext } from "./Config";
 
 export const Nested: Component = () => {
   const [{ machines, loading }, { getMachines }] = useCountContext();
+
+  const list = () => Object.values(machines());
+
+  createEffect(() => {
+    console.log("1", list());
+  });
+  createEffect(() => {
+    console.log("2", machines());
+  });
   return (
     <div>
       <button onClick={() => getMachines()} class="btn btn-primary">
         Get machines
       </button>
-      <hr />
+      <div></div>
       <Switch>
         <Match when={loading()}>Loading...</Match>
-        <Match when={!loading() && machines().length === 0}>
+        <Match when={!loading() && Object.entries(machines()).length === 0}>
           No machines found
         </Match>
-        <Match when={!loading() && machines().length}>
-          <For each={machines()}>
-            {(machine, i) => (
+        <Match when={!loading()}>
+          <For each={list()}>
+            {(entry, i) => (
               <li>
-                {i() + 1}: {machine}
+                {i() + 1}: {entry.machineName}{" "}
+                {entry.machineDescription || "No description"}
               </li>
             )}
           </For>