Setup mutation aware declarative reflexes

javascript/stimulus_reflex.js

@@ -4,7 +4,7 @@ import { defaultSchema } from './schema'
 import { getConsumer } from './consumer'
 import { dispatchLifecycleEvent } from './lifecycle'
 import { allReflexControllers } from './controllers'
-import { uuidv4 } from './utils'
+import { uuidv4, debounce } from './utils'
 import Log from './log'
 import {
   attributeValue,
@@ -188,7 +188,7 @@ class StimulusReflexController extends Controller {
 // Sets up declarative reflex behavior.
 // Any elements that define data-reflex will automatically be wired up with the default StimulusReflexController.
 //
-const setupDeclarativeReflexes = () => {
+const setupDeclarativeReflexes = debounce(() => {
   document
     .querySelectorAll(`[${stimulusApplication.schema.reflexAttribute}]`)
     .forEach(element => {
@@ -231,7 +231,7 @@ const setupDeclarativeReflexes = () => {
           actionValue
         )
     })
-}
+}, 20)
 
 // compute the DOM element(s) which will be the morph root
 // use the data-reflex-root attribute on the reflex or the controller
@@ -284,16 +284,17 @@ const initialize = (application, initializeOptions = {}) => {
 
 if (!document.stimulusReflexInitialized) {
   document.stimulusReflexInitialized = true
-  window.addEventListener('load', () => setTimeout(setupDeclarativeReflexes, 1))
-  document.addEventListener('turbolinks:load', () =>
-    setTimeout(setupDeclarativeReflexes, 1)
-  )
-  document.addEventListener('cable-ready:after-morph', () =>
-    setTimeout(setupDeclarativeReflexes, 1)
-  )
-  document.addEventListener('ajax:complete', () =>
-    setTimeout(setupDeclarativeReflexes, 1)
-  )
+
+  window.addEventListener('load', () => {
+    setupDeclarativeReflexes()
+    const observer = new MutationObserver(setupDeclarativeReflexes)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      childList: true,
+      subtree: true
+    })
+  })
+
   // Trigger success and after lifecycle methods from before-morph to ensure we can find a reference
   // to the source element in case it gets removed from the DOM via morph.
   // This is safe because the server side reflex completed successfully.
@@ -374,7 +375,6 @@ if (!document.stimulusReflexInitialized) {
 export default {
   initialize,
   register,
-  setupDeclarativeReflexes,
   get debug () {
     return debugging
   },

javascript/utils.js

@@ -21,3 +21,14 @@ export const camelize = (value, uppercaseFirstLetter = true) => {
 
   return value
 }
+
+export const debounce = (callback, delay = 250) => {
+  let timeoutId
+  return (...args) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => {
+      timeoutId = null
+      callback(...args)
+    }, delay)
+  }
+}