Makes DOM dispatch 'render' and 'destroy' events for added/removed elements

observer.js

const createObserver = (
  ({ curry, pipe, evolve, merge, forEach, filter }) => {
    const filterNodes = curry(
      (filter, container) => {
        let currentNode
        const nodes = []
        const walker = document.createTreeWalker(container, filter)

        while (currentNode = walker.nextNode()) nodes.push(currentNode)

        return nodes
      }
    )
    
    const dispatch = curry(
      (eventName, element) => element.dispatchEvent(new Event(eventName))
    )

    const dispatchSubtree = curry(
      (event, container) => pipe(
        filterNodes(NodeFilter.SHOW_ELEMENT),
        forEach(dispatch(event))
      )(container)
    )

    const handleMutation = evolve({
      addedNodes: forEach(dispatchSubtree('render')),
      removedNodes: forEach(dispatchSubtree('destroy')),
    })

    return (target = document, config = {}) => {
      let observer
      const defaultConfig = {
        childList: true,
        subtree: true
      }

      return {
        start() {
          observer = new MutationObserver(forEach(handleMutation))
          observer.observe(document, merge(defaultConfig, config))

          return observer
        },
        stop() {
          observer.disconnect()
          observer = null
        }
      }
    }
  }
)(window)

createObserver().start()