Rename all templates to camelCase

To conform with naming conventions regarding functions, which the
templates are.

src/headless/utils/form.js

@@ -5,9 +5,9 @@
  */
 import u from "./core";
 
-const tpl_xform_field = (name, value) => `<field var="${name}">${ value }</field>`;
+const tplXformField = (name, value) => `<field var="${name}">${ value }</field>`;
 
-const tpl_xform_value = (value) => `<value>${value}</value>`;
+const tplXformValue = (value) => `<value>${value}</value>`;
 
 /**
  * Takes an HTML DOM and turns it into an XForm field.
@@ -30,9 +30,9 @@ export function webForm2xForm (field) {
     } else {
         value = field.value;
     }
-    return u.toStanza(tpl_xform_field(
+    return u.toStanza(tplXformField(
         name,
-        Array.isArray(value) ? value.map(tpl_xform_value) : tpl_xform_value(value),
+        Array.isArray(value) ? value.map(tplXformValue) : tplXformValue(value),
     ));
 }
 

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

@@ -1,6 +1,6 @@
 import 'shared/autocomplete/index.js';
 import log from '@converse/headless/log';
-import tpl_adhoc from './templates/ad-hoc.js';
+import tplAdhoc from './templates/ad-hoc.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { api, converse } from '@converse/headless/core.js';
@@ -30,7 +30,7 @@ export default class AdHocCommands extends CustomElement {
     }
 
     render () {
-        return tpl_adhoc(this)
+        return tplAdhoc(this)
     }
 
     async fetchCommands (ev) {

src/plugins/adhoc-views/templates/ad-hoc-command.js

@@ -1,5 +1,5 @@
 import { html } from "lit";
-import tpl_command_form from './ad-hoc-command-form.js';
+import tplCommandForm from './ad-hoc-command-form.js';
 
 export default (el, command) => html`
     <li class="room-item list-group-item">
@@ -12,6 +12,6 @@ export default (el, command) => html`
                title="${command.name}"
                href="#">${command.name || command.jid}</a>
         </div>
-        ${ command.node === el.showform ? tpl_command_form(el, command) : '' }
+        ${ command.node === el.showform ? tplCommandForm(el, command) : '' }
     </li>
 `;

src/plugins/adhoc-views/templates/ad-hoc.js

@@ -1,5 +1,5 @@
-import tpl_command from './ad-hoc-command.js';
-import tpl_spinner from 'templates/spinner.js';
+import tplCommand from './ad-hoc-command.js';
+import tplSpinner from 'templates/spinner.js';
 import { __ } from 'i18n';
 import { getAutoCompleteList } from 'plugins/muc-views/utils.js';
 import { html } from "lit";
@@ -31,13 +31,13 @@ export default (el) => {
                 </label>
             </fieldset>
             <fieldset class="form-group">
-                ${ el.fetching ? tpl_spinner() : html`<input type="submit" class="btn btn-primary" value="${i18n_fetch_commands}">` }
+                ${ el.fetching ? tplSpinner() : html`<input type="submit" class="btn btn-primary" value="${i18n_fetch_commands}">` }
             </fieldset>
             ${ el.view === 'list-commands' ? html`
             <fieldset class="form-group">
                 <ul class="list-group">
                     <li class="list-group-item active">${ el.commands.length ? i18n_commands_found : i18n_no_commands_found }:</li>
-                    ${ el.commands.map(cmd => tpl_command(el, cmd)) }
+                    ${ el.commands.map(cmd => tplCommand(el, cmd)) }
                 </ul>
             </fieldset>`
             : '' }

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

@@ -1,4 +1,4 @@
-import tpl_muc_bookmark_form from './templates/form.js';
+import tplMUCBookmarkForm from './templates/form.js';
 import { CustomElement } from 'shared/components/element';
 import { _converse, api } from "@converse/headless/core";
 
@@ -19,7 +19,7 @@ class MUCBookmarkForm extends CustomElement {
     }
 
     render () {
-        return tpl_muc_bookmark_form(this)
+        return tplMUCBookmarkForm(this)
     }
 
     onBookmarkFormSubmitted (ev) {

src/plugins/bookmark-views/components/bookmarks-list.js

@@ -1,6 +1,6 @@
 import debounce from "lodash-es/debounce";
-import tpl_bookmarks_list from './templates/list.js';
-import tpl_spinner from "templates/spinner.js";
+import tplBookmarksList from './templates/list.js';
+import tplSpinner from "templates/spinner.js";
 import { CustomElement } from 'shared/components/element.js';
 import { Model } from '@converse/skeletor/src/model.js';
 import { _converse, api } from '@converse/headless/core.js';
@@ -36,7 +36,7 @@ export default class BookmarksView extends CustomElement {
     }
 
     render () {
-        return _converse.bookmarks && this.model ? tpl_bookmarks_list(this) : tpl_spinner();
+        return _converse.bookmarks && this.model ? tplBookmarksList(this) : tplSpinner();
     }
 
     clearFilter (ev) {

src/plugins/chatboxviews/view.js

@@ -1,5 +1,5 @@
-import tpl_background_logo from '../../templates/background_logo.js';
-import tpl_chats from './templates/chats.js';
+import tplBackgroundLogo from '../../templates/background_logo.js';
+import tplChats from './templates/chats.js';
 import { CustomElement } from 'shared/components/element.js';
 import { api, _converse } from '@converse/headless/core';
 import { getAppSettings } from '@converse/headless/shared/settings/utils.js';
@@ -29,7 +29,7 @@ class ConverseChats extends CustomElement {
 
         const bg = document.getElementById('conversejs-bg');
         if (bg && !bg.innerHTML.trim()) {
-            render(tpl_background_logo(), bg);
+            render(tplBackgroundLogo(), bg);
         }
         const body = document.querySelector('body');
         body.classList.add(`converse-${api.settings.get('view_mode')}`);
@@ -43,7 +43,7 @@ class ConverseChats extends CustomElement {
     }
 
     render () { // eslint-disable-line class-methods-use-this
-        return tpl_chats();
+        return tplChats();
     }
 }
 

src/plugins/chatview/bottom-panel.js

@@ -1,6 +1,6 @@
 import './message-form.js';
 import debounce from 'lodash-es/debounce';
-import tpl_bottom_panel from './templates/bottom-panel.js';
+import tplBottomPanel from './templates/bottom-panel.js';
 import { ElementView } from '@converse/skeletor/src/element.js';
 import { _converse, api } from '@converse/headless/core';
 import { clearMessages } from './utils.js';
@@ -38,7 +38,7 @@ export default class ChatBottomPanel extends ElementView {
     }
 
     render () {
-        render(tpl_bottom_panel({
+        render(tplBottomPanel({
             'model': this.model,
             'viewUnreadMessages': ev => this.viewUnreadMessages(ev)
         }), this);

src/plugins/chatview/chat.js

@@ -1,7 +1,7 @@
 import 'plugins/chatview/heading.js';
 import 'plugins/chatview/bottom-panel.js';
 import BaseChatView from 'shared/chat/baseview.js';
-import tpl_chat from './templates/chat.js';
+import tplChat from './templates/chat.js';
 import { __ } from 'i18n';
 import { _converse, api } from '@converse/headless/core';
 
@@ -33,7 +33,7 @@ export default class ChatView extends BaseChatView {
     }
 
     render () {
-        return tpl_chat(Object.assign({
+        return tplChat(Object.assign({
             'model': this.model,
             'help_messages': this.getHelpMessages(),
             'show_help_messages': this.model.get('show_help_messages'),

src/plugins/chatview/heading.js

@@ -1,5 +1,5 @@
 import 'shared/modals/user-details.js';
-import tpl_chatbox_head from './templates/chat-head.js';
+import tplChatboxHead from './templates/chat-head.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api } from "@converse/headless/core";
@@ -30,7 +30,7 @@ export default class ChatHeading extends CustomElement {
     }
 
     render () {
-        return tpl_chatbox_head(Object.assign(this.model.toJSON(), {
+        return tplChatboxHead(Object.assign(this.model.toJSON(), {
             'heading_buttons_promise': this.getHeadingButtons(),
             'model': this.model,
             'showUserDetailsModal': ev => this.showUserDetailsModal(ev),

src/plugins/chatview/message-form.js

@@ -1,4 +1,4 @@
-import tpl_message_form from './templates/message-form.js';
+import tplMessageForm from './templates/message-form.js';
 import { ElementView } from '@converse/skeletor/src/element.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core.js";
@@ -32,7 +32,7 @@ export default class MessageForm extends ElementView {
     }
 
     toHTML () {
-        return tpl_message_form(
+        return tplMessageForm(
             Object.assign(this.model.toJSON(), {
                 'onDrop': ev => this.onDrop(ev),
                 'hint_value': this.querySelector('.spoiler-hint')?.value,

src/plugins/controlbox/controlbox.js

@@ -1,4 +1,4 @@
-import tpl_controlbox from './templates/controlbox.js';
+import tplControlbox from './templates/controlbox.js';
 import { CustomElement } from 'shared/components/element.js';
 import { _converse, api, converse } from '@converse/headless/core.js';
 
@@ -42,7 +42,7 @@ class ControlBox extends CustomElement {
     }
 
     render () {
-        return this.model ? tpl_controlbox(this) : '';
+        return this.model ? tplControlbox(this) : '';
     }
 
     close (ev) {

src/plugins/controlbox/loginform.js

@@ -1,5 +1,5 @@
 import bootstrap from 'bootstrap.native';
-import tpl_login_panel from './templates/loginform.js';
+import tplLoginPanel from './templates/loginform.js';
 import { CustomElement } from 'shared/components/element.js';
 import { _converse, api, converse } from '@converse/headless/core.js';
 import { initConnection } from '@converse/headless/utils/init.js';
@@ -26,7 +26,7 @@ class LoginForm extends CustomElement {
     }
 
     render () {
-        return tpl_login_panel(this);
+        return tplLoginPanel(this);
     }
 
     firstUpdated () {

src/plugins/controlbox/navback.js

@@ -1,4 +1,4 @@
-import tpl_controlbox_navback from "./templates/navback.js";
+import tplControlboxNavback from "./templates/navback.js";
 import { CustomElement } from 'shared/components/element.js';
 import { api } from "@converse/headless/core";
 
@@ -12,7 +12,7 @@ class ControlBoxNavback extends CustomElement {
     }
 
     render () {
-        return tpl_controlbox_navback(this.jid);
+        return tplControlboxNavback(this.jid);
     }
 }
 

src/plugins/controlbox/templates/controlbox.js

@@ -1,4 +1,4 @@
-import tpl_spinner from "templates/spinner.js";
+import tplSpinner from "templates/spinner.js";
 import { _converse, api, converse } from "@converse/headless/core.js";
 import { html } from 'lit';
 
@@ -8,7 +8,7 @@ const { Strophe } = converse.env;
 function whenNotConnected (o) {
     const connection_status = _converse.connfeedback.get('connection_status');
     if ([Strophe.Status.RECONNECTING, Strophe.Status.CONNECTING].includes(connection_status)) {
-        return tpl_spinner();
+        return tplSpinner();
     }
     if (o['active-form'] === 'register') {
         return html`<converse-register-panel></converse-register-panel>`;

src/plugins/controlbox/templates/loginform.js

@@ -1,5 +1,5 @@
 import 'shared/components/brand-heading.js';
-import tpl_spinner from 'templates/spinner.js';
+import tplSpinner from 'templates/spinner.js';
 import { REPORTABLE_STATUSES, PRETTY_CONNECTION_STATUS, CONNECTION_STATUS_CSS_CLASS } from '../constants.js';
 import { __ } from 'i18n';
 import { _converse, api } from "@converse/headless/core";
@@ -139,6 +139,6 @@ export default (el) => {
                 <p class="feedback-subject">${ pretty_status }</p>
                 <p class="feedback-message ${ !conn_feedback_message ? 'hidden' : '' }">${conn_feedback_message}</p>
             </div>
-            ${ (_converse.CONNECTION_STATUS[connection_status] === 'CONNECTING') ? tpl_spinner({'classes': 'hor_centered'}) : form_fields(el) }
+            ${ (_converse.CONNECTION_STATUS[connection_status] === 'CONNECTING') ? tplSpinner({'classes': 'hor_centered'}) : form_fields(el) }
         </form>`;
 }

src/plugins/controlbox/toggle.js

@@ -1,4 +1,4 @@
-import tpl_controlbox_toggle from "./templates/toggle.js";
+import tplControlboxToggle from "./templates/toggle.js";
 import { CustomElement } from 'shared/components/element.js';
 import { _converse, api } from "@converse/headless/core";
 import { showControlBox } from './utils.js';
@@ -15,7 +15,7 @@ class ControlBoxToggle extends CustomElement {
     }
 
     render () {
-        return tpl_controlbox_toggle({
+        return tplControlboxToggle({
             'onClick': showControlBox,
             'hide': !this.model?.get('closed')
         });

src/plugins/dragresize/components/dragresize.js

@@ -1,4 +1,4 @@
-import tpl_dragresize from "../templates/dragresize.js";
+import tplDragresize from "../templates/dragresize.js";
 import { CustomElement } from 'shared/components/element.js';
 import { api } from '@converse/headless/core.js';
 
@@ -6,7 +6,7 @@ import { api } from '@converse/headless/core.js';
 class ConverseDragResize extends CustomElement {
 
     render () { // eslint-disable-line class-methods-use-this
-        return tpl_dragresize();
+        return tplDragresize();
     }
 }
 

src/plugins/headlines-view/feed-list.js

@@ -1,4 +1,4 @@
-import tpl_feeds_list from './templates/feeds-list.js';
+import tplFeedsList from './templates/feeds-list.js';
 import { CustomElement } from 'shared/components/element.js';
 import { _converse, api } from '@converse/headless/core';
 
@@ -19,7 +19,7 @@ export class HeadlinesFeedsList extends CustomElement {
     }
 
     render () {
-        return tpl_feeds_list(this);
+        return tplFeedsList(this);
     }
 
     renderIfHeadline (model) {

src/plugins/headlines-view/heading.js

@@ -1,4 +1,4 @@
-import tpl_chat_head from './templates/chat-head.js';
+import tplChatHead from './templates/chat-head.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api } from "@converse/headless/core.js";
@@ -19,7 +19,7 @@ export default class HeadlinesHeading extends CustomElement {
     }
 
     render () {
-        return tpl_chat_head({
+        return tplChatHead({
             ...this.model.toJSON(),
             ...{
                 'display_name': this.model.getDisplayName(),

src/plugins/headlines-view/templates/feeds-list.js

@@ -2,7 +2,7 @@ import { __ } from 'i18n';
 import { _converse } from '@converse/headless/core';
 import { html } from "lit";
 
-const tpls_headlines_feeds_list_item = (el, feed) => {
+function tplHeadlinesFeedsListItem (el, feed) {
     const open_title = __('Click to open this server message');
     return html`
         <div class="list-item controlbox-padded d-flex flex-row"
@@ -27,7 +27,7 @@ export default (el) => {
         </div>
         <div class="list-container list-container--headline ${ feeds.length ? '' : 'hidden' }">
             <div class="items-list rooms-list headline-list">
-                ${ feeds.map(feed => tpls_headlines_feeds_list_item(el, feed)) }
+                ${ feeds.map(feed => tplHeadlinesFeedsListItem(el, feed)) }
             </div>
         </div>`
 }

src/plugins/headlines-view/view.js

@@ -1,5 +1,5 @@
 import BaseChatView from 'shared/chat/baseview.js';
-import tpl_headlines from './templates/headlines.js';
+import tplHeadlines from './templates/headlines.js';
 import { _converse, api } from '@converse/headless/core';
 
 
@@ -29,7 +29,7 @@ class HeadlinesFeedView extends BaseChatView {
     }
 
     render () {
-        return tpl_headlines(this.model);
+        return tplHeadlines(this.model);
     }
 
     async close (ev) {

src/plugins/mam-views/placeholder.js

@@ -1,5 +1,5 @@
 import { CustomElement } from 'shared/components/element.js';
-import tpl_placeholder from './templates/placeholder.js';
+import tplPlaceholder from './templates/placeholder.js';
 import { api } from "@converse/headless/core";
 import { fetchArchivedMessages } from '@converse/headless/plugins/mam/utils.js';
 
@@ -15,7 +15,7 @@ class Placeholder extends CustomElement {
     }
 
     render () {
-        return tpl_placeholder(this);
+        return tplPlaceholder(this);
     }
 
     async fetchMissingMessages (ev) {

src/plugins/mam-views/templates/placeholder.js

@@ -1,9 +1,9 @@
-import tpl_spinner from 'templates/spinner.js';
+import tplSpinner from 'templates/spinner.js';
 import { __ } from 'i18n';
 import { html } from 'lit/html.js';
 
 export default (el) => {
-    return el.model.get('fetching') ? tpl_spinner({'classes': 'hor_centered'}) :
+    return el.model.get('fetching') ? tplSpinner({'classes': 'hor_centered'}) :
         html`<a @click="${(ev) => el.fetchMissingMessages(ev)}" title="${__('Click to load missing messages')}">
             <div class="message mam-placeholder"></div>
         </a>`;

src/plugins/minimize/components/minimized-chat.js

@@ -1,4 +1,4 @@
-import tpl_trimmed_chat from "../templates/trimmed_chat.js";
+import tplTrimmedChat from "../templates/trimmed_chat.js";
 import { CustomElement } from 'shared/components/element.js';
 import { api } from "@converse/headless/core";
 import { maximize } from  '../utils.js';
@@ -23,7 +23,7 @@ export default class MinimizedChat extends CustomElement {
             'title': this.title,
             'type': this.type
         };
-        return tpl_trimmed_chat(data);
+        return tplTrimmedChat(data);
     }
 
     close (ev) {

src/plugins/minimize/view.js

@@ -1,5 +1,5 @@
 import MinimizedChatsToggle from './toggle.js';
-import tpl_chats_panel from './templates/chats-panel.js';
+import tplChatsPanel from './templates/chats-panel.js';
 import { CustomElement } from 'shared/components/element';
 import { _converse, api } from '@converse/headless/core';
 import { initStorage } from '@converse/headless/utils/storage.js';
@@ -31,7 +31,7 @@ export default class MinimizedChats extends CustomElement {
         const collapsed = this.minchats.get('collapsed');
         const data = { chats, num_unread, num_minimized, collapsed };
         data.toggle = ev => this.toggle(ev);
-        return tpl_chats_panel(data);
+        return tplChatsPanel(data);
     }
 
     async initToggle () {

src/plugins/modal/alert.js

@@ -1,5 +1,5 @@
 import BaseModal from "plugins/modal/modal.js";
-import tpl_alert_modal from "./templates/alert.js";
+import tplAlertModal from "./templates/alert.js";
 import { api } from "@converse/headless/core";
 
 
@@ -12,7 +12,7 @@ export default class Alert extends BaseModal {
     }
 
     renderModal () {
-        return tpl_alert_modal(this.model.toJSON());
+        return tplAlertModal(this.model.toJSON());
     }
 
     getModalTitle () {

src/plugins/modal/base.js

@@ -1,6 +1,6 @@
 import bootstrap from "bootstrap.native";
 import log from "@converse/headless/log";
-import tpl_alert_component from "./templates/modal-alert.js";
+import tplAlertComponent from "./templates/modal-alert.js";
 import { View } from '@converse/skeletor/src/view.js';
 import { api, converse } from "@converse/headless/core";
 import { render } from 'lit';
@@ -71,7 +71,7 @@ const BaseModal = View.extend({
         }
         // FIXME: Instead of adding the alert imperatively, we should
         // find a way to let the modal rerender with an alert message
-        render(tpl_alert_component({'type': `alert-${type}`, 'message': message}), body);
+        render(tplAlertComponent({'type': `alert-${type}`, 'message': message}), body);
         const el = body.firstElementChild;
         setTimeout(() => {
             u.addClass('fade-out', el);

src/plugins/modal/confirm.js

@@ -1,5 +1,5 @@
 import BaseModal from "plugins/modal/modal.js";
-import tpl_prompt from "./templates/prompt.js";
+import tplPrompt from "./templates/prompt.js";
 import { getOpenPromise } from '@converse/openpromise';
 import { api } from "@converse/headless/core";
 
@@ -21,7 +21,7 @@ export default class Confirm extends BaseModal {
     }
 
     renderModal () {
-        return tpl_prompt(this);
+        return tplPrompt(this);
     }
 
     getModalTitle () {

src/plugins/modal/modal.js

@@ -1,5 +1,5 @@
 import bootstrap from "bootstrap.native";
-import tpl_modal from './templates/modal.js';
+import tplModal from './templates/modal.js';
 import { ElementView } from '@converse/skeletor/src/element.js';
 import { getOpenPromise } from '@converse/openpromise';
 
@@ -29,7 +29,7 @@ class BaseModal extends ElementView {
     }
 
     toHTML () {
-        return tpl_modal(this);
+        return tplModal(this);
     }
 
     getModalTitle () { // eslint-disable-line class-methods-use-this

src/plugins/modal/templates/modal.js

@@ -1,4 +1,4 @@
-import tpl_alert_component from "./modal-alert.js";
+import tplAlertComponent from "./modal-alert.js";
 import { html } from "lit";
 import { modal_close_button, modal_header_close_button } from "plugins/modal/templates/buttons.js";
 
@@ -15,7 +15,7 @@ export default (el) => {
                 </div>
                 <div class="modal-body">
                     <span class="modal-alert">
-                        ${ alert ? tpl_alert_component({'type': `alert-${alert.type}`, 'message': alert.message}) :  ''}
+                        ${ alert ? tplAlertComponent({'type': `alert-${alert.type}`, 'message': alert.message}) :  ''}
                     </span>
                     ${ el.renderModal?.() ?? '' }
                 </div>

src/plugins/modal/templates/prompt.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { __ } from 'i18n';
 
 
-const tpl_field = (f) => html`
+const tplField = (f) => html`
     <div class="form-group">
         <label>
             ${f.label || ''}
@@ -21,7 +21,7 @@ export default (el) => {
             <div class="form-group">
                 ${ el.model.get('messages')?.map(message => html`<p>${message}</p>`) }
             </div>
-            ${ el.model.get('fields')?.map(f => tpl_field(f)) }
+            ${ el.model.get('fields')?.map(f => tplField(f)) }
             <div class="form-group">
                 <button type="submit" class="btn btn-primary">${__('OK')}</button>
                 <input type="button" class="btn btn-secondary" data-dismiss="modal" value="${__('Cancel')}"/>

src/plugins/muc-views/bottom-panel.js

@@ -1,6 +1,6 @@
 import 'shared/autocomplete/index.js';
 import BottomPanel from 'plugins/chatview/bottom-panel.js';
-import tpl_muc_bottom_panel from './templates/muc-bottom-panel.js';
+import tplMUCBottomPanel from './templates/muc-bottom-panel.js';
 import { _converse, api, converse } from "@converse/headless/core";
 import { render } from 'lit';
 
@@ -27,7 +27,7 @@ export default class MUCBottomPanel extends BottomPanel {
     render () {
         const entered = this.model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED;
         const can_edit = entered && !(this.model.features.get('moderated') && this.model.getOwnRole() === 'visitor');
-        render(tpl_muc_bottom_panel({
+        render(tplMUCBottomPanel({
             can_edit, entered,
             'model': this.model,
             'is_groupchat': true,

src/plugins/muc-views/chatarea.js

@@ -1,4 +1,4 @@
-import tpl_muc_chatarea from './templates/muc-chatarea.js';
+import tplMUCChatarea from './templates/muc-chatarea.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { api, converse } from '@converse/headless/core';
@@ -31,7 +31,7 @@ export default class MUCChatArea extends CustomElement {
     }
 
     render () {
-        return tpl_muc_chatarea({
+        return tplMUCChatarea({
             'getHelpMessages': () => this.getHelpMessages(),
             'jid': this.jid,
             'model': this.model,

src/plugins/muc-views/config-form.js

@@ -1,5 +1,5 @@
 import log from "@converse/headless/log";
-import tpl_muc_config_form from "./templates/muc-config-form.js";
+import tplMUCConfigForm from "./templates/muc-config-form.js";
 import { CustomElement } from 'shared/components/element';
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
@@ -25,7 +25,7 @@ class MUCConfigForm extends CustomElement {
     }
 
     render () {
-        return tpl_muc_config_form({
+        return tplMUCConfigForm({
             'model': this.model,
             'closeConfigForm': ev => this.closeForm(ev),
             'submitConfigForm': ev => this.submitConfigForm(ev),

src/plugins/muc-views/destroyed.js

@@ -1,4 +1,4 @@
-import tpl_muc_destroyed from './templates/muc-destroyed.js';
+import tplMUCDestroyed from './templates/muc-destroyed.js';
 import { CustomElement } from 'shared/components/element';
 import { _converse, api } from "@converse/headless/core";
 
@@ -19,7 +19,7 @@ class MUCDestroyed extends CustomElement {
     render () {
         const reason = this.model.get('destroyed_reason');
         const moved_jid = this.model.get('moved_jid');
-        return tpl_muc_destroyed({
+        return tplMUCDestroyed({
             moved_jid,
             reason,
             'onSwitch': ev => this.onSwitch(ev)

src/plugins/muc-views/disconnected.js

@@ -1,4 +1,4 @@
-import tpl_muc_disconnect from './templates/muc-disconnect.js';
+import tplMUCDisconnect from './templates/muc-disconnect.js';
 import { CustomElement } from 'shared/components/element';
 import { __ } from 'i18n';
 import { _converse, api } from "@converse/headless/core";
@@ -31,7 +31,7 @@ class MUCDisconnected extends CustomElement {
         if (reason) {
             messages.push(__('The reason given is: "%1$s".', reason));
         }
-        return tpl_muc_disconnect(messages);
+        return tplMUCDisconnect(messages);
     }
 }
 

src/plugins/muc-views/heading.js

@@ -1,7 +1,7 @@
 import './modals/muc-details.js';
 import './modals/muc-invite.js';
 import './modals/nickname.js';
-import tpl_muc_head from './templates/muc-head.js';
+import tplMUCHead from './templates/muc-head.js';
 import { CustomElement } from 'shared/components/element.js';
 import { Model } from '@converse/skeletor/src/model.js';
 import { __ } from 'i18n';
@@ -31,7 +31,7 @@ export default class MUCHeading extends CustomElement {
     }
 
     render () {
-        return (this.model && this.user_settings) ? tpl_muc_head(this) : '';
+        return (this.model && this.user_settings) ? tplMUCHead(this) : '';
     }
 
     onOccupantAdded (occupant) {

src/plugins/muc-views/message-form.js

@@ -1,5 +1,5 @@
 import MessageForm from 'plugins/chatview/message-form.js';
-import tpl_muc_message_form from './templates/message-form.js';
+import tplMUCMessageForm from './templates/message-form.js';
 import { _converse, api, converse } from "@converse/headless/core";
 import { getAutoCompleteListItem } from './utils.js';
 
@@ -12,7 +12,7 @@ export default class MUCMessageForm extends MessageForm {
     }
 
     toHTML () {
-        return tpl_muc_message_form(
+        return tplMUCMessageForm(
             Object.assign(this.model.toJSON(), {
                 'hint_value': this.querySelector('.spoiler-hint')?.value,
                 'message_value': this.querySelector('.chat-textarea')?.value,

src/plugins/muc-views/modals/add-muc.js

@@ -1,4 +1,4 @@
-import tpl_add_muc from "./templates/add-muc.js";
+import tplAddMuc from "./templates/add-muc.js";
 import BaseModal from "plugins/modal/modal.js";
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
@@ -22,7 +22,7 @@ export default class AddMUCModal extends BaseModal {
     }
 
     renderModal () {
-        return tpl_add_muc(this);
+        return tplAddMuc(this);
     }
 
     getModalTitle () { // eslint-disable-line class-methods-use-this

src/plugins/muc-views/modals/muc-details.js

@@ -1,5 +1,5 @@
 import BaseModal from "plugins/modal/modal.js";
-import tpl_muc_details from "./templates/muc-details.js";
+import tplMUCDetails from "./templates/muc-details.js";
 import { __ } from 'i18n';
 import { api } from "@converse/headless/core";
 
@@ -17,7 +17,7 @@ export default class MUCDetailsModal extends BaseModal {
     }
 
     renderModal () {
-        return tpl_muc_details(this.model);
+        return tplMUCDetails(this.model);
     }
 
     getModalTitle () { // eslint-disable-line class-methods-use-this

src/plugins/muc-views/modals/muc-invite.js

@@ -1,6 +1,6 @@
 import 'shared/autocomplete/index.js';
 import BaseModal from "plugins/modal/modal.js";
-import tpl_muc_invite_modal from "./templates/muc-invite.js";
+import tplMUCInviteModal from "./templates/muc-invite.js";
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 
@@ -14,7 +14,7 @@ export default class MUCInviteModal extends BaseModal {
     }
 
     renderModal () {
-        return tpl_muc_invite_modal(this);
+        return tplMUCInviteModal(this);
     }
 
     getModalTitle () { // eslint-disable-line class-methods-use-this

src/plugins/muc-views/modals/muc-list.js

@@ -1,9 +1,9 @@
 import BaseModal from "plugins/modal/modal.js";
 import head from "lodash-es/head";
 import log from "@converse/headless/log";
-import tpl_muc_description from "../templates/muc-description.js";
-import tpl_muc_list from "../templates/muc-list.js";
-import tpl_spinner from "templates/spinner.js";
+import tplMUCDescription from "../templates/muc-description.js";
+import tplMUCList from "../templates/muc-list.js";
+import tplSpinner from "templates/spinner.js";
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 import { getAttributes } from '@converse/headless/shared/parsers';
@@ -23,7 +23,7 @@ function insertRoomInfo (el, stanza) {
     el.querySelector('a.room-info').classList.add('selected');
     el.insertAdjacentHTML(
         'beforeEnd',
-        u.getElementFromTemplateResult(tpl_muc_description({
+        u.getElementFromTemplateResult(tplMUCDescription({
             'jid': stanza.getAttribute('from'),
             'desc': head(sizzle('field[var="muc#roominfo_description"] value', stanza))?.textContent,
             'occ': head(sizzle('field[var="muc#roominfo_occupants"] value', stanza))?.textContent,
@@ -56,7 +56,7 @@ function toggleRoomInfo (ev) {
     } else {
         parent_el.insertAdjacentElement(
             'beforeend',
-            u.getElementFromTemplateResult(tpl_spinner())
+            u.getElementFromTemplateResult(tplSpinner())
         );
         api.disco.info(ev.target.getAttribute('data-room-jid'), null)
             .then(stanza => insertRoomInfo(parent_el, stanza))
@@ -84,7 +84,7 @@ export default class MUCListModal extends BaseModal {
     }
 
     renderModal () {
-        return tpl_muc_list(
+        return tplMUCList(
             Object.assign(this.model.toJSON(), {
                 'show_form': !api.settings.get('locked_muc_domain'),
                 'server_placeholder': this.model.get('muc_domain') || __('conference.example.org'),

src/plugins/muc-views/modals/occupant.js

@@ -1,5 +1,5 @@
 import BaseModal from "plugins/modal/modal.js";
-import tpl_occupant_modal from "./templates/occupant.js";
+import tplOccupantModal from "./templates/occupant.js";
 import { _converse, api } from "@converse/headless/core";
 import { Model } from '@converse/skeletor/src/model.js';
 
@@ -28,7 +28,7 @@ export default class OccupantModal extends BaseModal {
     }
 
     renderModal () {
-        return tpl_occupant_modal(this);
+        return tplOccupantModal(this);
     }
 
     getModalTitle () {

src/plugins/muc-views/modtools.js

@@ -1,5 +1,5 @@
 import log from '@converse/headless/log.js';
-import tpl_moderator_tools from './templates/moderator-tools.js';
+import tplModeratorTools from './templates/moderator-tools.js';
 import { AFFILIATIONS, ROLES } from '@converse/headless/plugins/muc/constants.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
@@ -57,7 +57,7 @@ export default class ModeratorTools extends CustomElement {
     render () {
         if (this.muc?.occupants) {
             const occupant = this.muc.occupants.findWhere({ 'jid': _converse.bare_jid });
-            return tpl_moderator_tools({
+            return tplModeratorTools({
                 'affiliations_filter': this.affiliations_filter,
                 'alert_message': this.alert_message,
                 'alert_type': this.alert_type,

src/plugins/muc-views/muc.js

@@ -1,5 +1,5 @@
 import BaseChatView from 'shared/chat/baseview.js';
-import tpl_muc from './templates/muc.js';
+import tplMuc from './templates/muc.js';
 import { _converse, api, converse } from '@converse/headless/core';
 
 
@@ -29,7 +29,7 @@ export default class MUCView extends BaseChatView {
     }
 
     render () {
-        return tpl_muc({ 'model': this.model });
+        return tplMuc({ 'model': this.model });
     }
 
     onConnectionStatusChanged () {

src/plugins/muc-views/nickname-form.js

@@ -1,4 +1,4 @@
-import tpl_muc_nickname_form from './templates/muc-nickname-form.js';
+import tplMUCNicknameForm from './templates/muc-nickname-form.js';
 import { CustomElement } from 'shared/components/element';
 import { _converse, api } from "@converse/headless/core";
 
@@ -19,7 +19,7 @@ class MUCNicknameForm extends CustomElement {
     }
 
     render () {
-        return tpl_muc_nickname_form(this);
+        return tplMUCNicknameForm(this);
     }
 
     submitNickname (ev) {

src/plugins/muc-views/password-form.js

@@ -1,4 +1,4 @@
-import tpl_muc_password_form from "./templates/muc-password-form.js";
+import tplMUCPasswordForm from "./templates/muc-password-form.js";
 import { CustomElement } from 'shared/components/element';
 import { _converse, api } from "@converse/headless/core";
 
@@ -19,7 +19,7 @@ class MUCPasswordForm extends CustomElement {
     }
 
     render () {
-        return tpl_muc_password_form({
+        return tplMUCPasswordForm({
             'jid': this.model.get('jid'),
             'submitPassword': ev => this.submitPassword(ev),
             'validation_message':  this.model.get('password_validation_message')

src/plugins/muc-views/sidebar.js

@@ -1,5 +1,5 @@
 import 'shared/autocomplete/index.js';
-import tpl_muc_sidebar from "./templates/muc-sidebar.js";
+import tplMUCSidebar from "./templates/muc-sidebar.js";
 import { CustomElement } from 'shared/components/element.js';
 import { _converse, api, converse } from "@converse/headless/core";
 
@@ -28,7 +28,7 @@ export default class MUCSidebar extends CustomElement {
     }
 
     render () {
-        const tpl = tpl_muc_sidebar(Object.assign(
+        const tpl = tplMUCSidebar(Object.assign(
             this.model.toJSON(), {
                 'occupants': [...this.model.occupants.models],
                 'closeSidebar': ev => this.closeSidebar(ev),

src/plugins/muc-views/templates/moderator-tools.js

@@ -38,7 +38,7 @@ const affiliation_option = (o) => html`
 `;
 
 
-const tpl_set_role_form = (o) => {
+const tplSetRoleForm = (o) => {
     const i18n_change_role = __('Change role');
     const i18n_new_role = __('New Role');
     const i18n_reason = __('Reason');
@@ -85,14 +85,14 @@ const role_list_item = (o) => html`
             </li>
             <li class="list-group-item">
                 <div><strong>Role:</strong> ${o.item.role} ${o.assignable_roles.length ? role_form_toggle(o) : ''}</div>
-                ${o.assignable_roles.length ? tpl_set_role_form(o) : ''}
+                ${o.assignable_roles.length ? tplSetRoleForm(o) : ''}
             </li>
         </ul>
     </li>
 `;
 
 
-const tpl_set_affiliation_form = (o) => {
+const tplSetAffiliationForm = (o) => {
     const i18n_change_affiliation = __('Change affiliation');
     const i18n_new_affiliation = __('New affiliation');
     const i18n_reason = __('Reason');
@@ -139,14 +139,14 @@ const affiliation_list_item = (o) => html`
             </li>
             <li class="list-group-item">
                 <div><strong>Affiliation:</strong> ${o.item.affiliation} ${o.assignable_affiliations.length ? affiliation_form_toggle(o) : ''}</div>
-                ${o.assignable_affiliations.length ? tpl_set_affiliation_form(o) : ''}
+                ${o.assignable_affiliations.length ? tplSetAffiliationForm(o) : ''}
             </li>
         </ul>
     </li>
 `;
 
 
-const tpl_navigation = (o) => html`
+const tplNavigation = (o) => html`
     <ul class="nav nav-pills justify-content-center">
         <li role="presentation" class="nav-item">
             <a class="nav-link ${o.tab === "affiliations" ? "active" : ""}"
@@ -190,7 +190,7 @@ export default (o) => {
     const show_both_tabs = o.queryable_roles.length && o.queryable_affiliations.length;
     return html`
         ${o.alert_message ? html`<div class="alert alert-${o.alert_type}" role="alert">${o.alert_message}</div>` : '' }
-        ${ show_both_tabs ? tpl_navigation(o) : '' }
+        ${ show_both_tabs ? tplNavigation(o) : '' }
 
         <div class="tab-content">
 

src/plugins/muc-views/templates/muc-bottom-panel.js

@@ -6,7 +6,7 @@ import { api, converse } from "@converse/headless/core";
 import { html } from "lit";
 
 
-const tpl_can_edit = (o) => {
+const tplCanEdit = (o) => {
     const unread_msgs = __('You have unread messages');
     const message_limit = api.settings.get('message_limit');
     const show_call_button = api.settings.get('visible_toolbar_buttons').call;
@@ -41,7 +41,7 @@ export default (o) => {
         return html`
             ${ o.model.ui.get('scrolled') && o.model.get('num_unread_general') ?
                     html`<div class="new-msgs-indicator" @click=${ev => o.viewUnreadMessages(ev)}>▼ ${ unread_msgs } ▼</div>` : '' }
-            ${(o.can_edit) ? tpl_can_edit(o) : html`<span class="muc-bottom-panel muc-bottom-panel--muted">${i18n_not_allowed}</span>`}`;
+            ${(o.can_edit) ? tplCanEdit(o) : html`<span class="muc-bottom-panel muc-bottom-panel--muted">${i18n_not_allowed}</span>`}`;
     } else if (conn_status == converse.ROOMSTATUS.NICKNAME_REQUIRED) {
         if (api.settings.get('muc_show_logs_before_join')) {
             return html`<span class="muc-bottom-panel muc-bottom-panel--nickname">

src/plugins/muc-views/templates/muc-config-form.js

@@ -1,4 +1,4 @@
-import tpl_spinner from 'templates/spinner.js';
+import tplSpinner from 'templates/spinner.js';
 import { __ } from 'i18n';
 import { api, converse } from "@converse/headless/core";
 import { html } from "lit";
@@ -39,7 +39,7 @@ export default (o) => {
             <fieldset class="form-group">
                 <legend class="centered">${title}</legend>
                 ${ (title !== instructions) ? html`<p class="form-help">${instructions}</p>` : '' }
-                ${ fields.length ? fields : tpl_spinner({'classes': 'hor_centered'}) }
+                ${ fields.length ? fields : tplSpinner({'classes': 'hor_centered'}) }
             </fieldset>
             ${ fields.length ? html`
                 <fieldset>

src/plugins/muc-views/templates/muc-destroyed.js

@@ -1,7 +1,7 @@
 import { __ } from 'i18n';
 import { html } from "lit";
 
-const tpl_moved = (o) => {
+const tplMoved = (o) => {
     const i18n_moved = __('The conversation has moved to a new address. Click the link below to enter.');
     return html`
         <p class="moved-label">${i18n_moved}</p>
@@ -18,6 +18,6 @@ export default (o) => {
             <h3 class="alert-heading disconnect-msg">${i18n_non_existent}</h3>
         </div>
         ${ o.reason ? html`<p class="destroyed-reason">${i18n_reason}</p>` : '' }
-        ${ o.moved_jid ? tpl_moved(o) : '' }
+        ${ o.moved_jid ? tplMoved(o) : '' }
     `;
 }

src/plugins/muc-views/templates/muc-list.js

@@ -27,7 +27,7 @@ const form = (o) => {
 }
 
 
-const tpl_item = (o, item) => {
+const tplItem = (o, item) => {
     const i18n_info_title = __('Show more information on this groupchat');
     const i18n_open_title = __('Click to open this groupchat');
     return html`
@@ -56,7 +56,7 @@ export default (o) => {
         <ul class="available-chatrooms list-group">
             ${ o.loading_items ? html`<li class="list-group-item"> ${ spinner() } </li>` : '' }
             ${ o.feedback_text ? html`<li class="list-group-item active">${ o.feedback_text }</li>` : '' }
-            ${ repeat(o.items, (item) => item.jid, (item) => tpl_item(o, item)) }
+            ${ repeat(o.items, (item) => item.jid, (item) => tplItem(o, item)) }
         </ul>
     `;
 }

src/plugins/muc-views/templates/muc-sidebar.js

@@ -1,4 +1,4 @@
-import tpl_occupant from "./occupant.js";
+import tplOccupant from "./occupant.js";
 import { __ } from 'i18n';
 import { html } from "lit";
 import { repeat } from 'lit/directives/repeat.js';
@@ -16,6 +16,6 @@ export default (o) => {
             </div>
         </div>
         <div class="dragresize dragresize-occupants-left"></div>
-        <ul class="occupant-list">${ repeat(o.occupants, (occ) => occ.get('jid'), (occ) => tpl_occupant(occ, o)) }</ul>
+        <ul class="occupant-list">${ repeat(o.occupants, (occ) => occ.get('jid'), (occ) => tplOccupant(occ, o)) }</ul>
     `;
 }

src/plugins/muc-views/utils.js

@@ -1,7 +1,7 @@
 import './modals/occupant.js';
 import './modals/moderator-tools.js';
 import log from "@converse/headless/log";
-import tpl_spinner from 'templates/spinner.js';
+import tplSpinner from 'templates/spinner.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 import { html } from "lit";
@@ -82,7 +82,7 @@ export function getChatRoomBodyTemplate (o) {
         return html`
             ${ conn_status == RS.PASSWORD_REQUIRED ? html`<converse-muc-password-form class="muc-form-container" jid="${jid}"></converse-muc-password-form>` : '' }
             ${ conn_status == RS.ENTERED ? html`<converse-muc-chatarea jid="${jid}"></converse-muc-chatarea>` : '' }
-            ${ conn_status == RS.CONNECTING ? tpl_spinner() : '' }
+            ${ conn_status == RS.CONNECTING ? tplSpinner() : '' }
             ${ conn_status == RS.NICKNAME_REQUIRED ? getNicknameRequiredTemplate(o.model) : '' }
             ${ conn_status == RS.DISCONNECTED ? html`<converse-muc-disconnected jid="${jid}"></converse-muc-disconnected>` : '' }
             ${ conn_status == RS.BANNED ? html`<converse-muc-disconnected jid="${jid}"></converse-muc-disconnected>` : '' }

src/plugins/omemo/fingerprints.js

@@ -1,4 +1,4 @@
-import tpl_fingerprints from './templates/fingerprints.js';
+import tplFingerprints from './templates/fingerprints.js';
 import { CustomElement } from 'shared/components/element.js';
 import { api } from "@converse/headless/core";
 
@@ -21,7 +21,7 @@ export class Fingerprints extends CustomElement {
     }
 
     render () {
-        return this.devicelist ? tpl_fingerprints(this) : '';
+        return this.devicelist ? tplFingerprints(this) : '';
     }
 
     toggleDeviceTrust (ev) {

src/plugins/omemo/profile.js

@@ -1,6 +1,6 @@
 import log from '@converse/headless/log';
-import tpl_profile from './templates/profile.js';
-import tpl_spinner from "templates/spinner.js";
+import tplProfile from './templates/profile.js';
+import tplSpinner from "templates/spinner.js";
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
@@ -28,7 +28,7 @@ export class Profile extends CustomElement {
     }
 
     render () {
-        return this.devicelist ? tpl_profile(this) : tpl_spinner();
+        return this.devicelist ? tplProfile(this) : tplSpinner();
     }
 
     selectAll (ev) {  // eslint-disable-line class-methods-use-this

src/plugins/omemo/utils.js

@@ -2,10 +2,10 @@
 import concat from 'lodash-es/concat';
 import difference from 'lodash-es/difference';
 import log from '@converse/headless/log';
-import tpl_audio from 'templates/audio.js';
-import tpl_file from 'templates/file.js';
-import tpl_image from 'templates/image.js';
-import tpl_video from 'templates/video.js';
+import tplAudio from 'templates/audio.js';
+import tplFile from 'templates/file.js';
+import tplImage from 'templates/image.js';
+import tplVideo from 'templates/video.js';
 import { KEY_ALGO, UNTRUSTED, TAG_LENGTH } from './consts.js';
 import { MIMETYPES_MAP } from 'utils/file.js';
 import { __ } from 'i18n';
@@ -204,17 +204,17 @@ function getTemplateForObjectURL (uri, obj_url, richtext) {
 
     const file_url = uri.toString();
     if (isImageURL(file_url)) {
-        return tpl_image({
+        return tplImage({
             'src': obj_url,
             'onClick': richtext.onImgClick,
             'onLoad': richtext.onImgLoad
         });
     } else if (isAudioURL(file_url)) {
-        return tpl_audio(obj_url);
+        return tplAudio(obj_url);
     } else if (isVideoURL(file_url)) {
-        return tpl_video(obj_url);
+        return tplVideo(obj_url);
     } else {
-        return tpl_file(obj_url, uri.filename());
+        return tplFile(obj_url, uri.filename());
     }
 
 }

src/plugins/profile/modals/chat-status.js

@@ -1,5 +1,5 @@
 import BaseModal from "plugins/modal/modal.js";
-import tpl_chat_status_modal from "../templates/chat-status-modal.js";
+import tplChatStatusModal from "../templates/chat-status-modal.js";
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 
@@ -17,7 +17,7 @@ export default class ChatStatusModal extends BaseModal {
     }
 
     renderModal () {
-        return tpl_chat_status_modal(this);
+        return tplChatStatusModal(this);
     }
 
     getModalTitle () { // eslint-disable-line class-methods-use-this

src/plugins/profile/modals/profile.js

@@ -1,6 +1,6 @@
 import BaseModal from "plugins/modal/modal.js";
 import log from "@converse/headless/log";
-import tpl_profile_modal from "../templates/profile_modal.js";
+import tplProfileModal from "../templates/profile_modal.js";
 import Compress from 'client-compress';
 import { __ } from 'i18n';
 import { _converse, api } from "@converse/headless/core";
@@ -33,7 +33,7 @@ export default class ProfileModal extends BaseModal {
     }
 
     renderModal () {
-        return tpl_profile_modal(this);
+        return tplProfileModal(this);
     }
 
     getModalTitle () { // eslint-disable-line class-methods-use-this

src/plugins/profile/modals/templates/user-settings.js

@@ -5,7 +5,7 @@ import { html } from "lit";
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 
-const tpl_navigation = (el) => {
+const tplNavigation = (el) => {
     const i18n_about = __('About');
     const i18n_commands = __('Commands');
     return html`
@@ -53,7 +53,7 @@ export default (el) => {
     const show_both_tabs = show_client_info && allow_adhoc_commands;
 
     return html`
-        ${ show_both_tabs ? tpl_navigation(el) : '' }
+        ${ show_both_tabs ? tplNavigation(el) : '' }
 
         <div class="tab-content">
             ${ show_client_info ? html`

src/plugins/profile/modals/user-settings.js

@@ -1,5 +1,5 @@
 import BaseModal from "plugins/modal/modal.js";
-import tpl_user_settings_modal from "./templates/user-settings.js";
+import tplUserSettingsModal from "./templates/user-settings.js";
 import { __ } from 'i18n';
 import { api } from "@converse/headless/core";
 
@@ -20,7 +20,7 @@ export default class UserSettingsModal extends BaseModal {
     }
 
     renderModal () {
-        return tpl_user_settings_modal(this);
+        return tplUserSettingsModal(this);
     }
 
     getModalTitle () { // eslint-disable-line class-methods-use-this

src/plugins/profile/password-reset.js

@@ -1,5 +1,5 @@
 import log from '@converse/headless/log';
-import tpl_password_reset from './templates/password-reset.js';
+import tplPasswordReset from './templates/password-reset.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from '@converse/headless/core';
@@ -22,7 +22,7 @@ class PasswordReset extends CustomElement {
     }
 
     render () {
-        return tpl_password_reset(this);
+        return tplPasswordReset(this);
     }
 
     checkPasswordsMatch (ev) {

src/plugins/profile/statusview.js

@@ -1,4 +1,4 @@
-import tpl_profile from './templates/profile.js';
+import tplProfile from './templates/profile.js';
 import { CustomElement } from 'shared/components/element.js';
 import { _converse, api } from '@converse/headless/core';
 
@@ -11,7 +11,7 @@ class Profile extends CustomElement {
     }
 
     render () {
-        return tpl_profile(this);
+        return tplProfile(this);
     }
 
     showProfileModal (ev) {

src/plugins/profile/templates/profile.js

@@ -5,14 +5,14 @@ import { getPrettyStatus, logOut } from '../utils.js';
 import { html } from "lit";
 
 
-function tpl_signout () {
+function tplSignout () {
     const i18n_logout = __('Log out');
     return html`<a class="controlbox-heading__btn logout align-self-center" title="${i18n_logout}" @click=${logOut}>
         <converse-icon class="fa fa-sign-out-alt" size="1em"></converse-icon>
     </a>`
 }
 
-function tpl_user_settings_button (o) {
+function tplUserSettingsButton (o) {
     const i18n_details = __('Show details about this chat client');
     return html`<a class="controlbox-heading__btn show-client-info align-self-center" title="${i18n_details}" @click=${o.showUserSettingsModal}>
         <converse-icon class="fa fa-cog" size="1em"></converse-icon>
@@ -45,8 +45,8 @@ export default (el) => {
                         height="40" width="40"></converse-avatar>
                 </a>
                 <span class="username w-100 align-self-center">${fullname}</span>
-                ${show_settings_button  ? tpl_user_settings_button(el) : ''}
-                ${api.settings.get('allow_logout') ? tpl_signout() : ''}
+                ${show_settings_button  ? tplUserSettingsButton(el) : ''}
+                ${api.settings.get('allow_logout') ? tplSignout() : ''}
             </div>
             <div class="d-flex xmpp-status">
                 <a class="change-status" title="${i18n_change_status}" data-toggle="modal" data-target="#changeStatusModal" @click=${el.showStatusChangeModal}>

src/plugins/profile/templates/profile_modal.js

@@ -4,7 +4,7 @@ import { _converse } from  "@converse/headless/core";
 import { html } from "lit";
 
 
-const tpl_omemo_page = (el) => html`
+const tplOmemoPage = (el) => html`
     <div class="tab-pane ${ el.tab === 'omemo' ? 'active' : ''}" id="omemo-tabpanel" role="tabpanel" aria-labelledby="omemo-tab">
         ${ el.tab === 'omemo' ? html`<converse-omemo-profile></converse-omemo-profile>` : '' }
     </div>`;
@@ -114,7 +114,7 @@ export default (el) => {
                 ${ el.tab === 'passwordreset' ? html`<converse-change-password-form></converse-change-password-form>` : '' }
             </div>
 
-            ${ _converse.pluggable.plugins['converse-omemo']?.enabled(_converse) ? tpl_omemo_page(el) : '' }
+            ${ _converse.pluggable.plugins['converse-omemo']?.enabled(_converse) ? tplOmemoPage(el) : '' }
         </div>
     </div>`;
 }

src/plugins/register/panel.js

@@ -1,10 +1,10 @@
 import log from "@converse/headless/log";
 import pick from "lodash-es/pick";
-import tpl_form_input from "templates/form_input.js";
-import tpl_form_url from "templates/form_url.js";
-import tpl_form_username from "templates/form_username.js";
-import tpl_register_panel from "./templates/register_panel.js";
-import tpl_spinner from "templates/spinner.js";
+import tplFormInput from "templates/form_input.js";
+import tplFormUrl from "templates/form_url.js";
+import tplFormUsername from "templates/form_username.js";
+import tplRegisterPanel from "./templates/register_panel.js";
+import tplSpinner from "templates/spinner.js";
 import { webForm2xForm } from "@converse/headless/utils/form";
 import { ElementView } from "@converse/skeletor/src/element";
 import { __ } from 'i18n';
@@ -51,7 +51,7 @@ class RegisterPanel extends ElementView {
     }
 
     render () {
-        render(tpl_register_panel({
+        render(tplRegisterPanel({
             'domain': this.domain,
             'fields': this.fields,
             'form_fields': this.form_fields,
@@ -241,7 +241,7 @@ class RegisterPanel extends ElementView {
 
     showSpinner () {
         const form = this.querySelector('form');
-        render(tpl_spinner(), form);
+        render(tplSpinner(), form);
         return this;
     }
 
@@ -292,7 +292,7 @@ class RegisterPanel extends ElementView {
     getLegacyFormFields () {
         const input_fields = Object.keys(this.fields).map(key => {
             if (key === "username") {
-                return tpl_form_username({
+                return tplFormUsername({
                     'domain': ` @${this.domain}`,
                     'name': key,
                     'type': "text",
@@ -301,7 +301,7 @@ class RegisterPanel extends ElementView {
                     'required': true
                 });
             } else {
-                return tpl_form_input({
+                return tplFormInput({
                     'label': key,
                     'name': key,
                     'placeholder': key,
@@ -311,7 +311,7 @@ class RegisterPanel extends ElementView {
                 })
             }
         });
-        const urls = this.urls.map(u => tpl_form_url({'label': '', 'value': u}));
+        const urls = this.urls.map(u => tplFormUrl({'label': '', 'value': u}));
         return [...input_fields, ...urls];
     }
 

src/plugins/register/templates/register_panel.js

@@ -1,16 +1,16 @@
-import tpl_registration_form from './registration_form.js';
-import tpl_spinner from 'templates/spinner.js';
+import tplRegistrationForm from './registration_form.js';
+import tplSpinner from 'templates/spinner.js';
 import { __ } from 'i18n';
 import { api } from '@converse/headless/core';
 import { html } from 'lit';
 
-const tpl_form_request = () => {
+const tplFormRequest = () => {
     const default_domain = api.settings.get('registration_domain');
     const i18n_fetch_form = __("Hold tight, we're fetching the registration form…");
     const i18n_cancel = __('Cancel');
     return html`
         <form id="converse-register" class="converse-form no-scrolling">
-            ${tpl_spinner({ 'classes': 'hor_centered' })}
+            ${tplSpinner({ 'classes': 'hor_centered' })}
             <p class="info">${i18n_fetch_form}</p>
             ${default_domain
                 ? ''
@@ -21,7 +21,7 @@ const tpl_form_request = () => {
     `;
 };
 
-const tpl_domain_input = () => {
+const tplDomainInput = () => {
     const domain_placeholder = api.settings.get('domain_placeholder');
     const i18n_providers = __('Tip: A list of public XMPP providers is available');
     const i18n_providers_link = __('here');
@@ -35,7 +35,7 @@ const tpl_domain_input = () => {
     `;
 };
 
-const tpl_fetch_form_buttons = () => {
+const tplFetchFormButtons = () => {
     const i18n_register = __('Fetch registration form');
     const i18n_existing_account = __('Already have a chat account?');
     const i18n_login = __('Log in here');
@@ -50,7 +50,7 @@ const tpl_fetch_form_buttons = () => {
     `;
 };
 
-const tpl_choose_provider = () => {
+const tplChooseProvider = () => {
     const default_domain = api.settings.get('registration_domain');
     const i18n_create_account = __('Create your account');
     const i18n_choose_provider = __('Please enter the XMPP provider to register with:');
@@ -60,9 +60,9 @@ const tpl_choose_provider = () => {
             <div class="form-group">
                 <label>${i18n_choose_provider}</label>
                 <div class="form-errors hidden"></div>
-                ${default_domain ? default_domain : tpl_domain_input()}
+                ${default_domain ? default_domain : tplDomainInput()}
             </div>
-            ${default_domain ? '' : tpl_fetch_form_buttons()}
+            ${default_domain ? '' : tplFetchFormButtons()}
         </form>
     `;
 };
@@ -74,8 +74,8 @@ const REGISTRATION_FORM = 2;
 export default o => {
     return html`
         <converse-brand-logo></converse-brand-logo>
-        ${o.model.get('registration_status') === CHOOSE_PROVIDER ? tpl_choose_provider() : ''}
-        ${o.model.get('registration_status') === FETCHING_FORM ? tpl_form_request() : ''}
-        ${o.model.get('registration_status') === REGISTRATION_FORM ? tpl_registration_form(o) : ''}
+        ${o.model.get('registration_status') === CHOOSE_PROVIDER ? tplChooseProvider() : ''}
+        ${o.model.get('registration_status') === FETCHING_FORM ? tplFormRequest() : ''}
+        ${o.model.get('registration_status') === REGISTRATION_FORM ? tplRegistrationForm(o) : ''}
     `;
 };

src/plugins/roomslist/view.js

@@ -1,6 +1,6 @@
 import 'plugins/muc-views/modals/muc-details.js';
 import RoomsListModel from './model.js';
-import tpl_roomslist from "./templates/roomslist.js";
+import tplRoomslist from "./templates/roomslist.js";
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
@@ -26,7 +26,7 @@ export class RoomsList extends CustomElement {
     }
 
     render () {
-        return tpl_roomslist(this);
+        return tplRoomslist(this);
     }
 
     renderIfChatRoom (model) {

src/plugins/rootview/root.js

@@ -1,4 +1,4 @@
-import tpl_root from "./templates/root.js";
+import tplRoot from "./templates/root.js";
 import { api } from '@converse/headless/core';
 import { CustomElement } from 'shared/components/element.js';
 import { getAppSettings } from '@converse/headless/shared/settings/utils.js';
@@ -17,7 +17,7 @@ import './styles/root.scss';
 export default class ConverseRoot extends CustomElement {
 
     render () { // eslint-disable-line class-methods-use-this
-        return tpl_root();
+        return tplRoot();
     }
 
     initialize () {

src/plugins/rosterview/contactview.js

@@ -1,6 +1,6 @@
 import log from "@converse/headless/log.js";
-import tpl_requesting_contact from "./templates/requesting_contact.js";
-import tpl_roster_item from "./templates/roster_item.js";
+import tplRequestingContact from "./templates/requesting_contact.js";
+import tplRosterItem from "./templates/roster_item.js";
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api } from "@converse/headless/core";
@@ -24,7 +24,7 @@ export default class RosterContact extends CustomElement {
     render () {
         if (this.model.get('requesting') === true) {
             const display_name = this.model.getDisplayName();
-            return tpl_requesting_contact(
+            return tplRequestingContact(
                 Object.assign(this.model.toJSON(), {
                     display_name,
                     'openChat': ev => this.openChat(ev),
@@ -35,7 +35,7 @@ export default class RosterContact extends CustomElement {
                 })
             );
         } else {
-            return tpl_roster_item(this, this.model);
+            return tplRosterItem(this, this.model);
         }
     }
 

src/plugins/rosterview/filterview.js

@@ -1,5 +1,5 @@
 import debounce from "lodash-es/debounce";
-import tpl_roster_filter from "./templates/roster_filter.js";
+import tplRosterFilter from "./templates/roster_filter.js";
 import { CustomElement } from 'shared/components/element.js';
 import { _converse, api } from "@converse/headless/core";
 import { ancestor } from 'utils/html.js';
@@ -28,7 +28,7 @@ export class RosterFilterView extends CustomElement {
 
     render () {
         return this.model ?
-        tpl_roster_filter(
+        tplRosterFilter(
             Object.assign(this.model.toJSON(), {
                 visible: this.shouldBeVisible(),
                 changeChatStateFilter: ev => this.changeChatStateFilter(ev),

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

@@ -2,7 +2,7 @@ import 'shared/autocomplete/index.js';
 import BaseModal from "plugins/modal/modal.js";
 import compact from 'lodash-es/compact';
 import debounce from 'lodash-es/debounce';
-import tpl_add_contact_modal from "./templates/add-contact.js";
+import tplAddContactModal from "./templates/add-contact.js";
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 
@@ -19,7 +19,7 @@ export default class AddContactModal extends BaseModal {
     }
 
     renderModal () {
-        return tpl_add_contact_modal(this);
+        return tplAddContactModal(this);
     }
 
     getModalTitle () { // eslint-disable-line class-methods-use-this

src/plugins/rosterview/rosterview.js

@@ -1,4 +1,4 @@
-import tpl_roster from "./templates/roster.js";
+import tplRoster from "./templates/roster.js";
 import { CustomElement } from 'shared/components/element.js';
 import { Model } from '@converse/skeletor/src/model.js';
 import { _converse, api } from "@converse/headless/core";
@@ -40,7 +40,7 @@ export default class RosterView extends CustomElement {
     }
 
     render () {
-        return tpl_roster(this);
+        return tplRoster(this);
     }
 
     showAddContactModal (ev) { // eslint-disable-line class-methods-use-this

src/plugins/rosterview/templates/roster.js

@@ -1,4 +1,4 @@
-import tpl_group from "./group.js";
+import tplGroup from "./group.js";
 import { __ } from 'i18n';
 import { _converse, api } from "@converse/headless/core";
 import { contactsComparator, groupsComparator } from '@converse/headless/plugins/roster/utils.js';
@@ -50,7 +50,7 @@ export default (el) => {
             ${ repeat(groupnames, (n) => n, (name) => {
                 const contacts = contacts_map[name].filter(c => shouldShowContact(c, name));
                 contacts.sort(contactsComparator);
-                return contacts.length ? tpl_group({ contacts, name }) : '';
+                return contacts.length ? tplGroup({ contacts, name }) : '';
             }) }
         </div>
     `;

src/plugins/rosterview/templates/roster_item.js

@@ -3,7 +3,7 @@ import { api } from "@converse/headless/core.js";
 import { html } from "lit";
 import { STATUSES } from '../constants.js';
 
-const tpl_remove_link = (el, item) => {
+const tplRemoveLink = (el, item) => {
    const display_name = item.getDisplayName();
    const i18n_remove = __('Click to remove %1$s as a contact', display_name);
    return html`
@@ -46,5 +46,5 @@ export default  (el, item) => {
       ${ num_unread ? html`<span class="msgs-indicator">${ num_unread }</span>` : '' }
       <span class="contact-name contact-name--${el.show} ${ num_unread ? 'unread-msgs' : ''}">${display_name}</span>
    </a>
-   ${ api.settings.get('allow_contact_removal') ? tpl_remove_link(el, item) : '' }`;
+   ${ api.settings.get('allow_contact_removal') ? tplRemoveLink(el, item) : '' }`;
 }

src/shared/avatar/avatar.js

@@ -1,5 +1,5 @@
 import { CustomElement } from 'shared/components/element.js';
-import tpl_avatar from './templates/avatar.js';
+import tplAvatar from './templates/avatar.js';
 import { _converse, api } from '@converse/headless/core';
 
 import './avatar.scss';
@@ -31,7 +31,7 @@ export default class Avatar extends CustomElement {
             const image_data = this.data?.image || _converse.DEFAULT_IMAGE;
             image = "data:" + image_type + ";base64," + image_data;
         }
-        return tpl_avatar({
+        return tplAvatar({
             'classes': this.getAttribute('class'),
             'height': this.height,
             'width': this.width,

src/shared/chat/chat-content.js

@@ -1,5 +1,5 @@
 import './message-history';
-import tpl_spinner from "templates/spinner.js";
+import tplSpinner from "templates/spinner.js";
 import { CustomElement } from 'shared/components/element.js';
 import { api } from '@converse/headless/core';
 import { html } from 'lit';
@@ -57,7 +57,7 @@ export default class ChatContent extends CustomElement {
                 .model=${this.model}
                 .messages=${[...this.model.messages.models]}>
             </converse-message-history>
-            ${ this.model.ui?.get('chat-content-spinner-top') ? tpl_spinner() : '' }
+            ${ this.model.ui?.get('chat-content-spinner-top') ? tplSpinner() : '' }
         `;
     }
 

src/shared/chat/emoji-picker-content.js

@@ -1,7 +1,7 @@
 import { CustomElement } from 'shared/components/element.js';
 import { _converse, converse, api } from "@converse/headless/core";
 import { html } from "lit";
-import { tpl_all_emojis, tpl_search_results } from "./templates/emoji-picker.js";
+import { tplAllEmojis, tplSearchResults } from "./templates/emoji-picker.js";
 import { getTonedEmojis } from './utils.js';
 
 const { sizzle } = converse.env;
@@ -28,8 +28,8 @@ export default class EmojiPickerContent extends CustomElement {
       }
       return html`
           <div class="emoji-picker__lists">
-              ${tpl_search_results(props)}
-              ${tpl_all_emojis(props)}
+              ${tplSearchResults(props)}
+              ${tplAllEmojis(props)}
           </div>
       `;
   }

src/shared/chat/emoji-picker.js

@@ -6,7 +6,7 @@ import { CustomElement } from 'shared/components/element.js';
 import { KEYCODES } from '@converse/headless/shared/constants.js';
 import { _converse, api, converse } from "@converse/headless/core";
 import { getTonedEmojis } from './utils.js';
-import { tpl_emoji_picker } from "./templates/emoji-picker.js";
+import { tplEmojiPicker } from "./templates/emoji-picker.js";
 
 import './styles/emoji.scss';
 
@@ -50,7 +50,7 @@ export default class EmojiPicker extends CustomElement {
     }
 
     render () {
-        return tpl_emoji_picker({
+        return tplEmojiPicker({
             'chatview': this.chatview,
             'current_category': this.current_category,
             'current_skintone': this.current_skintone,

src/shared/chat/message-limit.js

@@ -1,4 +1,4 @@
-import tpl_message_limit from './templates/message-limit.js';
+import tplMessageLimit from './templates/message-limit.js';
 import { CustomElement } from 'shared/components/element.js';
 import { api } from '@converse/headless/core';
 
@@ -19,7 +19,7 @@ export default class MessageLimitIndicator extends CustomElement {
         const limit = api.settings.get('message_limit');
         if (!limit) return '';
         const chars = this.model.get('draft') || '';
-        return tpl_message_limit(limit - chars.length);
+        return tplMessageLimit(limit - chars.length);
     }
 }
 

src/shared/chat/message.js

@@ -5,14 +5,14 @@ import 'shared/modals/message-versions.js';
 import 'shared/modals/user-details.js';
 import 'shared/registry';
 import 'plugins/muc-views/modals/occupant.js';
-import tpl_file_progress from './templates/file-progress.js';
+import tplFileProgress from './templates/file-progress.js';
 import log from '@converse/headless/log';
-import tpl_info_message from './templates/info-message.js';
-import tpl_mep_message from 'plugins/muc-views/templates/mep-message.js';
-import tpl_message from './templates/message.js';
-import tpl_message_text from './templates/message-text.js';
-import tpl_retraction from './templates/retraction.js';
-import tpl_spinner from 'templates/spinner.js';
+import tplInfoMessage from './templates/info-message.js';
+import tplMepMessage from 'plugins/muc-views/templates/mep-message.js';
+import tplMessage from './templates/message.js';
+import tplMessageText from './templates/message-text.js';
+import tplRetraction from './templates/retraction.js';
+import tplSpinner from 'templates/spinner.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from  '@converse/headless/core';
@@ -74,7 +74,7 @@ export default class Message extends CustomElement {
         if (!this.model) {
             return '';
         } else if (this.show_spinner) {
-            return tpl_spinner();
+            return tplSpinner();
         } else if (this.model.get('file') && this.model.get('upload') !== _converse.SUCCESS) {
             return this.renderFileProgress();
         } else if (['mep'].includes(this.model.get('type'))) {
@@ -94,19 +94,19 @@ export default class Message extends CustomElement {
     }
 
     renderRetraction () {
-        return tpl_retraction(this);
+        return tplRetraction(this);
     }
 
     renderMessageText () {
-        return tpl_message_text(this);
+        return tplMessageText(this);
     }
 
     renderMEPMessage () {
-        return tpl_mep_message(this);
+        return tplMepMessage(this);
     }
 
     renderInfoMessage () {
-        return tpl_info_message(this);
+        return tplInfoMessage(this);
     }
 
     renderFileProgress () {
@@ -114,11 +114,11 @@ export default class Message extends CustomElement {
             // Can happen when file upload failed and page was reloaded
             return '';
         }
-        return tpl_file_progress(this);
+        return tplFileProgress(this);
     }
 
     renderChatMessage () {
-        return tpl_message(this, this.getProps());
+        return tplMessage(this, this.getProps());
     }
 
     shouldShowAvatar () {

src/shared/chat/templates/emoji-picker.js

@@ -33,7 +33,7 @@ const emoji_item = (o) => {
     `;
 }
 
-export const tpl_search_results = (o) => {
+export const tplSearchResults = (o) => {
     const i18n_search_results = __('Search results');
     return html`
         <span ?hidden=${!o.query} class="emoji-lists__container emojis-lists__container--search">
@@ -53,7 +53,7 @@ const emojis_for_category = (o) => {
         </ul>`;
 }
 
-export const tpl_all_emojis = (o) => {
+export const tplAllEmojis = (o) => {
     const cats = api.settings.get('emoji_categories');
     return html`
         <span ?hidden=${o.query} class="emoji-lists__container emoji-lists__container--browse">
@@ -70,7 +70,7 @@ const skintone_emoji = (o) => {
 }
 
 
-export const tpl_emoji_picker = (o) => {
+export const tplEmojiPicker = (o) => {
     const i18n_search = __('Search');
     const skintones = ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'];
     return html`

src/shared/chat/templates/message-text.js

@@ -2,12 +2,12 @@ import { __ } from 'i18n/index.js';
 import { getOOBURLMarkup } from 'utils/html.js';
 import { html } from 'lit';
 
-const tpl_edited_icon = (el) => {
+const tplEditedIcon = (el) => {
     const i18n_edited = __('This message has been edited');
     return html`<converse-icon title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${el.showMessageVersionsModal} size="1em"></converse-icon>`;
 }
 
-const tpl_checkmark = () => {
+const tplCheckmark = () => {
     return html`<converse-icon size="1em" color="var(--chat-color)" class="fa fa-check chat-msg__receipt"></converse-icon>`
 }
 
@@ -17,7 +17,7 @@ export default (el) => {
     const is_groupchat_message = (el.model.get('type') === 'groupchat');
     const i18n_show_less = __('Show less');
 
-    const tpl_spoiler_hint = html`
+    const tplSpoilerHint = html`
         <div class="chat-msg__spoiler-hint">
             <span class="spoiler-hint">${el.model.get('spoiler_hint')}</span>
             <a class="badge badge-info spoiler-toggle" href="#" @click=${el.toggleSpoilerMessage}>
@@ -32,7 +32,7 @@ export default (el) => {
     const show_oob = el.model.get('oob_url') && text !== el.model.get('oob_url');
 
     return html`
-        ${ el.model.get('is_spoiler') ? tpl_spoiler_hint : '' }
+        ${ el.model.get('is_spoiler') ? tplSpoilerHint : '' }
         ${ el.model.get('subject') ? html`<div class="chat-msg__subject">${el.model.get('subject')}</div>` : '' }
         <span class="chat-msg__body--wrapper">
             <converse-chat-message-body
@@ -41,8 +41,8 @@ export default (el) => {
                 hide_url_previews=${el.model.get('hide_url_previews')}
                 ?is_me_message=${el.model.isMeCommand()}
                 text="${text}"></converse-chat-message-body>
-            ${ (el.model.get('received') && !el.model.isMeCommand() && !is_groupchat_message) ? tpl_checkmark() : '' }
-            ${ (el.model.get('edited')) ? tpl_edited_icon(el) : '' }
+            ${ (el.model.get('received') && !el.model.isMeCommand() && !is_groupchat_message) ? tplCheckmark() : '' }
+            ${ (el.model.get('edited')) ? tplEditedIcon(el) : '' }
         </span>
         ${ show_oob ? html`<div class="chat-msg__media">${getOOBURLMarkup(el.model.get('oob_url'))}</div>` : '' }
         <div class="chat-msg__error">${ el.model.get('error_text') || el.model.get('error') }</div>

src/shared/chat/templates/toolbar.js

@@ -2,7 +2,7 @@ import { __ } from 'i18n';
 import { html } from 'lit';
 import { until } from 'lit/directives/until.js';
 
-function tpl_send_button () {
+function tplSendButton () {
     const i18n_send_message = __('Send the message');
     return html`<button type="submit" class="btn send-button" title="${ i18n_send_message }">
         <converse-icon color="var(--toolbar-btn-text-color)" class="fa fa-paper-plane" size="1em"></converse-icon>
@@ -12,6 +12,6 @@ function tpl_send_button () {
 export default (el) => {
     return html`
         <span class="toolbar-buttons">${until(el.getButtons(), '')}</span>
-        ${ el.show_send_button ? tpl_send_button() : '' }
+        ${ el.show_send_button ? tplSendButton() : '' }
     `;
 }

src/shared/chat/templates/unfurl.js

@@ -11,12 +11,12 @@ function isValidImage (image) {
     return image && isDomainAllowed(image, 'allowed_image_domains') && isValidURL(image);
 }
 
-const tpl_url_wrapper = (o, wrapped_template) =>
+const tplUrlWrapper = (o, wrapped_template) =>
     o.url && isValidURL(o.url) && !isGIFURL(o.image)
         ? html`<a href="${o.url}" target="_blank" rel="noopener">${wrapped_template(o)}</a>`
         : wrapped_template(o);
 
-const tpl_image = o =>
+const tplImage = o =>
     html`<converse-image class="card-img-top hor_centered" href="${o.url}" src="${o.image}" .onImgLoad=${o.onload}></converse-image>`;
 
 export default o => {
@@ -24,10 +24,10 @@ export default o => {
     const has_body_info = o.title || o.description || o.url;
     if (show_image || has_body_info) {
         return html`<div class="card card--unfurl">
-            ${show_image ? tpl_image(o) : ''}
+            ${show_image ? tplImage(o) : ''}
             ${has_body_info
                 ? html` <div class="card-body">
-                      ${o.title ? tpl_url_wrapper(o, o => html`<h5 class="card-title">${o.title}</h5>`) : ''}
+                      ${o.title ? tplUrlWrapper(o, o => html`<h5 class="card-title">${o.title}</h5>`) : ''}
                       ${o.description
                           ? html`<p class="card-text">
                                 <converse-rich-text text=${o.description}></converse-rich-text>

src/shared/chat/toolbar.js

@@ -1,6 +1,6 @@
 import './emoji-picker.js';
 import 'shared/chat/message-limit.js';
-import tpl_toolbar from './templates/toolbar.js';
+import tplToolbar from './templates/toolbar.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from '@converse/headless/core';
@@ -33,7 +33,7 @@ export class ChatToolbar extends CustomElement {
     }
 
     render () {
-        return tpl_toolbar(this);
+        return tplToolbar(this);
     }
 
     firstUpdated () {

src/shared/chat/unfurl.js

@@ -1,4 +1,4 @@
-import tpl_unfurl from './templates/unfurl.js';
+import tplUnfurl from './templates/unfurl.js';
 import { CustomElement } from 'shared/components/element.js';
 import { api } from "@converse/headless/core";
 import { getAppSettings } from '@converse/headless/shared/settings/utils.js';
@@ -25,7 +25,7 @@ export default class MessageUnfurl extends CustomElement {
     }
 
     render () {
-        return tpl_unfurl(Object.assign({
+        return tplUnfurl(Object.assign({
             'onload': () => this.onImageLoad()
         }, {
             description: this.description || '',

src/shared/chat/utils.js

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import tpl_new_day from "./templates/new-day.js";
+import tplNewDay from "./templates/new-day.js";
 import { _converse, api, converse } from '@converse/headless/core';
 import { html } from 'lit';
 import { until } from 'lit/directives/until.js';
@@ -127,7 +127,7 @@ export function getDayIndicator (message) {
     const prev_message =  messages[idx-1];
     if (!prev_message || dayjs(message.get('time')).isAfter(dayjs(prev_message.get('time')), 'day')) {
         const day_date = dayjs(message.get('time')).startOf('day');
-        return tpl_new_day({
+        return tplNewDay({
             'type': 'date',
             'time': day_date.toISOString(),
             'datestring': day_date.format("dddd MMM Do YYYY")

src/shared/components/font-awesome.js

@@ -1,10 +1,10 @@
-import tpl_icons from '../templates/icons.js';
+import tplIcons from '../templates/icons.js';
 import { CustomElement } from './element.js';
 import { api } from '@converse/headless/core.js';
 
 export class FontAwesome extends CustomElement {
     render () {  // eslint-disable-line class-methods-use-this
-        return tpl_icons();
+        return tplIcons();
     }
 }
 

src/shared/components/image.js

@@ -1,5 +1,5 @@
-import tpl_gif from 'templates/gif.js';
-import tpl_image from 'templates/image.js';
+import tplGif from 'templates/gif.js';
+import tplImage from 'templates/image.js';
 import { CustomElement } from './element.js';
 import { api } from "@converse/headless/core";
 import { filterQueryParamsFromURL, isGIFURL, shouldRenderMediaFromURL } from '@converse/headless/utils/url.js';
@@ -18,9 +18,9 @@ export default class Image extends CustomElement {
 
     render () {
         if (isGIFURL(this.src) && shouldRenderMediaFromURL(this.src, 'image')) {
-            return tpl_gif(filterQueryParamsFromURL(this.src), true);
+            return tplGif(filterQueryParamsFromURL(this.src), true);
         } else {
-            return tpl_image({
+            return tplImage({
                 'src': filterQueryParamsFromURL(this.src),
                 'href': this.href,
                 'onClick': this.onImgClick,

src/shared/components/message-versions.js

@@ -6,7 +6,7 @@ import './styles/message-versions.scss';
 
 const { dayjs } = converse.env;
 
-const tpl_older_version = (k, older_versions) => html`<p class="older-msg"><time>${dayjs(k).format('MMM D, YYYY, HH:mm:ss')}</time>: ${older_versions[k]}</p>`;
+const tplOlderVersion = (k, older_versions) => html`<p class="older-msg"><time>${dayjs(k).format('MMM D, YYYY, HH:mm:ss')}</time>: ${older_versions[k]}</p>`;
 
 
 export class MessageVersions extends CustomElement {
@@ -22,7 +22,7 @@ export class MessageVersions extends CustomElement {
         const keys = Object.keys(older_versions);
         return html`
             ${ keys.length ?
-                html`<h4>${__('Older versions')}</h4> ${keys.map(k => tpl_older_version(k, older_versions))}` :
+                html`<h4>${__('Older versions')}</h4> ${keys.map(k => tplOlderVersion(k, older_versions))}` :
                 html`<h4>${__('No older versions found')}</h4>`
             }
             <hr/>

src/shared/directives/retraction.js

@@ -3,7 +3,7 @@ import { directive, html } from "lit";
 
 
 const i18n_retract_message = __('Retract this message');
-const tpl_retract = (o) => html`
+const tplRetract = (o) => html`
     <button class="chat-msg__action chat-msg__action-retract" title="${i18n_retract_message}" @click=${o.onMessageRetractButtonClicked}>
         <converse-icon
             class="fas fa-trash-alt"
@@ -19,7 +19,7 @@ export const renderRetractionLink = directive(o => async part => {
     const retractable = !o.is_retracted && (o.model.mayBeRetracted() || may_be_moderated);
 
     if (retractable) {
-        part.setValue(tpl_retract(o));
+        part.setValue(tplRetract(o));
     } else {
         part.setValue('');
     }

src/shared/modals/image.js

@@ -1,5 +1,5 @@
 import BaseModal from "plugins/modal/modal.js";
-import tpl_image_modal from "./templates/image.js";
+import tplImageModal from "./templates/image.js";
 import { __ } from 'i18n';
 import { api } from "@converse/headless/core";
 import { getFileName } from 'utils/html.js';
@@ -11,7 +11,7 @@ import './styles/image.scss';
 export default class ImageModal extends BaseModal {
 
     renderModal () {
-        return tpl_image_modal({ 'src': this.src });
+        return tplImageModal({ 'src': this.src });
     }
 
     getModalTitle () {

src/shared/modals/templates/user-details.js

@@ -18,7 +18,7 @@ const remove_button = (el) => {
     `;
 }
 
-export const tpl_footer = (el) => {
+export const tplFooter = (el) => {
     const is_roster_contact = el.model.contact !== undefined;
     const i18n_refresh = __('Refresh');
     const allow_contact_removal = api.settings.get('allow_contact_removal');
@@ -38,7 +38,7 @@ export const tpl_footer = (el) => {
 }
 
 
-export const tpl_user_details_modal = (el) => {
+export const tplUserDetailsModal = (el) => {
     const vcard = el.model?.vcard;
     const vcard_json = vcard ? vcard.toJSON() : {};
     const o = { ...el.model.toJSON(), ...vcard_json };

src/shared/modals/user-details.js

@@ -1,6 +1,6 @@
 import BaseModal from "plugins/modal/modal.js";
 import log from "@converse/headless/log";
-import { tpl_user_details_modal, tpl_footer } from "./templates/user-details.js";
+import { tplUserDetailsModal, tplFooter } from "./templates/user-details.js";
 import { __ } from 'i18n';
 import { api, converse } from "@converse/headless/core";
 import { removeContact } from 'plugins/rosterview/utils.js';
@@ -25,11 +25,11 @@ export default class UserDetailsModal extends BaseModal {
     }
 
     renderModal () {
-        return tpl_user_details_modal(this);
+        return tplUserDetailsModal(this);
     }
 
     renderModalFooter () {
-        return tpl_footer(this);
+        return tplFooter(this);
     }
 
     getModalTitle () {

src/shared/rich-text.js

@@ -1,7 +1,7 @@
-import tpl_audio from 'templates/audio.js';
-import tpl_gif from 'templates/gif.js';
-import tpl_image from 'templates/image.js';
-import tpl_video from 'templates/video.js';
+import tplAudio from 'templates/audio.js';
+import tplGif from 'templates/gif.js';
+import tplImage from 'templates/image.js';
+import tplVideo from 'templates/video.js';
 import { api } from '@converse/headless/core';
 import { containsDirectives, getDirectiveAndLength, getDirectiveTemplate, isQuoteDirective } from './styling.js';
 import { getEmojiMarkup } from './chat/utils.js';
@@ -31,8 +31,8 @@ const isString = s => typeof s === 'string';
 // the zero-width whitespace character
 const collapseLineBreaks = text => text.replace(/\n\n+/g, m => `\n${'\u200B'.repeat(m.length - 2)}\n`);
 
-const tpl_mention_with_nick = o => html`<span class="mention mention--self badge badge-info" data-uri="${o.uri}">${o.mention}</span>`;
-const tpl_mention = o => html`<span class="mention" data-uri="${o.uri}">${o.mention}</span>`;
+const tplMentionWithNick = o => html`<span class="mention mention--self badge badge-info" data-uri="${o.uri}">${o.mention}</span>`;
+const tplMention = o => html`<span class="mention" data-uri="${o.uri}">${o.mention}</span>`;
 
 /**
  * @class RichText
@@ -132,9 +132,9 @@ export class RichText extends String {
             const filtered_url = filterQueryParamsFromURL(url_text);
             let template;
             if (isGIFURL(url_text) && this.shouldRenderMedia(url_text, 'image')) {
-                template = tpl_gif(filtered_url, this.hide_media_urls);
+                template = tplGif(filtered_url, this.hide_media_urls);
             } else if (isImageURL(url_text) && this.shouldRenderMedia(url_text, 'image')) {
-                template = tpl_image({
+                template = tplImage({
                     'src': filtered_url,
                     // XXX: bit of an abuse of `hide_media_urls`, might want a dedicated option here
                     'href': this.hide_media_urls ? null : filtered_url,
@@ -142,9 +142,9 @@ export class RichText extends String {
                     'onLoad': this.onImgLoad
                 });
             } else if (isVideoURL(url_text) && this.shouldRenderMedia(url_text, 'video')) {
-                template = tpl_video(filtered_url, this.hide_media_urls);
+                template = tplVideo(filtered_url, this.hide_media_urls);
             } else if (isAudioURL(url_text) && this.shouldRenderMedia(url_text, 'audio')) {
-                template = tpl_audio(filtered_url, this.hide_media_urls);
+                template = tplAudio(filtered_url, this.hide_media_urls);
             } else {
                 template = getHyperlinkTemplate(filtered_url);
             }
@@ -201,9 +201,9 @@ export class RichText extends String {
             const end = Number(ref.end) - full_offset;
             const mention = text.slice(begin, end);
             if (mention === this.nick) {
-                this.addTemplateResult(begin + local_offset, end + local_offset, tpl_mention_with_nick({...ref, mention }));
+                this.addTemplateResult(begin + local_offset, end + local_offset, tplMentionWithNick({...ref, mention }));
             } else {
-                this.addTemplateResult(begin + local_offset, end + local_offset, tpl_mention({...ref, mention }));
+                this.addTemplateResult(begin + local_offset, end + local_offset, tplMention({...ref, mention }));
             }
         });
     }

src/templates/form_select.js

@@ -1,11 +1,11 @@
 import { html } from "lit";
 
-const tpl_option = (o) => html`<option value="${o.value}" ?selected="${o.selected}">${o.label}</option>`;
+const tplOption = (o) => html`<option value="${o.value}" ?selected="${o.selected}">${o.label}</option>`;
 
 export default  (o) => html`
     <div class="form-group">
         <label for="${o.id}">${o.label}</label>
         <select class="form-control" id="${o.id}" name="${o.name}" ?multiple="${o.multiple}">
-            ${o.options?.map(o => tpl_option(o))}
+            ${o.options?.map(o => tplOption(o))}
         </select>
     </div>`;

src/utils/html.js

@@ -5,18 +5,18 @@
  */
 import isFunction from 'lodash-es/isFunction';
 import log from '@converse/headless/log';
