Webpack (#14)

See https://github.com/flarum/core/pull/1367

* Replace gulp with webpack and npm scripts for JS compilation
* Set up Travis CI to commit compiled JS
* Restructure `js` directory; only one instance of npm, forum/admin are "submodules"
* Restructure `less` directory

extensions/pusher/.gitattributes

@@ -2,5 +2,4 @@
 .gitignore export-ignore
 .travis.yml export-ignore
 
-js/*/dist/*.js -diff
-
+js/dist/* -diff

extensions/pusher/.gitignore

@@ -2,5 +2,5 @@
 composer.phar
 .DS_Store
 Thumbs.db
-bower_components
 node_modules
+js/dist/*

extensions/pusher/.travis.yml

@@ -0,0 +1,15 @@
+language: minimal
+
+sudo: false
+
+cache:
+  directories:
+    - $HOME/.npm
+
+jobs:
+  include:
+    - stage: build
+      if: branch = master AND type = push
+      script: curl -s https://raw.githubusercontent.com/flarum/core/master/.travis/build.sh | bash -s -
+        -k $encrypted_01899427c3b8_key
+        -i $encrypted_01899427c3b8_iv

extensions/pusher/bootstrap.php

@@ -16,14 +16,15 @@ use Illuminate\Contracts\Events\Dispatcher;
 
 return [
     (new Extend\Assets('forum'))
-        ->asset(__DIR__.'/js/forum/dist/extension.js')
-        ->asset(__DIR__.'/less/forum/extension.less')
-        ->bootstrapper('flarum/pusher/main'),
+        ->js(__DIR__.'/js/dist/forum.js')
+        ->asset(__DIR__.'/less/forum.less'),
+
     (new Extend\Assets('admin'))
-        ->asset(__DIR__.'/js/admin/dist/extension.js')
-        ->bootstrapper('flarum/pusher/main'),
+        ->js(__DIR__.'/js/dist/admin.js'),
+
     (new Extend\Routes('api'))
         ->post('/pusher/auth', 'pusher.auth', AuthController::class),
+
     function (Dispatcher $events) {
         $events->subscribe(Listener\AddPusherApi::class);
         $events->subscribe(Listener\PushNewPosts::class);

extensions/pusher/js/admin.js

@@ -0,0 +1,10 @@
+/*
+ * This file is part of Flarum.
+ *
+ * (c) Toby Zerner <toby.zerner@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+export * from './src/admin';

extensions/pusher/js/admin/Gulpfile.js

@@ -1,7 +0,0 @@
-var gulp = require('flarum-gulp');
-
-gulp({
-  modules: {
-    'flarum/pusher': 'src/**/*.js'
-  }
-});

extensions/pusher/js/admin/dist/extension.js

@@ -1,102 +0,0 @@
-'use strict';
-
-System.register('flarum/pusher/components/PusherSettingsModal', ['flarum/components/SettingsModal'], function (_export, _context) {
-  "use strict";
-
-  var SettingsModal, PusherSettingsModal;
-  return {
-    setters: [function (_flarumComponentsSettingsModal) {
-      SettingsModal = _flarumComponentsSettingsModal.default;
-    }],
-    execute: function () {
-      PusherSettingsModal = function (_SettingsModal) {
-        babelHelpers.inherits(PusherSettingsModal, _SettingsModal);
-
-        function PusherSettingsModal() {
-          babelHelpers.classCallCheck(this, PusherSettingsModal);
-          return babelHelpers.possibleConstructorReturn(this, (PusherSettingsModal.__proto__ || Object.getPrototypeOf(PusherSettingsModal)).apply(this, arguments));
-        }
-
-        babelHelpers.createClass(PusherSettingsModal, [{
-          key: 'className',
-          value: function className() {
-            return 'PusherSettingsModal Modal--small';
-          }
-        }, {
-          key: 'title',
-          value: function title() {
-            return app.translator.trans('flarum-pusher.admin.pusher_settings.title');
-          }
-        }, {
-          key: 'form',
-          value: function form() {
-            return [m(
-              'div',
-              { className: 'Form-group' },
-              m(
-                'label',
-                null,
-                app.translator.trans('flarum-pusher.admin.pusher_settings.app_id_label')
-              ),
-              m('input', { className: 'FormControl', bidi: this.setting('flarum-pusher.app_id') })
-            ), m(
-              'div',
-              { className: 'Form-group' },
-              m(
-                'label',
-                null,
-                app.translator.trans('flarum-pusher.admin.pusher_settings.app_key_label')
-              ),
-              m('input', { className: 'FormControl', bidi: this.setting('flarum-pusher.app_key') })
-            ), m(
-              'div',
-              { className: 'Form-group' },
-              m(
-                'label',
-                null,
-                app.translator.trans('flarum-pusher.admin.pusher_settings.app_secret_label')
-              ),
-              m('input', { className: 'FormControl', bidi: this.setting('flarum-pusher.app_secret') })
-            ), m(
-              'div',
-              { className: 'Form-group' },
-              m(
-                'label',
-                null,
-                app.translator.trans('flarum-pusher.admin.pusher_settings.app_cluster_label')
-              ),
-              m('input', { className: 'FormControl', bidi: this.setting('flarum-pusher.app_cluster') })
-            )];
-          }
-        }]);
-        return PusherSettingsModal;
-      }(SettingsModal);
-
-      _export('default', PusherSettingsModal);
-    }
-  };
-});;
-'use strict';
-
-System.register('flarum/pusher/main', ['flarum/extend', 'flarum/app', 'flarum/pusher/components/PusherSettingsModal'], function (_export, _context) {
-  "use strict";
-
-  var extend, app, PusherSettingsModal;
-  return {
-    setters: [function (_flarumExtend) {
-      extend = _flarumExtend.extend;
-    }, function (_flarumApp) {
-      app = _flarumApp.default;
-    }, function (_flarumPusherComponentsPusherSettingsModal) {
-      PusherSettingsModal = _flarumPusherComponentsPusherSettingsModal.default;
-    }],
-    execute: function () {
-
-      app.initializers.add('flarum-pusher', function (app) {
-        app.extensionSettings['flarum-pusher'] = function () {
-          return app.modal.show(new PusherSettingsModal());
-        };
-      });
-    }
-  };
-});

