Make `converse-muc-embedded` a core plugin.

1. Add a new `view_mode` value: `embedded`.

   This value is used to determine wether the `converse-muc-embedded`
   plugin is active or not.

2. Remove the need for the #converse-embedded-chat element.

   Instead we reuse the #conversejs element and embed inside that.

3. Removed the need to manually blacklist core plugins

   This is now done automatically if `view_mode` is set to `embedded`.
   Perhaps eventually we don't blacklist at all and instead use the
   `enable` plugin method. For some that probably won't work, like
   `converse-chatview`, which we still need to be active.

css/converse-muc-embedded.css

@@ -3,7 +3,7 @@
     https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
     http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
  */
-#converse-embedded-chat {
+#conversejs.converse-embedded {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -11,56 +11,56 @@
   right: auto;
   position: relative;
   width: 100%; }
-  #converse-embedded-chat *, #converse-embedded-chat *:before, #converse-embedded-chat *:after {
+  #conversejs.converse-embedded *, #conversejs.converse-embedded *:before, #conversejs.converse-embedded *:after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box; }
-  #converse-embedded-chat form.pure-form.converse-centered-form {
+  #conversejs.converse-embedded form.pure-form.converse-centered-form {
     position: absolute;
     top: 30%;
     transform: translateY(-50%); }
-  #converse-embedded-chat .chatroom {
+  #conversejs.converse-embedded .chatroom {
     width: auto; }
-  #converse-embedded-chat .flyout {
+  #conversejs.converse-embedded .flyout {
     bottom: auto;
     display: block;
     position: relative; }
-  #converse-embedded-chat .chatbox {
+  #conversejs.converse-embedded .chatbox {
     float: none; }
-    #converse-embedded-chat .chatbox .box-flyout {
+    #conversejs.converse-embedded .chatbox .box-flyout {
       box-shadow: none; }
-    #converse-embedded-chat .chatbox .chat-title {
+    #conversejs.converse-embedded .chatbox .chat-title {
       padding: 0.3em;
       font-size: 120%; }
-  #converse-embedded-chat .chatbox-btn {
+  #conversejs.converse-embedded .chatbox-btn {
     display: none; }
-  #converse-embedded-chat .chatroom .box-flyout {
+  #conversejs.converse-embedded .chatroom .box-flyout {
     min-width: auto;
     width: 100%;
     height: 55vh; }
-    #converse-embedded-chat .chatroom .box-flyout .chat-body {
+    #conversejs.converse-embedded .chatroom .box-flyout .chat-body {
       height: -webkit-calc(100% - 55px);
       height: calc(100% - 55px); }
-    #converse-embedded-chat .chatroom .box-flyout .occupants-heading {
+    #conversejs.converse-embedded .chatroom .box-flyout .occupants-heading {
       font-size: 120%; }
-    #converse-embedded-chat .chatroom .box-flyout .chat-content {
+    #conversejs.converse-embedded .chatroom .box-flyout .chat-content {
       height: calc(100% - 97px); }
-      #converse-embedded-chat .chatroom .box-flyout .chat-content .chat-message {
+      #conversejs.converse-embedded .chatroom .box-flyout .chat-content .chat-message {
         margin: 0.5em;
         font-size: 120%; }
-    #converse-embedded-chat .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
+    #conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
       padding: 0.5em;
       font-size: 110%; }
-    #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container {
+    #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container {
       font-size: 180%;
       float: left;
       height: 100%;
       position: relative; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input {
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input {
         font-size: 60%; }
-    #converse-embedded-chat .chatroom .box-flyout .occupants .occupant-list {
+    #conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list {
       padding-left: 0.3em; }
-      #converse-embedded-chat .chatroom .box-flyout .occupants .occupant-list li.occupant {
+      #conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list li.occupant {
         font-size: 120%; }
 
 /*# sourceMappingURL=converse-muc-embedded.css.map */

demo/embedded.html

