How can I generate stateful data within a function, and have components react to updates?

[MaddyGuthridge]

Hello! I'm trying to implement a system where certain data (eg images) automatically reload when they are changed on the server. I've set up an observer system, where components can register a callback for when the content has changed, but am running into issues integrating it nicely into my svelte code.

Currently, I'm using a simple Svelte component which wraps around the subscribe function, and updates a bindable prop whenever data is changed. Essentially, given the URL of some content, it produces a new URL with a hash of the current timestamp, which causes the browser to reload the image, without disrupting server-side caching.

<script lang="ts">
  import { subscribeToContent } from './contentObserver';

  type Props = {
    url: string;
    derivedUrl: string;
  };

  let { url, derivedUrl = $bindable() }: Props = $props();

  // Adding the current time as a fragment to the URL, to skip the browser cache, without
  // skipping server-side caches.
  // https://stackoverflow.com/a/9943419/6335363
  const makeUrl = (url: string) => `${url}#${new Date().getTime()}`;

  function triggerReload() {
    derivedUrl = makeUrl(url);
  }

  // Watch `url`, and re-subscribe when it changes, and reset the derivedUrl
  $effect(() => {
    const unsubscribe = subscribeToContent(url, triggerReload);
    derivedUrl = makeUrl(url);

    return unsubscribe;
  });
</script>

I can use the component like this:

<script lang="ts">
  import { UrlSubscription } from '$lib/observer';

  type Props = {
    url: string;
    alt: string;
  };

  const { url, alt }: Props = $props();

  let derivedUrl = $state(url);
</script>

<UrlSubscription {url} bind:derivedUrl />

<img src={derivedUrl} {alt} />

However, given there is no actual UI content, the fact that I'm using a Svelte component feels less than ideal. As such, I'd really appreciate suggestions for how I can implement this in a re-usable way without making it a component. Ideally, this would be a function that I can call from a component, which returns a $state proxy which it will then update as-required. This function will need to unsubscribe from the observer when the component is dismounted, to avoid resource leaks.

[webJose]

// ContentUrl.svelte.ts
import { subscribeToContent } from "./contentObserver";

export class ContentUrl {
  #liveUrl = $state('');
  #cleanUp: Function | undefined;

  constructor(url: string) {
    this.#cleanUp = subscribeToContent(url, () => {
      this.#liveUrl = `${url}#${new Date().getTime()}`;
    });
  }

  dispose() {
    this.#cleanUp?.();
    this.#cleanUp = undefined;
  }

  get liveUrl() {
    return this.#liveUrl;
  }
}

Then, in the script of a component:

import { ContentUrl } from "./ContentUrl.svelte.js";
import { onMount } from "svelte";

const contentUrl = new ContentUrl(url);

onMount(() => () => contentUrl.dispose());

No $effect needed AFAICT. The updated URL is in contentUrl.liveUrl.

[MaddyGuthridge]

Very nice! Thanks! Is there a particular reason for using a leading # in the member variable names?

[brunnerh]

Those are private properties which become inaccessible from the outside. It helps encapsulate purely internal logic.