-import tpl_audio from 'templates/audio.js';
-import tpl_file from 'templates/file.js';
-import tpl_form_captcha from '../templates/form_captcha.js';
-import tpl_form_checkbox from '../templates/form_checkbox.js';
-import tpl_form_help from '../templates/form_help.js';
-import tpl_form_input from '../templates/form_input.js';
-import tpl_form_select from '../templates/form_select.js';
-import tpl_form_textarea from '../templates/form_textarea.js';
-import tpl_form_url from '../templates/form_url.js';
-import tpl_form_username from '../templates/form_username.js';
-import tpl_hyperlink from 'templates/hyperlink.js';
-import tpl_video from 'templates/video.js';
+import tplAudio from 'templates/audio.js';
+import tplFile from 'templates/file.js';
+import tplFormCaptcha from '../templates/form_captcha.js';
+import tplFormCheckbox from '../templates/form_checkbox.js';
+import tplFormHelp from '../templates/form_help.js';
+import tplFormInput from '../templates/form_input.js';
+import tplFormSelect from '../templates/form_select.js';
+import tplFormTextarea from '../templates/form_textarea.js';
+import tplFormUrl from '../templates/form_url.js';
+import tplFormUsername from '../templates/form_username.js';
+import tplHyperlink from 'templates/hyperlink.js';
+import tplVideo from 'templates/video.js';
 import u from '../headless/utils/core';
 import { converse } from '@converse/headless/core';
 import { getURI, isAudioURL, isImageURL, isVideoURL } from '@converse/headless/utils/url.js';
