Create custom `converse-chats` element

This will be used instead of `<div id="#conversejs'></div>` and will
allow for better integration because you can dynamically put `<converse-chats>`
into the DOM after converse.js has loaded, and it'll be populated.

package-lock.json

@@ -3115,8 +3115,7 @@
 			"dependencies": {
 				"filesize": {
 					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
-					"integrity": "sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg=="
+					"resolved": false
 				},
 				"fs-extra": {
 					"version": "8.1.0",
@@ -3150,8 +3149,7 @@
 				},
 				"jed": {
 					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/jed/-/jed-1.1.1.tgz",
-					"integrity": "sha1-elSbvZ/+FYWwzQoZHiAwVb7ldLQ="
+					"resolved": false
 				},
 				"jsonfile": {
 					"version": "5.0.0",
@@ -3172,22 +3170,20 @@
 				},
 				"localforage": {
 					"version": "1.7.3",
-					"resolved": "https://registry.npmjs.org/localforage/-/localforage-1.7.3.tgz",
-					"integrity": "sha512-1TulyYfc4udS7ECSBT2vwJksWbkwwTX8BzeUIiq8Y07Riy7bDAAnxDaPU/tWyOVmQAcWJIEIFP9lPfBGqVoPgQ==",
+					"resolved": false,
 					"requires": {
 						"lie": "3.1.1"
 					}
 				},
 				"pluggable.js": {
 					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/pluggable.js/-/pluggable.js-2.0.1.tgz",
-					"integrity": "sha512-SBt6v6Tbp20Jf8hU0cpcc/+HBHGMY8/Q+yA6Ih0tBQE8tfdZ6U4PRG0iNvUUjLx/hVyOP53n0UfGBymlfaaXCg==",
+					"resolved": false,
 					"requires": {
 						"lodash": "^4.17.11"
 					}
 				},
 				"skeletor.js": {
-					"version": "github:skeletorjs/skeletor#bf6d9c86f9fcf224fa9d9af5a25380b77aa4b561",
+					"version": "0.0.1",
 					"from": "github:skeletorjs/skeletor#bf6d9c86f9fcf224fa9d9af5a25380b77aa4b561",
 					"requires": {
 						"lodash": "^4.17.14"
@@ -3195,11 +3191,7 @@
 				},
 				"strophe.js": {
 					"version": "github:strophe/strophejs#c4a94e59877c06dc2395f4ccbd26f3fee67a4c9f",
-					"from": "strophe.js@github:strophe/strophejs#c4a94e59877c06dc2395f4ccbd26f3fee67a4c9f",
-					"requires": {
-						"abab": "^2.0.3",
-						"xmldom": "^0.1.27"
-					}
+					"from": "strophe.js@github:strophe/strophejs#c4a94e59877c06dc2395f4ccbd26f3fee67a4c9f"
 				},
 				"twemoji": {
 					"version": "12.1.5",

src/components/chats.js

@@ -0,0 +1,18 @@
+import { api } from "@converse/headless/converse-core";
+
+/**
+ * `converse-chats` is an optional custom element which can be used to
+ * declaratively insert the Converse UI into the DOM.
+ *
+ * It can be inserted into the DOM before or after Converse has loaded or been
+ * initialized.
+ */
+class ConverseChats extends HTMLElement {
+
+    async connectedCallback () { // eslint-disable-line class-methods-use-this
+        await api.waitUntil('initialized');
+    }
+}
+
+
+customElements.define('converse-chats', ConverseChats);

src/converse.js

@@ -10,27 +10,27 @@
  */
 import "@converse/headless/headless";
 import "i18n";
-import "converse-registry";
+import "./components/chats.js";
 import "converse-autocomplete";
 import "converse-bookmark-views";  // Views for XEP-0048 Bookmarks
 import "converse-chatview";        // Renders standalone chat boxes for single user chat
 import "converse-controlbox";      // The control box
 import "converse-dragresize";      // Allows chat boxes to be resized by dragging them
 import "converse-fullscreen";
+import "converse-headlines-view";
 import "converse-mam-views";
 import "converse-minimize";        // Allows chat boxes to be minimized
 import "converse-muc-views";       // Views related to MUC
-import "converse-headlines-view";
 import "converse-notification";    // HTML5 Notifications
 import "converse-omemo";
 import "converse-profile";
 import "converse-push";            // XEP-0357 Push Notifications
 import "converse-register";        // XEP-0077 In-band registration
+import "converse-registry";
 import "converse-roomslist";       // Show currently open chat rooms
 import "converse-rosterview";
 import "converse-singleton";
 import "converse-uniview";
-import "./components/converse.js";
 /* END: Removable components */
 
 import "../sass/converse.scss";

webpack.html

@@ -32,7 +32,7 @@
         message_archiving: 'always',
         muc_domain: 'conference.chat.example.org',
         muc_respect_autojoin: true,
-        view_mode: 'fullscreen',
+        // view_mode: 'fullscreen',
         websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
         // bosh_service_url: 'http://chat.example.org:5280/http-bind',
         muc_show_logs_before_join: true,