Use lit-html to render room description in modal

src/modals/muc-list.js

@@ -1,9 +1,9 @@
 import BootstrapModal from "./base.js";
 import log from "@converse/headless/log";
 import tpl_list_chatrooms_modal from "./templates/muc-list.js";
-import tpl_room_description from "templates/room_description.html";
+import tpl_room_description from "templates/room_description.js";
 import tpl_spinner from "templates/spinner.js";
-import { __ } from '../i18n';
+import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 import { getAttributes } from '@converse/headless/shared/parsers';
 import { head } from "lodash-es";
@@ -23,7 +23,7 @@ function insertRoomInfo (el, stanza) {
     el.querySelector('a.room-info').classList.add('selected');
     el.insertAdjacentHTML(
         'beforeEnd',
-        tpl_room_description({
+        u.getElementFromTemplateResult(tpl_room_description({
             '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,
@@ -37,23 +37,8 @@ function insertRoomInfo (el, stanza) {
             'publicroom': sizzle('feature[var="muc_publicroom"]', stanza).length,
             'semianonymous': sizzle('feature[var="muc_semianonymous"]', stanza).length,
             'temporary': sizzle('feature[var="muc_temporary"]', stanza).length,
-            'unmoderated': sizzle('feature[var="muc_unmoderated"]', stanza).length,
-            'label_desc': __('Description:'),
-            'label_jid': __('Groupchat Address (JID):'),
-            'label_occ': __('Participants:'),
-            'label_features': __('Features:'),
-            'label_requires_auth': __('Requires authentication'),
-            'label_hidden': __('Hidden'),
-            'label_requires_invite': __('Requires an invitation'),
-            'label_moderated': __('Moderated'),
-            'label_non_anon': __('Non-anonymous'),
-            'label_open_room': __('Open'),
-            'label_permanent_room': __('Permanent'),
-            'label_public': __('Public'),
-            'label_semi_anon':  __('Semi-anonymous'),
-            'label_temp_room':  __('Temporary'),
-            'label_unmoderated': __('Unmoderated')
-        }));
+            'unmoderated': sizzle('feature[var="muc_unmoderated"]', stanza).length
+        })));
 }
 
 

src/templates/room_description.html

@@ -1,43 +0,0 @@
-<!-- FIXME: check markup in mockup -->
-<div class="room-info">
-<p class="room-info"><strong>{{{o.label_jid}}}</strong> {{{o.jid}}}</p>
-<p class="room-info"><strong>{{{o.label_desc}}}</strong> {{{o.desc}}}</p>
-<p class="room-info"><strong>{{{o.label_occ}}}</strong> {{{o.occ}}}</p>
-<p class="room-info"><strong>{{{o.label_features}}}</strong>
-    <ul>
-        {[ if (o.passwordprotected) { ]}
-        <li class="room-info locked">{{{o.label_requires_auth}}}</li>
-        {[ } ]}
-        {[ if (o.hidden) { ]}
-        <li class="room-info">{{{o.label_hidden}}}</li>
-        {[ } ]}
-        {[ if (o.membersonly) { ]}
-        <li class="room-info">{{{o.label_requires_invite}}}</li>
-        {[ } ]}
-        {[ if (o.moderated) { ]}
-        <li class="room-info">{{{o.label_moderated}}}</li>
-        {[ } ]}
-        {[ if (o.nonanonymous) { ]}
-        <li class="room-info">{{{o.label_non_anon}}}</li>
-        {[ } ]}
-        {[ if (o.open) { ]}
-        <li class="room-info">{{{o.label_open_room}}}</li>
-        {[ } ]}
-        {[ if (o.persistent) { ]}
-        <li class="room-info">{{{o.label_permanent_room}}}</li>
-        {[ } ]}
-        {[ if (o.publicroom) { ]}
-        <li class="room-info">{{{o.label_public}}}</li>
-        {[ } ]}
-        {[ if (o.semianonymous) { ]}
-        <li class="room-info">{{{o.label_semi_anon}}}</li>
-        {[ } ]}
-        {[ if (o.temporary) { ]}
-        <li class="room-info">{{{o.label_temp_room}}}</li>
-        {[ } ]}
-        {[ if (o.unmoderated) { ]}
-        <li class="room-info">{{{o.label_unmoderated}}}</li>
-        {[ } ]}
-    </ul>
-</p>
-</div>

src/templates/room_description.js

@@ -0,0 +1,41 @@
+import { html } from "lit-html";
+import { __ } from 'i18n';
+
+export default  (o) => {
+    const i18n_desc = __('Description:');
+    const i18n_jid = __('Groupchat Address (JID):');
+    const i18n_occ = __('Participants:');
+    const i18n_features = __('Features:');
+    const i18n_requires_auth = __('Requires authentication');
+    const i18n_hidden = __('Hidden');
+    const i18n_requires_invite = __('Requires an invitation');
+    const i18n_moderated = __('Moderated');
+    const i18n_non_anon = __('Non-anonymous');
+    const i18n_open_room = __('Open');
+    const i18n_permanent_room = __('Permanent');
+    const i18n_public = __('Public');
+    const i18n_semi_anon =  __('Semi-anonymous');
+    const i18n_temp_room =  __('Temporary');
+    const i18n_unmoderated = __('Unmoderated');
+    return html`
+    <div class="room-info">
+        <p class="room-info"><strong>${i18n_jid}</strong> ${o.jid}</p>
+        <p class="room-info"><strong>${i18n_desc}</strong> ${o.desc}</p>
+        <p class="room-info"><strong>${i18n_occ}</strong> ${o.occ}</p>
+        <p class="room-info"><strong>${i18n_features}</strong>
+            <ul>
+                ${ o.passwordprotected ? html`<li class="room-info locked">${i18n_requires_auth}</li>` : '' }
+                ${ o.hidden ? html`<li class="room-info">${i18n_hidden}</li>` : '' }
+                ${ o.membersonly ? html`<li class="room-info">${i18n_requires_invite}</li>` : '' }
+                ${ o.moderated ? html`<li class="room-info">${i18n_moderated}</li>` : '' }
+                ${ o.nonanonymous ? html`<li class="room-info">${i18n_non_anon}</li>` : '' }
+                ${ o.open ? html`<li class="room-info">${i18n_open_room}</li>` : '' }
+                ${ o.persistent ? html`<li class="room-info">${i18n_permanent_room}</li>` : '' }
+                ${ o.publicroom ? html`<li class="room-info">${i18n_public}</li>` : '' }
+                ${ o.semianonymous ? html`<li class="room-info">${i18n_semi_anon}</li>` : '' }
+                ${ o.temporary ? html`<li class="room-info">${i18n_temp_room}</li>` : '' }
+                ${ o.unmoderated ? html`<li class="room-info">${i18n_unmoderated}</li>` : '' }
+            </ul>
+        </p>
+    </div>
+`};