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

spec/mock.js

@@ -1,10 +1,10 @@
-/*global converse */
-
 const mock = {};
 window.mock = mock;
-let _converse, initConverse;
+let _converse;
 
-const converseLoaded = new Promise(resolve => window.addEventListener('converse-loaded', resolve));
+const converse = window.converse;
+converse.load();
+const { u, sizzle, Strophe, dayjs, $iq, $msg, $pres } = converse.env;
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 7000;
 
@@ -25,7 +25,6 @@ mock.initConverse = function (promise_names=[], settings=null, func) {
         }
         document.title = "Converse Tests";
 
-        await converseLoaded;
         await initConverse(settings);
         await Promise.all((promise_names || []).map(_converse.api.waitUntil));
         try {
@@ -38,9 +37,6 @@ mock.initConverse = function (promise_names=[], settings=null, func) {
     }
 };
 
-window.addEventListener('converse-loaded', () => {
-    const { u, sizzle, Strophe, dayjs, $iq, $msg, $pres } = converse.env;
-
 mock.waitUntilDiscoConfirmed = async function (_converse, entity_jid, identities, features=[], items=[], type='info') {
     const sel = `iq[to="${entity_jid}"] query[xmlns="http://jabber.org/protocol/disco#${type}"]`;
     const iq = await u.waitUntil(() => _converse.connection.IQ_stanzas.filter(iq => sizzle(sel, iq).length).pop(), 300);
@@ -619,7 +615,7 @@ window.addEventListener('converse-loaded', () => {
     window.sessionStorage.removeItem(cache_key+'fetched');
 }
 
-    initConverse = async (settings) => {
+const initConverse = async (settings) => {
     clearStores();
     await clearIndexedDB();
 
@@ -676,6 +672,3 @@ window.addEventListener('converse-loaded', () => {
     window.converse_disable_effects = true;
     return _converse;
 }
-});
-
-converse.load();

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,10 +9,10 @@
     <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>
+    window.addEventListener('converse-loaded', () => {
         converse.plugins.add('converse-debug', {
             initialize () {
                 const { _converse } = this;
@@ -41,5 +41,6 @@
             muc_show_logs_before_join: true,
             whitelisted_plugins: ['converse-debug', 'converse-batched-probe'],
         });
+    });
 </script>
 </html>

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'
         })
     ],
 });