Experimenting with avoiding importing the `converse` global

src/headless/log.js

@@ -22,7 +22,7 @@ const logger = Object.assign({
  * The log namespace
  * @namespace log
  */
-const log = {
+export default {
 
     /**
      * The the log-level, which determines how verbose the logging is.
@@ -95,5 +95,3 @@ const log = {
         this.log(message, 'fatal', style);
     }
 }
-
-export default log;

src/headless/shared/api/public.js

@@ -13,6 +13,7 @@ import { Strophe, $build, $iq, $msg, $pres } from 'strophe.js/src/strophe';
 import { html } from 'lit';
 import { initAppSettings } from '../settings/utils.js';
 import { sprintf } from 'sprintf-js';
+import { stx } from '../../utils/stanza.js';
 
 import {
     cleanup,
@@ -199,7 +200,7 @@ export const converse = Object.assign(window.converse || {}, {
         log,
         sizzle,
         sprintf,
-        stx: u.stx,
+        stx,
         u,
     }
 });

src/headless/utils/core.js

@@ -8,14 +8,20 @@ import _converse from '@converse/headless/shared/_converse.js';
 import compact from "lodash-es/compact";
 import isObject from "lodash-es/isObject";
 import last from "lodash-es/last";
-import log from '@converse/headless/log.js';
+import log from '../log.js';
 import sizzle from "sizzle";
 import { Model } from '@converse/skeletor/src/model.js';
 import { Strophe } from 'strophe.js/src/strophe.js';
 import { getOpenPromise } from '@converse/openpromise';
-import { settings_api } from '@converse/headless/shared/settings/api.js';
+import { settings_api } from '../shared/settings/api.js';
 import { stx , toStanza } from './stanza.js';
 
+/**
+ * The utils object
+ * @namespace u
+ */
+const u = {};
+
 export function isElement (el) {
     return el instanceof Element || el instanceof HTMLDocument;
 }
@@ -57,14 +63,15 @@ export function shouldClearCache () {
 
 
 export async function tearDown () {
-    await _converse.api.trigger('beforeTearDown', {'synchronous': true});
+    const { api } = _converse;
+    await api.trigger('beforeTearDown', {'synchronous': true});
     window.removeEventListener('click', _converse.onUserActivity);
     window.removeEventListener('focus', _converse.onUserActivity);
     window.removeEventListener('keypress', _converse.onUserActivity);
     window.removeEventListener('mousemove', _converse.onUserActivity);
     window.removeEventListener(_converse.unloadevent, _converse.onUserActivity);
     window.clearInterval(_converse.everySecondTrigger);
-    _converse.api.trigger('afterTearDown');
+    api.trigger('afterTearDown');
     return _converse;
 }
 
@@ -97,13 +104,6 @@ export function prefixMentions (message) {
     return text;
 }
 
-
-/**
- * The utils object
- * @namespace u
- */
-const u = {};
-
 u.isTagEqual = function (stanza, name) {
     if (stanza.tree?.()) {
         return u.isTagEqual(stanza.tree(), name);

src/plugins/modal/base.js

@@ -1,14 +1,14 @@
+import api from "@converse/headless/shared/api/index.js";
 import bootstrap from "bootstrap.native";
 import log from "@converse/headless/log";
+import sizzle from 'sizzle';
 import tplAlertComponent from "./templates/modal-alert.js";
 import { View } from '@converse/skeletor/src/view.js';
-import { api, converse } from "@converse/headless/core";
+import { addClass, removeElement } from '../../utils/html.js';
 import { render } from 'lit';
 
 import './styles/_modal.scss';
 
-const { sizzle } = converse.env;
-const u = converse.env.utils;
 
 
 const BaseModal = View.extend({
@@ -56,11 +56,11 @@ const BaseModal = View.extend({
         ev.stopPropagation();
         ev.preventDefault();
         sizzle('.nav-link.active', this.el).forEach(el => {
-            u.removeClass('active', this.el.querySelector(el.getAttribute('href')));
-            u.removeClass('active', el);
+            removeClass('active', this.el.querySelector(el.getAttribute('href')));
+            removeClass('active', el);
         });
-        u.addClass('active', ev.target);
-        u.addClass('active', this.el.querySelector(ev.target.getAttribute('href')))
+        addClass('active', ev.target);
+        addClass('active', this.el.querySelector(ev.target.getAttribute('href')))
     },
 
     alert (message, type='primary') {
@@ -74,8 +74,8 @@ const BaseModal = View.extend({
         render(tplAlertComponent({'type': `alert-${type}`, 'message': message}), body);
         const el = body.firstElementChild;
         setTimeout(() => {
-            u.addClass('fade-out', el);
-            setTimeout(() => u.removeElement(el), 600);
+            addClass('fade-out', el);
+            setTimeout(() => removeElement(el), 600);
         }, 5000);
     },
 
@@ -83,7 +83,7 @@ const BaseModal = View.extend({
         if (ev) {
             ev.preventDefault();
             this.trigger_el = ev.target;
-            !u.hasClass('chat-image', this.trigger_el) && u.addClass('selected', this.trigger_el);
+            !hasClass('chat-image', this.trigger_el) && addClass('selected', this.trigger_el);
         }
         this.modal.show();
     }

src/plugins/rosterview/modals/add-contact.js

@@ -1,13 +1,13 @@
 import 'shared/autocomplete/index.js';
 import BaseModal from "plugins/modal/modal.js";
+import api from '@converse/headless/shared/api';
 import compact from 'lodash-es/compact';
 import debounce from 'lodash-es/debounce';
 import tplAddContactModal from "./templates/add-contact.js";
+import { Strophe } from 'strophe.js/src/core.js';
 import { __ } from 'i18n';
-import { _converse, api, converse } from "@converse/headless/core";
-
-const { Strophe } = converse.env;
-const u = converse.env.utils;
+import { _converse } from "@converse/headless/core";
+import { addClass, removeClass } from 'utils/html.js';
 
 export default class AddContactModal extends BaseModal {
 
@@ -98,7 +98,7 @@ export default class AddContactModal extends BaseModal {
                 if (list.length !== 1) {
                     const el = this.querySelector('.invalid-feedback');
                     el.textContent = __('Sorry, could not find a contact with that name')
-                    u.addClass('d-block', el);
+                    addClass('d-block', el);
                     return;
                 }
                 const jid = list[0].value;
@@ -114,15 +114,15 @@ export default class AddContactModal extends BaseModal {
     validateSubmission (jid) {
         const el = this.querySelector('.invalid-feedback');
         if (!jid || compact(jid.split('@')).length < 2) {
-            u.addClass('is-invalid', this.querySelector('input[name="jid"]'));
-            u.addClass('d-block', el);
+            addClass('is-invalid', this.querySelector('input[name="jid"]'));
+            addClass('d-block', el);
             return false;
         } else if (_converse.roster.get(Strophe.getBareJidFromJid(jid))) {
             el.textContent = __('This contact has already been added')
-            u.addClass('d-block', el);
+            addClass('d-block', el);
             return false;
         }
-        u.removeClass('d-block', el);
+        removeClass('d-block', el);
         return true;
     }
 

src/shared/registry.js

@@ -1,4 +1,4 @@
-import { api } from "@converse/headless/core";
+import api from "@converse/headless/shared/api/index.js";
 
 const registry = {};
 

src/utils/html.js

@@ -241,7 +241,7 @@ u.hasClass = function (className, el) {
 };
 
 u.toggleClass = function (className, el) {
-    u.hasClass(className, el) ? u.removeClass(className, el) : u.addClass(className, el);
+    u.hasClass(className, el) ? removeClass(className, el) : addClass(className, el);
 };
 
 /**
@@ -250,10 +250,10 @@ u.toggleClass = function (className, el) {
  * @param { string } className
  * @param { Element } el
  */
-u.addClass = function (className, el) {
+export function addClass (className, el) {
     el instanceof Element && el.classList.add(className);
     return el;
-};
+}
 
 /**
  * Remove a class from an element.
@@ -261,15 +261,20 @@ u.addClass = function (className, el) {
  * @param { string } className
  * @param { Element } el
  */
-u.removeClass = function (className, el) {
+export function removeClass (className, el) {
     el instanceof Element && el.classList.remove(className);
     return el;
-};
+}
 
-u.removeElement = function (el) {
+/**
+ * Remove an element from its parent
+ * @method u#removeElement
+ * @param { Element } el
+ */
+export function removeElement (el) {
     el instanceof Element && el.parentNode && el.parentNode.removeChild(el);
     return el;
-};
+}
 
 u.getElementFromTemplateResult = function (tr) {
     const div = document.createElement('div');
@@ -278,8 +283,8 @@ u.getElementFromTemplateResult = function (tr) {
 };
 
 u.showElement = el => {
-    u.removeClass('collapsed', el);
-    u.removeClass('hidden', el);
+    removeClass('collapsed', el);
+    removeClass('hidden', el);
 };
 
 u.hideElement = function (el) {
@@ -609,6 +614,15 @@ u.xForm2TemplateResult = function (field, stanza, options={}) {
     }
 };
 
-Object.assign(u, { getOOBURLMarkup, ancestor, slideIn, slideOut, isEqualNode });
+Object.assign(u, {
+    addClass,
+    ancestor,
+    getOOBURLMarkup,
+    isEqualNode,
+    removeClass,
+    removeElement,
+    slideIn,
+    slideOut,
+});
 
 export default u;