Fixup

dev.html

@@ -43,7 +43,7 @@
         websocket_url: 'wss://conversejs.org/xmpp-websocket',
         // websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
         whitelisted_plugins: ['converse-debug'],
-        connection_options: { worker: '/dist/shared-connection-worker.js' }
+        // connection_options: { worker: '/dist/shared-connection-worker.js' }
     });
 </script>
 </body>

src/headless/plugins/muc/affiliations/utils.js

@@ -88,7 +88,7 @@ export function setAffiliations (muc_jid, users) {
  * a separate stanza for each JID.
  * Related ticket: https://issues.prosody.im/345
  *
- * @param {typeof AFFILIATIONS} affiliation - The affiliation to be set
+ * @param {typeof AFFILIATIONS[number]} affiliation - The affiliation to be set
  * @param {String|Array<String>} muc_jids - The JID(s) of the MUCs in which the
  *  affiliations need to be set.
  * @param {object} members - A map of jids, affiliations and
@@ -108,7 +108,7 @@ export function setAffiliation (affiliation, muc_jids, members) {
 
 /**
  * Send an IQ stanza specifying an affiliation change.
- * @param {typeof AFFILIATIONS} affiliation: affiliation (could also be stored on the member object).
+ * @param {typeof AFFILIATIONS[number]} affiliation: affiliation (could also be stored on the member object).
  * @param {string} muc_jid: The JID of the MUC in which the affiliation should be set.
  * @param {object} member: Map containing the member's jid and optionally a reason and affiliation.
  */

src/plugins/adhoc-views/adhoc-commands.js

@@ -32,15 +32,24 @@ export default class AdHocCommands extends CustomElement {
         return tplAdhoc(this)
     }
 
+    /**
+     * @param {SubmitEvent} ev
+     */
     async fetchCommands (ev) {
         ev.preventDefault();
-        delete this.alert_type;
-        delete this.alert;
+
+        if (!(ev.target instanceof HTMLFormElement)) {
+            this.alert_type = 'danger';
+            this.alert = 'Form could not be submitted'
+            return;
+        }
 
         this.fetching = true;
+        delete this.alert_type;
+        delete this.alert;
 
         const form_data = new FormData(ev.target);
-        const jid = form_data.get('jid').trim();
+        const jid = /** @type {string} */(form_data.get('jid')).trim();
         let supported;
         try {
             supported = await api.disco.supports(Strophe.NS.ADHOC, jid);
@@ -109,8 +118,8 @@ export default class AdHocCommands extends CustomElement {
 
     async runCommand (form, action) {
         const form_data = new FormData(form);
-        const jid = form_data.get('command_jid').trim();
-        const node = form_data.get('command_node').trim();
+        const jid = /** @type {string} */(form_data.get('command_jid')).trim();
+        const node = /** @type {string} */(form_data.get('command_node')).trim();
 
         const cmd = this.commands.filter(c => c.node === node)[0];
         delete cmd.alert;
@@ -159,8 +168,8 @@ export default class AdHocCommands extends CustomElement {
         this.requestUpdate();
 
         const form_data = new FormData(ev.target.form);
-        const jid = form_data.get('command_jid').trim();
-        const node = form_data.get('command_node').trim();
+        const jid = /** @type {string} */(form_data.get('command_jid')).trim();
+        const node = /** @type {string} */(form_data.get('command_node')).trim();
 
         const cmd = this.commands.filter(c => c.node === node)[0];
         delete cmd.alert;

src/plugins/bookmark-views/components/bookmark-form.js

@@ -5,6 +5,11 @@ import { _converse, api } from "@converse/headless";
 
 class MUCBookmarkForm extends CustomElement {
 
+    constructor () {
+        super();
+        this.jid = null;
+    }
+
     static get properties () {
         return {
             'jid': { type: String }

src/plugins/bookmark-views/modals/bookmark-form.js

@@ -6,6 +6,11 @@ import { api } from "@converse/headless";
 
 export default class BookmarkFormModal extends BaseModal {
 
+    constructor (options) {
+        super(options);
+        this.jid = null;
+    }
+
     renderModal () {
         return html`
             <converse-muc-bookmark-form class="muc-form-container" jid="${this.jid}">

src/plugins/chatview/bottom-panel.js

@@ -1,3 +1,8 @@
+/**
+ * @typedef {import('shared/chat/emoji-picker.js').default} EmojiPicker
+ * @typedef {import('shared/chat/emoji-dropdown.js').default} EmojiDropdown
+ * @typedef {import('./message-form.js').default} MessageForm
+ */
 import './message-form.js';
 import tplBottomPanel from './templates/bottom-panel.js';
 import { CustomElement } from 'shared/components/element.js';
@@ -38,7 +43,8 @@ export default class ChatBottomPanel extends CustomElement {
 
     sendButtonClicked (ev) {
         if (ev.delegateTarget?.dataset.action === 'sendMessage') {
-            this.querySelector('converse-message-form')?.onFormSubmitted(ev);
+            const form = /** @type {MessageForm} */(this.querySelector('converse-message-form'));
+            form?.onFormSubmitted(ev);
         }
     }
 
@@ -55,16 +61,6 @@ export default class ChatBottomPanel extends CustomElement {
         _converse.chatboxviews.get(this.getAttribute('jid'))?.emitBlurred(ev);
     }
 
-    onDrop (evt) {
-        if (evt.dataTransfer.files.length == 0) {
-            // There are no files to be dropped, so this isn’t a file
-            // transfer operation.
-            return;
-        }
-        evt.preventDefault();
-        this.model.sendFiles(evt.dataTransfer.files);
-    }
-
     onDragOver (ev) { // eslint-disable-line class-methods-use-this
         ev.preventDefault();
     }
@@ -76,14 +72,14 @@ export default class ChatBottomPanel extends CustomElement {
 
     async autocompleteInPicker (input, value) {
         await api.emojis.initialize();
-        const emoji_picker = this.querySelector('converse-emoji-picker');
+        const emoji_picker = /** @type {EmojiPicker} */(this.querySelector('converse-emoji-picker'));
         if (emoji_picker) {
             emoji_picker.model.set({
                 'ac_position': input.selectionStart,
                 'autocompleting': value,
                 'query': value
             });
-            const emoji_dropdown = this.querySelector('converse-emoji-dropdown');
+            const emoji_dropdown = /** @type {EmojiDropdown} */(this.querySelector('converse-emoji-dropdown'));
             emoji_dropdown?.showMenu();
         }
     }

src/plugins/chatview/heading.js

@@ -1,3 +1,17 @@
+/**
+ * @typedef { Object } HeadingButtonAttributes
+ * An object representing a chat heading button
+ * @property { Boolean } standalone
+ *  True if shown on its own, false if it must be in the dropdown menu.
+ * @property { Function } handler
+ *  A handler function to be called when the button is clicked.
+ * @property { String } a_class - HTML classes to show on the button
+ * @property { String } i18n_text - The user-visiible name of the button
+ * @property { String } i18n_title - The tooltip text for this button
+ * @property { String } icon_class - What kind of CSS class to use for the icon
+ * @property { String } name - The internal name of the button
+ */
+
 import 'shared/modals/user-details.js';
 import tplChatboxHead from './templates/chat-head.js';
 import { CustomElement } from 'shared/components/element.js';
@@ -9,6 +23,11 @@ import './styles/chat-head.scss';
 
 export default class ChatHeading extends CustomElement {
 
+    constructor () {
+        super();
+        this.jid = null;
+    }
+
     static get properties () {
         return {
             'jid': { type: String },
@@ -54,19 +73,7 @@ export default class ChatHeading extends CustomElement {
      */
     getHeadingButtons () {
         const buttons = [
-            /**
-             * @typedef { Object } HeadingButtonAttributes
-             * An object representing a chat heading button
-             * @property { Boolean } standalone
-             *  True if shown on its own, false if it must be in the dropdown menu.
-             * @property { Function } handler
-             *  A handler function to be called when the button is clicked.
-             * @property { String } a_class - HTML classes to show on the button
-             * @property { String } i18n_text - The user-visiible name of the button
-             * @property { String } i18n_title - The tooltip text for this button
-             * @property { String } icon_class - What kind of CSS class to use for the icon
-             * @property { String } name - The internal name of the button
-             */
+            /** @type {HeadingButtonAttributes} */
             {
                 'a_class': 'show-user-details-modal',
                 'handler': ev => this.showUserDetailsModal(ev),

src/plugins/chatview/message-form.js

@@ -1,3 +1,6 @@
+/**
+ * @typedef {import('shared/chat/emoji-dropdown.js').default} EmojiDropdown
+ */
 import tplMessageForm from './templates/message-form.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
@@ -34,13 +37,12 @@ export default class MessageForm extends CustomElement {
         return tplMessageForm(
             Object.assign(this.model.toJSON(), {
                 'onDrop': ev => this.onDrop(ev),
-                'hint_value': this.querySelector('.spoiler-hint')?.value,
-                'message_value': this.querySelector('.chat-textarea')?.value,
+                'hint_value': /** @type {HTMLInputElement} */(this.querySelector('.spoiler-hint'))?.value,
+                'message_value': /** @type {HTMLTextAreaElement} */(this.querySelector('.chat-textarea'))?.value,
                 'onChange': ev => this.model.set({'draft': ev.target.value}),
                 'onKeyDown': ev => this.onKeyDown(ev),
                 'onKeyUp': ev => this.onKeyUp(ev),
-                'onPaste': ev => this.onPaste(ev),
-                'viewUnreadMessages': ev => this.viewUnreadMessages(ev)
+                'onPaste': ev => this.onPaste(ev)
             })
         );
     }
@@ -56,7 +58,7 @@ export default class MessageForm extends CustomElement {
      *  replaced with the new value.
      */
     insertIntoTextArea (value, replace = false, correcting = false, position) {
-        const textarea = this.querySelector('.chat-textarea');
+        const textarea = /** @type {HTMLTextAreaElement} */(this.querySelector('.chat-textarea'));
         if (correcting) {
             u.addClass('correcting', textarea);
         } else {
@@ -120,6 +122,16 @@ export default class MessageForm extends CustomElement {
         this.model.set({'draft': ev.clipboardData.getData('text/plain')});
     }
 
+    onDrop (evt) {
+        if (evt.dataTransfer.files.length == 0) {
+            // There are no files to be dropped, so this isn’t a file
+            // transfer operation.
+            return;
+        }
+        evt.preventDefault();
+        this.model.sendFiles(evt.dataTransfer.files);
+    }
+
     onKeyUp (ev) {
         this.model.set({'draft': ev.target.value});
     }
@@ -141,11 +153,11 @@ export default class MessageForm extends CustomElement {
                 // Forward slash is used to run commands. Nothing to do here.
                 return;
             } else if (ev.keyCode === converse.keycodes.ESCAPE) {
-                return this.onEscapePressed(ev, this);
+                return this.onEscapePressed(ev);
             } else if (ev.keyCode === converse.keycodes.ENTER) {
                 return this.onFormSubmitted(ev);
             } else if (ev.keyCode === converse.keycodes.UP_ARROW && !ev.target.selectionEnd) {
-                const textarea = this.querySelector('.chat-textarea');
+                const textarea = /** @type {HTMLTextAreaElement} */(this.querySelector('.chat-textarea'));
                 if (!textarea.value || u.hasClass('correcting', textarea)) {
                     return this.model.editEarlierMessage();
                 }
@@ -178,7 +190,7 @@ export default class MessageForm extends CustomElement {
     async onFormSubmitted (ev) {
         ev?.preventDefault?.();
 
-        const textarea = this.querySelector('.chat-textarea');
+        const textarea = /** @type {HTMLTextAreaElement} */(this.querySelector('.chat-textarea'));
         const message_text = textarea.value.trim();
         if (
             (api.settings.get('message_limit') && message_text.length > api.settings.get('message_limit')) ||
@@ -195,12 +207,12 @@ export default class MessageForm extends CustomElement {
         let spoiler_hint,
             hint_el = {};
         if (this.model.get('composing_spoiler')) {
-            hint_el = this.querySelector('form.sendXMPPMessage input.spoiler-hint');
+            hint_el = /** @type {HTMLInputElement} */(this.querySelector('form.sendXMPPMessage input.spoiler-hint'));
             spoiler_hint = hint_el.value;
         }
         u.addClass('disabled', textarea);
         textarea.setAttribute('disabled', 'disabled');
-        this.querySelector('converse-emoji-dropdown')?.hideMenu();
+        /** @type {EmojiDropdown} */(this.querySelector('converse-emoji-dropdown'))?.hideMenu();
 
         const is_command = await parseMessageForCommands(this.model, message_text);
         const message = is_command ? null : await this.model.sendMessage({'body': message_text, spoiler_hint});

src/plugins/controlbox/api.js

@@ -1,3 +1,6 @@
+/**
+ * @typedef {import('./controlbox.js').default} ControlBox
+ */
 import { _converse, api, converse } from "@converse/headless";
 
 const { u } = converse.env;
@@ -29,7 +32,7 @@ export default {
         /**
          * Returns the controlbox view.
          * @method _converse.api.controlbox.get
-         * @returns { View } View representing the controlbox
+         * @returns {ControlBox} View representing the controlbox
          * @example const view = _converse.api.controlbox.get();
          */
         get () {

src/plugins/controlbox/navback.js

@@ -5,6 +5,11 @@ import { api } from "@converse/headless";
 
 class ControlBoxNavback extends CustomElement {
 
+    constructor () {
+        super();
+        this.jid = null;
+    }
+
     static get properties () {
         return {
             'jid': { type: String }

src/plugins/dragresize/index.js

@@ -68,25 +68,25 @@ converse.plugins.add('converse-dragresize', {
         }
 
         /**
-         * This function registers mousedown and mouseup events hadlers to 
+         * This function registers mousedown and mouseup events hadlers to
          * all iframes in the DOM when converse UI resizing events are called
          * to prevent mouse drag stutter effect which is bad user experience.
          * @function dragresizeOverIframeHandler
          * @param {Object} e - dragging node element.
          */
         function dragresizeOverIframeHandler (e) {
-          const iframes = document.getElementsByTagName('iframe');
-          for (let iframe of iframes) {
+          const iframes = Array.from(document.getElementsByTagName('iframe'));
+          for (const iframe of iframes) {
             e.addEventListener('mousedown', () => {
                 iframe.style.pointerEvents  = 'none';
             }, { once: true });
-            
+
             e.addEventListener('mouseup', () => {
                 iframe.style.pointerEvents  = 'initial';
             }, { once: true });
           }
         }
-        
+
         api.listen.on('registeredGlobalEventHandlers', registerGlobalEventHandlers);
         api.listen.on('unregisteredGlobalEventHandlers', unregisterGlobalEventHandlers);
         api.listen.on('beforeShowingChatView', view => view.initDragResize().setDimensions());

src/plugins/headlines-view/heading.js

@@ -6,6 +6,11 @@ import { _converse, api } from "@converse/headless";
 
 export default class HeadlinesHeading extends CustomElement {
 
+    constructor () {
+        super();
+        this.jid = null;
+    }
+
     static get properties () {
         return {
             'jid': { type: String },