extensions/pusher/js/admin/package.json

@@ -1,7 +0,0 @@
-{
-  "private": true,
-  "devDependencies": {
-    "gulp": "^3.9.1",
-    "flarum-gulp": "^0.2.0"
-  }
-}

extensions/pusher/js/forum.js

@@ -0,0 +1,10 @@
+/*
+ * This file is part of Flarum.
+ *
+ * (c) Toby Zerner <toby.zerner@gmail.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+export * from './src/forum';

extensions/pusher/js/forum/Gulpfile.js

@@ -1,7 +0,0 @@
-var gulp = require('flarum-gulp');
-
-gulp({
-  modules: {
-    'flarum/pusher': 'src/**/*.js'
-  }
-});

extensions/pusher/js/forum/dist/extension.js

@@ -1,177 +0,0 @@
-'use strict';
-
-System.register('flarum/pusher/main', ['flarum/extend', 'flarum/app', 'flarum/components/DiscussionList', 'flarum/components/DiscussionPage', 'flarum/components/IndexPage', 'flarum/components/Button'], function (_export, _context) {
-  "use strict";
-
-  var extend, app, DiscussionList, DiscussionPage, IndexPage, Button;
-  return {
-    setters: [function (_flarumExtend) {
-      extend = _flarumExtend.extend;
-    }, function (_flarumApp) {
-      app = _flarumApp.default;
-    }, function (_flarumComponentsDiscussionList) {
-      DiscussionList = _flarumComponentsDiscussionList.default;
-    }, function (_flarumComponentsDiscussionPage) {
-      DiscussionPage = _flarumComponentsDiscussionPage.default;
-    }, function (_flarumComponentsIndexPage) {
-      IndexPage = _flarumComponentsIndexPage.default;
-    }, function (_flarumComponentsButton) {
-      Button = _flarumComponentsButton.default;
-    }],
-    execute: function () {
-      /*global Pusher*/
-
-      app.initializers.add('flarum-pusher', function () {
-        var loadPusher = m.deferred();
-
-        $.getScript('//js.pusher.com/3.0/pusher.min.js', function () {
-          var socket = new Pusher(app.forum.attribute('pusherKey'), {
-            authEndpoint: app.forum.attribute('apiUrl') + '/pusher/auth',
-            cluster: app.forum.attribute('pusherCluster'),
-            auth: {
-              headers: {
-                'X-CSRF-Token': app.session.csrfToken
-              }
-            }
-          });
-
-          loadPusher.resolve({
-            main: socket.subscribe('public'),
-            user: app.session.user ? socket.subscribe('private-user' + app.session.user.id()) : null
-          });
-        });
-
-        app.pusher = loadPusher.promise;
-        app.pushedUpdates = [];
-
-        extend(DiscussionList.prototype, 'config', function (x, isInitialized, context) {
-          var _this = this;
-
-          if (isInitialized) return;
-
-          app.pusher.then(function (channels) {
-            channels.main.bind('newPost', function (data) {
-              var params = _this.props.params;
-
-              if (!params.q && !params.sort && !params.filter) {
-                if (params.tags) {
-                  var tag = app.store.getBy('tags', 'slug', params.tags);
-
-                  if (data.tagIds.indexOf(tag.id()) === -1) return;
-                }
-
-                var id = String(data.discussionId);
-
-                if ((!app.current.discussion || id !== app.current.discussion.id()) && app.pushedUpdates.indexOf(id) === -1) {
-                  app.pushedUpdates.push(id);
-
-                  if (app.current instanceof IndexPage) {
-                    app.setTitleCount(app.pushedUpdates.length);
-                  }
-
-                  m.redraw();
-                }
-              }
-            });
-
-            extend(context, 'onunload', function () {
-              return channels.main.unbind('newPost');
-            });
-          });
-        });
-
-        extend(DiscussionList.prototype, 'view', function (vdom) {
-          var _this2 = this;
-
-          if (app.pushedUpdates) {
-            var count = app.pushedUpdates.length;
-
-            if (count) {
-              vdom.children.unshift(Button.component({
-                className: 'Button Button--block DiscussionList-update',
-                onclick: function onclick() {
-                  _this2.refresh(false).then(function () {
-                    _this2.loadingUpdated = false;
-                    app.pushedUpdates = [];
-                    app.setTitleCount(0);
-                    m.redraw();
-                  });
-                  _this2.loadingUpdated = true;
-                },
-                loading: this.loadingUpdated,
-                children: app.translator.transChoice('flarum-pusher.forum.discussion_list.show_updates_text', count, { count: count })
-              }));
-            }
-          }
-        });
-
-        // Prevent any newly-created discussions from triggering the discussion list
-        // update button showing.
-        // TODO: Might be better pause the response to the push updates while the
-        // composer is loading? idk
-        extend(DiscussionList.prototype, 'addDiscussion', function (returned, discussion) {
-          var index = app.pushedUpdates.indexOf(discussion.id());
-
-          if (index !== -1) {
-            app.pushedUpdates.splice(index, 1);
-          }
-
-          if (app.current instanceof IndexPage) {
-            app.setTitleCount(app.pushedUpdates.length);
-          }
-
-          m.redraw();
-        });
-
-        extend(DiscussionPage.prototype, 'config', function (x, isInitialized, context) {
-          var _this3 = this;
-
-          if (isInitialized) return;
-
-          app.pusher.then(function (channels) {
-            channels.main.bind('newPost', function (data) {
-              var id = String(data.discussionId);
-
-              if (_this3.discussion && _this3.discussion.id() === id && _this3.stream) {
-                var oldCount = _this3.discussion.commentsCount();
-
-                app.store.find('discussions', _this3.discussion.id()).then(function () {
-                  _this3.stream.update();
-
-                  if (!document.hasFocus()) {
-                    app.setTitleCount(Math.max(0, _this3.discussion.commentsCount() - oldCount));
-
-                    $(window).one('focus', function () {
-                      return app.setTitleCount(0);
-                    });
-                  }
-                });
-              }
-            });
-
-            extend(context, 'onunload', function () {
-              return channels.main.unbind('newPost');
-            });
-          });
-        });
-
-        extend(IndexPage.prototype, 'actionItems', function (items) {
-          items.remove('refresh');
-        });
-
-        app.pusher.then(function (channels) {
-          if (channels.user) {
-            channels.user.bind('notification', function () {
-              app.session.user.pushAttributes({
-                unreadNotificationsCount: app.session.user.unreadNotificationsCount() + 1,
-                newNotificationsCount: app.session.user.newNotificationsCount() + 1
-              });
-              delete app.cache.notifications;
-              m.redraw();
-            });
-          }
-        });
-      });
-    }
-  };
-});

