Use snabbdom via backbone.vdomview

CHANGES.md

@@ -47,8 +47,9 @@
 - Focus the message textarea when the emojis panel is opened or closed.
 
 ### Technical changes
-- Converse.js now includes a [Virtual DOM](https://github.com/Matt-Esch/virtual-dom)
-  and uses it to render the login form.
+- Converse.js now includes a [Virtual DOM](https://github.com/snabbdom/snabbdom)
+  via [backbone.vdomview](https://github.com/jcbrand/backbone.vdomview) and uses
+  it to render various views.
 - Converse.js no longer includes all the translations in its build. Instead,
   only the currently relevant translation is requested. This results in a much
   smaller filesize but means that the translations you want to provide need to

package-lock.json

@@ -1538,14 +1538,10 @@
       }
     },
     "backbone.vdomview": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/backbone.vdomview/-/backbone.vdomview-0.0.2.tgz",
-      "integrity": "sha512-rQtR1DvE6aiSUSa4VbF2jELu+uutBoQ692/W2fdcwd+SyMpG5DumCEIf5mjZG6z0+Fq2TWFM4IPTv1il4iqO6w==",
+      "version": "github:jcbrand/backbone.vdomview#548435e7c287ac7df453ff344d727b94572ad18c",
       "dev": true,
       "requires": {
-        "backbone": "1.3.3",
-        "vdom-parser": "1.4.1",
-        "virtual-dom": "2.1.1"
+        "backbone": "1.3.3"
       }
     },
     "balanced-match": {
@@ -1690,12 +1686,6 @@
         "repeat-element": "1.1.2"
       }
     },
-    "browser-split": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/browser-split/-/browser-split-0.0.1.tgz",
-      "integrity": "sha1-ewl1dPjj6tYG+0Zk5krf3aKYGpM=",
-      "dev": true
-    },
     "browserslist": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.4.0.tgz",
@@ -1733,12 +1723,6 @@
       "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
       "dev": true
     },
-    "camelize": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
-      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=",
-      "dev": true
-    },
     "caniuse-lite": {
       "version": "1.0.30000718",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000718.tgz",
@@ -2367,12 +2351,6 @@
         }
       }
     },
-    "dom-walk": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
-      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=",
-      "dev": true
-    },
     "domelementtype": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
@@ -2500,17 +2478,6 @@
       "integrity": "sha1-QWgTO0K7BcOKNbGuQ5fIKYqzaeA=",
       "dev": true
     },
-    "error": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/error/-/error-4.4.0.tgz",
-      "integrity": "sha1-v2n/JR+0onnBmtzNqmth6Q2b8So=",
-      "dev": true,
-      "requires": {
-        "camelize": "1.0.0",
-        "string-template": "0.2.1",
-        "xtend": "4.0.1"
-      }
-    },
     "error-ex": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
@@ -2724,15 +2691,6 @@
       "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
       "dev": true
     },
-    "ev-store": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/ev-store/-/ev-store-7.0.0.tgz",
-      "integrity": "sha1-GrDH+CE2UF3XSzHRdwHLK+bSZVg=",
-      "dev": true,
-      "requires": {
-        "individual": "3.0.0"
-      }
-    },
     "event-emitter": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
@@ -3996,16 +3954,6 @@
         "is-glob": "2.0.1"
       }
     },
-    "global": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
-      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
-      "dev": true,
-      "requires": {
-        "min-document": "2.19.0",
-        "process": "0.5.2"
-      }
-    },
     "globals": {
       "version": "9.18.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
@@ -4369,12 +4317,6 @@
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
-    "individual": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/individual/-/individual-3.0.0.tgz",
-      "integrity": "sha1-58pPhfiVewGHNPKFdQ3CLsL5hi0=",
-      "dev": true
-    },
     "infinity-agent": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/infinity-agent/-/infinity-agent-2.0.3.tgz",
@@ -4569,12 +4511,6 @@
       "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
       "dev": true
     },
-    "is-object": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.1.tgz",
-      "integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA=",
-      "dev": true
-    },
     "is-path-cwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
@@ -5088,15 +5024,6 @@
         "mime-db": "1.29.0"
       }
     },
-    "min-document": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
-      "dev": true,
-      "requires": {
-        "dom-walk": "0.1.1"
-      }
-    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -5210,12 +5137,6 @@
         "inherits": "2.0.3"
       }
     },
-    "next-tick": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-0.2.2.tgz",
-      "integrity": "sha1-ddpKkn7liH45BliABltzNkE7MQ0=",
-      "dev": true
-    },
     "node-emoji": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.8.1.tgz",
@@ -8135,12 +8056,6 @@
       "integrity": "sha1-aM5eih7woju1cMwoU3tTMqumPvE=",
       "dev": true
     },
-    "process": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
-      "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=",
-      "dev": true
-    },
     "process-nextick-args": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
@@ -8732,6 +8647,10 @@
       "integrity": "sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=",
       "dev": true
     },
+    "snabbdom": {
+      "version": "github:jcbrand/snabbdom#3ed3a2a1a8b98eab19021d6988f3f4af25b606c8",
+      "dev": true
+    },
     "sntp": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
@@ -9190,12 +9109,6 @@
         "strip-ansi": "3.0.1"
       }
     },