@@ -54,44 +54,18 @@
 
 <script>
     converse.initialize({
-        allow_logout: false, // No point in logging out when we have auto_login as true.
-        allow_muc_invitations: false, // Doesn't make sense to allow because only
-                                        // roster contacts can be invited
-        allow_contact_requests: false, // Contacts from other servers cannot,
-                                        // be added and anonymous users don't
-                                        // know one another's JIDs, so disabling.
-        auto_reconnect: true,
         authentication: 'anonymous',
         auto_login: true,
         auto_join_rooms: [
             'anonymous@conference.nomnom.im',
         ],
-        // Whitelist non-core plugins that we need
-        whitelisted_plugins: ['converse-muc-embedded'],
-        // Blacklist plugins which aren't included in the build file, 
-        // so that other code cannot register their own plugins under
-        // those names.
-        blacklisted_plugins: [
-            "converse-bookmarks",
-            "converse-controlbox",
-            "converse-dragresize",
-            "converse-headline",
-            "converse-minimize",
-            "converse-otr",
-            "converse-register",
-            "converse-vcard",
-        ],
+        bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
+        jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
+                          // allow chatting with other XMPP servers).
         notify_all_room_messages: [
             'anonymous@conference.nomnom.im',
         ],
-        bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
-        jid: 'nomnom.im', // XMPP server which allows anonymous login (doesn't
-                            // allow chatting with other XMPP servers).
-        keepalive: true,
-        hide_muc_server: true, // Federation is disabled, so no use in
-                                // showing the MUC server.
-        play_sounds: true,
-        strict_plugin_dependencies: false
+        view_mode: 'embedded',
     });
 </script>
 </html>

docs/source/configuration.rst

@@ -1417,20 +1417,21 @@ view_mode
 ---------
 
 * Default: ``overlayed``
-* Allowed values: ``overlayed``, ``fullscreen``, ``mobile``
+* Allowed values: ``overlayed``, ``fullscreen``, ``mobile``, ``embedded``
 
 The ``view_mode`` setting configures converse.js's mode and resulting behavior.
 
 Before the introduction of this setting (in version 3.3.0), there were there
-different builds, each for the diffent modes.
+different builds, each for the different modes.
 
 These were:
 
-* ``converse.js`` for the ``overlayed`` mode
 * ``converse-mobile.js`` for the ``mobile`` mode
+* ``converse-muc-embedded.js`` for embedding a single MUC room into the page.
+* ``converse.js`` for the ``overlayed`` mode
 * ``inverse.js`` for the ``fullscreen`` mode
 
-Besides having three different builds, certain plugins had to be whitelisted
+Besides having different builds, certain plugins had to be whitelisted
 and blacklisted for the different modes.
 
 ``converse-singleton`` had to be whitelisted for the ``mobile`` and ``fullscreen``
@@ -1440,11 +1441,25 @@ modes, additionally ``converse-inverse`` had to be whitelisted for the
 For both those modes the ``converse-minimize`` and ``converse-dragresize``
 plugins had to be blacklisted.
 
-Since version 3.3.0, the last two builds no longer exist, and instead the
-standard ``converse.js`` build is used, together with the appropraite
-``view_mode`` value.
+When using ``converse-muc-embedded.js`` various plugins also had to manually be
+blacklisted.
+
+Since version 3.3.0 it's no longer necessary to blacklist any plugins (except
+for ``converse-muc-embedded.js``, which is from version 3.3.3).
+
+Blacklisting now happens automatically.
+
+Since version 3.3.0, the ``inverse.js`` and ``converse-mobile.js`` builds no
+longer exist. Instead the standard ``converse.js`` build is used, together with
+the appropriate ``view_mode`` value.
+
+The ``converse-muc-embedded.js`` build is still kept, because it's smaller than
+``converse.js`` due to unused code being removed. It doesn't however contain
+any new code, so the full ``converse.js`` build could be used instead, as long
+as ``view_mode`` is set to ``embedded``.
 
-Furthermore, it's no longer necessary to whitelist or blacklist any plugins.
+Furthermore, it's no longer necessary to whitelist or blacklist any plugins
+when switching view modes.
 
 .. note::
     Although the ``view_mode`` setting has removed the need for different

sass/_muc_embedded.scss

@@ -1,6 +1,6 @@
 @import "bourbon";
 @import "converse/variables";
