Remove Backbone (Skeletor) router

Use the builtin History API and event listeners.

package-lock.json

@@ -1837,14 +1837,9 @@
     },
     "node_modules/@converse/skeletor": {
       "version": "0.0.8",
-<<<<<<< HEAD
-      "resolved": "https://registry.npmjs.org/@converse/skeletor/-/skeletor-0.0.8.tgz",
-      "integrity": "sha512-8/wAenuk7QKOHaOsk89e5zFyQZz5HhsuqWBzrzDxmepiBVlRvnxjVdB6619IFyW0VWf0ezcm5Rl4JndUx2sbqg==",
-=======
       "resolved": "git+ssh://git@github.com/conversejs/skeletor.git#811e13b0a541e8511ba3978e49f45a1f83fd0239",
       "integrity": "sha512-geSpNFrBw5lB3P3AZsDVmrI4ShYWMzsAQgEmMTG7f41N0IrADP6FZIy896rrVZNddfc8xQwNAC/bMdrCcqKulQ==",
       "license": "MIT",
->>>>>>> a1da291f4 (Add an API for registering new types of chatboxes)
       "dependencies": {
         "@converse/localforage-getitems": "1.4.3",
         "lit-html": "^2.0.0-rc.2",

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/index.js';
 import _converse from './shared/_converse';
 _converse.api = api;
 
@@ -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;

src/headless/log.js

@@ -1,6 +1,6 @@
 import { isElement } from './utils/html.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 { string } 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)) {

src/headless/plugins/chat/index.js

@@ -13,7 +13,7 @@ import {
     enableCarbons,
     handleMessageStanza,
     onClearSession,
-    openChat,
+    routeToChat,
     registerMessageHandlers,
 } from './utils.js';
 
@@ -46,7 +46,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);

src/headless/plugins/chat/utils.js

@@ -9,7 +9,12 @@ import { shouldClearCache } from '../../utils/session.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`);
     }

src/headless/plugins/muc/index.js

@@ -176,7 +176,8 @@ converse.plugins.add('converse-muc', {
             },
         };
 
-        _converse.router.route('converse/room?jid=:jid', routeToRoom);
+        routeToRoom();
+        addEventListener('hashchange', routeToRoom);
 
         _converse.ChatRoom = MUC;
         _converse.ChatRoomMessage = MUCMessage;

src/headless/plugins/muc/utils.js

@@ -65,7 +65,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`);
     }

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 { getOpenPromise } from '@converse/openpromise';
 
 import {
@@ -79,15 +78,12 @@ const _converse = {
         INACTIVE: 90000
     },
 
-    router: new Router(),
-
-
     /**
      * Translate the given string based on the current locale.
      * @method __
      * @private
      * @memberOf _converse
-     * @param { String } str
+     * @param { ...String } args
      */
     '__': (...args) => i18n.__(...args),
 

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 from '../../utils/index.js';
+import u, { setLogLevelFromRoute } from '../../utils/index.js';
 import { ANONYMOUS, CHAT_STATES, KEYCODES, VERSION_NAME } from '../constants.js';
 import { setUnloadEvent, isTestEnv } from '../../utils/session.js';
 import { Collection } from "@converse/skeletor/src/collection";
@@ -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);

src/headless/utils/index.js

@@ -3,6 +3,7 @@
  * @license Mozilla Public License (MPLv2)
  * @description This is the core utilities module.
  */
+import log, { LEVELS } from '../log.js';
 import { Model } from '@converse/skeletor/src/model.js';
 import { toStanza } from 'strophe.js';
 import { getOpenPromise } from '@converse/openpromise';
@@ -54,6 +55,21 @@ import {
 const u = {};
 
 
+/**
+ * @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 isEmptyMessage (attrs) {
     if (attrs instanceof Model) {
         attrs = attrs.attributes;

src/headless/utils/init.js

@@ -238,7 +238,6 @@ function unregisterGlobalEventHandlers (_converse) {
 export async function cleanup (_converse) {
     const { api } = _converse;
     await api.trigger('cleanup', {'synchronous': true});
-    _converse.router.history.stop();
     unregisterGlobalEventHandlers(_converse);
     api.connection.get()?.reset();
     _converse.stopListening();

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);
     }
 }
 

src/plugins/controlbox/loginform.js

@@ -84,10 +84,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);
         }
         api.connection.get()?.reset();
         api.user.login(jid);

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;

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);
         }

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);
     }
 }
 

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);
     }
 });

src/plugins/register/panel.js

@@ -225,8 +225,8 @@ class RegisterPanel extends CustomElement {
             log.debug("Registered successfully.");
             api.connection.get().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');
 

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');
+    }
+}

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);
+            }
         }
     }
 }