extensions/pusher/js/forum/package.json

@@ -1,7 +0,0 @@
-{
-  "private": true,
-  "devDependencies": {
-    "gulp": "^3.9.1",
-    "flarum-gulp": "^0.2.0"
-  }
-}

extensions/pusher/js/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@flarum/flarum-ext-pusher",
+  "version": "0.0.0",
+  "dependencies": {
+    "flarum-webpack-config": "^0.1.0-beta.8",
+    "webpack": "^4.0.0",
+    "webpack-cli": "^3.0.7"
+  },
+  "scripts": {
+    "build": "webpack --mode production --progress",
+    "watch": "webpack --mode development --watch"
+  }
+}

extensions/pusher/js/src/admin/index.js

@@ -1,7 +1,7 @@
 import { extend } from 'flarum/extend';
 import app from 'flarum/app';
 
-import PusherSettingsModal from 'flarum/pusher/components/PusherSettingsModal';
+import PusherSettingsModal from './components/PusherSettingsModal';
 
 app.initializers.add('flarum-pusher', app => {
   app.extensionSettings['flarum-pusher'] = () => app.modal.show(new PusherSettingsModal());

extensions/pusher/js/webpack.config.js

@@ -0,0 +1,3 @@
+const config = require('flarum-webpack-config');
+
+module.exports = config();

extensions/pusher/scripts/compile.sh

@@ -1,27 +0,0 @@
-#!/usr/bin/env bash
-
-# This script compiles the extension so that it can be used in a Flarum
-# installation. It should be run from the root directory of the extension.
-
-base=$PWD
-
-cd "${base}/js"
-
-if [ -f bower.json ]; then
-  bower install
-fi
-
-for app in forum admin; do
-  cd "${base}/js"
-
-  if [ -d $app ]; then
-    cd $app
-
-    if [ -f bower.json ]; then
-      bower install
-    fi
-
-    npm install
-    gulp --production
-  fi
-done