Rename Added to Connected and Removed to Disconnected

Author: seanpdoyle

docs/reference/targets.md

@@ -93,19 +93,19 @@ if (this.hasResultsTarget) {
 Target _element callbacks_ let you respond whenever a target element is added or
 removed within the controller's element.
 
-Define a method `[name]TargetAdded` or `[name]TargetRemoved` in the controller, where `[name]` is the name of the target you want to observe for additions or removals. The method receives the element as the first argument.
+Define a method `[name]TargetConnected` or `[name]TargetDisconnected` in the controller, where `[name]` is the name of the target you want to observe for additions or removals. The method receives the element as the first argument.
 
 Stimulus invokes each element callback any time its target elements are added or removed after `connect()` and before `disconnect()` lifecycle hooks.
 
 ```js
 export default class extends Controller {
   static targets = [ "input" ]
 
-  inputTargetAdded(element) {
+  inputTargetConnected(element) {
     element.classList.add("added-animation")
   }
 
-  inputTargetRemoved(element) {
+  inputTargetDisconnected(element) {
     element.classList.add("removed-animation")
   }
 }

packages/@stimulus/core/src/target_observer.ts

@@ -25,13 +25,13 @@ export class TargetObserver implements TokenListObserverDelegate {
 
   tokenMatched(token: Token): void {
     if (this.controller.isConnected && this.containsDescendantWithToken(token.element, token.content)) {
-      this.dispatchCallback(`${token.content}TargetAdded`, token.element)
+      this.dispatchCallback(`${token.content}TargetConnected`, token.element)
     }
   }
 
   tokenUnmatched(token: Token): void {
     if (this.controller.isConnected && !this.containsDescendantWithToken(token.element, token.content)) {
-      this.dispatchCallback(`${token.content}TargetRemoved`, token.element)
+      this.dispatchCallback(`${token.content}TargetDisconnected`, token.element)
     }
   }
 

packages/@stimulus/core/src/target_properties.ts

@@ -34,8 +34,5 @@ function propertiesForTargetDefinition(name: string) {
         return this.targets.has(name)
       }
     },
-
-    [`${name}TargetAdded`]: (element: Element) => {},
-    [`${name}TargetRemoved`]: (element: Element) => {},
   }
 }

packages/@stimulus/core/src/tests/controllers/target_controller.ts

@@ -11,7 +11,7 @@ class BaseTargetController extends Controller {
 export class TargetController extends BaseTargetController {
   static classes = [ "added", "removed" ]
   static targets = [ "beta", "input" ]
-  static values = { inputTargetAddedCallCount: Number, inputTargetRemovedCallCount: Number }
+  static values = { inputTargetConnectedCallCount: Number, inputTargetDisconnectedCallCount: Number }
 
   betaTarget!: Element | null
   betaTargets!: Element[]
@@ -26,16 +26,16 @@ export class TargetController extends BaseTargetController {
   addedClass!: string
   removedClass!: string
 
-  inputTargetAddedCallCountValue = 0
-  inputTargetRemovedCallCountValue = 0
+  inputTargetConnectedCallCountValue = 0
+  inputTargetDisconnectedCallCountValue = 0
 
-  inputTargetAdded(element: Element) {
-    this.inputTargetAddedCallCountValue++
+  inputTargetConnected(element: Element) {
+    this.inputTargetConnectedCallCountValue++
     if (this.hasAddedClass) element.classList.add(this.addedClass)
   }
 
-  inputTargetRemoved(element: Element) {
-    this.inputTargetRemovedCallCountValue++
+  inputTargetDisconnected(element: Element) {
+    this.inputTargetDisconnectedCallCountValue++
     if (this.hasRemovedClass) element.classList.add(this.removedClass)
   }
 }

packages/@stimulus/core/src/tests/modules/target_tests.ts

@@ -67,7 +67,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {
     const addedInputs = this.controller.inputTargets.filter(target => target.classList.contains("added"))
 
     this.assert.equal(addedInputs.length, 0)
-    this.assert.equal(this.controller.inputTargetAddedCallCountValue, 0)
+    this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 0)
   }
 
   async "test target added callback when element is inserted"() {
@@ -77,7 +77,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {
     this.controller.element.appendChild(addedInput)
     await this.nextFrame
 
-    this.assert.equal(this.controller.inputTargetAddedCallCountValue, 1)
+    this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 1)
     this.assert.ok(addedInput.classList.contains("added"), `expected "${addedInput.className}" to contain "added"`)
     this.assert.ok(addedInput.isConnected, "element is present in document")
   }
@@ -88,7 +88,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {
     element.setAttribute(`data-${this.controller.identifier}-target`, "input")
     await this.nextFrame
 
-    this.assert.equal(this.controller.inputTargetAddedCallCountValue, 1)
+    this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 1)
     this.assert.ok(element.classList.contains("added"), `expected "${element.className}" to contain "added"`)
     this.assert.ok(element.isConnected, "element is still present in document")
   }
@@ -99,7 +99,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {
     element.setAttribute(`data-${this.controller.identifier}-target`, "alpha input")
     await this.nextFrame
 
-    this.assert.equal(this.controller.inputTargetAddedCallCountValue, 1)
+    this.assert.equal(this.controller.inputTargetConnectedCallCountValue, 1)
     this.assert.ok(element.classList.contains("added"), `expected "${element.className}" to contain "added"`)
     this.assert.ok(element.isConnected, "element is still present in document")
   }
@@ -113,7 +113,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {
     const removedInputs = inputs.filter(target => target.classList.contains("removed"))
 
     this.assert.equal(removedInputs.length, 0)
-    this.assert.equal(this.controller.inputTargetRemovedCallCountValue, 0)
+    this.assert.equal(this.controller.inputTargetDisconnectedCallCountValue, 0)
   }
 
   async "test target removed callback when element is removed"() {
@@ -122,7 +122,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {
     removedInput.remove()
     await this.nextFrame
 
-    this.assert.equal(this.controller.inputTargetRemovedCallCountValue, 1)
+    this.assert.equal(this.controller.inputTargetDisconnectedCallCountValue, 1)
     this.assert.ok(removedInput.classList.contains("removed"), `expected "${removedInput.className}" to contain "removed"`)
     this.assert.notOk(removedInput.isConnected, "element is not present in document")
   }
@@ -133,7 +133,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {
     element.removeAttribute(`data-${this.controller.identifier}-target`)
     await this.nextFrame
 
-    this.assert.equal(this.controller.inputTargetRemovedCallCountValue, 1)
+    this.assert.equal(this.controller.inputTargetDisconnectedCallCountValue, 1)
     this.assert.ok(element.classList.contains("removed"), `expected "${element.className}" to contain "removed"`)
     this.assert.ok(element.isConnected, "element is still present in document")
   }
@@ -144,7 +144,7 @@ export default class TargetTests extends ControllerTestCase(TargetController) {
     element.setAttribute(`data-${this.controller.identifier}-target`, "input")
     await this.nextFrame
 
-    this.assert.equal(this.controller.inputTargetRemovedCallCountValue, 0)
+    this.assert.equal(this.controller.inputTargetDisconnectedCallCountValue, 0)
     this.assert.notOk(element.classList.contains("removed"), `expected "${element.className}" not to contain "removed"`)
     this.assert.ok(element.isConnected, "element is still present in document")
   }