Remove Backbone

* Remove backbone as NPM deps and from docs
* Remove backbone stuff from webpack
This commit is contained in:
JC Brand 2020-01-30 12:57:11 +01:00
parent fef92ad99e
commit 29aed314c1
18 changed files with 36 additions and 116 deletions

View File

@ -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

View File

@ -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: {

View File

@ -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.

50
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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 () {

View File

@ -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({

View File

@ -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',

View File

@ -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 () {

View File

@ -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'

View File

@ -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',

View File

@ -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({

View File

@ -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",

View File

@ -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 () {

View File

@ -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 () {

View File

@ -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 }
});
/**

View File

@ -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",

View File

@ -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")
}
}
}