rosterview: Move more lodash templates to lit-html

src/plugins/rosterview/contactview.js

@@ -1,11 +1,12 @@
 import ViewWithAvatar from 'shared/avatar.js';
 import log from "@converse/headless/log";
-import tpl_pending_contact from "./templates/pending_contact.html";
-import tpl_requesting_contact from "./templates/requesting_contact.html";
-import tpl_roster_item from "./templates/roster_item.html";
+import tpl_pending_contact from "./templates/pending_contact.js";
+import tpl_requesting_contact from "./templates/requesting_contact.js";
+import tpl_roster_item from "./templates/roster_item.js";
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 import { debounce, without } from "lodash-es";
+import { render } from 'lit-html';
 
 const u = converse.env.utils;
 
@@ -89,24 +90,19 @@ const RosterContactView = ViewWithAvatar.extend({
              */
             const display_name = this.model.getDisplayName();
             this.el.classList.add('pending-xmpp-contact');
-            this.el.innerHTML = tpl_pending_contact(
-                Object.assign(this.model.toJSON(), {
-                    display_name,
-                    'desc_remove': __('Click to remove %1$s as a contact', display_name),
-                    'allow_chat_pending_contacts': api.settings.get('allow_chat_pending_contacts')
-                })
-            );
+            render(tpl_pending_contact(Object.assign(this.model.toJSON(), { display_name })), this.el);
+
         } else if (requesting === true) {
             const display_name = this.model.getDisplayName();
             this.el.classList.add('requesting-xmpp-contact');
-            this.el.innerHTML = tpl_requesting_contact(
+            render(tpl_requesting_contact(
                 Object.assign(this.model.toJSON(), {
                     display_name,
                     'desc_accept': __("Click to accept the contact request from %1$s", display_name),
                     'desc_decline': __("Click to decline the contact request from %1$s", display_name),
                     'allow_chat_pending_contacts': api.settings.get('allow_chat_pending_contacts')
                 })
-            );
+            ), this.el);
         } else if (subscription === 'both' || subscription === 'to' || _converse.rosterview.isSelf(jid)) {
             this.el.classList.add('current-xmpp-contact');
             this.el.classList.remove(without(['both', 'to'], subscription)[0]);
@@ -147,19 +143,16 @@ const RosterContactView = ViewWithAvatar.extend({
             status_icon = 'fa fa-times-circle chat-status chat-status--offline';
         }
         const display_name = item.getDisplayName();
-        this.el.innerHTML = tpl_roster_item(
+        render(tpl_roster_item(
             Object.assign(item.toJSON(), {
                 show,
                 display_name,
                 status_icon,
                 'desc_status': STATUSES[show],
-                'desc_chat': __('Click to chat with %1$s (XMPP address: %2$s)', display_name, item.get('jid')),
-                'desc_remove': __('Click to remove %1$s as a contact', display_name),
-                'allow_contact_removal': api.settings.get('allow_contact_removal'),
                 'num_unread': item.get('num_unread') || 0,
                 classes: ''
             })
-        );
+        ), this.el);
         this.renderAvatar();
         return this;
     },

src/plugins/rosterview/groupview.js

@@ -1,7 +1,8 @@
 import RosterContactView from './contactview.js';
-import tpl_group_header from "./templates/group_header.html";
+import tpl_group_header from "./templates/group_header.js";
 import { OrderedListView } from "@converse/skeletor/src/overview";
 import { _converse, api, converse } from "@converse/headless/core";
+import { render } from 'lit-html';
 
 const u = converse.env.utils;
 
@@ -54,12 +55,11 @@ const RosterGroupView = OrderedListView.extend({
 
     render () {
         this.el.setAttribute('data-group', this.model.get('name'));
-        this.el.innerHTML = tpl_group_header({
+        render(tpl_group_header({
             'label_group': this.model.get('name'),
             'desc_group_toggle': this.model.get('description'),
-            'toggle_state': this.model.get('state'),
-            '_converse': _converse
-        });
+            'toggle_state': this.model.get('state')
+        }), this.el);
         this.contacts_el = this.el.querySelector('.roster-group-contacts');
         return this;
     },

src/plugins/rosterview/templates/group_header.html

@@ -1,4 +0,0 @@
-<a href="#" class="list-toggle group-toggle controlbox-padded" title="{{{o.desc_group_toggle}}}">
-    <span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
-    </span> {{{o.label_group}}}</a>
-<ul class="items-list roster-group-contacts {[ if (o.toggle_state === o._converse.CLOSED) { ]} collapsed {[ } ]}"></ul>

src/plugins/rosterview/templates/group_header.js

@@ -0,0 +1,9 @@
+import { html } from "lit-html";
+import { _converse } from "@converse/headless/core";
+
+export default  (o) => html`
+    <a href="#" class="list-toggle group-toggle controlbox-padded" title="${o.desc_group_toggle}">
+        <span class="fa ${ (o.toggle_state === _converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }">
+        </span> ${o.label_group}</a>
+    <ul class="items-list roster-group-contacts ${ (o.toggle_state === _converse.CLOSED) ? 'collapsed' : '' }"></ul>
+`;

src/plugins/rosterview/templates/pending_contact.html

@@ -1,6 +0,0 @@
-{[ if (o.allow_chat_pending_contacts)  { ]}
-<a class="list-item-link open-chat w-100" href="#">
-{[ } ]}
-<span class="pending-contact-name" title="JID: {{{o.jid}}}">{{{o.display_name}}}</span> 
-{[ if (o.allow_chat_pending_contacts)  { ]}</a>{[ } ]}
-<a class="list-item-action remove-xmpp-contact far fa-trash-alt" title="{{{o.desc_remove}}}" href="#"></a>

src/plugins/rosterview/templates/pending_contact.js

@@ -0,0 +1,12 @@
+import { __ } from 'i18n';
+import { api } from "@converse/headless/core";
+import { html } from "lit-html";
+
+const tpl_pending_contact = o => html`<span class="pending-contact-name" title="JID: ${o.jid}">${o.display_name}</span>`;
+
+export default  (o) => {
+    const i18n_remove = __('Click to remove %1$s as a contact', o.display_name);
+    return html`
+        ${ api.settings.get('allow_chat_pending_contacts') ? html`<a class="list-item-link open-chat w-100" href="#">${tpl_pending_contact(o)}</a>` : tpl_pending_contact(o) };
+        <a class="list-item-action remove-xmpp-contact far fa-trash-alt" title="${i18n_remove}" href="#"></a>`;
+}

src/plugins/rosterview/templates/requesting_contact.html

@@ -1,11 +0,0 @@
-{[ if (o.allow_chat_pending_contacts)  { ]}
-<a class="open-chat w-100"href="#">
-{[ } ]}
-<span class="req-contact-name w-100" title="JID: {{{o.jid}}}">{{{o.display_name}}}</span>
-{[ if (o.allow_chat_pending_contacts)  { ]}
-</a>
-{[ } ]}
-<a class="accept-xmpp-request list-item-action list-item-action--visible fa fa-check"
-   aria-label="{{{o.desc_accept}}}" title="{{{o.desc_accept}}}" href="#"></a>
-<a class="decline-xmpp-request list-item-action list-item-action--visible  fa fa-times"
-   aria-label="{{{o.desc_decline}}}" title="{{{o.desc_decline}}}" href="#"></a>

src/plugins/rosterview/templates/requesting_contact.js

@@ -0,0 +1,11 @@
+import { api } from "@converse/headless/core";
+import { html } from "lit-html";
+
+const tpl_requesting_contact = o => html`<span class="req-contact-name w-100" title="JID: ${o.jid}">${o.display_name}</span>`;
+
+export default  (o) => html`
+   ${ api.settings.get('allow_chat_pending_contacts') ? html`<a class="open-chat w-100" href="#">${tpl_requesting_contact(o) }</a>` : tpl_requesting_contact(o) }
+   <a class="accept-xmpp-request list-item-action list-item-action--visible fa fa-check"
+      aria-label="${o.desc_accept}" title="${o.desc_accept}" href="#"></a>
+   <a class="decline-xmpp-request list-item-action list-item-action--visible  fa fa-times"
+      aria-label="${o.desc_decline}" title="${o.desc_decline}" href="#"></a>`;

src/plugins/rosterview/templates/roster_item.html

@@ -1,11 +0,0 @@
-<a class="list-item-link cbox-list-item open-chat w-100 {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
-   title="{{{o.desc_chat}}}" href="#">
-
-    <canvas class="avatar" height="30" width="30"></canvas>
-    <span class="{{{o.status_icon}}}" title="{{{o.desc_status}}}"></span>
-    {[ if (o.num_unread) { ]} <span class="msgs-indicator">{{{ o.num_unread }}}</span> {[ } ]}
-    <span class="contact-name contact-name--{{{o.show}}} {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.display_name}}}</span>
-</a>
-{[ if (o.allow_contact_removal) { ]}
-<a class="list-item-action remove-xmpp-contact far fa-trash-alt" title="{{{o.desc_remove}}}" href="#"></a>
-{[ } ]}

src/plugins/rosterview/templates/roster_item.js

@@ -0,0 +1,16 @@
+import { __ } from 'i18n';
+import { api } from "@converse/headless/core";
+import { html } from "lit-html";
+
+export default  (o) => {
+   const i18n_chat = __('Click to chat with %1$s (XMPP address: %2$s)', o.display_name, o.jid);
+   const i18n_remove = __('Click to remove %1$s as a contact', o.display_name);
+   return html`
+   <a class="list-item-link cbox-list-item open-chat w-100 ${ o.num_unread ? 'unread-msgs' : '' }" title="${i18n_chat}" href="#">
+      <canvas class="avatar" height="30" width="30"></canvas>
+      <span class="${o.status_icon}" title="${o.desc_status}"></span>
+      ${ o.num_unread ? html`<span class="msgs-indicator">${ o.num_unread }</span>` : '' }
+      <span class="contact-name contact-name--${o.show} ${ o.num_unread ? 'unread-msgs' : ''}">${o.display_name}</span>
+   </a>
+   ${ api.settings.get('allow_contact_removal') ? html`<a class="list-item-action remove-xmpp-contact far fa-trash-alt" title="${i18n_remove}" href="#"></a>` : '' }`;
+}