refactor: ground up rewrite of bind/listenForBind

This is a rewrite from first-principles of `bind` and `listenForBind` to
balance readability and performance, in light of the current
requirements (as encoded by tests).

Co-authored-by: Kristján Oddsson <koddsson@gmail.com>

Author: keithamus

src/bind.ts

@@ -1,66 +1,12 @@
-const bound = new Set<string>()
+const controllers = new Set<string>()
+
 /*
  * Bind `[data-action]` elements from the DOM to their actions.
  *
  */
 export function bind(controller: HTMLElement): void {
-  const tag = controller.tagName.toLowerCase()
-  bound.add(tag)
-  const actionAttributeMatcher = `[data-action*=":${tag}#"]`
-
-  for (const el of controller.querySelectorAll(actionAttributeMatcher)) {
-    // Ignore nested elements
-    if (el.closest(tag) !== controller) continue
-    bindActionsToController(controller, el)
-  }
-
-  // Also bind the controller to itself
-  if (controller.matches(actionAttributeMatcher)) {
-    bindActionsToController(controller, controller)
-  }
-}
-
-// Match the pattern of `eventName:constructor#method`.
-function* getActions(el: Element): Generator<[string, string, string]> {
-  for (const binding of (el.getAttribute('data-action') || '').split(' ')) {
-    const [rest, methodName] = binding.split('#')
-    if (!methodName) continue
-
-    // eventName may contain `:` so account for that
-    // by splitting by the last instance of `:`
-    const colonIndex = rest.lastIndexOf(':')
-    if (colonIndex < 0) continue
-
-    yield [rest.slice(0, colonIndex), rest.slice(colonIndex + 1), methodName]
-  }
-}
-
-function bindActionToController(controller: HTMLElement, el: Element, methodName: string, eventName: string) {
-  // Check the `method` is present on the prototype
-  const methodDescriptor =
-    Object.getOwnPropertyDescriptor(controller, methodName) ||
-    Object.getOwnPropertyDescriptor(Object.getPrototypeOf(controller), methodName)
-  if (methodDescriptor && typeof methodDescriptor.value == 'function') {
-    el.addEventListener(eventName, (event: Event) => {
-      methodDescriptor.value.call(controller, event)
-    })
-  }
-}
-
-// Bind the data-action attribute of a single element to the controller
-function bindActionsToController(controller: HTMLElement, el: Element) {
-  const tag = controller.tagName.toLowerCase()
-
-  for (const [eventName, tagName, methodName] of getActions(el)) {
-    if (tagName === tag) {
-      bindActionToController(controller, el, methodName, eventName)
-    }
-  }
-}
-
-interface Subscription {
-  closed: boolean
-  unsubscribe(): void
+  controllers.add(controller.tagName.toLowerCase())
+  findElementsToBind(controller)
 }
 
 /**
@@ -70,26 +16,22 @@ interface Subscription {
  * This returns a Subscription object which you can call `unsubscribe()` on to
  * stop further live updates.
  */
-export function listenForBind(el: Node = document, batchSize = 30): Subscription {
+export function listenForBind(el: Node = document): Subscription {
   let closed = false
-
   const observer = new MutationObserver(mutations => {
-    const queue = new Set<Element>()
     for (const mutation of mutations) {
-      if (mutation.type === 'childList' && mutation.addedNodes.length) {
+      if (mutation.type === 'attributes' && mutation.target instanceof Element) {
+        bindActions(mutation.target)
+      } else if (mutation.type === 'childList' && mutation.addedNodes.length) {
         for (const node of mutation.addedNodes) {
-          if (!(node instanceof Element)) continue
-          if (node.hasAttribute('data-action')) {
-            queue.add(node)
+          if (node instanceof Element) {
+            findElementsToBind(node)
           }
         }
       }
     }
-    if (queue.size) requestAnimationFrame(() => processQueue(queue, batchSize))
   })
-
-  observer.observe(el, {childList: true, subtree: true})
-
+  observer.observe(el, {childList: true, subtree: true, attributes: true, attributeFilter: ['data-action']})
   return {
     get closed() {
       return closed
@@ -101,22 +43,75 @@ export function listenForBind(el: Node = document, batchSize = 30): Subscription
   }
 }
 
-function processQueue(queue: Set<Element>, batchSize: number) {
-  let counter = batchSize
-  for (const el of queue) {
-    for (const [eventName, controllerTag, methodName] of getActions(el)) {
-      if (!bound.has(controllerTag)) continue
-      const controller = el.closest(controllerTag)
-      if (!(controller instanceof HTMLElement)) continue
+interface Subscription {
+  closed: boolean
+  unsubscribe(): void
+}
 
-      bindActionToController(controller, el, methodName, eventName)
+function findElementsToBind(root: Element) {
+  for (const el of root.querySelectorAll('[data-action]')) {
+    bindActions(el)
+  }
+  // Also bind the controller to itself
+  if (root.hasAttribute('data-action')) {
+    bindActions(root)
+  }
+}
+
+function getActionEventName(action: string): string {
+  return action.slice(0, action.lastIndexOf(':'))
+}
+
+function getActionControllerName(action: string): string {
+  return action.slice(action.lastIndexOf(':') + 1, action.lastIndexOf('#'))
+}
+
+function getActionMethodName(action: string): string {
+  return action.slice(action.lastIndexOf('#') + 1)
+}
+
+// ControllerEventHandler is a global event handler that dispatches events to
+// controllers. We use a global event handler over bindings functions because
+// this is far more performant; creating functions for each `addEventListener`
+// would be very costly for CPU performance (and memory), while registering a
+// single handler for every event keeps things relatively performant.
+const ControllerEventHandler = {
+  handleEvent(event: Event) {
+    const el = event.currentTarget
+    if (!(el instanceof Element)) return
+    for (const action of (el.getAttribute('data-action') || '').split(' ')) {
+      // We want to dispatch this event, only to the subscribers; we filter by
+      // event.type to find which actions should fire
+      const eventType = getActionEventName(action)
+      if (event.type !== eventType) continue
+      // We need to find the closest controller to dispatch the event to.
+      const tagName = getActionControllerName(action)
+      // The controller should be "well known" in that `bind()` should have
+      // been called on it.
+      if (!controllers.has(tagName)) continue
+      const controller = el.closest(tagName) as Element & Record<string, (ev: Event) => unknown>
+      if (!controller) continue
+      // Finally we need to get the right method to call on the controller.
+      // The method also needs to exist!
+      const method = getActionMethodName(action)
+      if (typeof controller[method] === 'function') {
+        controller[method](event)
+      }
     }
-    queue.delete(el)
+  }
+}
 
-    counter -= 1
-    if (counter === 0) break
+const bindings = new WeakMap<Element, Set<string>>()
+function bindActions(el: Element) {
+  if (!bindings.has(el)) {
+    bindings.set(el, new Set())
   }
-  if (queue.size !== 0) {
-    requestAnimationFrame(() => processQueue(queue, batchSize))
+  const elementBindings = bindings.get(el)!
+  for (const action of (el.getAttribute('data-action') || '').split(' ')) {
+    const event = getActionEventName(action)
+    if (!elementBindings.has(event)) {
+      el.addEventListener(event, ControllerEventHandler)
+    }
+    elementBindings.add(event)
   }
 }