refactor(rails/ujs): don’t use @rails/ujs in our own code

app/javascript/controllers/application_controller.ts

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
-import { debounce } from '@utils';
+import debounce from 'debounce';
 
 export type Detail = Record<string, unknown>;
 

app/javascript/entrypoints/application.js

@@ -36,7 +36,6 @@ registerControllers(application);
 
 // This is the global application namespace where we expose helpers used from rails views
 const DS = {
-  fire: (eventName, data) => Rails.fire(document, eventName, data),
   toggleCondidentielExplanation,
   showMotivation,
   motivationCancel,

app/javascript/shared/utils.ts

@@ -1,11 +1,6 @@
-import Rails from '@rails/ujs';
-import debounce from 'debounce';
 import { session } from '@hotwired/turbo';
 import { z } from 'zod';
 
-export { debounce };
-export const { fire, csrfToken, cspNonce } = Rails;
-
 const Gon = z
   .object({
     autosave: z
@@ -116,17 +111,18 @@ export function delegate<E extends Event = Event>(
   eventNames: string,
   selector: string,
   callback: (event: E) => void
-) {
-  eventNames
+): () => void {
+  const subscriptions = eventNames
     .split(' ')
-    .forEach((eventName) =>
-      Rails.delegate(
+    .map((eventName) =>
+      delegateEvent(
         document,
         selector,
         eventName,
         callback as (event: Event) => void
       )
     );
+  return () => subscriptions.forEach((unsubscribe) => unsubscribe());
 }
 
 export class ResponseError extends Error {
@@ -246,19 +242,6 @@ export function httpRequest(
         const stream = await response.text();
         session.renderStreamMessage(stream);
       }
-    },
-    async js(): Promise<void> {
-      const response = await request(init, 'text/javascript');
-      if (response.status != 204) {
-        const script = document.createElement('script');
-        const nonce = cspNonce();
-        if (nonce) {
-          script.setAttribute('nonce', nonce);
-        }
-        script.text = await response.text();
-        document.head.appendChild(script);
-        document.head.removeChild(script);
-      }
     }
   };
 }
@@ -311,3 +294,41 @@ export function isTextInputElement(
     !['checkbox', 'radio', 'file'].includes(element.type)
   );
 }
+
+export function fire<T>(obj: EventTarget, name: string, data?: T) {
+  const event = new CustomEvent(name, {
+    bubbles: true,
+    cancelable: true,
+    detail: data
+  });
+  obj.dispatchEvent(event);
+  return !event.defaultPrevented;
+}
+
+function csrfToken() {
+  const meta = document.querySelector<HTMLMetaElement>('meta[name=csrf-token]');
+  return meta?.content;
+}
+
+function delegateEvent<E extends Event = Event>(
+  element: EventTarget,
+  selector: string,
+  eventType: string,
+  handler: (event: E) => void | boolean
+): () => void {
+  const listener = function (event: Event) {
+    let { target } = event;
+    while (!!(target instanceof Element) && !target.matches(selector)) {
+      target = target.parentNode;
+    }
+    if (
+      target instanceof Element &&
+      handler.call(target, event as E) === false
+    ) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  element.addEventListener(eventType, listener);
+  return () => element.removeEventListener(eventType, listener);
+}

package.json

@@ -9,7 +9,7 @@
     "@popperjs/core": "^2.11.6",
     "@rails/actiontext": "^6.0.5",
     "@rails/activestorage": "^6.0.5",
-    "@rails/ujs": "^6.0.5",
+    "@rails/ujs": "^7.0.4",
     "@reach/combobox": "^0.17.0",
     "@reach/slider": "^0.17.0",
     "@sentry/browser": "7.8.1",

yarn.lock

@@ -563,10 +563,10 @@
   dependencies:
     spark-md5 "^3.0.0"
 
-"@rails/ujs@^6.0.5":
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/@rails/ujs/-/ujs-6.0.5.tgz#53e63a02271a7494a7925a30ed0a3672ec177337"
-  integrity sha512-6nEyc+7jhVQGx84sO7yalQq1G+ZgJa72/5q9Avsm4yIZqVymvLEftK90+B0XZhvJzbiNnbDIFC4Wx5mgHo7lTw==
+"@rails/ujs@^7.0.4":
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/@rails/ujs/-/ujs-7.0.4.tgz#7fe5387d2d82b0547fdfc6667b424ec119c86b1e"
+  integrity sha512-UY9yQxBvtqXzXScslgPwZoQd16T0+z3P6BQS4lZDJFg5xVuMIgHkHQI6dhyWEt5l/qwbGaYX+YiZu6J+oxWPOw==
 
 "@reach/auto-id@0.17.0":
   version "0.17.0"