Re-initialize JavaScript elements on failed form submission

When the form is submitted but no redirect occurs (e.g., after a validation error), the page content is simply replaced. However, for this occasion Turbo misses to emit a new `turbo:load` event, which makes it more difficult to use custom JavaScript waiting on page initializations. Potentially, we could use `turbo:render` here to fix these occasions.

Author: MrSerth

app/javascript/turbo-migration.js

@@ -11,6 +11,7 @@
 
 let sprocketsLoaded = false;
 const sprocketsLoadQueue = [];
+const turboRenderQueue = [];
 
 document.addEventListener('turbo:load', (event) => {
   sprocketsLoaded ? forwardTurboLoad(event) : sprocketsLoadQueue.push(event);
@@ -22,6 +23,25 @@ document.addEventListener('sprockets:load', () => {
   flushQueue(sprocketsLoadQueue);
 });
 
+// Handle failed form submissions by waiting for `turbo:render` events
+document.addEventListener('turbo:submit-end', (event) => {
+  if (!event.detail.success) {
+    // If the form submission was _not_ successful, we need to re-initialize JavaScript elements.
+    // This is necessary since Turbo does not dispatch a `turbo:load` event in this case.
+    turboRenderQueue.push(event);
+  }
+});
+
+document.addEventListener('turbo:render', () => {
+  if (sprocketsLoaded) {
+    flushQueue(turboRenderQueue);
+  } else {
+    // In the unlikely case that Sprockets isn't ready yet, we queue the events.
+    sprocketsLoadQueue.push(...turboRenderQueue);
+    turboRenderQueue.length = 0;
+  }
+});
+
 function forwardTurboLoad(event) {
   requestAnimationFrame(() => {
     const delayedEvent = new CustomEvent('turbo-migration:load', { detail: { ...event.detail } });