-    "string-template": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
-      "integrity": "sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=",
-      "dev": true
-    },
     "string-width": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -9701,12 +9614,6 @@
       "integrity": "sha1-R84j7Y1Ord+p1LjvAHG2zxB418g=",
       "dev": true
     },
-    "vdom-parser": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/vdom-parser/-/vdom-parser-1.4.1.tgz",
-      "integrity": "sha1-tmFo/Su+yBl0++X9Lk5nd9/Bc+0=",
-      "dev": true
-    },
     "verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
@@ -9726,22 +9633,6 @@
         }
       }
     },
-    "virtual-dom": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/virtual-dom/-/virtual-dom-2.1.1.tgz",
-      "integrity": "sha1-gO2i1IG57eDASRGM78tKBfIdE3U=",
-      "dev": true,
-      "requires": {
-        "browser-split": "0.0.1",
-        "error": "4.4.0",
-        "ev-store": "7.0.0",
-        "global": "4.3.2",
-        "is-object": "1.0.1",
-        "next-tick": "0.2.2",
-        "x-is-array": "0.1.0",
-        "x-is-string": "0.1.0"
-      }
-    },
     "wait-until-promise": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wait-until-promise/-/wait-until-promise-1.0.0.tgz",
@@ -9857,18 +9748,6 @@
         "slide": "1.1.6"
       }
     },
-    "x-is-array": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/x-is-array/-/x-is-array-0.1.0.tgz",
-      "integrity": "sha1-3lIBcdR7P0FvVYfWKbidJrEtwp0=",
-      "dev": true
-    },
-    "x-is-string": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
-      "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=",
-      "dev": true
-    },
     "xdg-basedir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz",

package.json

@@ -37,7 +37,7 @@
     "backbone": "1.3.3",
     "backbone.browserStorage": "0.0.3",
     "backbone.overview": "0.0.3",
-    "backbone.vdomview": "0.0.2",
+    "backbone.vdomview": "jcbrand/backbone.vdomview",
     "bootstrap": "^3.3.7",
     "bourbon": "^4.3.2",
     "clean-css-cli": "^4.0.10",
@@ -64,6 +64,7 @@
     "requirejs": "2.3.3",
     "run-headless-chromium": "^0.1.1",
     "sinon": "^2.1.0",
+    "snabbdom": "jcbrand/snabbdom",
     "snyk": "^1.21.2",
     "strophe.js": "1.2.14",
     "strophejs-plugin-disco": "0.0.1",
@@ -73,8 +74,6 @@
     "strophejs-plugin-vcard": "0.0.1",
     "text": "requirejs/text#2.0.15",
     "uglify-es": "^3.0.24",
-    "vdom-parser": "^1.4.1",
-    "virtual-dom": "^2.1.1",
     "wait-until-promise": "^1.0.0",
     "xss": "^0.3.3"
   },

src/config.js

@@ -49,7 +49,14 @@ require.config({
         "underscore":               "src/underscore-shim",
         "utils":                    "src/utils",
         "vdom-parser":              "node_modules/vdom-parser/dist",
-        "virtual-dom":              "node_modules/virtual-dom/dist/virtual-dom",
+        "snabbdom":                 "node_modules/snabbdom/dist/snabbdom",
+        "snabbdom-attributes":      "node_modules/snabbdom/dist/snabbdom-attributes",
+        "snabbdom-class":           "node_modules/snabbdom/dist/snabbdom-class",
+        "snabbdom-dataset":         "node_modules/snabbdom/dist/snabbdom-dataset",
+        "snabbdom-eventlisteners":  "node_modules/snabbdom/dist/snabbdom-eventlisteners",
+        "snabbdom-props":           "node_modules/snabbdom/dist/snabbdom-props",
+        "snabbdom-style":           "node_modules/snabbdom/dist/snabbdom-style",
+        "tovnode":                  "node_modules/snabbdom/dist/tovnode",
         "xss":                      "node_modules/xss/dist/xss",
         "xss.noconflict":           "src/xss.noconflict",
 

src/converse-controlbox.js

@@ -19,7 +19,6 @@
             "tpl!controlbox_toggle",
             "tpl!login_panel",
             "tpl!search_contact",
-            "tpl!spinner",
             "converse-chatview",
             "converse-rosterview",
             "converse-profile"
@@ -36,8 +35,7 @@
             tpl_controlbox,
             tpl_controlbox_toggle,
             tpl_login_panel,
-            tpl_search_contact,
-            tpl_spinner
+            tpl_search_contact
         ) {
     "use strict";
 
@@ -459,7 +457,7 @@
                     this.listenTo(_converse.connfeedback, 'change', this.render);
                 },
 
-                renderHTML () {
+                toHTML () {
                     const connection_status = _converse.connfeedback.get('connection_status');
                     let feedback_class, pretty_status;
                     if (_.includes(REPORTABLE_STATUSES, connection_status)) {

src/converse-muc.js

@@ -2416,7 +2416,7 @@
                     this.model.on('change:muc_domain', this.render, this);
                 },
 
-                renderHTML () {
+                toHTML () {
                     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' || '',

src/converse-rosterview.js

@@ -145,7 +145,7 @@
                     this.model.on('change:filter_text', this.renderClearButton, this);
                 },
 
-                renderHTML () {
+                toHTML () {
                     return tpl_roster_filter(
                         _.extend(this.model.toJSON(), {
                             visible: this.shouldBeVisible(),