From 7336a6263782cc28b1fa524cd88bec34133cd8b1 Mon Sep 17 00:00:00 2001
From: Paul Chavard <pro@paul.chavard.net>
Date: Thu, 20 Oct 2022 18:13:36 +0200
Subject: [PATCH] =?UTF-8?q?refactor(rails/ujs):=20don=E2=80=99t=20use=20@r?=
 =?UTF-8?q?ails/ujs=20in=20our=20own=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controllers/application_controller.ts     |  2 +-
 app/javascript/entrypoints/application.js     |  1 -
 app/javascript/shared/utils.ts                | 65 ++++++++++++-------
 package.json                                  |  2 +-
 yarn.lock                                     |  8 +--
 5 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/app/javascript/controllers/application_controller.ts b/app/javascript/controllers/application_controller.ts
index ed00950d5..ad6733c97 100644
--- a/app/javascript/controllers/application_controller.ts
+++ b/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>;
 
diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
index 404fba434..9f607df0f 100644
--- a/app/javascript/entrypoints/application.js
+++ b/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,
diff --git a/app/javascript/shared/utils.ts b/app/javascript/shared/utils.ts
index 9fdd9faca..94c511065 100644
--- a/app/javascript/shared/utils.ts
+++ b/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);
+}
diff --git a/package.json b/package.json
index 2e0e21451..1ce269c73 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index aa732adb9..f7fab3231 100644
--- a/yarn.lock
+++ b/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"