Understanding mutation observers

javan · September 6, 2018, 2:03pm

Nice! Thanks for sharing.

You can see how Stimulus uses MutationObserver in the @stimulus/mutation-observers package.

stimulusjs/stimulus/blob/1d275fc3f2204399d5fa844816b6bfac965d9a67/packages/@stimulus/mutation-observers/src/element_observer.ts#L23-L31


  this.elements = new Set
  this.mutationObserver = new MutationObserver((mutations) => this.processMutations(mutations))
}


start() {
  if (!this.started) {
    this.started = true
    this.mutationObserver.observe(this.element, { attributes: true, childList: true, subtree: true })
    this.refresh()

github.com

stimulusjs/stimulus/blob/1d275fc3f2204399d5fa844816b6bfac965d9a67/packages/@stimulus/mutation-observers/src/element_observer.ts#L59-L76


// Mutation record processing


private processMutations(mutations: MutationRecord[]) {
  if (this.started) {
    for (const mutation of mutations) {
      this.processMutation(mutation)
    }
  }
}


private processMutation(mutation: MutationRecord) {
  if (mutation.type == "attributes") {
    this.processAttributeChange(mutation.target, mutation.attributeName!)
  } else if (mutation.type == "childList") {
    this.processRemovedNodes(mutation.removedNodes)
    this.processAddedNodes(mutation.addedNodes)
  }
}

Topic		Replies	Views
Overview of stimulus.js implementation?	1	3109	February 4, 2019
How change mutationObserver on created controller?	0	859	January 20, 2020
Is it safe to stop and start stimulus?	1	626	July 8, 2021
Dispatch from within observer	3	617	September 14, 2022
DOM changes from backend in a turbo_frame_tag are not triggering value changes callbacks	9	1328	June 7, 2021

Understanding mutation observers

Related topics