New helper, combining onBecomeObserved and onBecomeUnobserved

[dartess]

Usually, I use onBecomeObserved and onBecomeUnobserved in pairs. Typically, this is the start and stop of some action. It seems that it would be more concise to combine this into one action. I solved the problem for myself in the following way (naming is terrible, i know):

export function onObserveWithCleanup<TProperty, TValue = any>(
  value: ObservableMap<TProperty, TValue> | Object,
  property: TProperty,
  listener: () => Disposer
): void {
  let disposer: Disposer | void;

  onBecomeObserved(value, property, () => {
    disposer = listener();
  });

  onBecomeUnobserved(value, property, () => {
    if (disposer) {
      disposer();
      disposer = null;
    }
  });
}

In your documentation, you provide the following example:

export class City {
    location
    temperature
    interval

    constructor(location) {
        makeAutoObservable(this, {
            resume: false,
            suspend: false
        })
        this.location = location
        // Only start data fetching if temperature is actually used!
        onBecomeObserved(this, "temperature", this.resume)
        onBecomeUnobserved(this, "temperature", this.suspend)
    }

    resume = () => {
        log(`Resuming ${this.location}`)
        this.interval = setInterval(() => this.fetchTemperature(), 5000)
    }

    suspend = () => {
        log(`Suspending ${this.location}`)
        this.temperature = undefined
        clearInterval(this.interval)
    }

    fetchTemperature = flow(function* () {
        // Data fetching logic...
    })
}

With the new helper, the example could look a bit more concise:

export class City {
  location
  temperature

  constructor(location) {
    makeAutoObservable(this, {
      resume: false,
      suspend: false
    })
    this.location = location
    // Only start data fetching if temperature is actually used!
    onObserveWithCleanup(this, "temperature", this.startFetch)
  }

  startFetch = () => {
    log(`Resuming ${this.location}`)
    const interval = setInterval(() => this.fetchTemperature(), 5000)
    return () => {
      log(`Suspending ${this.location}`)
      this.temperature = undefined
      clearInterval(interval)
    };
  }

  fetchTemperature = flow(function* () {
    // Data fetching logic...
  })
}