Support Explicit Resource Management in reactions

[vkrol]

Implementation

#4558

Motivation

Explicit Resource Management recently moved to Stage 4. I think it would be useful to support [Symbol.dispose] in reactions, i.e., make them Disposable, in order to simplify the simultaneous disposal of multiple reactions, for example.

Example

function createSomeDisposableResource() {}

class Vat {
    value = 1.2

    constructor() {
        makeAutoObservable(this)
    }
}

const vat = new Vat()

class OrderLine {
    price = 10
    amount = 1
    disposableStack = new DisposableStack()
    someDisposableResource

    constructor() {
        makeAutoObservable(this)

        this.disposableStack.use(autorun(() => {
            doSomethingWith(this.price * this.amount)
        }))

        this.disposableStack.use(autorun(() => {
            doSomethingWith(this.price * this.amount * vat.value)
        }))

        this.someDisposableResource = this.disposableStack.use(createSomeDisposableResource())
    }

    [Symbol.dispose]() {
        this.disposableStack[Symbol.dispose]();
    }
}