Remove Backbone

* Remove backbone as NPM deps and from docs
* Remove backbone stuff from webpack

docs/source/dependencies.rst

@@ -73,15 +73,8 @@ Converse relies on the following dependencies:
 * `Strophe.js <http://strophe.im/>`_ maintains the XMPP session, is used to
   build XMPP stanzas, to send them, and to register handlers for received stanzas.
 * `lodash <https://lodash.com/>`_ provides very useful utility functions.
-* `Backbone <http://backbonejs.org/>`_ is used to model the data as Models and
-  Collections and to create Views that render the UI.
-* `backbone.overview <http://github.com/jcbrand/backbone.overview>`_ provides
-  ``Backbone.Overview``, which is to Views as Backbone Collection is to Models.
-  It also provides the ``Backbone.OrderedListView`` which is used to show
-  alphabetically sorted lists, such as your contacts roster.
-* `backbone.vdomview <http://github.com/jcbrand/backbone.vdomview>`_ provides
-  ``Backbone.VDOMView`` that uses the `Snabbdom <https://github.com/snabbdom/snabbdom>`_
-  virtual DOM for rendering DOM elements.
+* `Skeletor <https://github.com/skeletorjs/skeletor/>`_, a `Backbone <http://backbonejs.org/>`_ fork
+  which is used to model the data as Models and Collections and to create Views that render the UI.
 * `pluggable.js <https://github.com/jcbrand/pluggable.js>`_ provides the plugin
   architecture for Converse. It registers and initializes plugins and
   allows existing attributes, functions and objects on Converse to be

docs/source/plugin_development.rst

@@ -64,8 +64,8 @@ Each plugin comes in its own file, and Converse's plugin architecture,
 with the ability to "hook in" to the core code and other plugins.
 
 Plugins enable developers to extend and override existing objects,
-functions and the `Backbone <http://backbonejs.org/>`_ models and views that make up
-Converse. You can also create new Backbone (or other) models and views.
+functions and the models and views that make up
+Converse. You can also create new models and views.
 
 .. note:: **Trying out a plugin in JSFiddle**
 
@@ -151,7 +151,7 @@ The globally available ``converse`` object, which exposes the API methods, such
 as ``initialize`` and ``plugins.add``, is a wrapper that encloses and protects
 a sensitive inner object, named ``_converse`` (not the underscore prefix).
 
-This inner ``_converse`` object contains all the Backbone models and views,
+This inner ``_converse`` object contains all the models and views,
 as well as various other attributes and functions.
 
 Within a plugin, you will have access to this internal
@@ -175,7 +175,7 @@ The code for it could look something like this:
 
     // Commonly used utilities and variables can be found under the "env"
     // namespace of the "converse" global.
-    const { Backbone, Promise, Strophe, dayjs, sizzle, _, $build, $iq, $msg, $pres } = converse.env;
+    const { Promise, Strophe, dayjs, sizzle, _, $build, $iq, $msg, $pres } = converse.env;
 
 These dependencies are closured so that they don't pollute the global
 namespace, that's why you need to access them in such a way inside the module.
@@ -216,7 +216,7 @@ The following code snippet provides an example of two different overrides:
             // Your custom code can come here ...
         },
 
-        /* On the XMPPStatus Backbone model is a method sendPresence.
+        /* On the XMPPStatus model is a method sendPresence.
          * We can override is as follows:
          */
         XMPPStatus: {
@@ -471,7 +471,7 @@ generated by `generator-conversejs <https://github.com/jcbrand/generator-convers
 
     // Commonly used utilities and variables can be found under the "env"
     // namespace of the "converse" global.
-    const { Backbone, Promise, Strophe, dayjs, sizzle, _, $build, $iq, $msg, $pres } = converse.env;
+    const { Promise, Strophe, dayjs, sizzle, _, $build, $iq, $msg, $pres } = converse.env;
 
     // The following line registers your plugin.
     converse.plugins.add("myplugin", {
@@ -551,7 +551,7 @@ generated by `generator-conversejs <https://github.com/jcbrand/generator-convers
              */
         },
 
