From 73feb5bc7e844fee3bd456cad17771214b2a830c Mon Sep 17 00:00:00 2001 From: Sean Doyle Date: Mon, 11 Oct 2021 10:03:48 -0400 Subject: [PATCH] Docs: Fix Lifecycle Callback order Closes https://github.com/hotwired/stimulus/issues/471 --- This commit re-arranges the documentation for Controller Lifecycle Callbacks to reflect the order of execution and elaborates with more details when possible. The possibilities for the callback execution order was discussed and the [current order was agreed upon][order]. [order]: https://github.com/hotwired/stimulus/pull/367 --- docs/reference/lifecycle_callbacks.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/reference/lifecycle_callbacks.md b/docs/reference/lifecycle_callbacks.md index dc5bb55e..5e972770 100644 --- a/docs/reference/lifecycle_callbacks.md +++ b/docs/reference/lifecycle_callbacks.md @@ -26,10 +26,10 @@ You may define any of the following methods in your controller: Method | Invoked by Stimulus… ------------ | -------------------- 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 +connect() | Anytime the controller is connected to the DOM [name]TargetDisconnected(target: Element) | Anytime a target is disconnected from the DOM +disconnect() | Anytime the controller is disconnected from the DOM ## Connection @@ -47,7 +47,7 @@ A target is _connected_ to the document when both of the following conditions ar * its element is present in the document as a descendant of its corresponding controller's element * its identifier is present in the element's `data-{identifier}-target` attribute -When a target becomes connected, Stimulus calls its controller's `[name]TargetConnected()` method, passing the target element as a parameter. +When a target becomes connected, Stimulus calls its controller's `[name]TargetConnected()` method, passing the target element as a parameter. The `[name]TargetConnected()` lifecycle callbacks will fire *before* the controller's `connect()` callback. ## Disconnection @@ -71,7 +71,7 @@ A connected target will later become _disconnected_ when either of the preceding * the element's `data-{identifier}-target` attribute is removed or modified * the document installs a new `` element, such as during a Turbo page change -When a target becomes disconnected, Stimulus calls its controller's `[name]TargetDisconnected()` method, passing the target element as a parameter. +When a target becomes disconnected, Stimulus calls its controller's `[name]TargetDisconnected()` method, passing the target element as a parameter. The `[name]TargetDisconnected()` lifecycle callbacks will fire *before* the controller's `disconnect()` callback. ## Reconnection @@ -87,4 +87,4 @@ Stimulus watches the page for changes asynchronously using the [DOM `MutationObs This means that Stimulus calls your controller's lifecycle methods asynchronously after changes are made to the document, in the next [microtask](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) following each change. -Lifecycle methods still run in the order they occur, so two calls to a controller's `connect()` method will always be separated by one call to `disconnect()`. +Lifecycle methods still run in the order they occur, so two calls to a controller's `connect()` method will always be separated by one call to `disconnect()`. Similarly, two calls to a controller's `[name]TargetConnected()` for a given target will always be separated by one call to `[name]TargetDisconnected()` for that same target.