Merge pull request #20 from viamrobotics/fix-disconnect

Fix disconnect issue

Author: micheal-parks

.changeset/wise-roses-tan.md

@@ -0,0 +1,5 @@
+---
+'@viamrobotics/svelte-sdk': patch
+---
+
+Fix disconnect issue

src/lib/hooks/robot-clients.svelte.ts

@@ -5,7 +5,7 @@ import {
   MachineConnectionEvent,
   type RobotClient,
 } from '@viamrobotics/sdk';
-import { getContext, setContext } from 'svelte';
+import { getContext, onMount, setContext } from 'svelte';
 import { useQueryClient } from '@tanstack/svelte-query';
 import type { PartID } from '../part';
 import { comparePartIds, isJsonEqual } from '../compare';
@@ -90,37 +90,40 @@ export const provideRobotClientsContext = (
     }
   };
 
-  $effect.pre(() => {
+  $effect(() => {
     const configs = dialConfigs();
 
     const { added, removed, unchanged } = comparePartIds(
       Object.keys(configs),
       Object.keys(lastConfigs)
     );
 
+    for (const partID of removed) {
+      disconnect(partID, lastConfigs[partID]);
+    }
+
     for (const partID of added) {
       const config = configs[partID];
       if (config) {
         connect(partID, config);
       }
     }
 
-    for (const partID of removed) {
-      disconnect(partID, lastConfigs[partID]);
-    }
-
     for (const partID of unchanged) {
       const config = configs[partID];
       const lastConfig = lastConfigs[partID];
+
       if (config && lastConfig && !isJsonEqual(lastConfig, config)) {
         connect(partID, config);
       }
     }
 
     lastConfigs = configs;
+  });
 
+  onMount(() => {
     return () => {
-      for (const partID of Object.keys(configs)) {
+      for (const partID of Object.keys(dialConfigs())) {
         clients[partID]?.disconnect();
       }
     };

src/routes/+layout.svelte

@@ -3,13 +3,20 @@ import '../app.css';
 import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools';
 import { ViamProvider } from '$lib';
 import type { Snippet } from 'svelte';
-import { dialConfigs } from './configs';
+import { dialConfigs as configs } from './configs';
 import Parts from './components/parts.svelte';
 
 interface Props {
   children: Snippet;
 }
 
+let dialConfigs = $state(configs);
+
+$effect(() => {
+  const id = setInterval(() => (dialConfigs = { ...dialConfigs }), 3000);
+  return () => clearInterval(id);
+});
+
 let { children }: Props = $props();
 </script>