-        /* If you want to override some function or a Backbone model or
+        /* If you want to override some function or a model or
          * view defined elsewhere in Converse, then you do that under
          * the "overrides" namespace.
          */
@@ -577,7 +577,7 @@ generated by `generator-conversejs <https://github.com/jcbrand/generator-convers
                 // Your custom code can come here ...
             },
 
-            /* Override Converse's XMPPStatus Backbone model so that we can override the
+            /* Override Converse's XMPPStatus model so that we can override the
              * function that sends out the presence stanza.
              */
             XMPPStatus: {

docs/source/security.rst

@@ -71,7 +71,7 @@ Other considerations
 Locally cached data
 -------------------
 
-Besides the "hot" data stored in Backbone models and collections, which are all
+Besides the "hot" data stored in models and collections, which are all
 encapsulated in the private ``_converse`` object, there is also the cached data
 stored in the browser's ``sessionStorage`` and ``localStorage`` stores.
 

package-lock.json

@@ -3018,41 +3018,6 @@
 				"object.assign": "^4.1.0"
 			}
 		},
-		"backbone": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/backbone/-/backbone-1.4.0.tgz",
-			"integrity": "sha512-RLmDrRXkVdouTg38jcgHhyQ/2zjg7a8E6sz2zxfz21Hh17xDJYUHBZimVIt5fUyS8vbfpeSmTL3gUjTEvUV3qQ==",
-			"requires": {
-				"underscore": ">=1.8.3"
-			}
-		},
-		"backbone.browserStorage": {
-			"version": "github:conversejs/backbone.browserStorage#674ba3aa0e4d0f0b0dcac48fcc7dea531012828f",
-			"from": "github:conversejs/backbone.browserStorage#674ba3aa0e4d0f0b0dcac48fcc7dea531012828f"
-		},
-		"backbone.nativeview": {
-			"version": "github:conversejs/Backbone.NativeView#5997c8197ca594e6b8469447f28310c78bd1d95e",
-			"from": "github:conversejs/Backbone.NativeView#5997c8197ca594e6b8469447f28310c78bd1d95e",
-			"dev": true
-		},
-		"backbone.overview": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/backbone.overview/-/backbone.overview-1.0.3.tgz",
-			"integrity": "sha512-szVfJNctVoZRiW3V5qA2WqvLY6SoWdLtR88C4qrKejD35cNIvE0xFGVQ0GO1pyaTuMsJakdQq+MUYnjoZLq0Zw==",
-			"dev": true,
-			"requires": {
-				"lodash": "^4.17.14"
-			}
-		},
-		"backbone.vdomview": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/backbone.vdomview/-/backbone.vdomview-1.0.1.tgz",
-			"integrity": "sha512-KBrzWTa3Cyd/PVq4kxcnaF653z9W5zQkP4FYGdgDa2Du4TDbMwbjaGTJa302y34oX1iOvO/BmBrLgYM+RF3F8Q==",
-			"dev": true,
-			"requires": {
-				"backbone": "^1.3.3"
-			}
-		},
 		"balanced-match": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -16094,8 +16059,8 @@
 			"dev": true
 		},
 		"skeletor.js": {
-			"version": "github:skeletorjs/skeletor#9a4487496bd2810b2f0847acbca136333cf9cfb0",
-			"from": "github:skeletorjs/skeletor#9a4487496bd2810b2f0847acbca136333cf9cfb0",
+			"version": "github:skeletorjs/skeletor#5a95708a5fdec9029fc493c1df4bca337803f124",
+			"from": "github:skeletorjs/skeletor#5a95708a5fdec9029fc493c1df4bca337803f124",
 			"requires": {
 				"lodash": "^4.17.14"
 			}
@@ -16139,12 +16104,6 @@
 			"integrity": "sha512-iVICrxOzCynf/SNaBQCw34eM9jROU/s5rzIhpOvzhzuYHfJR/DhZfDkXiZSgKXfgv26HT3Yni3AV/DGw0cGnnw==",
 			"dev": true
 		},
-		"snabbdom": {
-			"version": "0.7.3",
-			"resolved": "https://registry.npmjs.org/snabbdom/-/snabbdom-0.7.3.tgz",
-			"integrity": "sha512-XNh90GQiV36hWdfSL46fIVrSSvmBuZlWk3++qaEgBeQWQJCqTphcbjTODPv8/vyZHJaB3VhePsWfGxi/zBxXyw==",
-			"dev": true
-		},
 		"snapdragon": {
 			"version": "0.8.2",
 			"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -17318,11 +17277,6 @@
 			"integrity": "sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0=",
 			"dev": true
 		},
-		"underscore": {
-			"version": "1.8.3",
-			"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz",
-			"integrity": "sha1-Tz+1OxBuYJf8+ctBCfKl6b36UCI="
-		},
 		"unicode-canonical-property-names-ecmascript": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",

package.json

@@ -64,9 +64,6 @@
     "autoprefixer": "^9.6.1",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
-    "backbone.nativeview": "conversejs/Backbone.NativeView#5997c8197ca594e6b8469447f28310c78bd1d95e",
-    "backbone.overview": "1.0.3",
-    "backbone.vdomview": "^1.0.1",
     "bootstrap": "^4.3.1",
     "bootstrap.native": "^2.0.26",
     "bootstrap.native-loader": "2.0.0",
@@ -104,7 +101,6 @@
     "sass-loader": "^7.1.0",
     "sinon": "^7.3.2",
     "sizzle": "^2.3.4",
-    "snabbdom": "^0.7.3",
     "style-loader": "^0.23.1",
     "uglify-es": "^3.3.9",
     "uglify-js": "^3.7.4",

src/converse-bookmark-views.js

@@ -6,7 +6,7 @@
  */
 import "@converse/headless/converse-muc";
 import { Model } from 'skeletor.js/src/model.js';
-import { HTMLView } from 'skeletor.js/src/htmlview.js';
+import { View } from 'skeletor.js/src/view.js';
 import { __ } from '@converse/headless/i18n';
 import converse from "@converse/headless/converse-core";
 import tpl_bookmarks_list from "templates/bookmarks_list.js"
@@ -160,7 +160,7 @@ converse.plugins.add('converse-bookmark-views', {
         Object.assign(_converse.ChatRoomView.prototype, bookmarkableChatRoomView);
 
 
-        _converse.MUCBookmarkForm = HTMLView.extend({
+        _converse.MUCBookmarkForm = View.extend({
             className: 'muc-bookmark-form chatroom-form-container',
 
             initialize (attrs) {
@@ -195,7 +195,7 @@ converse.plugins.add('converse-bookmark-views', {
         });
 
 
-        _converse.BookmarksView = HTMLView.extend({
+        _converse.BookmarksView = View.extend({
             tagName: 'span',
 
             initialize () {

src/converse-chatboxviews.js

@@ -4,7 +4,6 @@
  * @license Mozilla Public License (MPLv2)
  */
 import "@converse/headless/converse-chatboxes";
-import { HTMLView } from 'skeletor.js/src/htmlview.js';
 import { Overview } from "skeletor.js/src/overview";
 import { View } from "skeletor.js/src/view";
 import { result } from "lodash";
@@ -62,7 +61,6 @@ converse.plugins.add('converse-chatboxviews', {
         });
 
         _converse.ViewWithAvatar = View.extend(AvatarMixin);
-        _converse.HTMLViewWithAvatar = HTMLView.extend(AvatarMixin);
 
 
         _converse.ChatBoxViews = Overview.extend({

src/converse-controlbox.js

@@ -8,7 +8,6 @@ import "formdata-polyfill";
 import { get } from "lodash";
 import { Model } from 'skeletor.js/src/model.js';
 import { View } from "skeletor.js/src/view";
-import { HTMLView } from "skeletor.js/src/htmlview";
 import bootstrap from "bootstrap.native";
 import converse from "@converse/headless/converse-core";
 import log from "@converse/headless/log";
@@ -362,7 +361,7 @@ converse.plugins.add('converse-controlbox', {
             }
         });
 
-        _converse.LoginPanel = HTMLView.extend({
+        _converse.LoginPanel = View.extend({
             tagName: 'div',
             id: "converse-login-panel",
             className: 'controlbox-pane fade-in row no-gutters',

src/converse-emoji-views.js

@@ -4,7 +4,7 @@
  * @license Mozilla Public License (MPLv2)
  */
 import "@converse/headless/converse-emoji";
-import { HTMLView } from "skeletor.js/src/htmlview";
+import { View } from "skeletor.js/src/view";
 import { debounce, find, get } from "lodash";
 import DOMNavigator from "./dom-navigator";
 import bootstrap from "bootstrap.native";
@@ -126,7 +126,7 @@ converse.plugins.add('converse-emoji-views', {
         Object.assign(_converse.ChatBoxView.prototype, emoji_aware_chat_view);
 
 
-        _converse.EmojiPickerView = HTMLView.extend({
+        _converse.EmojiPickerView = View.extend({
             className: 'emoji-picker dropdown-menu toolbar-menu',
 
             initialize (config) {
@@ -177,7 +177,7 @@ converse.plugins.add('converse-emoji-views', {
             remove () {
                 const body = document.querySelector('body');
                 body.removeEventListener('keydown', this.onGlobalKeyDown);
-                HTMLView.prototype.remove.call(this);
+                View.prototype.remove.call(this);
             },
 
             initArrowNavigation () {

src/converse-modal.js

@@ -3,7 +3,7 @@
  * @copyright The Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
-import { HTMLView } from 'skeletor.js/src/htmlview.js';
+import { View } from 'skeletor.js/src/view.js';
 import { Model } from 'skeletor.js/src/model.js';
 import { isString } from "lodash";
 import { render } from 'lit-html';
@@ -24,7 +24,7 @@ converse.plugins.add('converse-modal', {
         const { _converse } = this;
         const { __ } = _converse;
 
-        _converse.BootstrapModal = HTMLView.extend({
+        _converse.BootstrapModal = View.extend({
             className: "modal",
             events: {
                 'click  .nav-item .nav-link': 'switchTab'

src/converse-muc-views.js

@@ -8,9 +8,8 @@ import "converse-modal";
 import "formdata-polyfill";
 import "@converse/headless/utils/muc";
 import { get, head, isString, isUndefined } from "lodash";
-import { HTMLView } from 'skeletor.js/src/htmlview.js';
+import { View } from 'skeletor.js/src/view.js';
 import { Model } from 'skeletor.js/src/model.js';
-import { View } from "skeletor.js/src/view";
 import { __ } from '@converse/headless/i18n';
 import converse from "@converse/headless/converse-core";
 import log from "@converse/headless/log";
@@ -2040,7 +2039,7 @@ converse.plugins.add('converse-muc-views', {
         });
 
 
-        _converse.MUCConfigForm = HTMLView.extend({
+        _converse.MUCConfigForm = View.extend({
             className: 'chatroom-form-container muc-config-form',
 
             initialize (attrs) {
@@ -2095,7 +2094,7 @@ converse.plugins.add('converse-muc-views', {
         });
 
 
-        _converse.MUCPasswordForm = HTMLView.extend({
+        _converse.MUCPasswordForm = View.extend({
             className: 'chatroom-form-container muc-password-form',
 
             initialize (attrs) {
@@ -2167,7 +2166,7 @@ converse.plugins.add('converse-muc-views', {
         });
 
 
-        _converse.MUCSidebar = HTMLView.extend({
+        _converse.MUCSidebar = View.extend({
             tagName: 'div',
             className: 'occupants col-md-3 col-4',
 

src/converse-oauth.js

@@ -4,7 +4,7 @@
  * @license Mozilla Public License (MPLv2)
  */
 import { Collection } from "skeletor.js/src/collection";
-import { HTMLView } from 'skeletor.js/src/htmlview.js';
+import { View } from 'skeletor.js/src/view.js';
 import { Model } from 'skeletor.js/src/model.js';
 import converse from "@converse/headless/converse-core";
 import hello from "hellojs";
@@ -90,7 +90,7 @@ converse.plugins.add("converse-oauth", {
         _converse.oauth_providers = new _converse.OAuthProviders();
 
 
-        _converse.OAuthProvidersView = HTMLView.extend({
+        _converse.OAuthProvidersView = View.extend({
             toHTML () {
                 return tpl_oauth_providers(
                     Object.assign({

src/converse-profile.js

@@ -195,7 +195,7 @@ converse.plugins.add('converse-profile', {
             }
         });
 
-        _converse.XMPPStatusView = _converse.HTMLViewWithAvatar.extend({
+        _converse.XMPPStatusView = _converse.ViewWithAvatar.extend({
             tagName: "div",
             events: {
                 "click a.show-profile": "showProfileModal",

src/converse-roomslist.js

@@ -8,7 +8,7 @@
  */
 import "@converse/headless/converse-muc";
 import { Model } from 'skeletor.js/src/model.js';
-import { HTMLView } from 'skeletor.js/src/htmlview.js';
+import { View } from 'skeletor.js/src/view.js';
 import { __ } from '@converse/headless/i18n';
 import converse from "@converse/headless/converse-core";
 import tpl_rooms_list from "templates/rooms_list.js";
@@ -50,7 +50,7 @@ converse.plugins.add('converse-roomslist', {
         });
 
 
-        _converse.RoomsListView = HTMLView.extend({
+        _converse.RoomsListView = View.extend({
             tagName: 'span',
 
             initialize () {

src/converse-rosterview.js

@@ -8,7 +8,7 @@ import "@converse/headless/converse-roster";
 import "converse-modal";
 import "formdata-polyfill";
 import { compact, debounce, has, isString, uniq, without } from "lodash";
-import { HTMLView } from 'skeletor.js/src/htmlview.js';
+import { View } from 'skeletor.js/src/view.js';
 import { Model } from 'skeletor.js/src/model.js';
 import { OrderedListView } from "skeletor.js/src/overview";
 import SHA1 from 'strophe.js/src/sha1';
@@ -201,7 +201,7 @@ converse.plugins.add('converse-rosterview', {
             },
         });
 
-        _converse.RosterFilterView = HTMLView.extend({
+        _converse.RosterFilterView = View.extend({
             tagName: 'span',
 
             initialize () {

src/headless/converse-core.js

@@ -13,7 +13,6 @@ import 'strophe.js/src/websocket';
 import './polyfill';
 import * as strophe from 'strophe.js/src/core';
 import _ from './lodash.noconflict';
-import Backbone from 'backbone';
 import Storage from 'skeletor.js/src/storage.js';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import dayjs from 'dayjs';
@@ -29,7 +28,6 @@ const $iq = strophe.default.$iq;
 const $msg = strophe.default.$msg;
 const $pres = strophe.default.$pres;
 
-Backbone = Backbone.noConflict();
 
 dayjs.extend(advancedFormat);
 
@@ -1780,7 +1778,6 @@ Object.assign(window.converse, {
      * @property {function} converse.env.$iq       - Creates a Strophe.Builder with an <iq/> element as the root.
      * @property {function} converse.env.$msg      - Creates a Strophe.Builder with an <message/> element as the root.
      * @property {function} converse.env.$pres     - Creates a Strophe.Builder with an <presence/> element as the root.
-     * @property {object} converse.env.Backbone    - The [Backbone](http://backbonejs.org) object used by Converse to create models and views.
      * @property {function} converse.env.Promise   - The Promise implementation used by Converse.
      * @property {function} converse.env.Strophe   - The [Strophe](http://strophe.im/strophejs) XMPP library used by Converse.
      * @property {object} converse.env._           - The instance of [lodash](http://lodash.com) used by Converse.
@@ -1789,7 +1786,7 @@ Object.assign(window.converse, {
      * @property {function} converse.env.sizzle    - [Sizzle](https://sizzlejs.com) CSS selector engine.
      * @property {object} converse.env.utils       - Module containing common utility methods used by Converse.
      */
-    'env': { $build, $iq, $msg, $pres, Backbone, Model, Collection, Promise, Strophe, _, dayjs, log, sizzle, stanza_utils, u, 'utils': u }
+    'env': { $build, $iq, $msg, $pres, Model, Collection, Promise, Strophe, _, dayjs, log, sizzle, stanza_utils, u, 'utils': u }
 });
 
 /**

src/headless/package.json

@@ -26,9 +26,7 @@
   },
   "gitHead": "9641dcdc820e029b05930479c242d2b707bbe8e2",
   "devDependencies": {
-    "skeletor.js": "skeletorjs/skeletor#9a4487496bd2810b2f0847acbca136333cf9cfb0",
-    "backbone": "1.4",
-    "backbone.browserStorage": "conversejs/backbone.browserStorage#674ba3aa0e4d0f0b0dcac48fcc7dea531012828f",
+    "skeletor.js": "skeletorjs/skeletor#5a95708a5fdec9029fc493c1df4bca337803f124",
     "filesize": "^4.1.2",
     "jed": "1.1.1",
     "localforage": "^1.7.3",

webpack.common.js

@@ -15,10 +15,6 @@ module.exports = {
     },
     module: {
         rules: [
-        {
-            test: path.resolve(__dirname, "node_modules/backbone.vdomview/backbone.vdomview"),
-            use: 'imports-loader?backbone.nativeview'
-        },
         {
             test: path.resolve(__dirname, "node_modules/xss/dist/xss"),
             use: "exports-loader?filterXSS,filterCSS"
@@ -122,17 +118,7 @@ module.exports = {
             "IPv6":                     path.resolve(__dirname, "node_modules/urijs/src/IPv6"),
             "SecondLevelDomains":       path.resolve(__dirname, "node_modules/urijs/src/SecondLevelDomains"),
             "formdata-polyfill":        path.resolve(__dirname, "node_modules/formdata-polyfill/FormData"),
-            "jquery":                   path.resolve(__dirname, "src/jquery-stub"),
-            "punycode":                 path.resolve(__dirname, "node_modules/urijs/src/punycode"),
-            "snabbdom":                 path.resolve(__dirname, "node_modules/snabbdom/dist/snabbdom"),
-            "snabbdom-attributes":      path.resolve(__dirname, "node_modules/snabbdom/dist/snabbdom-attributes"),
-            "snabbdom-class":           path.resolve(__dirname, "node_modules/snabbdom/dist/snabbdom-class"),
-            "snabbdom-dataset":         path.resolve(__dirname, "node_modules/snabbdom/dist/snabbdom-dataset"),
-            "snabbdom-eventlisteners":  path.resolve(__dirname, "node_modules/snabbdom/dist/snabbdom-eventlisteners"),
-            "snabbdom-props":           path.resolve(__dirname, "node_modules/snabbdom/dist/snabbdom-props"),
-            "snabbdom-style":           path.resolve(__dirname, "node_modules/snabbdom/dist/snabbdom-style"),
-            "tovnode":                  path.resolve(__dirname, "node_modules/snabbdom/dist/tovnode"),
-            "underscore":               path.resolve(__dirname, "src/underscore-shim")
+            "punycode":                 path.resolve(__dirname, "node_modules/urijs/src/punycode")
         }
     }
 }