@kaifronsdal/transcript-viewer/src/lib/client/localStore.svelte.ts

A web-based viewer for AI conversation transcripts with rollback support

import { browser } from '$app/environment';

export class LocalStore<T> {
  value = $state<T>() as T;
  key = '';
  private initialized = false;

  constructor(key: string, value: T) {
    this.key = key;
    this.value = value;

    if (browser) {
      const item = localStorage.getItem(key);
      if (item) this.value = this.deserialize(item);
    }
  }

  // Initialize the effect - call this from within a component
  init() {
    if (this.initialized || !browser) return;
    this.initialized = true;
    
    $effect(() => {
      if (browser) {
        // Use untrack to prevent infinite loops when reading the value
        const serialized = this.serialize(this.value);
        console.log(`LocalStore[${this.key}] saving:`, serialized);
        localStorage.setItem(this.key, serialized);
      }
    });
  }

  serialize(value: T): string {
    return JSON.stringify(value);
  }

  deserialize(item: string): T {
    return JSON.parse(item);
  }
}

export function localStore<T>(key: string, value: T) {
  return new LocalStore(key, value);
}