Remove Backbone (Skeletor) router

Use the builtin History API and event listeners.
conversejs · Aug 7, 2023 · 45f36b8 · 45f36b8
1 parent 1cbb5cc
commit 45f36b8
Show file tree

Hide file tree

Showing 20 changed files with 77 additions and 46 deletions.
diff --git a/src/headless/index.js b/src/headless/index.js
@@ -1,6 +1,7 @@
 import './shared/constants.js';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import api from './shared/api/index.js';
+import u from './utils/core.js';
 import _converse from './shared/_converse';
 import dayjs from 'dayjs';
 import i18n from './shared/i18n';
@@ -35,6 +36,6 @@ import "./plugins/vcard/index.js";      // XEP-0054 VCard-temp
 
 import log from './log.js';
 
-export { api, converse, _converse, i18n, log };
+export { api, converse, _converse, i18n, log, u };
 
 export default converse;
diff --git a/src/headless/log.js b/src/headless/log.js
@@ -1,6 +1,6 @@
 import { isElement } from './utils/core.js';
 
-const LEVELS = {
+export const LEVELS = {
     'debug': 0,
     'info': 1,
     'warn': 2,
@@ -27,7 +27,7 @@ export default {
     /**
      * The the log-level, which determines how verbose the logging is.
      * @method log#setLogLevel
-     * @param { number } level - The loglevel which allows for filtering of log messages
+     * @param {keyof LEVELS} level - The loglevel which allows for filtering of log messages
      */
     setLogLevel (level) {
         if (!['debug', 'info', 'warn', 'error', 'fatal'].includes(level)) {

diff --git a/src/headless/plugins/chat/index.js b/src/headless/plugins/chat/index.js
@@ -6,13 +6,13 @@ import ChatBox from './model.js';
 import Message from './message.js';
 import Messages from './messages.js';
 import chat_api from './api.js';
-import { _converse, api, converse } from '../../index.js';
+import { _converse, api, converse, u } from '../../index.js';
 import {
     autoJoinChats,
     enableCarbons,
     handleMessageStanza,
     onClearSession,
-    openChat,
+    routeToChat,
     registerMessageHandlers,
 } from './utils.js';
 
@@ -45,7 +45,8 @@ converse.plugins.add('converse-chat', {
             ChatBox
         );
 
-        _converse.router.route('converse/chat?jid=:jid', openChat);
+        routeToChat();
+        addEventListener('hashchange', routeToChat);
 
         api.listen.on('chatBoxesFetched', autoJoinChats);
         api.listen.on('presencesInitialized', registerMessageHandlers);

diff --git a/src/headless/plugins/chat/utils.js b/src/headless/plugins/chat/utils.js
@@ -5,7 +5,12 @@ import { shouldClearCache } from '@converse/headless/utils/core.js';
 
 const { Strophe, u } = converse.env;
 
-export function openChat (jid) {
+export function routeToChat (event) {
+    if (!location.hash.startsWith('#converse/chat?jid=')) {
+        return;
+    }
+    event?.preventDefault();
+    const jid = location.hash.split('=').pop();
     if (!u.isValidJID(jid)) {
         return log.warn(`Invalid JID "${jid}" provided in URL fragment`);
     }

diff --git a/src/headless/plugins/muc/index.js b/src/headless/plugins/muc/index.js
@@ -13,7 +13,7 @@ import ChatRoomOccupant from './occupant.js';
 import ChatRoomOccupants from './occupants.js';
 import affiliations_api from './affiliations/api.js';
 import muc_api from './api.js';
-import { _converse, api, converse } from '../../index.js';
+import { _converse, api, converse, u } from '../../index.js';
 import {
     autoJoinRooms,
     disconnectChatRooms,
@@ -178,7 +178,8 @@ converse.plugins.add('converse-muc', {
             },
         };
 
-        _converse.router.route('converse/room?jid=:jid', routeToRoom);
+        routeToRoom();
+        addEventListener('hashchange', routeToRoom);
 
         _converse.ChatRoom = MUC;
         _converse.ChatRoomMessage = MUCMessage;

diff --git a/src/headless/plugins/muc/utils.js b/src/headless/plugins/muc/utils.js
@@ -54,7 +54,15 @@ export async function onWindowStateChanged (data) {
     }
 }
 
-export async function routeToRoom (jid) {
+/**
+ * @param {Event} [event]
+ */
+export async function routeToRoom (event) {
+    if (!location.hash.startsWith('#converse/room?jid=')) {
+        return;
+    }
+    event?.preventDefault();
+    const jid = location.hash.split('=').pop();
     if (!u.isValidMUCJID(jid)) {
         return log.warn(`invalid jid "${jid}" provided in url fragment`);
     }

diff --git a/src/headless/shared/_converse.js b/src/headless/shared/_converse.js
@@ -2,7 +2,6 @@ import i18n from './i18n.js';
 import log from '../log.js';
 import pluggable from 'pluggable.js/src/pluggable.js';
 import { Events } from '@converse/skeletor/src/events.js';
-import { Router } from '@converse/skeletor/src/router.js';
 import { createStore, getDefaultStore } from '../utils/storage.js';
 import { getInitSettings } from './settings/utils.js';
 import { getOpenPromise } from '@converse/openpromise';
@@ -84,7 +83,6 @@ const _converse = {
     },
 
     default_connection_options: {'explicitResourceBinding': true},
-    router: new Router(),
 
     isTestEnv: () => {
         return getInitSettings()['bosh_service_url'] === 'montague.lit/http-bind';

diff --git a/src/headless/shared/api/public.js b/src/headless/shared/api/public.js
@@ -5,7 +5,7 @@ import dayjs from 'dayjs';
 import i18n from '../i18n';
 import log from '../../log.js';
 import sizzle from 'sizzle';
-import u, { setUnloadEvent } from '../../utils/core.js';
+import u, { setUnloadEvent, setLogLevelFromRoute } from '../../utils/core.js';
 import { ANONYMOUS, CHAT_STATES, KEYCODES, VERSION_NAME } from '../constants.js';
 import { Collection } from "@converse/skeletor/src/collection";
 import { Model } from '@converse/skeletor/src/model.js';
@@ -50,7 +50,7 @@ export const converse = Object.assign(window.converse || {}, {
      * @async
      * @memberOf converse
      * @method initialize
-     * @param { object } config A map of [configuration-settings](https://conversejs.org/docs/html/configuration.html#configuration-settings).
+     * @param { object } settings A map of [configuration-settings](https://conversejs.org/docs/html/configuration.html#configuration-settings).
      * @example
      * converse.initialize({
      *     auto_list_rooms: false,
@@ -80,10 +80,10 @@ export const converse = Object.assign(window.converse || {}, {
                       "authentication with auto_login.");
             }
         }
-        _converse.router.route(
-            /^converse\?loglevel=(debug|info|warn|error|fatal)$/, 'loglevel',
-            l => log.setLogLevel(l)
-        );
+
+        setLogLevelFromRoute();
+        addEventListener('hashchange', setLogLevelFromRoute);
+
         _converse.connfeedback = new ConnectionFeedback();
 
         /* When reloading the page:
@@ -107,12 +107,6 @@ export const converse = Object.assign(window.converse || {}, {
 
         registerGlobalEventHandlers(_converse);
 
-        try {
-            !History.started && _converse.router.history.start();
-        } catch (e) {
-            log.error(e);
-        }
-
         const plugins = _converse.pluggable.plugins
         if (api.settings.get("auto_login") || api.settings.get("keepalive") && plugins['converse-bosh']?.enabled()) {
             await api.user.login(null, null, true);

diff --git a/src/headless/utils/core.js b/src/headless/utils/core.js
@@ -5,7 +5,7 @@
  */
 import DOMPurify from 'dompurify';
 import _converse from '@converse/headless/shared/_converse.js';
-import log from '../log.js';
+import log, { LEVELS } from '../log.js';
 import sizzle from "sizzle";
 import { Model } from '@converse/skeletor/src/model.js';
 import { Strophe } from 'strophe.js';
@@ -55,6 +55,22 @@ const u = {
     webForm2xForm,
 };
 
+
+/**
+ * @param {Event} [event]
+ */
+export function setLogLevelFromRoute (event) {
+    if (location.hash.startsWith('#converse?loglevel=')) {
+        event?.preventDefault();
+        const level = location.hash.split('=').pop();
+        if (Object.keys(LEVELS).includes(level)) {
+            log.setLogLevel(/** @type {keyof LEVELS} */(level));
+        } else {
+            log.error(`Could not set loglevel of ${level}`);
+        }
+    }
+}
+
 export function isElement (el) {
     return el instanceof Element || el instanceof HTMLDocument;
 }

diff --git a/src/headless/utils/init.js b/src/headless/utils/init.js
@@ -292,7 +292,6 @@ function unregisterGlobalEventHandlers (_converse) {
 export async function cleanup (_converse) {
     const { api } = _converse;
     await api.trigger('cleanup', {'synchronous': true});
-    _converse.router.history.stop();
     unregisterGlobalEventHandlers(_converse);
     _converse.connection?.reset();
     _converse.stopListening();

diff --git a/src/plugins/adhoc-views/tests/adhoc.js b/src/plugins/adhoc-views/tests/adhoc.js
@@ -226,7 +226,6 @@ describe("Ad-hoc commands consisting of multiple steps", function () {
         `));
 
         let button = await u.waitUntil(() => modal.querySelector('input[data-action="next"]'));
-        debugger;
         button.click();
 
         sel = `iq[to="${entity_jid}"] command[sessionid="${sessionid}"]`;

diff --git a/src/plugins/chatview/utils.js b/src/plugins/chatview/utils.js
@@ -2,8 +2,8 @@ import { __ } from 'i18n';
 import { _converse, api } from '@converse/headless';
 
 export function clearHistory (jid) {
-    if (_converse.router.history.getFragment() === `converse/chat?jid=${jid}`) {
-        _converse.router.navigate('');
+    if (location.hash === `converse/chat?jid=${jid}`) {
+        history.pushState(null, '', window.location.pathname);
     }
 }
 

diff --git a/src/plugins/controlbox/loginform.js b/src/plugins/controlbox/loginform.js
@@ -85,10 +85,9 @@ class LoginForm extends CustomElement {
         });
     }
 
-    // eslint-disable-next-line class-methods-use-this
     connect (jid) {
-        if (['converse/login', 'converse/register'].includes(_converse.router.history.getFragment())) {
-            _converse.router.navigate('', { 'replace': true });
+        if (['converse/login', 'converse/register'].includes(location.hash)) {
+            history.pushState(null, '', window.location.pathname);
         }
         _converse.connection?.reset();
         api.user.login(jid);

diff --git a/src/plugins/headlines-view/view.js b/src/plugins/headlines-view/view.js
@@ -34,8 +34,8 @@ class HeadlinesFeedView extends BaseChatView {
 
     async close (ev) {
         ev?.preventDefault?.();
-        if (_converse.router.history.getFragment() === 'converse/chat?jid=' + this.model.get('jid')) {
-            _converse.router.navigate('');
+        if (location.hash === 'converse/chat?jid=' + this.model.get('jid')) {
+            history.pushState(null, '', window.location.pathname);
         }
         await this.model.close(ev);
         return this;

diff --git a/src/plugins/mam-views/utils.js b/src/plugins/mam-views/utils.js
@@ -35,7 +35,7 @@ export async function fetchMessagesOnScrollUp (view) {
                 return;
             }
             if (api.settings.get('allow_url_history_change')) {
-                _converse.router.history.navigate(`#${oldest_message.get('msgid')}`);
+                history.pushState(null, '', `#${oldest_message.get('msgid')}`)
             }
             setTimeout(() => view.model.ui.set('chat-content-spinner-top', false), 250);
         }

diff --git a/src/plugins/muc-views/utils.js b/src/plugins/muc-views/utils.js
@@ -44,8 +44,8 @@ export function confirmDirectMUCInvitation ({ contact, jid, reason }) {
 }
 
 export function clearHistory (jid) {
-    if (_converse.router.history.getFragment() === `converse/room?jid=${jid}`) {
-        _converse.router.navigate('');
+    if (location.hash === `converse/room?jid=${jid}`) {
+        history.pushState(null, '', window.location.pathname);
     }
 }
 

diff --git a/src/plugins/register/index.js b/src/plugins/register/index.js
@@ -8,8 +8,8 @@
  */
 import './panel.js';
 import { __ } from 'i18n';
-import { _converse, api, converse } from '@converse/headless';
-import { setActiveForm } from './utils.js';
+import { api, converse } from '@converse/headless';
+import { routeToForm } from './utils.js';
 import { CONNECTION_STATUS } from '@converse/headless/shared/constants';
 
 // Strophe methods for building stanzas
@@ -34,8 +34,6 @@ converse.plugins.add('converse-register', {
     },
 
     initialize () {
-        const { router } = _converse;
-
         CONNECTION_STATUS[Strophe.Status.REGIFAIL] = 'REGIFAIL';
         CONNECTION_STATUS[Strophe.Status.REGISTERED] = 'REGISTERED';
         CONNECTION_STATUS[Strophe.Status.CONFLICT] = 'CONFLICT';
@@ -48,7 +46,7 @@ converse.plugins.add('converse-register', {
             'registration_domain': ''
         });
 
-        router.route('converse/login', () => setActiveForm('login'));
-        router.route('converse/register', () => setActiveForm('register'));
+        routeToForm();
+        addEventListener('hashchange', routeToForm);
     }
 });
diff --git a/src/plugins/register/panel.js b/src/plugins/register/panel.js
@@ -226,8 +226,8 @@ class RegisterPanel extends CustomElement {
             log.debug("Registered successfully.");
             _converse.connection.reset();
 
-            if (["converse/login", "converse/register"].includes(_converse.router.history.getFragment())) {
-                _converse.router.navigate('', {'replace': true});
+            if (["converse/login", "converse/register"].includes(window.location.hash)) {
+                history.pushState(null, '', window.location.pathname);
             }
             setActiveForm('login');
 

diff --git a/src/plugins/register/utils.js b/src/plugins/register/utils.js
@@ -5,3 +5,13 @@ export async function setActiveForm (value) {
     const controlbox = _converse.chatboxes.get('controlbox');
     controlbox.set({ 'active-form': value });
 }
+
+export function routeToForm (event) {
+    if (location.hash === '#converse/login') {
+        event?.preventDefault();
+        setActiveForm('login');
+    } else if (location.hash === '#converse/register') {
+        event?.preventDefault();
+        setActiveForm('register');
+    }
+}
diff --git a/src/shared/chat/utils.js b/src/shared/chat/utils.js
@@ -69,7 +69,9 @@ export function onScrolledDown (model) {
         if (api.settings.get('allow_url_history_change')) {
             // Clear location hash if set to one of the messages in our history
             const hash = window.location.hash;
-            hash && model.messages.get(hash.slice(1)) && _converse.router.history.navigate();
+            if (hash && model.messages.get(hash.slice(1))) {
+               history.pushState(null, '', window.location.pathname);
+            }
         }
     }
 }