fix: bind controllers before custom connectedCallback behavior

If a controller synchronously dispatches events in its
connectedCallback, `data-action` handlers register the event too late,
because connectedCallback itself is a synchronous callback, while
`MutationObserver` is tasked.

This changes `bind` to be called _before_ custom `connectedCallback`
behavior so that any events dispatched in a `connectedCallback` are
captured by the `data-action` handler, making for a simpler
understanding of `data-action` handlers.

By making this change we allow developers to not have to internalise the
idea of dispatching events during Synchronous or Asynchronous
tasks/microtasks. Developers can simply dispatch an event without
worrying if it was synchronous or not.

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

Author: keithamus

src/controller.ts

@@ -16,8 +16,8 @@ export function controller(classObject: CustomElement): void {
     this.toggleAttribute('data-catalyst', true)
     autoShadowRoot(this)
     initializeAttrs(this)
-    if (connect) connect.call(this)
     bind(this)
+    if (connect) connect.call(this)
   }
   defineObservedAttributes(classObject)
   register(classObject)

test/controller.js

@@ -16,4 +16,25 @@ describe('controller', () => {
     expect(instance.hasAttribute('data-catalyst')).to.equal(true)
     expect(instance.getAttribute('data-catalyst')).to.equal('')
   })
+
+  it('binds controllers before custom connectedCallback behaviour', async () => {
+    controller(class ControllerBindOrderElement extends HTMLElement {})
+    controller(
+      class ControllerBindOrderSubElement extends HTMLElement {
+        connectedCallback() {
+          this.dispatchEvent(new CustomEvent('loaded'))
+        }
+      }
+    )
+
+    const instance = document.createElement('controller-bind-order')
+    chai.spy.on(instance, 'foo')
+    document.body.appendChild(instance)
+
+    const sub = document.createElement('controller-bind-order-sub')
+    sub.setAttribute('data-action', 'loaded:controller-bind-order#foo')
+    instance.appendChild(sub)
+
+    expect(instance.foo).to.have.been.called(1)
+  })
 })