Use private functions for bridge components

app/javascript/controllers/bridge/form_controller.js

@@ -8,7 +8,7 @@ export default class extends BridgeComponent {
 
   submitTargetConnected() {
     this.notifyBridgeOfConnect()
-    this.observeSubmitTarget()
+    this.#observeSubmitTarget()
   }
 
   submitTargetDisconnected() {
@@ -41,7 +41,15 @@ export default class extends BridgeComponent {
     this.send("disconnect")
   }
 
-  observeSubmitTarget() {
+  submitStart() {
+    this.send("submitStart")
+  }
+
+  submitEnd() {
+    this.send("submitEnd")
+  }
+
+  #observeSubmitTarget() {
     this.submitObserver = new MutationObserver(() => {
       this.send(this.submitTarget.disabled ? "submitDisabled" : "submitEnabled")
     })
@@ -51,12 +59,4 @@ export default class extends BridgeComponent {
       attributeFilter: [ "disabled" ]
     })
   }
-
-  submitStart() {
-    this.send("submitStart")
-  }
-
-  submitEnd() {
-    this.send("submitEnd")
-  }
 }

app/javascript/controllers/bridge/insets_controller.js

@@ -17,11 +17,11 @@ export default class extends BridgeComponent {
 
   notifyBridgeOfConnect() {
     this.send("connect", {}, message => {
-      this.setInsets(message.data)
+      this.#setInsets(message.data)
     })
   }
 
-  setInsets({ top, right, bottom, left }) {
+  #setInsets({ top, right, bottom, left }) {
     const root = document.documentElement.style
     root.setProperty("--injected-safe-inset-top", `${top}px`)
     root.setProperty("--injected-safe-inset-right", `${right}px`)

app/javascript/controllers/bridge/title_controller.js

@@ -10,54 +10,54 @@ export default class extends BridgeComponent {
   async connect() {
     super.connect()
     await nextFrame()
-    this.startObserver()
-    window.addEventListener("resize", this.windowResized)
+    this.#startObserver()
+    window.addEventListener("resize", this.#windowResized)
   }
 
   disconnect() {
     super.disconnect()
-    this.stopObserver()
-    window.removeEventListener("resize", this.windowResized)
+    this.#stopObserver()
+    window.removeEventListener("resize", this.#windowResized)
   }
 
   notifyBridgeOfVisibilityChange(visible) {
-    this.send("visibility", { title: this.title, elementVisible: visible })
+    this.send("visibility", { title: this.#title, elementVisible: visible })
   }
 
   // Intersection Observer
 
-  startObserver() {
+  #startObserver() {
     if (!this.hasHeaderTarget) return
 
     this.observer = new IntersectionObserver(([ entry ]) =>
       this.notifyBridgeOfVisibilityChange(entry.isIntersecting),
-      { rootMargin: `-${this.topOffset}px 0px 0px 0px` }
+      { rootMargin: `-${this.#topOffset}px 0px 0px 0px` }
     )
 
     this.observer.observe(this.headerTarget)
-    this.previousTopOffset = this.topOffset
+    this.previousTopOffset = this.#topOffset
   }
 
-  stopObserver() {
+  #stopObserver() {
     this.observer?.disconnect()
   }
 
-  updateObserverIfNeeded() {
-    if (this.topOffset === this.previousTopOffset) return
+  #updateObserverIfNeeded() {
+    if (this.#topOffset === this.previousTopOffset) return
 
-    this.stopObserver()
-    this.startObserver()
+    this.#stopObserver()
+    this.#startObserver()
   }
 
-  windowResized = () => {
-    this.updateObserverIfNeeded()
+  #windowResized = () => {
+    this.#updateObserverIfNeeded()
   }
 
-  get title() {
+  get #title() {
     return this.titleValue ? this.titleValue : document.title
   }
 
-  get topOffset() {
+  get #topOffset() {
     return viewport.top
   }
 }