Fix custom elements setup and teardown

AGENTS.md

@@ -42,7 +42,8 @@ bun run test
 bun run build
 
 # Build individual components
-bun run build:js         # Rollup JavaScript bundling
+bun run build:admin      # Bundle admin JavaScript (app/javascript/alchemy_admin/**)
+bun run build:js         # Bundle vendored dependencies (sortablejs, shoelace, tinymce, etc.)
 bun run build:css        # Sass compilation
 bun run handlebars:compile  # Compile Handlebars templates
 bun run build:icons      # Generate icon sprite

app/javascript/alchemy_admin/components/auto_submit.js

@@ -4,16 +4,22 @@ class AutoSubmit extends HTMLElement {
   connectedCallback() {
     // Still using jQuery here, because select2 does not emit
     // the event from the original select element.
-    $(this).on("change", function (event) {
-      // We need to dispatch a submit event, so that Turbo that listens
-      // to it submits the search form us.
-      const submitEvent = new Event("submit", {
-        bubbles: true,
-        cancelable: true
-      })
-      event.target.form.dispatchEvent(submitEvent)
-      return false
+    $(this).on("change", this.#onChange)
+  }
+
+  disconnectedCallback() {
+    $(this).off("change", this.#onChange)
+  }
+
+  #onChange = (event) => {
+    // We need to dispatch a submit event, so that Turbo that listens
+    // to it submits the search form us.
+    const submitEvent = new Event("submit", {
+      bubbles: true,
+      cancelable: true
     })
+    event.target.form.dispatchEvent(submitEvent)
+    return false
   }
 }
 

app/javascript/alchemy_admin/components/clipboard_button.js

@@ -2,12 +2,8 @@ import "clipboard"
 import { growl } from "alchemy_admin/growler"
 
 class ClipboardButton extends HTMLElement {
-  constructor() {
-    super()
-
-    this.innerHTML = `
-      <alchemy-icon name="clipboard"></alchemy-icon>
-    `
+  connectedCallback() {
+    this.innerHTML = '<alchemy-icon name="clipboard"></alchemy-icon>'
 
     this.clipboard = new ClipboardJS(this, {
       text: () => {

app/javascript/alchemy_admin/components/color_select.js

@@ -14,12 +14,12 @@ const formatItem = (object) => {
 }
 
 class ColorSelect extends HTMLElement {
+  #select2 = null
+
   connectedCallback() {
     if (this.select) {
       this.#initializeSelect2()
-      $(this.select).on("change", (event) =>
-        this.#toggleColorPicker(event.val === "custom_color")
-      )
+      this.#select2.on("change", this.#onSelectChange)
     } else {
       this.colorInput?.addEventListener("input", this)
       this.textInput?.addEventListener("input", this)
@@ -41,6 +41,15 @@ class ColorSelect extends HTMLElement {
   disconnectedCallback() {
     this.colorInput?.removeEventListener("input", this)
     this.textInput?.removeEventListener("input", this)
+    if (this.#select2) {
+      this.#select2.off("change", this.#onSelectChange)
+      this.#select2.select2("destroy")
+      this.#select2 = null
+    }
+  }
+
+  #onSelectChange = (event) => {
+    this.#toggleColorPicker(event.val === "custom_color")
   }
 
   #initializeSelect2() {
@@ -50,7 +59,7 @@ class ColorSelect extends HTMLElement {
       formatResult: formatItem,
       formatSelection: formatItem
     }
-    $(this.select).select2(options)
+    this.#select2 = $(this.select).select2(options)
   }
 
   #toggleColorPicker(enabled = true) {

app/javascript/alchemy_admin/components/dialog_link.js

@@ -1,11 +1,14 @@
 import { Dialog } from "alchemy_admin/dialog"
 
 export class DialogLink extends HTMLAnchorElement {
-  constructor() {
-    super()
+  connectedCallback() {
     this.addEventListener("click", this)
   }
 
+  disconnectedCallback() {
+    this.removeEventListener("click", this)
+  }
+
   handleEvent(evt) {
     if (!this.disabled) {
       this.openDialog()

app/javascript/alchemy_admin/components/element_editor.js

@@ -15,8 +15,15 @@ export function dispatchPageDirtyEvent(data) {
 }
 
 export class ElementEditor extends HTMLElement {
-  constructor() {
-    super()
+  #form = null
+  #header = null
+  #toggleButton = null
+
+  connectedCallback() {
+    // The placeholder while be being dragged is empty.
+    if (this.classList.contains("ui-sortable-placeholder")) {
+      return
+    }
 
     // Add event listeners
     this.addEventListener("click", this)
@@ -27,24 +34,16 @@ export class ElementEditor extends HTMLElement {
 
     // Dirty observer still needs to be jQuery
     // in order to support select2.
-    $(this.form).on("change", this.onChange)
+    this.#form = this.form
+    if (this.#form) {
+      $(this.#form).on("change", this.onChange)
+    }
 
-    this.header?.addEventListener("dblclick", () => {
-      this.toggle()
-    })
-    this.toggleButton?.addEventListener("click", (evt) => {
-      const elementEditor = evt.target.closest("alchemy-element-editor")
-      if (elementEditor === this) {
-        this.toggle()
-      }
-    })
-  }
+    this.#header = this.header
+    this.#header?.addEventListener("dblclick", this.#onHeaderDblclick)
 
-  connectedCallback() {
-    // The placeholder while be being dragged is empty.
-    if (this.classList.contains("ui-sortable-placeholder")) {
-      return
-    }
+    this.#toggleButton = this.toggleButton
+    this.#toggleButton?.addEventListener("click", this.#onToggleClick)
 
     // When newly created, focus the element and refresh the preview
     if (this.hasAttribute("created")) {
@@ -56,6 +55,20 @@ export class ElementEditor extends HTMLElement {
     }
   }
 
+  disconnectedCallback() {
+    this.removeEventListener("click", this)
+    this.removeEventListener("alchemy:element-update-title", this)
+    this.removeEventListener("ajax:complete", this)
+    if (this.#form) {
+      $(this.#form).off("change", this.onChange)
+      this.#form = null
+    }
+    this.#header?.removeEventListener("dblclick", this.#onHeaderDblclick)
+    this.#header = null
+    this.#toggleButton?.removeEventListener("click", this.#onToggleClick)
+    this.#toggleButton = null
+  }
+
   handleEvent(event) {
     switch (event.type) {
       case "click":
@@ -79,15 +92,15 @@ export class ElementEditor extends HTMLElement {
     }
   }
 
-  onChange(event) {
+  onChange = (event) => {
     const target = event.target
     // SortableJS fires a native change event :/
     // and we do not want to set the element editor dirty
     // when this happens
     if (target.classList.contains("nested-elements")) {
       return
     }
-    this.closest("alchemy-element-editor").setDirty(target)
+    this.setDirty(target)
     event.stopPropagation()
     return false
   }
@@ -576,6 +589,17 @@ export class ElementEditor extends HTMLElement {
   get previewWindow() {
     return document.getElementById("alchemy_preview_window")
   }
+
+  #onHeaderDblclick = () => {
+    this.toggle()
+  }
+
+  #onToggleClick = (evt) => {
+    const elementEditor = evt.target.closest("alchemy-element-editor")
+    if (elementEditor === this) {
+      this.toggle()
+    }
+  }
 }
 
 customElements.define("alchemy-element-editor", ElementEditor)

app/javascript/alchemy_admin/components/element_editor/delete_element_button.js

@@ -6,11 +6,14 @@ import { openConfirmDialog } from "alchemy_admin/confirm_dialog"
 import { dispatchPageDirtyEvent } from "alchemy_admin/components/element_editor"
 
 export class DeleteElementButton extends HTMLElement {
-  constructor() {
-    super()
+  connectedCallback() {
     this.button?.addEventListener("click", this)
   }
 
+  disconnectedCallback() {
+    this.button?.removeEventListener("click", this)
+  }
+
   async handleEvent() {
     const confirmed = await openConfirmDialog(this.message)
     if (confirmed) {

app/javascript/alchemy_admin/components/element_select.js

@@ -21,9 +21,7 @@ const formatItem = (icon, text, hint) => {
 }
 
 class ElementSelect extends HTMLElement {
-  constructor() {
-    super()
-  }
+  #select2 = null
 
   connectedCallback() {
     const results = this.options
@@ -48,7 +46,12 @@ class ElementSelect extends HTMLElement {
       formatSelection,
       placeholder: this.placeholder
     }
-    $(this.inputField).select2(options)
+    this.#select2 = $(this.inputField).select2(options)
+  }
+
+  disconnectedCallback() {
+    this.#select2?.select2("destroy")
+    this.#select2 = null
   }
 
   get options() {

app/javascript/alchemy_admin/components/elements_window.js

@@ -4,22 +4,51 @@ class ElementsWindow extends HTMLElement {
   #visible = true
   #turboFrame = null
 
-  constructor() {
-    super()
-    this.#attachEvents()
-  }
-
   connectedCallback() {
-    this.toggleButton?.addEventListener("click", (evt) => {
-      evt.preventDefault()
-      this.toggle()
-    })
+    this.toggleButton?.addEventListener("click", this.#onToggleClick)
+    this.collapseButton?.addEventListener("click", this.#onCollapseClick)
+    window.addEventListener("message", this.#onWindowMessage)
+    document.body.addEventListener("click", this.#onBodyClick)
     if (window.location.hash) {
       this.focusElementEditor(window.location.hash)
     }
     this.resize()
   }
 
+  disconnectedCallback() {
+    this.toggleButton?.removeEventListener("click", this.#onToggleClick)
+    this.collapseButton?.removeEventListener("click", this.#onCollapseClick)
+    window.removeEventListener("message", this.#onWindowMessage)
+    document.body.removeEventListener("click", this.#onBodyClick)
+  }
+
+  #onToggleClick = (evt) => {
+    evt.preventDefault()
+    this.toggle()
+  }
+
+  #onCollapseClick = () => {
+    this.collapseAllElements()
+  }
+
+  #onWindowMessage = (event) => {
+    const data = event.data
+    if (data?.message == "Alchemy.focusElementEditor") {
+      const element = document.getElementById(`element_${data.element_id}`)
+      this.show()
+      element?.focusElement()
+    }
+  }
+
+  #onBodyClick = (evt) => {
+    if (!evt.target.closest("alchemy-element-editor")) {
+      this.querySelectorAll("alchemy-element-editor").forEach((editor) => {
+        editor.classList.remove("selected")
+      })
+      this.previewWindow?.postMessage({ message: "Alchemy.blurElements" })
+    }
+  }
+
   collapseAllElements() {
     this.querySelectorAll(
       "alchemy-element-editor:not([compact]):not([fixed])"
@@ -101,28 +130,6 @@ class ElementsWindow extends HTMLElement {
     this.turboFrame.style.transitionProperty = dragged ? "none" : null
     this.turboFrame.style.pointerEvents = dragged ? "none" : null
   }
-
-  #attachEvents() {
-    this.collapseButton?.addEventListener("click", () => {
-      this.collapseAllElements()
-    })
-    window.addEventListener("message", (event) => {
-      const data = event.data
-      if (data?.message == "Alchemy.focusElementEditor") {
-        const element = document.getElementById(`element_${data.element_id}`)
-        this.show()
-        element?.focusElement()
-      }
-    })
-    document.body.addEventListener("click", (evt) => {
-      if (!evt.target.closest("alchemy-element-editor")) {
-        this.querySelectorAll("alchemy-element-editor").forEach((editor) => {
-          editor.classList.remove("selected")
-        })
-        this.previewWindow?.postMessage({ message: "Alchemy.blurElements" })
-      }
-    })
-  }
 }
 
 customElements.define("alchemy-elements-window", ElementsWindow)

app/javascript/alchemy_admin/components/elements_window_handle.js

@@ -3,14 +3,18 @@ class ElementsWindowHandle extends HTMLElement {
   #elementsWindow = null
   #previewWindow = null
 
-  constructor() {
-    super()
-
+  connectedCallback() {
     this.addEventListener("mousedown", this)
     window.addEventListener("mousemove", this)
     window.addEventListener("mouseup", this)
   }
 
+  disconnectedCallback() {
+    this.removeEventListener("mousedown", this)
+    window.removeEventListener("mousemove", this)
+    window.removeEventListener("mouseup", this)
+  }
+
   handleEvent(event) {
     switch (event.type) {
       case "mousedown":

app/javascript/alchemy_admin/components/file_editor.js

@@ -1,6 +1,5 @@
 class FileEditor extends HTMLElement {
-  constructor() {
-    super()
+  connectedCallback() {
     this.deleteLink = this.querySelector(".remove_file_link")
     this.fileIcon = this.querySelector(".file_icon")
     this.fileName = this.querySelector(".file_name")
@@ -9,6 +8,10 @@ class FileEditor extends HTMLElement {
     this.deleteLink?.addEventListener("click", this)
   }
 
+  disconnectedCallback() {
+    this.deleteLink?.removeEventListener("click", this)
+  }
+
   handleEvent(event) {
     if (event.type === "click") this.removeFile()
     event.stopPropagation()