Add more type info

src/plugins/chatview/heading.js

@@ -38,11 +38,7 @@ export default class ChatHeading extends CustomElement {
     }
 
     render () {
-        return tplChatboxHead(Object.assign(this.model.toJSON(), {
-            heading_buttons_promise: this.getHeadingButtons(),
-            model: this.model,
-            showUserDetailsModal: ev => this.showUserDetailsModal(ev),
-        }));
+        return tplChatboxHead(this);
     }
 
     showUserDetailsModal (ev) {
@@ -58,18 +54,19 @@ export default class ChatHeading extends CustomElement {
     /**
      * Returns a list of objects which represent buttons for the chat's header.
      * @emits _converse#getHeadingButtons
+     * @returns {Promise<Array.<import('./types').HeadingButtonAttributes>>}
      */
     async getHeadingButtons () {
         const buttons = [
             /** @type {import('./types').HeadingButtonAttributes} */
             {
-                'a_class': 'show-user-details-modal',
-                'handler': /** @param {Event} ev */(ev) => this.showUserDetailsModal(ev),
-                'i18n_text': __('Details'),
-                'i18n_title': __('See more information about this person'),
-                'icon_class': 'fa-id-card',
-                'name': 'details',
-                'standalone': api.settings.get('view_mode') === 'overlayed'
+                a_class: 'show-user-details-modal',
+                handler: /** @param {Event} ev */(ev) => this.showUserDetailsModal(ev),
+                i18n_text: __('Details'),
+                i18n_title: __('See more information about this person'),
+                icon_class: 'fa-id-card',
+                name: 'details',
+                standalone: api.settings.get('view_mode') === 'overlayed'
             },
         ];
 
@@ -77,8 +74,8 @@ export default class ChatHeading extends CustomElement {
             const blocklist = await api.blocklist.get();
             if (blocklist.get(this.model.get('jid'))) {
                 buttons.push({
-                    'a_class': 'unblock-user',
-                    'handler': /** @param {Event} ev */ async (ev) => {
+                    a_class: 'unblock-user',
+                    handler: /** @param {Event} ev */ async (ev) => {
                         ev.preventDefault();
                         const result = await api.confirm(
                             __('Unblock user'),
@@ -88,16 +85,16 @@ export default class ChatHeading extends CustomElement {
                             api.blocklist.remove(this.model.get('jid'));
                         }
                     },
-                    'i18n_text': __('Unblock this user'),
-                    'i18n_title': __('Allow this user to send you messages'),
-                    'icon_class': 'fa-check',
-                    'name': 'unblock',
-                    'standalone': false
+                    i18n_text: __('Unblock this user'),
+                    i18n_title: __('Allow this user to send you messages'),
+                    icon_class: 'fa-check',
+                    name: 'unblock',
+                    standalone: false
                 });
             } else {
                 buttons.push({
-                    'a_class': 'block-user',
-                    'handler': /** @param {Event} ev */ async (ev) => {
+                    a_class: 'block-user',
+                    handler: /** @param {Event} ev */ async (ev) => {
                         ev.preventDefault();
                         const result = await api.confirm(
                             __('Block user'),
@@ -108,24 +105,24 @@ export default class ChatHeading extends CustomElement {
                             this.model.close();
                         }
                     },
-                    'i18n_text': __('Block this user'),
-                    'i18n_title': __('Prevent this user from sending you any further messages'),
-                    'icon_class': 'fa-trash',
-                    'name': 'block',
-                    'standalone': false
+                    i18n_text: __('Block this user'),
+                    i18n_title: __('Prevent this user from sending you any further messages'),
+                    icon_class: 'fa-trash',
+                    name: 'block',
+                    standalone: false
                 });
             }
         }
 
         if (!api.settings.get('singleton')) {
             buttons.push({
-                'a_class': 'close-chatbox-button',
-                'handler': /** @param {Event} ev */(ev) => this.close(ev),
-                'i18n_text': __('Close'),
-                'i18n_title': __('Close and end this conversation'),
-                'icon_class': 'fa-times',
-                'name': 'close',
-                'standalone': api.settings.get('view_mode') === 'overlayed'
+                a_class: 'close-chatbox-button',
+                handler: /** @param {Event} ev */(ev) => this.close(ev),
+                i18n_text: __('Close'),
+                i18n_title: __('Close and end this conversation'),
+                icon_class: 'fa-times',
+                name: 'close',
+                standalone: api.settings.get('view_mode') === 'overlayed'
             });
         }
         const { chatboxviews } = _converse.state;

src/plugins/chatview/templates/chat-head.js

@@ -6,31 +6,40 @@ import { getStandaloneButtons, getDropdownButtons } from 'shared/chat/utils.js';
 
 const { HEADLINES_TYPE } = constants;
 
-export default (o) => {
+/**
+ * @param {import('../heading').default} el
+ * @returns {import('lit').TemplateResult}
+ */
+export default (el) => {
+    const { jid, status, type } = el.model.attributes;
+    const heading_buttons_promise = el.getHeadingButtons();
+    const showUserDetailsModal = /** @param {Event} ev */(ev) => el.showUserDetailsModal(ev);
+
     const i18n_profile = __("The User's Profile Image");
-    const display_name = o.model.getDisplayName();
+    const display_name = el.model.getDisplayName();
+    debugger;
     const avatar = html`<span title="${i18n_profile}">
         <converse-avatar
-            .model=${o.model.contact || o.model}
+            .model=${el.model.contact || el.model}
             class="avatar chat-msg__avatar"
             name="${display_name}"
-            nonce=${o.model.contact?.vcard?.get('vcard_updated')}
+            nonce=${el.model.contact?.vcard?.get('vcard_updated')}
             height="40" width="40"></converse-avatar></span>`;
 
     return html`
-        <div class="chatbox-title ${ o.status ? '' :  "chatbox-title--no-desc"}">
+        <div class="chatbox-title ${ status ? '' :  "chatbox-title--no-desc"}">
             <div class="chatbox-title--row">
-                ${ (!_converse.api.settings.get("singleton")) ?  html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
-                ${ (o.type !== HEADLINES_TYPE) ? html`<a class="show-msg-author-modal" @click=${o.showUserDetailsModal}>${ avatar }</a>` : '' }
-                <div class="chatbox-title__text" title="${o.jid}" role="heading" aria-level="2">
-                    ${ (o.type !== HEADLINES_TYPE) ? html`<a class="user show-msg-author-modal" @click=${o.showUserDetailsModal}>${ display_name }</a>` : display_name }
+                ${ (!_converse.api.settings.get("singleton")) ?  html`<converse-controlbox-navback jid="${jid}"></converse-controlbox-navback>` : '' }
+                ${ (type !== HEADLINES_TYPE) ? html`<a class="show-msg-author-modal" @click=${showUserDetailsModal}>${ avatar }</a>` : '' }
+                <div class="chatbox-title__text" title="${jid}" role="heading" aria-level="2">
+                    ${ (type !== HEADLINES_TYPE) ? html`<a class="user show-msg-author-modal" @click=${showUserDetailsModal}>${ display_name }</a>` : display_name }
                 </div>
             </div>
             <div class="chatbox-title__buttons btn-toolbar g-0">
-                ${ until(getDropdownButtons(o.heading_buttons_promise), '') }
-                ${ until(getStandaloneButtons(o.heading_buttons_promise), '') }
+                ${ until(getDropdownButtons(heading_buttons_promise), '') }
+                ${ until(getStandaloneButtons(heading_buttons_promise), '') }
             </div>
         </div>
-        ${ o.status ? html`<p class="chat-head__desc">${ o.status }</p>` : '' }
+        ${ status ? html`<p class="chat-head__desc">${ status }</p>` : '' }
     `;
 }

src/plugins/chatview/types.ts

@@ -1,6 +1,6 @@
 export type HeadingButtonAttributes = {
     standalone: boolean; // True if shown on its own, false if it must be in the dropdown menu.
-    handler: () => void; // A handler function to be called when the button is clicked.
+    handler: (ev: Event) => void; // A handler function to be called when the button is clicked.
     a_class: string; // HTML classes to show on the button
     i18n_text: string; // The user-visible name of the button
     i18n_title: string; // The tooltip text for this button

src/shared/chat/utils.js

@@ -1,4 +1,5 @@
 /**
+ * @typedef {import('plugins/chatview/types').HeadingButtonAttributes} HeadingButtonAttributes
  * @typedef {import('../../plugins/chatview/chat.js').default} ChatView
  * @typedef {import('../../plugins/muc-views/muc.js').default} MUCView
  * @typedef {import('../../plugins/muc-views/occupant').default} MUCOccupantView
@@ -24,6 +25,10 @@ export function getUnreadMsgsDisplay (model) {
     return num_unread < 100 ? num_unread : '99+';
 }
 
+/**
+ * @param {Promise<HeadingButtonAttributes>|HeadingButtonAttributes} promise_or_data
+ * @returns {Promise<TemplateResult|''>}
+ */
 export async function getHeadingDropdownItem (promise_or_data) {
     const data = await promise_or_data;
     return data
@@ -41,6 +46,10 @@ export async function getHeadingDropdownItem (promise_or_data) {
         : '';
 }
 
+/**
+ * @param {Promise<HeadingButtonAttributes>|HeadingButtonAttributes} promise_or_data
+ * @returns {Promise<TemplateResult>}
+ */
 export async function getHeadingStandaloneButton (promise_or_data) {
     const data = await promise_or_data;
     return html`
@@ -56,7 +65,7 @@ export async function getHeadingStandaloneButton (promise_or_data) {
 }
 
 /**
- * @param {Promise<Array<object>>} promise
+ * @param {Promise<Array<HeadingButtonAttributes>>} promise
  */
 export async function getStandaloneButtons (promise) {
     const btns = await promise;
@@ -172,6 +181,11 @@ export function getHats (message) {
     return [];
 }
 
+/**
+ * @template {any} T
+ * @param {Array<T>} arr
+ * @returns {Array<T>} A new array containing only unique elements from the input array.
+ */
 function unique (arr) {
     return [...new Set(arr)];
 }
@@ -229,6 +243,10 @@ export function getEmojiMarkup (data, options={unicode_only: false, add_title_wr
     }
 }
 
+/**
+ * @param {string} text
+ * @param {object} options
+ */
 export function addEmojisMarkup (text, options) {
     let list = [text];
     [...getShortnameReferences(text), ...getCodePointReferences(text)]
@@ -258,14 +276,14 @@ export function addEmojisMarkup (text, options) {
  *
  * @namespace u
  * @method u.shortnamesToEmojis
- * @param { String } str - String containg the shortname(s)
- * @param { Object } options
- * @param { Boolean } options.unicode_only - Whether emojis are rendered as
+ * @param {String} str - String containg the shortname(s)
+ * @param {Object} options
+ * @param {Boolean} options.unicode_only - Whether emojis are rendered as
  *  unicode codepoints. If so, the returned result will be an array
  *  with containing one string, because the emojis themselves will
  *  also be strings. If set to false, emojis will be represented by
  *  lit TemplateResult objects.
- * @param { Boolean } options.add_title_wrapper - Whether unicode
+ * @param {Boolean} options.add_title_wrapper - Whether unicode
  *  codepoints should be wrapped with a `<span>` element with a
  *  title, so that the shortname is shown upon hovering with the
  *  mouse.

src/types/plugins/chatview/heading.d.ts

@@ -7,14 +7,15 @@ export default class ChatHeading extends CustomElement {
     jid: any;
     initialize(): void;
     model: any;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1 | 2>;
     showUserDetailsModal(ev: any): void;
     close(ev: any): void;
     /**
      * Returns a list of objects which represent buttons for the chat's header.
      * @emits _converse#getHeadingButtons
+     * @returns {Promise<Array.<import('./types').HeadingButtonAttributes>>}
      */
-    getHeadingButtons(): Promise<any>;
+    getHeadingButtons(): Promise<Array<import("./types").HeadingButtonAttributes>>;
 }
 import { CustomElement } from 'shared/components/element.js';
 //# sourceMappingURL=heading.d.ts.map

src/types/plugins/chatview/templates/chat-head.d.ts

@@ -1,3 +1,3 @@
-declare function _default(o: any): import("lit").TemplateResult<1>;
+declare function _default(el: import("../heading").default): import("lit").TemplateResult;
 export default _default;
 //# sourceMappingURL=chat-head.d.ts.map

src/types/plugins/chatview/types.d.ts

@@ -1,6 +1,6 @@
 export type HeadingButtonAttributes = {
     standalone: boolean;
-    handler: () => void;
+    handler: (ev: Event) => void;
     a_class: string;
     i18n_text: string;
     i18n_title: string;

src/types/shared/chat/utils.d.ts

@@ -2,12 +2,20 @@
  * @param {Model} model
  */
 export function getUnreadMsgsDisplay(model: Model): any;
-export function getHeadingDropdownItem(promise_or_data: any): Promise<import("lit").TemplateResult<1> | "">;
-export function getHeadingStandaloneButton(promise_or_data: any): Promise<import("lit").TemplateResult<1>>;
 /**
- * @param {Promise<Array<object>>} promise
+ * @param {Promise<HeadingButtonAttributes>|HeadingButtonAttributes} promise_or_data
+ * @returns {Promise<TemplateResult|''>}
+ */
+export function getHeadingDropdownItem(promise_or_data: Promise<HeadingButtonAttributes> | HeadingButtonAttributes): Promise<TemplateResult | "">;
+/**
+ * @param {Promise<HeadingButtonAttributes>|HeadingButtonAttributes} promise_or_data
+ * @returns {Promise<TemplateResult>}
  */
-export function getStandaloneButtons(promise: Promise<Array<object>>): Promise<import("lit/directive.js").DirectiveResult<typeof import("lit/directives/until.js").UntilDirective>[]>;
+export function getHeadingStandaloneButton(promise_or_data: Promise<HeadingButtonAttributes> | HeadingButtonAttributes): Promise<TemplateResult>;
+/**
+ * @param {Promise<Array<HeadingButtonAttributes>>} promise
+ */
+export function getStandaloneButtons(promise: Promise<Array<HeadingButtonAttributes>>): Promise<import("lit/directive.js").DirectiveResult<typeof import("lit/directives/until.js").UntilDirective>[]>;
 /**
  * @param {Promise<Array<object>>} promise
  */
@@ -34,7 +42,11 @@ export function getTonedEmojis(): any;
  * @param {EmojiMarkupOptions} options
  */
 export function getEmojiMarkup(data: object, options?: EmojiMarkupOptions): any;
-export function addEmojisMarkup(text: any, options: any): any[];
+/**
+ * @param {string} text
+ * @param {object} options
+ */
+export function addEmojisMarkup(text: string, options: object): string[];
 /**
  * Returns an emoji represented by the passed in shortname.
  * Scans the passed in text for shortnames and replaces them with
@@ -48,14 +60,14 @@ export function addEmojisMarkup(text: any, options: any): any[];
  *
  * @namespace u
  * @method u.shortnamesToEmojis
- * @param { String } str - String containg the shortname(s)
- * @param { Object } options
- * @param { Boolean } options.unicode_only - Whether emojis are rendered as
+ * @param {String} str - String containg the shortname(s)
+ * @param {Object} options
+ * @param {Boolean} options.unicode_only - Whether emojis are rendered as
  *  unicode codepoints. If so, the returned result will be an array
  *  with containing one string, because the emojis themselves will
  *  also be strings. If set to false, emojis will be represented by
  *  lit TemplateResult objects.
- * @param { Boolean } options.add_title_wrapper - Whether unicode
+ * @param {Boolean} options.add_title_wrapper - Whether unicode
  *  codepoints should be wrapped with a `<span>` element with a
  *  title, so that the shortname is shown upon hovering with the
  *  mouse.
@@ -77,6 +89,7 @@ export type EmojiMarkupOptions = {
     unicode_only?: boolean;
     add_title_wrapper?: boolean;
 };
+export type HeadingButtonAttributes = import("plugins/chatview/types").HeadingButtonAttributes;
 export type ChatView = import("../../plugins/chatview/chat.js").default;
 export type MUCView = import("../../plugins/muc-views/muc.js").default;
 export type MUCOccupantView = import("../../plugins/muc-views/occupant").default;