The order of the lifecycle callbacks is confusing Stimulus 3

[sandergroen]

In the documentation the following callbacks are defined:

initialize() | Once, when the controller is first instantiated
connect() | Anytime the controller is connected to the DOM
[name]TargetConnected(target: Element) | Anytime a target is connected to the DOM
disconnect() | Anytime the controller is disconnected from the DOM
[name]TargetDisconnected(target: Element) | Anytime a target is disconnected from the DOM

And in my case I use the connect() and [name]TargetConnected(target: Element) callbacks. I would expect the connect callback to be called first but to my surprise the [name]TargetConnected callbacks are being called before the connect callback. I would expect them to be called in the same order as the order in the documentation.

In my dom I have something like this:

  <div data-controller="names">
    <div data-names-target="name">...</div>
    <div data-my-controller-target="name">...</div>
  </div>

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ['name']
  connect() {
    console.log('connecting names controller')
  }

  nameTargetConnected() {
    console.log('connecting name target')
  }
}

Console output:

names_controller.js:10 connecting name target
names_controller.js:10 connecting name target
names_controller.js:6 connecting names controller

[dhh]

cc @seanpdoyle

[seanpdoyle]

I've opened #473 to improve the documentation around the lifecycle execution order.

[sandergroen]

Thank you @dhh and @seanpdoyle!