Wrapper of Meteor.User for use in Svelte 5 that employs fine-grained reactivity

crntUser.svelte.ts

import { Meteor } from 'meteor/meteor';
import { Tracker } from 'meteor/tracker';

class GlobalUserState {
  #meteorUser = $state<Meteor.User | undefined>();

  constructor() {
    Tracker.autorun(() => {
      this.#meteorUser = Meteor.user() || undefined;
    });
  }

  #firstName = $derived(this.#meteorUser?.profile?.firstName ?? '');
  #lastName = $derived(this.#meteorUser?.profile?.lastName ?? '');
  #name = $derived(
    `${this.#meteorUser?.profile?.firstName ?? ''} ${this.#meteorUser?.profile?.lastName ?? ''}`.trim()
  );
  #email = $derived(this.#meteorUser?.emails?.[0]?.address ?? '');
  #milestones = $derived(this.#meteorUser?.milestones ?? []);

  #user = $derived(
    this.#meteorUser
      ? {
          // no need to derive _id; it never changes
          _id: this.#meteorUser._id,
          firstName: this.#firstName,
          lastName: this.#lastName,
          name: this.#name,
          email: this.#email,
          milestones: this.#milestones,
        }
      : undefined
  );

  user() {
    return this.#user;
  }
}

const _userState = new GlobalUserState();

export function currentUserState() {
  return _userState.user();
}

Usage in Svelte:

let user = $derived(crntUser());

Note that Tracker computations is never stopped. Not an issue with this file because it's a global singleton, but could be an issue elsewhere.