Add shims to webpack config and fix bugs in templates

74eed32e · JC Brand · 6dc9e8ed · 74eed32e · 74eed32e · 74eed32e
Commit 74eed32e authored Jun 02, 2018 by JC Brand
12 changed files
--- a/dev.html
+++ b/dev.html
@@ -11,34 +11,35 @@
    <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
    <link type="text/css" rel="stylesheet" media="screen" href="css/fullpage.css" />
    <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
-    <script src="node_modules/requirejs/require.js"></script>
-    <script src="src/config.js"></script>
+    <![if gte IE 11]>
+        <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
+        <script src="dist/converse.js"></script>
+    <![endif]>
 </head>
 <body class="reset">
 <script>
-    require(['converse'], function (converse) {
+    converse.initialize({
-        converse.initialize({
+        auto_away: 300,
-            auto_away: 300,
+        i18n: 'en',
-            i18n: 'en',
+        // auto_join_rooms: [
-            // auto_join_rooms: [
+        //     'discuss@conference.conversejs.org',
-            //     'discuss@conference.conversejs.org',
+        //     'prosody@conference.prosody.im',
-            //     'prosody@conference.prosody.im',
+        //     'jdev@conference.jabber.org'
-            //     'jdev@conference.jabber.org'
+        // ],
-            // ],
+        // websocket_url: 'ws://chat.example.org:5280/xmpp-websocket',
-            websocket_url: 'ws://chat.example.org:5280/xmpp-websocket',
+        view_mode: 'fullscreen',
-            view_mode: 'fullscreen',
+        archived_messages_page_size: '500',
-            archived_messages_page_size: '500',
+        allow_public_bookmarks: true,
-            allow_public_bookmarks: true,
+        notify_all_room_messages: [
-            notify_all_room_messages: [
+            'discuss@conference.conversejs.org'
-                'discuss@conference.conversejs.org'
+        ],
-            ],
+        // bosh_service_url: 'http://chat.example.org:5280/http-bind/',
-            bosh_service_url: 'http://chat.example.org:5280/http-bind/',
+        bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
-            bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
+        message_archiving: 'always',
-            message_archiving: 'always',
+        debug: true
-            debug: true
-        });
    });
 </script>
 </body>

--- a/dist/converse.js
+++ b/dist/converse.js
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -47,9 +47,11 @@
    "es6-promise": "^4.1.0",
    "eslint": "4.19.1",
    "eslint-plugin-lodash": "^2.3.3",
+    "exports-loader": "^0.7.0",
    "filesize": "^3.6.1",
    "font-awesome": "^4.7.0",
    "http-server": "^0.10.0",
+    "imports-loader": "^0.8.0",
    "install": "^0.9.5",
    "jasmine-core": "2.6.4",
    "jed": "1.1.1",

--- a/src/converse-chatview.js
+++ b/src/converse-chatview.js
@@ -150,6 +150,7 @@
                    return tpl_emojis(
                        _.extend(
                            this.model.toJSON(), {
+                                '_': _,
                                'transform': _converse.use_emojione ? emojione.shortnameToImage : emojione.shortnameToUnicode,
                                'emojis_by_category': u.getEmojisByCategory(_converse, emojione),
                                'toned_emojis': u.getTonedEmojis(_converse),
@@ -657,7 +658,7 @@
                            tpl_help_message({
                                'isodate': moment().format(),
                                'type': type,
-                                'message': xss.filterXSS(msg, {'whiteList': {'strong': []}})
+                                'message': filterXSS(msg, {'whiteList': {'strong': []}})
                            })
                        );
                    });

--- a/src/converse-muc-views.js
+++ b/src/converse-muc-views.js
@@ -1580,7 +1580,10 @@
                    const show = this.model.get('show');
                    return tpl_occupant(
                        _.extend(
-                            { 'jid': '',
+                            { '_': _, // XXX Normally this should already be included,
+                                      // but with the current webpack build,
+                                      // we only get a subset of the _ methods.
+                              'jid': '',
                              'show': show,
                              'hint_show': _converse.PRETTY_CHAT_STATUS[show],
                              'hint_occupant': __('Click to mention %1$s in your message.', this.model.get('nick')),

--- a/src/templates/alert_modal.html
+++ b/src/templates/alert_modal.html
@@ -7,7 +7,7 @@
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
-      <div class="modal-body">{[ _.each(o.messages, function (message) { ]}
+      <div class="modal-body">{[o.messages.each(function (message) { ]}
          <p>{{{message}}}</p>
      {[ }) ]}
    </div>

--- a/src/templates/emojis.html
+++ b/src/templates/emojis.html
 <div class="emoji-picker-container">
-{[ _.forEach(o.emojis_by_category, function (obj, category) { ]}
+{[ o._.forEach(o.emojis_by_category, function (obj, category) { ]}
    <ul class="emoji-picker emoji-picker-{{{category}}} {[ if (o.current_category !== category) { ]} hidden {[ } ]}">
-        {[ _.forEach(o.emojis_by_category[category], function (emoji) { ]}
+        {[ o._.forEach(o.emojis_by_category[category], function (emoji) { ]}
        <li class="emoji insert-emoji {[ if (o.shouldBeHidden(emoji._shortname, o.current_skintone, o.toned_emojis)) { ]} hidden {[ }; ]}"
            data-emoji="{{{emoji._shortname}}}">
                <a href="#" data-emoji="{{{emoji._shortname}}}"> {{ o.transform(emoji._shortname) }}  </a>
@@ -12,7 +12,7 @@
 <ul class="emoji-toolbar">
    <li class="emoji-category-picker">
        <ul>
-            {[ _.forEach(o.emojis_by_category, function (obj, category) { ]}
+            {[ o._.forEach(o.emojis_by_category, function (obj, category) { ]}
                <li data-category="{{{category}}}" class="emoji-category {[ if (o.current_category === category) { ]} picked {[ } ]}">
                    <a class="pick-category" href="#" data-category="{{{category}}}"> {{ o.transform(o.emojis_by_category[category][0]._shortname) }} </a>
                </li>
@@ -21,7 +21,7 @@
    </li>
    <li class="emoji-skintone-picker">
        <ul>
-            {[ _.forEach(o.skintones, function (skintone) { ]}
+            {[ o._.forEach(o.skintones, function (skintone) { ]}
                <li data-skintone="{{{skintone}}}" class="emoji-skintone {[ if (o.current_skintone === skintone) { ]} picked {[ } ]}">
                    <a class="pick-skintone" href="#" data-skintone="{{{skintone}}}"> {{ o.transform(':'+skintone+':') }} </a>
                </li>

--- a/src/templates/field.html
+++ b/src/templates/field.html
 <field var="{{{o.name}}}">
 {[ if (_.isArray(o.value)) { ]}
-    {[ _.each(o.value,function(arrayValue) { ]}<value>{{{arrayValue}}}</value>{[ }); ]}
+    {[ o.value.forEach(function (arrayValue) { ]}<value>{{{arrayValue}}}</value>{[ }); ]}
 {[ } else { ]}
    <value>{{{o.value}}}</value>
 {[ } ]}</field>
--- a/src/templates/message.html
+++ b/src/templates/message.html
@@ -5,7 +5,7 @@
    <div class="chat-msg-content">
        <span class="chat-msg-heading">
            <span class="chat-msg-author">{{{o.username}}}
-                {[ _.each(o.roles, function (role) { ]} <span class="badge badge-secondary">{{{role}}}</span> {[ }); ]}
+                {[o.roles.forEach(function (role) { ]} <span class="badge badge-secondary">{{{role}}}</span> {[ }); ]}
            </span>
            <span class="chat-msg-time">{{{o.pretty_time}}}</span>
        </span>

--- a/src/templates/occupant.html
+++ b/src/templates/occupant.html
@@ -8,7 +8,7 @@
    {[ if (o.role === "visitor") { ]}
       title="{{{ o.jid }}} {{{ o.desc_visitor }}} {{{ o.hint_occupant }}}"
    {[ } ]}
-    {[ if (!_.includes(["visitor", "participant", "moderator"], o.role)) { ]}
+    {[ if (!o._.includes(["visitor", "participant", "moderator"], o.role)) { ]}
       title="{{{ o.jid }}} {{{ o.hint_occupant }}}"
    {[ } ]}>
    <div class="row no-gutters">

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -13,7 +13,28 @@ const config = {
    },
    devtool: 'source-map',
    module: {
-        rules: [{
+        rules: [
+        {
+            test: path.resolve(__dirname, "node_modules/backbone.overview/dist/backbone.orderedlistview"),
+            use: 'imports-loader?backbone.nativeview'
+        },
+        {
+            test: path.resolve(__dirname, "node_modules/backbone.overview/dist/backbone.overview"),
+            use: 'imports-loader?backbone.nativeview'
+        },
+        {
+            test: path.resolve(__dirname, "node_modules/backbone.vdomview/dist/backbone.vdomview"),
+            use: 'imports-loader?backbone.nativeview'
+        },
+        {
+            test: path.resolve(__dirname, "node_modules/awesomplete-avoid-xss/awesomplete"),
+            use: "exports-loader?Awesomplete"
+        },
+        {
+            test: path.resolve(__dirname, "node_modules/xss/dist/xss"),
+            use: "exports-loader?filterXSS,filterCSS"
+        },
+        {
            test: /\.html$/,
            exclude: /node_modules/,
            use: [{