fix: revert + using state management

Signed-off-by: axel7083 <[email protected]>

packages/backend/src/studio-api-impl.spec.ts

@@ -30,7 +30,6 @@ import type { Webview } from '@podman-desktop/api';
 
 import * as fs from 'node:fs';
 import { CatalogManager } from './managers/catalogManager';
-import type { RouterRegistry } from './registries/RouterRegistry';
 
 vi.mock('./ai.json', () => {
   return {
@@ -79,7 +78,6 @@ beforeEach(async () => {
     {} as unknown as TaskRegistry,
     {} as unknown as PlayGroundManager,
     catalogManager,
-    {} as unknown as RouterRegistry,
   );
   vi.resetAllMocks();
   vi.mock('node:fs');

packages/backend/src/studio-api-impl.ts

@@ -31,8 +31,6 @@ import * as path from 'node:path';
 import type { CatalogManager } from './managers/catalogManager';
 import type { Catalog } from '@shared/src/models/ICatalog';
 import type { PlaygroundState } from '@shared/src/models/IPlaygroundState';
-import type { RouterState } from '@shared/src/models/IRouterState';
-import type { RouterRegistry } from './registries/RouterRegistry';
 
 export class StudioApiImpl implements StudioAPI {
   constructor(
@@ -41,7 +39,6 @@ export class StudioApiImpl implements StudioAPI {
     private taskRegistry: TaskRegistry,
     private playgroundManager: PlayGroundManager,
     private catalogManager: CatalogManager,
-    private routerRegistry: RouterRegistry,
   ) {}
 
   async ping(): Promise<string> {
@@ -126,11 +123,4 @@ export class StudioApiImpl implements StudioAPI {
   async getCatalog(): Promise<Catalog> {
     return this.catalogManager.getCatalog();
   }
-
-  async saveRouterState(state: RouterState): Promise<void> {
-    this.routerRegistry.setRouterState(state);
-  }
-  async getRouterState(): Promise<RouterState> {
-    return this.routerRegistry.getRouterState();
-  }
 }

packages/backend/src/studio.ts

@@ -28,7 +28,6 @@ import * as fs from 'node:fs';
 import { TaskRegistry } from './registries/TaskRegistry';
 import { PlayGroundManager } from './managers/playground';
 import { CatalogManager } from './managers/catalogManager';
-import { RouterRegistry } from './registries/RouterRegistry';
 
 export class Studio {
   readonly #extensionContext: ExtensionContext;
@@ -98,7 +97,6 @@ export class Studio {
     this.playgroundManager = new PlayGroundManager(this.#panel.webview);
     // Create catalog manager, responsible for loading the catalog files and watching for changes
     this.catalogManager = new CatalogManager(applicationManager.appUserDirectory, this.#panel.webview);
-    const routerRegister = new RouterRegistry();
 
     // Creating StudioApiImpl
     this.studioApi = new StudioApiImpl(
@@ -107,7 +105,6 @@ export class Studio {
       taskRegistry,
       this.playgroundManager,
       this.catalogManager,
-      routerRegister,
     );
 
     await this.catalogManager.loadCatalog();

packages/frontend/src/App.svelte

@@ -11,21 +11,24 @@ import Preferences from '/@/pages/Preferences.svelte';
 import Registries from '/@/pages/Registries.svelte';
 import Models from '/@/pages/Models.svelte';
 import Recipe from '/@/pages/Recipe.svelte';
-  import Model from './pages/Model.svelte';
+import Model from './pages/Model.svelte';
 import { onMount } from 'svelte';
-import { studioClient } from '/@/utils/client';
+import { getRouterState } from '/@/utils/client';
 
 router.mode.hash();
 
-onMount(async () => {
+let isMounted = false;
+
+onMount(() => {
   // Load router state on application startup
-  const state = await studioClient.getRouterState();
+  const state = getRouterState();
   router.goto(state.url);
+  isMounted = true;
 });
 </script>
 
 
-<Route path="/*" breadcrumb="Home" let:meta>
+<Route path="/*" breadcrumb="Home" isAppMounted="{isMounted}" let:meta>
   <main class="flex flex-col w-screen h-screen overflow-hidden bg-charcoal-700">
     <div class="flex flex-row w-full h-full overflow-hidden">
       <Navigation meta="{meta}"/>

packages/frontend/src/Route.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 import { createRouteObject } from 'tinro/dist/tinro_lib';
 import type { TinroRouteMeta } from 'tinro';
-import { studioClient } from '/@/utils/client';
+import { saveRouterState, studioClient } from '/@/utils/client';
 
 export let path = '/*';
 export let fallback = false;
 export let redirect = false;
 export let firstmatch = false;
 export let breadcrumb: string | undefined = undefined;
 
+export let isAppMounted: boolean = false;
+
 let showContent = false;
 let params: Record<string, string> = {};
 let meta: TinroRouteMeta = {} as TinroRouteMeta;
@@ -25,10 +27,9 @@ const route = createRouteObject({
     meta = newMeta;
     params = meta.params;
 
-    // Run fully async
-    setTimeout(async () => {
-      await studioClient.saveRouterState({url: newMeta.url});
-    }, 0)
+    if(isAppMounted) {
+      saveRouterState({url: newMeta.url});
+    }
   },
 });
 

packages/frontend/src/pages/Model.spec.ts

@@ -13,8 +13,6 @@ vi.mock('../utils/client', async () => {
   return {
     studioClient: {
       getCatalog: mocks.getCatalogMock,
-      saveRouterState: vi.fn(),
-      getRouterState: vi.fn().mockResolvedValue({ url: '/' }),
     },
     rpcBrowser: {
       subscribe: () => {

packages/frontend/src/utils/client.ts

@@ -1,8 +1,23 @@
 import type { StudioAPI } from '@shared/src/StudioAPI';
 import { RpcBrowser } from '@shared/src/messages/MessageProxy';
+import type { RouterState } from '@shared/src/models/IRouterState';
 
 export const RECENT_CATEGORY_ID = 'recent-category';
 const podmanDesktopApi = acquirePodmanDesktopApi();
 export const rpcBrowser: RpcBrowser = new RpcBrowser(window, podmanDesktopApi);
 
 export const studioClient: StudioAPI = rpcBrowser.getProxy<StudioAPI>();
+
+export const saveRouterState = (state: RouterState) => {
+  podmanDesktopApi.setState(state);
+};
+
+const isRouterState = (value: unknown): value is RouterState => {
+  return typeof value === 'object' && !!value && 'url' in value;
+};
+
+export const getRouterState = (): RouterState => {
+  const state = podmanDesktopApi.getState();
+  if (isRouterState(state)) return state;
+  return { url: '/' };
+};

packages/shared/src/StudioAPI.ts

@@ -4,7 +4,6 @@ import type { Task } from './models/ITask';
 import type { QueryState } from './models/IPlaygroundQueryState';
 import type { Catalog } from './models/ICatalog';
 import type { PlaygroundState } from './models/IPlaygroundState';
-import type { RouterState } from './models/IRouterState';
 
 export abstract class StudioAPI {
   abstract ping(): Promise<string>;
@@ -30,7 +29,4 @@ export abstract class StudioAPI {
   abstract getPlaygroundQueriesState(): Promise<QueryState[]>;
 
   abstract getPlaygroundsState(): Promise<PlaygroundState[]>;
-
-  abstract saveRouterState(state: RouterState): Promise<void>;
-  abstract getRouterState(): Promise<RouterState>;
 }