Use [backbone.vdomview](https://github.com/jcbrand/backbone.vdomview)

For the MUCJoinView and the LoginPanel

package-lock.json

@@ -1054,6 +1054,17 @@
         }
       }
     },
+    "backbone.vdomview": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/backbone.vdomview/-/backbone.vdomview-0.0.1.tgz",
+      "integrity": "sha512-wmOKebp5tKLXFOWVmexDDST93BhmjbjTkssXit/6cmz1+eC3ryMR0azSxIIeJcXF66k3QDJLlgq3oFHmnTU4yw==",
+      "dev": true,
+      "requires": {
+        "backbone": "1.3.3",
+        "vdom-parser": "1.4.1",
+        "virtual-dom": "2.1.1"
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",

package.json

@@ -40,6 +40,7 @@
     "backbone": "1.3.3",
     "backbone.browserStorage": "0.0.3",
     "backbone.overview": "0.0.3",
+    "backbone.vdomview": "0.0.1",
     "bootstrap": "^3.3.7",
     "bourbon": "^4.3.2",
     "clean-css-cli": "^4.0.10",

src/config.js

@@ -22,6 +22,7 @@ require.config({
         "backbone.browserStorage":  "node_modules/backbone.browserStorage/backbone.browserStorage",
         "backbone.noconflict":      "src/backbone.noconflict",
         "backbone.overview":        "node_modules/backbone.overview/backbone.overview",
+        "backbone.vdomview":        "node_modules/backbone.vdomview/backbone.vdomview",
         "emojione":                 "node_modules/emojione/lib/js/emojione",
         "es6-promise":              "node_modules/es6-promise/dist/es6-promise.auto",
         "eventemitter":             "node_modules/otr/build/dep/eventemitter",

src/converse-controlbox.js

@@ -456,7 +456,7 @@
                 }
             });
 
