Merge pull request #3841 from AlchemyCMS/fix-custom-elements-cloneable

Fix custom elements setup and teardown

Author: tvdeyen

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/assets/builds/alchemy/alchemy_admin.min.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/assets/builds/alchemy/alchemy_admin.min.js.map

@@ -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/auto_submit.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/clipboard_button.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/color_select.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/dialog_link.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_editor.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() {