-#converse-embedded-chat {
+#conversejs.converse-embedded {
 
     @include box-sizing(border-box);
     *, *:before, *:after {

src/converse-core.js

@@ -79,6 +79,7 @@
         'converse-mam',
         'converse-minimize',
         'converse-muc',
+        'converse-muc-embedded',
         'converse-notification',
         'converse-otr',
         'converse-ping',
@@ -87,8 +88,8 @@
         'converse-roomslist',
         'converse-rosterview',
         'converse-singleton',
-        'converse-vcard',
-        'converse-spoilers'
+        'converse-spoilers',
+        'converse-vcard'
     ];
 
     // Make converse pluggable
@@ -1802,6 +1803,21 @@
             const whitelist = _converse.core_plugins.concat(
                 _converse.whitelisted_plugins);
 
+            if (_converse.view_mode === 'embedded') {
+                _.forEach([ // eslint-disable-line lodash/prefer-map
+                    "converse-bookmarks",
+                    "converse-controlbox",
+                    "converse-dragresize",
+                    "converse-headline",
+                    "converse-minimize",
+                    "converse-otr",
+                    "converse-register",
+                    "converse-vcard",
+                ], (name) => {
+                    _converse.blacklisted_plugins.push(name)
+                });
+            }
+
             _converse.pluggable.initializePlugins({
                 'updateSettings' () {
                     _converse.log(
@@ -1846,13 +1862,10 @@
             i18n.fetchTranslations(
                 _converse.locale,
                 _converse.locales,
-                _.template(_converse.locales_url)({'locale': _converse.locale})
-            ).then(() => {
-                finishInitialization();
-            }).catch((reason) => {
-                finishInitialization();
-                _converse.log(reason, Strophe.LogLevel.ERROR);
-            });
+                _.template(_converse.locales_url)({'locale': _converse.locale}))
+            .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL))
+            .then(finishInitialization)
+            .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
         }
         return init_promise;
     };

src/converse-fullscreen.js

@@ -21,7 +21,7 @@
     converse.plugins.add('converse-fullscreen', {
 
         enabled (_converse) {
-            return _.includes(['mobile', 'fullscreen'], _converse.view_mode);
+            return _.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode);
         },
 
         overrides: {

src/converse-muc-embedded.js

@@ -11,6 +11,11 @@
     const { Backbone, _ } = converse.env;
 
     converse.plugins.add('converse-muc-embedded', {
+
+        enabled (_converse) {
+            return _converse.view_mode === 'embedded';
+        },
+
         overrides: {
             // Overrides mentioned here will be picked up by converse.js's
             // plugin architecture they will replace existing methods on the
@@ -37,14 +42,10 @@
                 }
             },
 
-            ChatRoomView: {
-                insertIntoDOM () {
-                    if (!document.body.contains(this.el)) {
-                        const container = document.querySelector('#converse-embedded-chat');
-                        container.innerHTML = '';
-                        container.appendChild(this.el);
-                    }
-                    return this;
+            ChatBoxViews: {
+                initialize () {
+                    this.__super__.initialize.apply(this, arguments);
+                    this.el.classList.add('converse-embedded');
                 }
             }
         },
@@ -53,6 +54,13 @@
             /* The initialize function gets called as soon as the plugin is
              * loaded by converse.js's plugin machinery.
              */
+            this._converse.api.settings.update({
+                'allow_logout': false, // No point in logging out when we have auto_login as true.
+                'allow_muc_invitations': false, // Doesn't make sense to allow because only
+                                                // roster contacts can be invited
+                'hide_muc_server': true, // Federation is disabled, so no use in
+                                         // showing the MUC server.
+            });
             const { _converse } = this;
             if (!_.isArray(_converse.auto_join_rooms)) {
                 throw new Error("converse-muc-embedded: auto_join_rooms must be an Array");

src/converse-notification.js

@@ -71,7 +71,7 @@
             };
 
             _converse.isMessageToHiddenChat = function (message) {
-                if (_.includes(['mobile', 'fullscreen'], _converse.view_mode)) {
+                if (_.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode)) {
                     const jid = Strophe.getBareJidFromJid(message.getAttribute('from'));
                     const model = _converse.chatboxes.get(jid);
                     if (!_.isNil(model)) {

src/converse-singleton.js

@@ -40,7 +40,7 @@
         dependencies: ['converse-muc', 'converse-controlbox', 'converse-rosterview'],
 
         enabled (_converse) {
-            return _.includes(['mobile', 'fullscreen'], _converse.view_mode);
+            return _.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode);
         },
 
         overrides: {