Webpack (#15)

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/likes/.gitattributes

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

extensions/likes/.gitignore

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

extensions/likes/.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_13ae19a9a0d2_key
+        -i $encrypted_13ae19a9a0d2_iv

extensions/likes/bootstrap.php

@@ -15,12 +15,12 @@ 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/likes/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/likes/main'),
+        ->js(__DIR__.'/js/dist/admin.js'),
+
     function (Dispatcher $events) {
         $events->subscribe(Listener\AddPostLikesRelationship::class);
         $events->subscribe(Listener\SaveLikesToDatabase::class);

extensions/likes/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/likes/js/admin/Gulpfile.js

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

extensions/likes/js/admin/dist/extension.js

@@ -1,28 +0,0 @@
-'use strict';
-
-System.register('flarum/likes/main', ['flarum/extend', 'flarum/app', 'flarum/components/PermissionGrid'], function (_export, _context) {
-  "use strict";
-
-  var extend, app, PermissionGrid;
-  return {
-    setters: [function (_flarumExtend) {
-      extend = _flarumExtend.extend;
-    }, function (_flarumApp) {
-      app = _flarumApp.default;
-    }, function (_flarumComponentsPermissionGrid) {
-      PermissionGrid = _flarumComponentsPermissionGrid.default;
-    }],
-    execute: function () {
-
-      app.initializers.add('flarum-likes', function () {
-        extend(PermissionGrid.prototype, 'replyItems', function (items) {
-          items.add('likePosts', {
-            icon: 'thumbs-o-up',
-            label: app.translator.trans('flarum-likes.admin.permissions.like_posts_label'),
-            permission: 'discussion.likePosts'
-          });
-        });
-      });
-    }
-  };
-});

extensions/likes/js/admin/package.json

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

extensions/likes/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/likes/js/forum/Gulpfile.js

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

extensions/likes/js/forum/dist/extension.js

@@ -1,304 +0,0 @@
-'use strict';
-
-System.register('flarum/likes/addLikeAction', ['flarum/extend', 'flarum/app', 'flarum/components/Button', 'flarum/components/CommentPost'], function (_export, _context) {
-  "use strict";
-
-  var extend, app, Button, CommentPost;
-
-  _export('default', function () {
-    extend(CommentPost.prototype, 'actionItems', function (items) {
-      var post = this.props.post;
-
-      if (post.isHidden() || !post.canLike()) return;
-
-      var isLiked = app.session.user && post.likes().some(function (user) {
-        return user === app.session.user;
-      });
-
-      items.add('like', Button.component({
-        children: app.translator.trans(isLiked ? 'flarum-likes.forum.post.unlike_link' : 'flarum-likes.forum.post.like_link'),
-        className: 'Button Button--link',
-        onclick: function onclick() {
-          isLiked = !isLiked;
-
-          post.save({ isLiked: isLiked });
-
-          // We've saved the fact that we do or don't like the post, but in order
-          // to provide instantaneous feedback to the user, we'll need to add or
-          // remove the like from the relationship data manually.
-          var data = post.data.relationships.likes.data;
-          data.some(function (like, i) {
-            if (like.id === app.session.user.id()) {
-              data.splice(i, 1);
-              return true;
-            }
-          });
-
-          if (isLiked) {
-            data.unshift({ type: 'users', id: app.session.user.id() });
-          }
-        }
-      }));
-    });
-  });
-
-  return {
-    setters: [function (_flarumExtend) {
-      extend = _flarumExtend.extend;
-    }, function (_flarumApp) {
-      app = _flarumApp.default;
-    }, function (_flarumComponentsButton) {
-      Button = _flarumComponentsButton.default;
-    }, function (_flarumComponentsCommentPost) {
-      CommentPost = _flarumComponentsCommentPost.default;
-    }],
-    execute: function () {}
-  };
-});;
-'use strict';
-
-System.register('flarum/likes/addLikesList', ['flarum/extend', 'flarum/app', 'flarum/components/CommentPost', 'flarum/helpers/punctuateSeries', 'flarum/helpers/username', 'flarum/helpers/icon', 'flarum/likes/components/PostLikesModal'], function (_export, _context) {
-  "use strict";
-
-  var extend, app, CommentPost, punctuateSeries, username, icon, PostLikesModal;
-
-  _export('default', function () {
-    extend(CommentPost.prototype, 'footerItems', function (items) {
-      var post = this.props.post;
-      var likes = post.likes();
-
-      if (likes && likes.length) {
-        var limit = 4;
-        var overLimit = likes.length > limit;
-
-        // Construct a list of names of users who have liked this post. Make sure the
-        // current user is first in the list, and cap a maximum of 4 items.
-        var names = likes.sort(function (a) {
-          return a === app.session.user ? -1 : 1;
-        }).slice(0, overLimit ? limit - 1 : limit).map(function (user) {
-          return m(
-            'a',
-            { href: app.route.user(user), config: m.route },
-            user === app.session.user ? app.translator.trans('flarum-likes.forum.post.you_text') : username(user)
-          );
-        });
-
-        // If there are more users that we've run out of room to display, add a "x
-        // others" name to the end of the list. Clicking on it will display a modal
-        // with a full list of names.
-        if (overLimit) {
-          var count = likes.length - names.length;
-
-          names.push(m(
-            'a',
-            { href: '#', onclick: function onclick(e) {
-                e.preventDefault();
-                app.modal.show(new PostLikesModal({ post: post }));
-              } },
-            app.translator.transChoice('flarum-likes.forum.post.others_link', count, { count: count })
-          ));
-        }
-
-        items.add('liked', m(
-          'div',
-          { className: 'Post-likedBy' },
-          icon('thumbs-o-up'),
-          app.translator.transChoice('flarum-likes.forum.post.liked_by' + (likes[0] === app.session.user ? '_self' : '') + '_text', names.length, {
-            count: names.length,
-            users: punctuateSeries(names)
-          })
-        ));
-      }
-    });
-  });
-
-  return {
-    setters: [function (_flarumExtend) {
-      extend = _flarumExtend.extend;
-    }, function (_flarumApp) {
-      app = _flarumApp.default;
-    }, function (_flarumComponentsCommentPost) {
-      CommentPost = _flarumComponentsCommentPost.default;
-    }, function (_flarumHelpersPunctuateSeries) {
-      punctuateSeries = _flarumHelpersPunctuateSeries.default;
-    }, function (_flarumHelpersUsername) {
-      username = _flarumHelpersUsername.default;
-    }, function (_flarumHelpersIcon) {
-      icon = _flarumHelpersIcon.default;
-    }, function (_flarumLikesComponentsPostLikesModal) {
-      PostLikesModal = _flarumLikesComponentsPostLikesModal.default;
-    }],
-    execute: function () {}
-  };
-});;
-'use strict';
-
-System.register('flarum/likes/components/PostLikedNotification', ['flarum/components/Notification', 'flarum/helpers/username', 'flarum/helpers/punctuateSeries'], function (_export, _context) {
-  "use strict";
-
-  var Notification, username, punctuateSeries, PostLikedNotification;
-  return {
-    setters: [function (_flarumComponentsNotification) {
-      Notification = _flarumComponentsNotification.default;
-    }, function (_flarumHelpersUsername) {
-      username = _flarumHelpersUsername.default;
-    }, function (_flarumHelpersPunctuateSeries) {
-      punctuateSeries = _flarumHelpersPunctuateSeries.default;
-    }],
-    execute: function () {
-      PostLikedNotification = function (_Notification) {
-        babelHelpers.inherits(PostLikedNotification, _Notification);
-
-        function PostLikedNotification() {
-          babelHelpers.classCallCheck(this, PostLikedNotification);
-          return babelHelpers.possibleConstructorReturn(this, (PostLikedNotification.__proto__ || Object.getPrototypeOf(PostLikedNotification)).apply(this, arguments));
-        }
-
-        babelHelpers.createClass(PostLikedNotification, [{
-          key: 'icon',
-          value: function icon() {
-            return 'thumbs-o-up';
-          }
-        }, {
-          key: 'href',
-          value: function href() {
-            return app.route.post(this.props.notification.subject());
-          }
-        }, {
-          key: 'content',
-          value: function content() {
-            var notification = this.props.notification;
-            var user = notification.sender();
-            var auc = notification.additionalUnreadCount();
-
-            return app.translator.transChoice('flarum-likes.forum.notifications.post_liked_text', auc + 1, {
-              user: user,
-              username: auc ? punctuateSeries([username(user), app.translator.transChoice('flarum-likes.forum.notifications.others_text', auc, { count: auc })]) : undefined
-            });
-          }
-        }, {
-          key: 'excerpt',
-          value: function excerpt() {
-            return this.props.notification.subject().contentPlain();
-          }
-        }]);
-        return PostLikedNotification;
-      }(Notification);
-
-      _export('default', PostLikedNotification);
-    }
-  };
-});;
-'use strict';
-
-System.register('flarum/likes/components/PostLikesModal', ['flarum/components/Modal', 'flarum/helpers/avatar', 'flarum/helpers/username'], function (_export, _context) {
-  "use strict";
-
-  var Modal, avatar, username, PostLikesModal;
-  return {
-    setters: [function (_flarumComponentsModal) {
-      Modal = _flarumComponentsModal.default;
-    }, function (_flarumHelpersAvatar) {
-      avatar = _flarumHelpersAvatar.default;
-    }, function (_flarumHelpersUsername) {
-      username = _flarumHelpersUsername.default;
-    }],
-    execute: function () {
-      PostLikesModal = function (_Modal) {
-        babelHelpers.inherits(PostLikesModal, _Modal);
-
-        function PostLikesModal() {
-          babelHelpers.classCallCheck(this, PostLikesModal);
-          return babelHelpers.possibleConstructorReturn(this, (PostLikesModal.__proto__ || Object.getPrototypeOf(PostLikesModal)).apply(this, arguments));
-        }
-
-        babelHelpers.createClass(PostLikesModal, [{
-          key: 'className',
-          value: function className() {
-            return 'PostLikesModal Modal--small';
-          }
-        }, {
-          key: 'title',
-          value: function title() {
-            return app.translator.trans('flarum-likes.forum.post_likes.title');
-          }
-        }, {
-          key: 'content',
-          value: function content() {
-            return m(
-              'div',
-              { className: 'Modal-body' },
-              m(
-                'ul',
-                { className: 'PostLikesModal-list' },
-                this.props.post.likes().map(function (user) {
-                  return m(
-                    'li',
-                    null,
-                    m(
-                      'a',
-                      { href: app.route.user(user), config: m.route },
-                      avatar(user),
-                      ' ',
-                      ' ',
-                      username(user)
-                    )
-                  );
-                })
-              )
-            );
-          }
-        }]);
-        return PostLikesModal;
-      }(Modal);
-
-      _export('default', PostLikesModal);
-    }
-  };
-});;
-'use strict';
-
-System.register('flarum/likes/main', ['flarum/extend', 'flarum/app', 'flarum/models/Post', 'flarum/Model', 'flarum/components/NotificationGrid', 'flarum/likes/addLikeAction', 'flarum/likes/addLikesList', 'flarum/likes/components/PostLikedNotification'], function (_export, _context) {
-  "use strict";
-
-  var extend, app, Post, Model, NotificationGrid, addLikeAction, addLikesList, PostLikedNotification;
-  return {
-    setters: [function (_flarumExtend) {
-      extend = _flarumExtend.extend;
-    }, function (_flarumApp) {
-      app = _flarumApp.default;
-    }, function (_flarumModelsPost) {
-      Post = _flarumModelsPost.default;
-    }, function (_flarumModel) {
-      Model = _flarumModel.default;
-    }, function (_flarumComponentsNotificationGrid) {
-      NotificationGrid = _flarumComponentsNotificationGrid.default;
-    }, function (_flarumLikesAddLikeAction) {
-      addLikeAction = _flarumLikesAddLikeAction.default;
-    }, function (_flarumLikesAddLikesList) {
-      addLikesList = _flarumLikesAddLikesList.default;
-    }, function (_flarumLikesComponentsPostLikedNotification) {
-      PostLikedNotification = _flarumLikesComponentsPostLikedNotification.default;
-    }],
-    execute: function () {
-
-      app.initializers.add('flarum-likes', function () {
-        app.notificationComponents.postLiked = PostLikedNotification;
-
-        Post.prototype.canLike = Model.attribute('canLike');
-        Post.prototype.likes = Model.hasMany('likes');
-
-        addLikeAction();
-        addLikesList();
-
-        extend(NotificationGrid.prototype, 'notificationTypes', function (items) {
-          items.add('postLiked', {
-            name: 'postLiked',
-            icon: 'thumbs-o-up',
-            label: app.translator.trans('flarum-likes.forum.settings.notify_post_liked_label')
-          });
-        });
-      });
-    }
-  };
-});

extensions/likes/js/forum/package.json

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

extensions/likes/js/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@flarum/flarum-ext-likes",
+  "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/likes/js/src/forum/addLikesList.js

@@ -5,7 +5,7 @@ import punctuateSeries from 'flarum/helpers/punctuateSeries';
 import username from 'flarum/helpers/username';
 import icon from 'flarum/helpers/icon';
 
-import PostLikesModal from 'flarum/likes/components/PostLikesModal';
+import PostLikesModal from './components/PostLikesModal';
 
 export default function() {
   extend(CommentPost.prototype, 'footerItems', function(items) {

extensions/likes/js/src/forum/index.js

@@ -4,9 +4,9 @@ import Post from 'flarum/models/Post';
 import Model from 'flarum/Model';
 import NotificationGrid from 'flarum/components/NotificationGrid';
 
-import addLikeAction from 'flarum/likes/addLikeAction';
-import addLikesList from 'flarum/likes/addLikesList';
-import PostLikedNotification from 'flarum/likes/components/PostLikedNotification';
+import addLikeAction from './addLikeAction';
+import addLikesList from './addLikesList';
+import PostLikedNotification from './components/PostLikedNotification';
 
 app.initializers.add('flarum-likes', () => {
   app.notificationComponents.postLiked = PostLikedNotification;

extensions/likes/js/webpack.config.js

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

extensions/likes/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