@@ -184,13 +184,13 @@ export function getOOBURLMarkup (url) {
         return url;
     }
     if (isVideoURL(uri)) {
-        return tpl_video(url);
+        return tplVideo(url);
     } else if (isAudioURL(uri)) {
-        return tpl_audio(url);
+        return tplAudio(url);
     } else if (isImageURL(uri)) {
-        return tpl_file(uri.toString(), getFileName(uri));
+        return tplFile(uri.toString(), getFileName(uri));
     } else {
-        return tpl_file(uri.toString(), getFileName(uri));
+        return tplFile(uri.toString(), getFileName(uri));
     }
 }
 
@@ -352,7 +352,7 @@ export function getHyperlinkTemplate (url) {
     const http_url = RegExp('^w{3}.', 'ig').test(url) ? `http://${url}` : url;
     const uri = getURI(url);
     if (uri !== null && isUrlValid(http_url) && (isProtocolApproved(uri._parts.protocol) || !uri._parts.protocol)) {
-        return tpl_hyperlink(uri, url);
+        return tplHyperlink(uri, url);
     }
     return url;
 }
@@ -537,7 +537,7 @@ u.xForm2TemplateResult = function (field, stanza, options={}) {
                 'required': !!field.querySelector('required')
             };
         });
-        return tpl_form_select({
+        return tplFormSelect({
             options,
             'id': u.getUniqueId(),
             'label': field.getAttribute('label'),
@@ -547,9 +547,9 @@ u.xForm2TemplateResult = function (field, stanza, options={}) {
         });
     } else if (field.getAttribute('type') === 'fixed') {
         const text = field.querySelector('value')?.textContent;
-        return tpl_form_help({ text });
+        return tplFormHelp({ text });
     } else if (field.getAttribute('type') === 'jid-multi') {
-        return tpl_form_textarea({
+        return tplFormTextarea({
             'name': field.getAttribute('var'),
             'label': field.getAttribute('label') || '',
             'value': field.querySelector('value')?.textContent,
@@ -557,19 +557,19 @@ u.xForm2TemplateResult = function (field, stanza, options={}) {
         });
     } else if (field.getAttribute('type') === 'boolean') {
         const value = field.querySelector('value')?.textContent;
-        return tpl_form_checkbox({
+        return tplFormCheckbox({
             'id': u.getUniqueId(),
             'name': field.getAttribute('var'),
             'label': field.getAttribute('label') || '',
             'checked': ((value === '1' || value === 'true') && 'checked="1"') || ''
         });
     } else if (field.getAttribute('var') === 'url') {
-        return tpl_form_url({
+        return tplFormUrl({
             'label': field.getAttribute('label') || '',
             'value': field.querySelector('value')?.textContent
         });
     } else if (field.getAttribute('var') === 'username') {
-        return tpl_form_username({
+        return tplFormUsername({
             'domain': ' @' + options.domain,
             'name': field.getAttribute('var'),
             'type': getInputType(field),
@@ -578,7 +578,7 @@ u.xForm2TemplateResult = function (field, stanza, options={}) {
             'required': !!field.querySelector('required')
         });
     } else if (field.getAttribute('var') === 'password') {
-        return tpl_form_input({
+        return tplFormInput({
             'name': field.getAttribute('var'),
             'type': 'password',
             'label': field.getAttribute('label') || '',
@@ -589,7 +589,7 @@ u.xForm2TemplateResult = function (field, stanza, options={}) {
         // Captcha
         const uri = field.querySelector('uri');
         const el = sizzle('data[cid="' + uri.textContent.replace(/^cid:/, '') + '"]', stanza)[0];
-        return tpl_form_captcha({
+        return tplFormCaptcha({
             'label': field.getAttribute('label'),
             'name': field.getAttribute('var'),
             'data': el?.textContent,
@@ -598,7 +598,7 @@ u.xForm2TemplateResult = function (field, stanza, options={}) {
         });
     } else {
         const name = field.getAttribute('var');
-        return tpl_form_input({
+        return tplFormInput({
             'id': u.getUniqueId(),
             'label': field.getAttribute('label') || '',
             'name': name,