[whatwg/dom] [Proposal] Avoid the need of the MutationObserver callback (#1019)

Hi all,

I would like to suggest an improvement on the `MutationObserver`.

## Motivations
Imho, the current implemetation has a problem increasing the code complexity: the need of to treat the mutations in a callback.

Depending on the strategies...
 * it can enforce to wrap all the behaviors in a same function
 * it can enforce to mutate something external written by the developer to manage the mutations externally (disallowing the immutable stategies on that management)
 * it can complicate the treatment for a specific target

## The suggested improvement
An idea I implemented to simplify the behavior is to turn the observer as an iterable.

My approach, to see the suggested behavior:
```js
export class MutationObserver extends globalThis.MutationObserver {
  #wait = resolve => this.#resolve = resolve
  #register = () => this.#promises.push(new Promise(this.#wait))
  #records = []
  #resolve = null
  #promises = []

  constructor (callback = null) {
    super(records => {
      this.#record.push(...records)
      this.#resolve?.()
      this.#register()
      callback?.(records, this)
    })

    this.#register()
  }

  disconnect () {
    this.#resolve()
    super.disconnect()
  }

  async* [Symbol.asyncIterator] () {
    let index = 0

    for (const promise of this.#promises) {
      await promise
      
      for (; index < this.#records.length; index += 1) {
        yield this.#records[index]
      }
    }
  }
}
```

## Usage
```js
const frag = document.createDocumentFragment()

const append = () => frag.append(document.createElement('div'))

const observer = new MutationObserver()

observer.observe(frag, {
  childList: true
})

append()
append()
setTimeout(append, 1000)
setTimeout(() => observer.disconnect(), 3000)
setTimeout(append, 4000) // not observed

for await (const mutations of observer) {
  console.log(mutations)
}

for await (const mutations of observer) {
  console.log(mutations)
}

console.log('end')
```

Any thoughts about it, please?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/1019

Received on Sunday, 26 September 2021 08:19:28 UTC