Get the webpack dev server to work again

This required triggering the `converse-loaded` event in the entry.js
file, which means it won't be triggered for `@converse/headless` when
used in isolation.

Not ideal, but probably ok because consumers of `@converse/headless`
should probably import it into their own project in any case.

docs/source/dependencies.rst

@@ -2,9 +2,9 @@
 
     <div id="banner"><a href="https://github.com/jcbrand/converse.js/blob/master/docs/source/theming.rst">Edit me on GitHub</a></div>
 
-============
-Dependencies
-============
+=============================
+Starting up a dev environment
+=============================
 
 Installing the 3rd party dependencies
 =====================================
@@ -64,30 +64,12 @@ the list under the ``devDependencies`` in `package.json <https://github.com/jcbr
     where you can log in and be taken directly to the chatroom.
 
 
-Brief description of Converse's dependencies
-===============================================
-
-Converse relies on the following dependencies:
-
-* `DayJS <https://github.com/iamkun/dayjs>`_ provides a better API for handling dates and times.
-* `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.
-* `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
-  overridden inside plugins.
-
 .. _`dependency-libsignal`:
 
 Libsignal
 ---------
 
-If you want OMEMO encryption, you need to load `libsignal
-<https://github.com/signalapp/libsignal-protocol-javascript>`_ separately in
-your page.
+If you want OMEMO encryption, you need to load `libsignal <https://github.com/signalapp/libsignal-protocol-javascript>`_ separately in your page.
 
 For example::
 

docs/source/plugin_development.rst

@@ -167,7 +167,7 @@ Accessing 3rd party libraries
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 Immediately inside the module shown above you can access 3rd party libraries (such
-dayjs and lodash) via the ``converse.env`` map.
+dayjs) via the ``converse.env`` map.
 
 The code for it could look something like this:
 
@@ -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 { 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.
@@ -263,7 +263,8 @@ For example:
 Overriding a template
 ~~~~~~~~~~~~~~~~~~~~~
 
-Converse uses various templates, loaded with lodash, to generate its HTML.
+Converse uses `lit-html <https://lit-html.polymer-project.org/guide>`_
+templates.
 
 It's not possible to override a template with the plugin's ``overrides``
 feature, instead you should configure a new path to your own template via your
@@ -278,26 +279,6 @@ For example, in your webpack config file, you could add the following to the
 
 .. code-block:: javascript
 
-    module: {
-        {
-            test: /templates\/.*\.(html|svg)$/,
-            use: [{
-                loader: 'lodash-template-webpack-loader',
-                options: {
-                    escape: /\{\{\{([\s\S]+?)\}\}\}/g,
-                    evaluate: /\{\[([\s\S]+?)\]\}/g,
-                    interpolate: /\{\{([\s\S]+?)\}\}/g,
-                    // By default, template places the values from your data in the
-                    // local scope via the with statement. However, you can specify
-                    // a single variable name with the variable setting. This can
-                    // significantly improve the speed at which a template is able
-                    // to render.
-                    variable: 'o',
-                    prependFilenameComment: __dirname
-                }
-            }]
-        }
-    },
     resolve: {
         extensions: ['.js'],
         modules: [
@@ -305,17 +286,13 @@ For example, in your webpack config file, you could add the following to the
             path.join(__dirname, 'node_modules/converse.js/src')
         ],
         alias: {
-            'templates/profile_view.html$': path.resolve(__dirname, 'templates/profile_view.html')
+            'plugins/profile/templates/profile.js$': path.resolve(__dirname, 'templates/custom-profile.js')
         }
     }
 
-
-You'll need to install ``lodash-template-webpack-loader``.
-
-Currently Converse uses a fork of `lodash-template-webpack-loader <https://github.com/jcbrand/lodash-template-webpack-loader>`_.
-
-To install it, you can add ``"lodash-template-webpack-loader": "jcbrand/lodash-template-webpack-loader"``
-to your package.json's ``devDependencies``.
+This will override the template that gets imported at the path ``plugins/profile/templates/profile.js``
+with your own template at the path ``templates/custom-profile.js`` (relative to
+your webpack config file).
 
 
 .. _`dependencies`:

package.json

@@ -83,7 +83,7 @@
     "exports-loader": "^0.7.0",
     "fast-text-encoding": "^1.0.3",
     "file-loader": "^6.0.0",
-    "html-webpack-plugin": "^4.3.0",
+    "html-webpack-plugin": "^5.3.1",
     "http-server": "^0.12.3",
     "imports-loader": "^0.8.0",
     "install": "^0.13.0",
@@ -110,8 +110,8 @@
     "sinon": "^9.2.4",
     "style-loader": "^0.23.1",
     "webpack": "^5.36.1",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^4.0.0-beta.2",
     "webpack-merge": "^5.7.3"
   },
   "dependencies": {

src/entry.js

@@ -64,4 +64,15 @@ const converse = {
 }
 
 window.converse = converse;
+
+/**
+ * Once Converse.js has loaded, it'll dispatch a custom event with the name `converse-loaded`.
+ * You can listen for this event in order to be informed as soon as converse.js has been
+ * loaded and parsed, which would mean it's safe to call `converse.initialize`.
+ * @event converse-loaded
+ * @example window.addEventListener('converse-loaded', () => converse.initialize());
+ */
+const ev = new CustomEvent('converse-loaded', {'detail': { converse }});
+window.dispatchEvent(ev);
+
 export default converse;

src/headless/core.js

@@ -1419,13 +1419,3 @@ Object.assign(converse, {
         u,
     }
 });
