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

@@ -0,0 +1,5 @@
+.gitattributes export-ignore
+.gitignore export-ignore
+.travis.yml export-ignore
+
+js/dist/* -diff

extensions/approval/.gitignore

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

extensions/approval/.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_065f739a94a3_key
+        -i $encrypted_065f739a94a3_iv

extensions/approval/bootstrap.php

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

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

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

extensions/approval/js/admin/dist/extension.js

@@ -1,53 +0,0 @@
-'use strict';
-
-System.register('flarum/approval/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('approval', function () {
-        extend(app, 'getRequiredPermissions', function (required, permission) {
-          if (permission === 'discussion.startWithoutApproval') {
-            required.push('startDiscussion');
-          }
-          if (permission === 'discussion.replyWithoutApproval') {
-            required.push('discussion.reply');
-          }
-        });
-
-        extend(PermissionGrid.prototype, 'startItems', function (items) {
-          items.add('startDiscussionsWithoutApproval', {
-            icon: 'check',
-            label: app.translator.trans('flarum-approval.admin.permissions.start_discussions_without_approval_label'),
-            permission: 'discussion.startWithoutApproval'
-          }, 95);
-        });
-
-        extend(PermissionGrid.prototype, 'replyItems', function (items) {
-          items.add('replyWithoutApproval', {
-            icon: 'check',
-            label: app.translator.trans('flarum-approval.admin.permissions.reply_without_approval_label'),
-            permission: 'discussion.replyWithoutApproval'
-          }, 95);
-        });
-
-        extend(PermissionGrid.prototype, 'moderateItems', function (items) {
-          items.add('approvePosts', {
-            icon: 'check',
-            label: app.translator.trans('flarum-approval.admin.permissions.approve_posts_label'),
-            permission: 'discussion.approvePosts'
-          }, 65);
-        });
-      });
-    }
-  };
-});

extensions/approval/js/admin/package.json

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

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

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

extensions/approval/js/forum/dist/extension.js

@@ -1,90 +0,0 @@
-'use strict';
-
-System.register('flarum/approval/main', ['flarum/extend', 'flarum/app', 'flarum/models/Discussion', 'flarum/models/Post', 'flarum/components/Badge', 'flarum/components/DiscussionListItem', 'flarum/components/Post', 'flarum/components/CommentPost', 'flarum/components/Button', 'flarum/utils/PostControls'], function (_export, _context) {
-  "use strict";
-
-  var extend, override, app, Discussion, Post, Badge, DiscussionListItem, PostComponent, CommentPost, Button, PostControls;
-  return {
-    setters: [function (_flarumExtend) {
-      extend = _flarumExtend.extend;
-      override = _flarumExtend.override;
-    }, function (_flarumApp) {
-      app = _flarumApp.default;
-    }, function (_flarumModelsDiscussion) {
-      Discussion = _flarumModelsDiscussion.default;
-    }, function (_flarumModelsPost) {
-      Post = _flarumModelsPost.default;
-    }, function (_flarumComponentsBadge) {
-      Badge = _flarumComponentsBadge.default;
-    }, function (_flarumComponentsDiscussionListItem) {
-      DiscussionListItem = _flarumComponentsDiscussionListItem.default;
-    }, function (_flarumComponentsPost) {
-      PostComponent = _flarumComponentsPost.default;
-    }, function (_flarumComponentsCommentPost) {
-      CommentPost = _flarumComponentsCommentPost.default;
-    }, function (_flarumComponentsButton) {
-      Button = _flarumComponentsButton.default;
-    }, function (_flarumUtilsPostControls) {
-      PostControls = _flarumUtilsPostControls.default;
-    }],
-    execute: function () {
-
-      app.initializers.add('flarum-approval', function () {
-        Discussion.prototype.isApproved = Discussion.attribute('isApproved');
-
-        extend(Discussion.prototype, 'badges', function (items) {
-          if (!this.isApproved() && !items.has('hidden')) {
-            items.add('awaitingApproval', m(Badge, { type: 'awaitingApproval', icon: 'gavel', label: app.translator.trans('flarum-approval.forum.badge.awaiting_approval_tooltip') }));
-          }
-        });
-
-        Post.prototype.isApproved = Post.attribute('isApproved');
-        Post.prototype.canApprove = Post.attribute('canApprove');
-
-        extend(DiscussionListItem.prototype, 'attrs', function (attrs) {
-          if (!this.props.discussion.isApproved()) {
-            attrs.className += ' DiscussionListItem--unapproved';
-          }
-        });
-
-        extend(PostComponent.prototype, 'attrs', function (attrs) {
-          if (!this.props.post.isApproved()) {
-            attrs.className += ' Post--unapproved';
-          }
-        });
-
-        extend(CommentPost.prototype, 'headerItems', function (items) {
-          if (!this.props.post.isApproved() && !this.props.post.isHidden()) {
-            items.add('unapproved', app.translator.trans('flarum-approval.forum.post.awaiting_approval_text'));
-          }
-        });
-
-        override(PostComponent.prototype, 'flagReason', function (original, flag) {
-          if (flag.type() === 'approval') {
-            return app.translator.trans('flarum-approval.forum.post.awaiting_approval_text');
-          }
-
-          return original(flag);
-        });
-
-        extend(PostControls, 'destructiveControls', function (items, post) {
-          if (!post.isApproved() && post.canApprove()) {
-            items.add('approve', m(
-              Button,
-              { icon: 'check', onclick: PostControls.approveAction.bind(post) },
-              app.translator.trans('flarum-approval.forum.post_controls.approve_button')
-            ), 10);
-          }
-        });
-
-        PostControls.approveAction = function () {
-          this.save({ isApproved: true });
-
-          if (this.number() === 1) {
-            this.discussion().pushAttributes({ isApproved: true });
-          }
-        };
-      }, -10); // set initializer priority to run after reports
-    }
-  };
-});

extensions/approval/js/forum/package.json

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

extensions/approval/js/package.json

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

@@ -2,7 +2,7 @@ import { extend } from 'flarum/extend';
 import app from 'flarum/app';
 import PermissionGrid from 'flarum/components/PermissionGrid';
 
-app.initializers.add('approval', () => {
+app.initializers.add('flarum-approval', () => {
   extend(app, 'getRequiredPermissions', function(required, permission) {
     if (permission === 'discussion.startWithoutApproval') {
       required.push('startDiscussion');

extensions/approval/js/webpack.config.js

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

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