feat: add createTauriSyncStore factory function for creating sync svelte store

apps/desktop/src/lib/stores/appConfig.ts

@@ -1,12 +1,10 @@
 import { getExtensionsFolder } from "@/constants"
-import { themeConfigStore, updateTheme, type ThemeConfig } from "@kksh/svelte5"
+import { createTauriSyncStore, type WithSyncStore } from "@/utils/sync-store"
+import { updateTheme, type ThemeConfig } from "@kksh/svelte5"
 import { PersistedAppConfig, type AppConfig } from "@kksh/types"
-import * as path from "@tauri-apps/api/path"
-import { remove } from "@tauri-apps/plugin-fs"
 import { debug, error } from "@tauri-apps/plugin-log"
 import * as os from "@tauri-apps/plugin-os"
 import { load } from "@tauri-apps/plugin-store"
-import { get, writable, type Writable } from "svelte/store"
 import * as v from "valibot"
 
 export const defaultAppConfig: AppConfig = {
@@ -35,8 +33,8 @@ interface AppConfigAPI {
 	setDevExtensionPath: (devExtensionPath: string | null) => void
 }
 
-function createAppConfig(): Writable<AppConfig> & AppConfigAPI {
+function createAppConfig(): WithSyncStore<AppConfig> & AppConfigAPI {
-	const store = writable<AppConfig>(defaultAppConfig)
+	const store = createTauriSyncStore("app-config", defaultAppConfig)
 
 	async function init() {
 		debug("Initializing app config")

apps/desktop/src/lib/utils/sync-store.ts

@@ -0,0 +1,44 @@
+import * as evt from "@tauri-apps/api/event"
+import { writable, type Writable } from "svelte/store"
+
+export function buildEventName(storeName: string) {
+	return `app://sync-store-${storeName}`
+}
+
+export type WithSyncStore<T> = Writable<T> & {
+	listen: () => void
+	unlisten: evt.UnlistenFn | undefined
+}
+
+export function createTauriSyncStore<T>(storeName: string, initialValue: T): WithSyncStore<T> {
+	const store = writable<T>(initialValue)
+	let unlisten: evt.UnlistenFn | undefined
+
+	async function listen() {
+		console.log("[listen] start", storeName)
+		if (unlisten) {
+			console.log("[listen] already listening, skip")
+			return
+		}
+		const _unlisten = await evt.listen<{ value: T }>(buildEventName(storeName), (evt) => {
+			console.log(`[listen] update from tauri event`, storeName, evt.payload.value)
+			store.set(evt.payload.value)
+		})
+		const unsubscribe = store.subscribe((value) => {
+			console.log("[subscribe] got update, emit data", storeName, value)
+			evt.emit(buildEventName(storeName), { value })
+		})
+		unlisten = () => {
+			_unlisten()
+			unsubscribe()
+			unlisten = undefined
+		}
+		return unlisten
+	}
+
+	return {
+		...store,
+		listen,
+		unlisten
+	}
+}