connect mercure endpoint url to noti controller directly

assets/controllers/notifications_controller.js

@@ -1,37 +1,37 @@
-import {Controller} from '@hotwired/stimulus';
+import { Controller } from '@hotwired/stimulus';
 import Subscribe from '../utils/event-source';
 
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
     static values = {
+        endpoint: String,
         user: String,
         magazine: String,
         entryId: String,
         postId: String,
     };
 
     connect() {
-        this.es(this.getTopics());
+        if (this.endpointValue) {
+            this.connectEs(this.endpointValue, this.getTopics());
 
-        window.onbeforeunload = function (event) {
-            if (window.es !== undefined) {
-                window.es.close();
-            }
-        };
+            window.addEventListener('pagehide', this.closeEs);
+        }
     }
 
-    es(topics) {
-        if (window.es !== undefined) {
-            window.es.close();
-        }
+    disconnect() {
+        this.closeEs();
+    }
+
+    connectEs(endpoint, topics) {
+        this.closeEs();
 
-        let self = this;
-        let cb = function (e) {
-            let data = JSON.parse(e.data);
+        const cb = (e) => {
+            const data = JSON.parse(e.data);
 
-            self.dispatch(data.op, {detail: data});
+            this.dispatch(data.op, { detail: data });
 
-            self.dispatch('Notification', {detail: data});
+            this.dispatch('Notification', { detail: data });
 
             // if (data.op.includes('Create')) {
             //     self.dispatch('CreatedNotification', {detail: data});
@@ -41,17 +41,17 @@ export default class extends Controller {
             //     self.dispatch('MainSubjectCreatedNotification', {detail: data});
             // }
             //
-        }
+        };
 
-        const eventSource = Subscribe(topics, cb);
+        const eventSource = Subscribe(endpoint, topics, cb);
         if (eventSource) {
             window.es = eventSource;
             // firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1803431
-            if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
-                let resubscribe = (e) => {
+            if (navigator.userAgent.toLowerCase().includes('firefox')) {
+                const resubscribe = () => {
                     window.es.close();
                     setTimeout(() => {
-                        const eventSource = Subscribe(topics, cb);
+                        const eventSource = Subscribe(endpoint, topics, cb);
                         if (eventSource) {
                             window.es = eventSource;
                             window.es.onerror = resubscribe;
@@ -63,11 +63,17 @@ export default class extends Controller {
         }
     }
 
+    closeEs() {
+        if (window.es instanceof EventSource) {
+            window.es.close();
+        }
+    }
+
     getTopics() {
         let pub = true;
         const topics = [
-            'count'
-        ]
+            'count',
+        ];
 
         if (this.userValue) {
             topics.push(`/api/users/${this.userValue}`);

assets/utils/event-source.js

@@ -1,17 +1,16 @@
-export default function
-    subscribe(topics, cb) {
-    const mercureElem = document.getElementById("mercure-url");
-    if (mercureElem) {
-        const url = new URL(mercureElem.textContent.trim());
+export default function subscribe(endpoint, topics, cb) {
+    if (!endpoint) {
+        return null;
+    }
 
-        topics.forEach(topic => {
-            url.searchParams.append('topic', topic);
-        })
+    const url = new URL(endpoint);
 
-        const eventSource = new EventSource(url);
-        eventSource.onmessage = e => cb(e);
+    topics.forEach((topic) => {
+        url.searchParams.append('topic', topic);
+    });
 
-        return eventSource;
-    }
-    return null;
+    const eventSource = new EventSource(url);
+    eventSource.onmessage = (e) => cb(e);
+
+    return eventSource;
 }

templates/base.html.twig

@@ -51,10 +51,6 @@
 
     {% block javascripts %}
         {{ encore_entry_script_tags('app') }}
-        {% if kbin_mercure_enabled() %}
-        {#        <script type="application/json" id="mercure-url">{{ mercure()|raw }}</script> #}
-        <script type="application/json" id="mercure-url">{{- 'https://' ~ kbin_domain() ~ '/.well-known/mercure' }}</script>
-        {% endif %}
     {% endblock %}
 </head>
 <body class="{{ html_classes('theme--'~THEME, {
@@ -66,6 +62,7 @@
         'sidebars-same-side': app.user is defined and app.user is not same as null and SUBSCRIPTIONS_SEPARATE is same as V_TRUE and SUBSCRIPTIONS_SAME_SIDE is same as V_TRUE,
     }) }}"
         data-controller="kbin notifications"
+        data-notifications-endpoint-value="{{ kbin_mercure_enabled() ? 'https://'~kbin_domain()~'/.well-known/mercure' : null }}"
         data-notifications-user-value="{{ app.user ? app.user.id : null }}"
         data-notifications-magazine-value="{{ magazine is defined and magazine ? magazine.id : null }}"
         data-notifications-entry-id-value="{{ entry is defined and entry ? entry.id : null }}"