refactor bind into actionable

Author: keithamus

src/actionable.ts

@@ -0,0 +1,58 @@
+import type {CustomElementClass, CustomElement} from './custom-element.js'
+import type {ControllableClass} from './controllable.js'
+import {registerTag, observeElementForTags, parseElementTags} from './tag-observer.js'
+import {controllable, attachShadowCallback} from './controllable.js'
+import {createAbility} from './ability.js'
+
+const parse = (tag: string): [tagName: string, event: string, method: string] => {
+  const eventSep = tag.lastIndexOf(':')
+  const methodSep = Math.max(0, tag.lastIndexOf('#')) || tag.length
+  return [tag.slice(eventSep + 1, methodSep), tag.slice(0, eventSep), tag.slice(methodSep + 1) || 'handleEvent']
+}
+registerTag(
+  'data-action',
+  parseActionAttribute,
+  (el: Element, controller: Element | ShadowRoot, tag: string, event: string) => {
+    el.addEventListener(event, handleEvent)
+  }
+)
+
+const actionables = new WeakSet<CustomElement>()
+// Bind a single function to all events to avoid anonymous closure performance penalty.
+function handleEvent(event: Event) {
+  const el = event.currentTarget as Element
+  for (const [tag, type, method] of parseElementTags(el, 'data-action', parseActionAttribute)) {
+    if (event.type === type) {
+      type EventDispatcher = CustomElement & Record<string, (ev: Event) => unknown>
+      const controller = el.closest<EventDispatcher>(tag)!
+      if (actionables.has(controller) && typeof controller[method] === 'function') {
+        controller[method](event)
+      }
+      const root = el.getRootNode()
+      if (root instanceof ShadowRoot) {
+        const shadowController = root.host as EventDispatcher
+        if (shadowController.matches(tag) && actionables.has(shadowController)) {
+          if (typeof shadowController[method] === 'function') {
+            shadowController[method](event)
+          }
+        }
+      }
+    }
+  }
+}
+
+export const actionable = createAbility(
+  <T extends CustomElementClass>(Class: T): T & ControllableClass =>
+    class extends controllable(Class) {
+      constructor() {
+        super()
+        actionables.add(this)
+        observeElementForTags(this)
+      }
+
+      [attachShadowCallback](root: ShadowRoot) {
+        super[attachShadowCallback]?.(root)
+        observeElementForTags(root)
+      }
+    }
+)

src/bind.ts

@@ -1,12 +1,14 @@
 import {CatalystDelegate} from './core.js'
 import type {CustomElementClass} from './custom-element.js'
 import {attrable} from './attrable.js'
+import {actionable} from './actionable.js'
+
 /**
  * Controller is a decorator to be used over a class that extends HTMLElement.
  * It will automatically `register()` the component in the customElement
  * registry, as well as ensuring `bind(this)` is called on `connectedCallback`,
  * wrapping the classes `connectedCallback` method if needed.
  */
 export function controller(classObject: CustomElementClass): void {
-  new CatalystDelegate(attrable(classObject))
+  new CatalystDelegate(actionable(attrable(classObject)))
 }

src/controller.ts

@@ -49,9 +49,7 @@ export class CatalystDelegate {
   connectedCallback(instance: HTMLElement, connectedCallback: () => void) {
     instance.toggleAttribute('data-catalyst', true)
     customElements.upgrade(instance)
-    bind(instance)
     connectedCallback?.call(instance)
-    if (instance.shadowRoot) bindShadow(instance.shadowRoot)
   }
 
   disconnectedCallback(element: HTMLElement, disconnectedCallback: () => void) {

src/core.ts

@@ -1,4 +1,4 @@
-export {bind, listenForBind} from './bind.js'
+export {actionable} from './actionable.js'
 export {register} from './register.js'
 export {findTarget, findTargets} from './findtarget.js'
 export {target, targets} from './target.js'

src/index.ts

@@ -1,15 +1,15 @@
 import {expect, fixture, html} from '@open-wc/testing'
 import {fake} from 'sinon'
-import {controller} from '../src/controller.js'
-import {bindShadow} from '../src/bind.js'
+import {actionable} from '../src/actionable.js'
 
 describe('Actionable', () => {
-  @controller
+  @actionable
   class BindTestElement extends HTMLElement {
     foo = fake()
     bar = fake()
     handleEvent = fake()
   }
+  window.customElements.define('bind-test', BindTestElement)
   let instance: BindTestElement
   beforeEach(async () => {
     instance = await fixture(html`<bind-test data-action="foo:bind-test#foo">
@@ -126,7 +126,25 @@ describe('Actionable', () => {
     el1.setAttribute('data-action', 'click:bind-test#foo')
     el2.setAttribute('data-action', 'submit:bind-test#foo')
     const shadowRoot = instance.attachShadow({mode: 'open'})
-    bindShadow(shadowRoot)
+    shadowRoot.append(el1, el2)
+
+    // We need to wait for one microtask after injecting the HTML into to
+    // controller so that the actions have been bound to the controller.
+    await Promise.resolve()
+
+    expect(instance.foo).to.have.callCount(0)
+    el1.click()
+    expect(instance.foo).to.have.callCount(1)
+    el2.dispatchEvent(new CustomEvent('submit'))
+    expect(instance.foo).to.have.callCount(2)
+  })
+
+  it('can bind elements within a closed shadowDOM', async () => {
+    const el1 = document.createElement('div')
+    const el2 = document.createElement('div')
+    el1.setAttribute('data-action', 'click:bind-test#foo')
+    el2.setAttribute('data-action', 'submit:bind-test#foo')
+    const shadowRoot = instance.attachShadow({mode: 'closed'})
     shadowRoot.append(el1, el2)
 
     // We need to wait for one microtask after injecting the HTML into to
@@ -158,7 +176,6 @@ describe('Actionable', () => {
       const el1 = document.createElement('div')
       const el2 = document.createElement('div')
       const shadowRoot = instance.attachShadow({mode: 'open'})
-      bindShadow(shadowRoot)
       shadowRoot.append(el1, el2)
 
       // We need to wait for one microtask after injecting the HTML into to