-
-/**
- * Once Converse.js has loaded, it'll dispatch a custom event with the name `converse-loaded`.
- * You can listen for this event in order to be informed as soon as converse.js has been
- * loaded and parsed, which would mean it's safe to call `converse.initialize`.
- * @event converse-loaded
- * @example window.addEventListener('converse-loaded', () => converse.initialize());
- */
-const ev = new CustomEvent('converse-loaded', {'detail': { converse }});
-window.dispatchEvent(ev);

webpack.html

@@ -9,37 +9,38 @@
     <script src="3rdparty/libsignal-protocol.js"></script>
     <link rel="manifest" href="./manifest.json">
     <link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
-    <script src="https://cdn.conversejs.org/3rdparty/libsignal-protocol.min.js"></script>
 </head>
 <body class="reset"></body>
 <script>
-    converse.plugins.add('converse-debug', {
-        initialize () {
-            const { _converse } = this;
-            window._converse = _converse;
-        }
-    });
-    converse.initialize({
-        muc_subscribe_to_rai: true,
-        theme: 'concord',
-        show_send_button: true,
-        auto_away: 300,
-        message_limit: 300,
-        auto_register_muc_nickname: true,
-        loglevel: 'debug',
-        modtools_disable_assign: ['owner', 'moderator', 'participant', 'visitor'],
-        modtools_disable_query: ['moderator', 'participant', 'visitor'],
-        enable_smacks: true,
-        // connection_options: { 'worker': '/dist/shared-connection-worker.js' },
-        persistent_store: 'IndexedDB',
-        message_archiving: 'always',
-        muc_domain: 'conference.chat.example.org',
-        muc_respect_autojoin: true,
-        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,
-        whitelisted_plugins: ['converse-debug', 'converse-batched-probe'],
+    window.addEventListener('converse-loaded', () => {
+        converse.plugins.add('converse-debug', {
+            initialize () {
+                const { _converse } = this;
+                window._converse = _converse;
+            }
+        });
+        converse.initialize({
+            muc_subscribe_to_rai: true,
+            theme: 'concord',
+            show_send_button: true,
+            auto_away: 300,
+            message_limit: 300,
+            auto_register_muc_nickname: true,
+            loglevel: 'debug',
+            modtools_disable_assign: ['owner', 'moderator', 'participant', 'visitor'],
+            modtools_disable_query: ['moderator', 'participant', 'visitor'],
+            enable_smacks: true,
+            // connection_options: { 'worker': '/dist/shared-connection-worker.js' },
+            persistent_store: 'IndexedDB',
+            message_archiving: 'always',
+            muc_domain: 'conference.chat.example.org',
+            muc_respect_autojoin: true,
+            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,
+            whitelisted_plugins: ['converse-debug', 'converse-batched-probe'],
+        });
     });
 </script>
 </html>

webpack.prod.js

@@ -5,7 +5,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const common = require("./webpack.common.js");
 const path = require('path');
 const webpack = require('webpack');
-const { merge}  = require("webpack-merge");
+const { merge }  = require("webpack-merge");
 
 const plugins = [
     new MiniCssExtractPlugin({filename: '../dist/converse.min.css'}),

webpack.serve.js

@@ -1,18 +1,21 @@
-/* global module */
+/* global module, __dirname */
 const HTMLWebpackPlugin = require('html-webpack-plugin');
 const common = require("./webpack.common.js");
 const { merge } = require("webpack-merge");
+const path = require("path");
 
 module.exports = merge(common, {
     mode: "development",
     devtool: "inline-source-map",
     devServer: {
-        contentBase: "./"
+        static: [ path.resolve(__dirname, '') ],
+        port: 3003
     },
     plugins: [
         new HTMLWebpackPlugin({
             title: 'Converse.js Dev',
-            template: 'webpack.html'
+            template: 'webpack.html',
+            filename: 'index.html'
         })
     ],
 });