-            _converse.LoginPanel = Backbone.View.extend({
+            _converse.LoginPanel = Backbone.VDOMView.extend({
                 tagName: 'div',
                 id: "converse-login-panel",
                 className: 'controlbox-pane fade-in',
@@ -470,14 +470,14 @@
                     this.listenTo(_converse.connfeedback, 'change', this.render);
                 },
 
-                render () {
+                renderHTML () {
                     const connection_status = _converse.connfeedback.get('connection_status');
                     let feedback_class, pretty_status;
                     if (_.includes(REPORTABLE_STATUSES, connection_status)) {
                         pretty_status = PRETTY_CONNECTION_STATUS[connection_status];
                         feedback_class = CONNECTION_STATUS_CSS_CLASS[pretty_status];
                     }
-                    const html = tpl_login_panel(
+                    return tpl_login_panel(
                         _.extend(this.model.toJSON(), {
                             '__': __,
                             '_converse': _converse,
@@ -495,14 +495,6 @@
                                                     __('Username') || __('user@domain'),
                         })
                     );
-                    const form = this.el.querySelector('form');
-                    if (_.isNull(form)) {
-                        this.el.innerHTML = html;
-                    } else {
-                        const patches = vdom.diff(vdom_parser(form), vdom_parser(html));
-                        vdom.patch(form, patches);
-                    }
-                    return this;
                 },
 
                 validate () {

src/converse-muc.js

@@ -15,8 +15,6 @@
             "form-utils",
             "converse-core",
             "lodash.fp",
-            "virtual-dom",
-            "vdom-parser",
             "tpl!chatarea",
             "tpl!chatroom",
             "tpl!chatroom_disconnect",
@@ -38,15 +36,14 @@
             "tpl!spinner",
             "awesomplete",
             "converse-chatview",
-            "converse-disco"
+            "converse-disco",
+            "backbone.vdomview"
     ], factory);
 }(this, function (
             $,
             utils,
             converse,
             fp,
-            vdom,
-            vdom_parser,
             tpl_chatarea,
             tpl_chatroom,
             tpl_chatroom_disconnect,
@@ -2378,13 +2375,13 @@
             });
 
 
-            _converse.MUCJoinForm = Backbone.View.extend({
+            _converse.MUCJoinForm = Backbone.VDOMView.extend({
                 initialize () {
                     this.model.on('change:muc_domain', this.render, this);
                 },
 
-                render () {
-                    const html = tpl_chatroom_join_form(_.assign(this.model.toJSON(), {
+                renderHTML () {
+                    return tpl_chatroom_join_form(_.assign(this.model.toJSON(), {
                         'server_input_type': _converse.hide_muc_server && 'hidden' || 'text',
                         'server_label_global_attr': _converse.hide_muc_server && ' hidden' || '',
                         'label_room_name': __('Room name'),
@@ -2393,14 +2390,6 @@
                         'label_join': __('Join Room'),
                         'label_show_rooms': __('Show rooms')
                     }));
-                    const form = this.el.querySelector('form');
-                    if (_.isNull(form)) {
-                        this.el.innerHTML = html;
-                    } else {
-                        const patches = vdom.diff(vdom_parser(form), vdom_parser(html));
-                        vdom.patch(form, patches);
-                    }
-                    return this;
                 }
             });
 
@@ -2442,7 +2431,7 @@
 
                 render () {
                     this.el.innerHTML = tpl_room_panel();
-                    this.join_form.setElement(this.el.querySelector('.chatroom-join-form'));
+                    this.join_form.setElement(this.el.querySelector('.add-chatroom'));
                     this.join_form.render();
 
                     this.renderTab();

src/templates/login_panel.html

@@ -1,31 +1,33 @@
-<form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
-    <legend>{{{o.__("Login")}}}</legend>
-    <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
-        <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
-        <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
-    </div>
-    {[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
-        <span class="spinner centered"/>
-    {[ } else { ]}
-        {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
-            <label>{{{o.__("Jabber ID:")}}}</label>
-            <input autofocus required
-                   type="text"
-                   name="jid"
-                   placeholder="{{{o.placeholder_username}}}">
-            {[ if (o.authentication !== o.EXTERNAL) { ]}
-                <label>{{{o.__("Password:")}}}</label>
-                <input required
-                       type="password" name="password"
-                       placeholder="{{{o.__('password')}}}">
+<div id="converse-login-panel" class="controlbox-pane fade-in">
+    <form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
+        <legend>{{{o.__("Login")}}}</legend>
+        <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
+            <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
+            <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
+        </div>
+        {[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
+            <span class="spinner centered"/>
+        {[ } else { ]}
+            {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
+                <label>{{{o.__("Jabber ID:")}}}</label>
+                <input autofocus required
+                    type="text"
+                    name="jid"
+                    placeholder="{{{o.placeholder_username}}}">
+                {[ if (o.authentication !== o.EXTERNAL) { ]}
+                    <label>{{{o.__("Password:")}}}</label>
+                    <input required
+                        type="password" name="password"
+                        placeholder="{{{o.__('password')}}}">
+                {[ } ]}
+                <input class="pure-button button-primary" type="submit" value="{{{o.__('Submit')}}}">
+            {[ } ]}
+            {[ if (o.authentication == o.ANONYMOUS) { ]}
+                <input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
+            {[ } ]}
+            {[ if (o.authentication == o.PREBIND) { ]}
+                <p>Disconnected.</p>
             {[ } ]}
-            <input class="pure-button button-primary" type="submit" value="{{{o.__('Submit')}}}">
-        {[ } ]}
-        {[ if (o.authentication == o.ANONYMOUS) { ]}
-            <input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
-        {[ } ]}
-        {[ if (o.authentication == o.PREBIND) { ]}
-            <p>Disconnected.</p>
         {[ } ]}
-    {[ } ]}
-</form>
+    </form>
+</div>

src/templates/room_panel.html

@@ -1,4 +1,4 @@
-<span class="chatroom-join-form"></span>
+<form class="add-chatroom"></form>
 <div class="rooms-list-container">
     <dl id="available-chatrooms" class="rooms-list"></dl>
 </div>