How do I manually dispose derive(() => {}) called outside van components?

[cpakken]

I am using some van.state() and van.derive() outside of van components. I understand that the derive is automatically disposed when the element its called in is detached from the document (checks `isConnected()), but the derive(() => {}) called outside a van component can never be disposed?

Perhaps there can be an API

const a = van.state(1)
const logA = () => console.log(a.val)

//log a whenever it's changed
van.derive(logA)

//stop logging
dispose(logA)

[lindi0v]

we definitely need something like this to manually dispose a derive

[sirenkovladd]

You can create your own wrapper

const a = van.state(1)

const customDerive = (fn) => {
  let enabled = true;
  van.derive(() => enabled && fn())
  return () => enabled = false;
}

//log a whenever it's changed
const dispose = customDerive(() => console.log(a.val))

setInterval(() => a.val += 1, 1000)
setTimeout(dispose, 10000)

[lindi0v]

But won’t it be garbage collected?

[Tao-VanJS]

But won’t it be garbage collected?

I believe it will be garbage collected upon state change after dispose.

[cpakken]

Made an autorun function that uses this concept. What do you think? Made the enabled into a state because otherwise even when dispose() is called the derive() needs to wait for the fn to run once more for it to dispose itself. Using enable as a state triggers it instantly

const autorunDisposers = new WeakMap<() => void, () => void>()

export const autorun = (fn: () => void) => {
  let dispose = autorunDisposers.get(fn)
  if (dispose) return dispose

  const enabled = state(true)
  derive(() => enabled.val && fn())

  dispose = () => {
    if (enabled.rawVal) {
      enabled.val = false
      autorunDisposers.delete(fn)
    }
  }
  autorunDisposers.set(fn, dispose)
  return dispose
}

[Tao-VanJS]

I think that looks reasonable to me :-)