plutonium 0.26.3 → 0.26.4

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.26.3"
+  VERSION = "0.26.4"
   NEXT_MAJOR_VERSION = VERSION.split(".").tap { |v|
     v[1] = v[1].to_i + 1
     v[2] = 0

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "Core assets for the Plutonium gem",
   "type": "module",
   "main": "src/js/core.js",

data/src/js/controllers/attachment_input_controller.js

@@ -26,6 +26,8 @@ export default class extends Controller {
   //======= Lifecycle
 
   connect() {
+    if (this.uppy) return;
+
     // initialize
     this.uploadedFiles = []
 
@@ -38,10 +40,48 @@ export default class extends Controller {
     this.#buildTriggers()
     // init state
     this.#onAttachmentsChanged()
+
+    // Just recreate Uppy after morphing - preserve existing attachments
+    this.element.addEventListener("turbo:morph-element", (event) => {
+      if (event.target === this.element && !this.morphing) {
+        this.morphing = true;
+        requestAnimationFrame(() => {
+          this.#handleMorph();
+          this.morphing = false;
+        });
+      }
+    });
   }
 
   disconnect() {
-    this.uppy = null
+    this.#cleanupUppy();
+  }
+
+  #handleMorph() {
+    if (!this.element.isConnected) return;
+
+    // Clean up the old instance
+    this.#cleanupUppy();
+
+    // Recreate everything - Uppy, triggers, etc.
+    this.uploadedFiles = []
+    this.element.style["display"] = "none"
+    this.configureUppy()
+    this.#buildTriggers()
+    this.#onAttachmentsChanged()
+  }
+
+  #cleanupUppy() {
+    if (this.uppy) {
+      this.uppy.destroy();
+      this.uppy = null;
+    }
+    
+    // Clean up triggers
+    if (this.triggerContainer && this.triggerContainer.parentNode) {
+      this.triggerContainer.parentNode.removeChild(this.triggerContainer);
+      this.triggerContainer = null;
+    }
   }
 
   attachmentPreviewOutletConnected(outlet, element) {

data/src/js/controllers/easymde_controller.js

@@ -4,21 +4,60 @@ import { marked } from 'marked';
 
 // Connects to data-controller="easymde"
 export default class extends Controller {
+  static targets = ["textarea"]
+  
   connect() {
+    if (this.easyMDE) return
+    
+    this.originalValue = this.element.value
     this.easyMDE = new EasyMDE(this.#buildOptions())
-    this.element.setAttribute("data-action", "turbo:morph-element->easymde#reconnect")
+    
+    // Store the editor content before morphing
+    this.element.addEventListener("turbo:before-morph-element", (event) => {
+      if (event.target === this.element && this.easyMDE) {
+        this.storedValue = this.easyMDE.value()
+      }
+    })
+    
+    // Restore after morphing
+    this.element.addEventListener("turbo:morph-element", (event) => {
+      if (event.target === this.element) {
+        requestAnimationFrame(() => this.#handleMorph())
+      }
+    })
   }
 
   disconnect() {
     if (this.easyMDE) {
-      this.easyMDE.toTextArea()
+      try {
+        // Only call toTextArea if the element is still in the DOM
+        if (this.element.isConnected && this.element.parentNode) {
+          this.easyMDE.toTextArea()
+        }
+      } catch (error) {
+        console.warn('EasyMDE cleanup error:', error)
+      }
       this.easyMDE = null
     }
   }
-
-  reconnect() {
-    this.disconnect()
-    this.connect()
+  
+  #handleMorph() {
+    if (!this.element.isConnected) return
+    
+    // Don't call toTextArea during morph - just clean up references
+    if (this.easyMDE) {
+      // Skip toTextArea cleanup - it causes DOM errors during morphing
+      this.easyMDE = null
+    }
+    
+    // Recreate the editor
+    this.easyMDE = new EasyMDE(this.#buildOptions())
+    
+    // Restore the stored value if we have it
+    if (this.storedValue !== undefined) {
+      this.easyMDE.value(this.storedValue)
+      this.storedValue = undefined
+    }
   }
 
   #buildOptions() {

data/src/js/controllers/flatpickr_controller.js

@@ -3,14 +3,21 @@ import { Controller } from "@hotwired/stimulus";
 // Connects to data-controller="flatpickr"
 export default class extends Controller {
   connect() {
-    this.modal = document.querySelector("[data-controller=remote-modal]");
+    if (this.picker) return;
 
+    this.modal = document.querySelector("[data-controller=remote-modal]");
     this.picker = new flatpickr(this.element, this.#buildOptions());
 
-    this.element.setAttribute(
-      "data-action",
-      "turbo:morph-element->flatpickr#reconnect"
-    );
+    // Just recreate Flatpickr after morphing - the DOM will have correct value
+    this.element.addEventListener("turbo:morph-element", (event) => {
+      if (event.target === this.element && !this.morphing) {
+        this.morphing = true;
+        requestAnimationFrame(() => {
+          this.#handleMorph();
+          this.morphing = false;
+        });
+      }
+    });
   }
 
   disconnect() {
@@ -20,9 +27,18 @@ export default class extends Controller {
     }
   }
 
-  reconnect() {
-    this.disconnect();
-    this.connect();
+  #handleMorph() {
+    if (!this.element.isConnected) return;
+
+    // Clean up the old instance
+    if (this.picker) {
+      this.picker.destroy();
+      this.picker = null;
+    }
+
+    // Recreate the picker - it will pick up the current DOM value
+    this.modal = document.querySelector("[data-controller=remote-modal]");
+    this.picker = new flatpickr(this.element, this.#buildOptions());
   }
 
   #buildOptions() {

data/src/js/controllers/intl_tel_input_controller.js

@@ -12,10 +12,20 @@ export default class extends Controller {
   }
 
   inputTargetConnected() {
-    if (!this.hasInputTarget) return;
+    if (!this.hasInputTarget || this.iti) return;
 
     this.iti = window.intlTelInput(this.inputTarget, this.#buildOptions())
-    this.inputTarget.setAttribute("data-action", "turbo:morph-element->intl-tel-input#reconnect")
+
+    // Just recreate IntlTelInput after morphing - the DOM will have correct value
+    this.element.addEventListener("turbo:morph-element", (event) => {
+      if (event.target === this.element && !this.morphing) {
+        this.morphing = true;
+        requestAnimationFrame(() => {
+          this.#handleMorph();
+          this.morphing = false;
+        });
+      }
+    });
   }
 
   inputTargetDisconnected() {
@@ -25,9 +35,17 @@ export default class extends Controller {
     }
   }
 
-  reconnect() {
-    this.inputTargetDisconnected()
-    this.inputTargetConnected()
+  #handleMorph() {
+    if (!this.inputTarget || !this.inputTarget.isConnected) return;
+
+    // Clean up the old instance
+    if (this.iti) {
+      this.iti.destroy();
+      this.iti = null;
+    }
+
+    // Recreate the intl tel input - it will pick up the current DOM value
+    this.iti = window.intlTelInput(this.inputTarget, this.#buildOptions());
   }
 
   #buildOptions() {

data/src/js/controllers/slim_select_controller.js

@@ -3,6 +3,19 @@ import { Controller } from "@hotwired/stimulus";
 // Connects to data-controller="slim-select"
 export default class extends Controller {
   connect() {
+    if (this.slimSelect) return;
+
+    this.#setupSlimSelect();
+
+    // Just recreate SlimSelect after morphing - the DOM will have correct selections
+    this.element.addEventListener("turbo:morph-element", (event) => {
+      if (event.target === this.element) {
+        requestAnimationFrame(() => this.#handleMorph());
+      }
+    });
+  }
+
+  #setupSlimSelect() {
     const settings = {};
     const modal = document.querySelector('[data-controller="remote-modal"]');
 
@@ -48,11 +61,6 @@ export default class extends Controller {
 
     // Add mutation observer to track aria-expanded attribute
     this.setupAriaObserver();
-
-    this.element.setAttribute(
-      "data-action",
-      "turbo:morph-element->slim-select#reconnect"
-    );
   }
 
   handleDropdownPosition() {
@@ -162,6 +170,20 @@ export default class extends Controller {
   }
 
   disconnect() {
+    this.#cleanupSlimSelect();
+  }
+
+  #handleMorph() {
+    if (!this.element.isConnected) return;
+
+    // Clean up the old instance without DOM manipulation
+    this.#cleanupSlimSelect();
+
+    // Recreate the select - it will automatically pick up the current DOM selections
+    this.#setupSlimSelect();
+  }
+
+  #cleanupSlimSelect() {
     // Clean up event listeners
     if (this.element) {
       if (this.boundHandleDropdownOpen) {
@@ -208,11 +230,4 @@ export default class extends Controller {
       this.modifiedSelectWrapper = null;
     }
   }
-
-  reconnect() {
-    this.disconnect();
-    // dispatch this on the next frame.
-    // there's some funny issue where my elements get removed from the DOM
-    setTimeout(() => this.connect(), 10);
-  }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.26.3
+  version: 0.26.4
 platform: ruby
 authors:
 - Stefan Froelich
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-07-26 00:00:00.000000000 Z
+date: 2025-07-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk