Extract bindActionsToController method

Author: Philip Roberts

catalyst/src/bind.ts

@@ -4,31 +4,38 @@
  */
 export function bind(controller: HTMLElement) {
   const tag = controller.tagName.toLowerCase()
-  for (const el of controller.querySelectorAll(`[data-action*=":${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)
+  }
+
+// Bind the data-action attribute of a single element to the controller
+function bindActionsToController(controller: HTMLElement, el: Element) {
+  const tag = controller.tagName.toLowerCase()
 
-    // Match the pattern of `eventName:constructor#method`.
-    for (const binding of (el.getAttribute('data-action') || '').split(' ')) {
-      const [rest, method] = binding.split('#')
+  // Match the pattern of `eventName:constructor#method`.
+  for (const binding of (el.getAttribute('data-action') || '').split(' ')) {
+    const [rest, method] = binding.split('#')
 
-      // eventName may contain `:` so account for that
-      // by splitting by the last instance of `:`
-      const colonIndex = rest.lastIndexOf(':')
-      if (colonIndex < 0) continue
+    // eventName may contain `:` so account for that
+    // by splitting by the last instance of `:`
+    const colonIndex = rest.lastIndexOf(':')
+    if (colonIndex < 0) continue
 
-      const handler = rest.slice(colonIndex + 1)
-      if (handler !== tag) continue
+    const handler = rest.slice(colonIndex + 1)
+    if (handler !== tag) continue
 
-      const eventName = rest.slice(0, colonIndex)
+    const eventName = rest.slice(0, colonIndex)
 
-      // Check the `method` is present on the prototype
-      const methodDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(controller), method)
-      if (methodDescriptor && typeof methodDescriptor.value == 'function') {
-        el.addEventListener(eventName, (event: Event) => {
-          ;(controller as any)[method](event)
-        })
-      }
+    // Check the `method` is present on the prototype
+    const methodDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(controller), method)
+    if (methodDescriptor && typeof methodDescriptor.value == 'function') {
+      el.addEventListener(eventName, (event: Event) => {
+        ;(controller as any)[method](event)
+      })
     }
   }
 }