change: invoke disconnected before [target]Disconnected

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- Invoke `disconnected` callback before [target]Disconnected callbacks
+
 ## [0.3.0] - 2024-03-17
 
 ### Added

packages/core/src/element.ts

@@ -57,11 +57,10 @@ export default class ImpulseElement extends HTMLElement {
 
   disconnectedCallback() {
     // Order is important
+    this.disconnected();
     this.action.stop();
     this.target.stop();
     this.targets.stop();
-    // We want to invoke the `disconnected` callback after stopping the `target(s)` but before stopping the `property`
-    this.disconnected();
     this.property.stop();
     this._started = false;
   }

packages/core/test/target.test.ts

@@ -170,10 +170,10 @@ describe('@target', () => {
     expect(el.panelDisconnectedSpy.notCalled).to.be.true;
   });
 
-  it('should call the disconnected callback after [target]Disconnected callback', () => {
+  it('should call the disconnected callback before [target]Disconnected callback', () => {
     el.remove();
-    expect(el.disconnectedSpy.calledAfter(el.panelDisconnectedSpy)).to.be.true;
-    expect(el.disconnectedSpy.calledAfter(el.buttonDisconnectedSpy)).to.be.true;
+    expect(el.panelDisconnectedSpy.calledAfter(el.disconnectedSpy)).to.be.true;
+    expect(el.buttonDisconnectedSpy.calledAfter(el.disconnectedSpy)).to.be.true;
   });
 
   it('should not call the [target]Disconnected callback if the identifier do not match', () => {

packages/core/test/targets.test.ts

@@ -163,9 +163,9 @@ describe('@targets', () => {
     expect(el.panelsDisconnectedSpy.notCalled).to.be.true;
   });
 
-  it('should call the disconnected callback after [target]Disconnected callback', () => {
+  it('should call the disconnected callback before [target]Disconnected callback', () => {
     el.remove();
-    expect(el.disconnectedSpy.calledAfter(el.panelsDisconnectedSpy)).to.be.true;
+    expect(el.panelsDisconnectedSpy.calledAfter(el.disconnectedSpy)).to.be.true;
   });
 
   it('should not call the [target]Disconnected callback if the identifier do not match', () => {

packages/docs/reference/lifecycle-callbacks.md

@@ -55,6 +55,18 @@ connected() {
 }
 ```
 
+### `disconnected()`
+
+This function is called when the element itself is disconnected from the DOM. Within this function, you can clean up
+any event listeners and tasks that were attached in the `connected()` function so that it is free to be garbage
+collected.
+
+```ts
+disconnected() {
+  this.removeEventListener('click', this.handleClick);
+}
+```
+
 ### `[target]Disconnected()`
 
 This function is called when the declared `target` / `targets` is disconnected from the DOM. Within this function, you
@@ -73,15 +85,3 @@ buttonsDisconnected(button: HTMLButtonElement) {
   console.log('button disconnected from the DOM: ', button);
 }
 ```
-
-### `disconnected()`
-
-This function is called when the element itself is disconnected from the DOM. Within this function, you can clean up
-any event listeners and tasks that were attached in the `connected()` function so that it is free to be garbage
-collected.
-
-```ts
-disconnected() {
-  this.removeEventListener('click', this.handleClick);
-}
-```