Create `converse-root` custom element

This element can be used to declaratively insert Converse into the DOM.

You can put `<converse-root>` into the DOM (e.g. by rendering it inside
a React component) before or afer Converse has loaded and/or has been
initialized.

package-lock.json

@@ -3199,8 +3199,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",
@@ -3234,8 +3233,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",
@@ -3256,8 +3254,7 @@
 				},
 				"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"
 					}
@@ -3269,14 +3266,13 @@
 				},
 				"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"
@@ -3284,11 +3280,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",

spec/autocomplete.js

@@ -1,4 +1,4 @@
-/*global mock */
+/*global mock, converse */
 
 const $pres = converse.env.$pres;
 const $msg = converse.env.$msg;

spec/converse.js

@@ -1,10 +1,17 @@
 /* global mock, converse */
 
+const u = converse.env.utils;
+
 describe("Converse", function() {
 
-    describe("Settings", function () {
+    it("Can be inserted into a custom element after having been initialized",
+            mock.initConverse([], {'root': new DocumentFragment()}, async (done) => {
 
-    });
+        expect(document.body.querySelector('div#conversejs')).toBe(null);
+        document.body.appendChild(document.createElement('converse-root'));
+        await u.waitUntil(() => document.body.querySelector('div#conversejs') !== null);
+        done();
+    }));
 
     describe("Authentication", function () {
 

src/components/converse.js

@@ -0,0 +1,18 @@
+import { converse } from "@converse/headless/converse-core";
+
+
+/**
+ * `converse-root` 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 ConverseRoot extends HTMLElement {
+
+    connectedCallback () {
+        converse.insertInto(this);
+    }
+}
+
+customElements.define('converse-root', ConverseRoot);

src/converse-chatboxviews.js

@@ -3,6 +3,7 @@
  * @copyright 2020, the Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
+import './components/converse.js';
 import "@converse/headless/converse-chatboxes";
 import tpl_avatar from "templates/avatar.svg";
 import tpl_background_logo from "templates/background_logo.html";

src/converse.js

@@ -29,6 +29,7 @@ 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";

src/headless/converse-core.js

@@ -1574,6 +1574,12 @@ Object.assign(converse, {
             await api.user.login(null, null, true);
         }
 
+        /**
+         * Triggered once converse.initialize has finished.
+         * @event _converse#initialized
+         */
+        api.trigger('initialized');
+
         if (_converse.isTestEnv()) {
             return _converse;
         }

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,