Webpack (#52)

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"
* Maintain partial compatibility API (importing from absolute paths) for extensions
* Restructure `less` directory

extensions/tags/.gitattributes

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

extensions/tags/.gitignore

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

extensions/tags/.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_e0713a64e02e_key
+        -i $encrypted_e0713a64e02e_iv

extensions/tags/bootstrap.php

@@ -18,22 +18,24 @@ use Illuminate\Contracts\Events\Dispatcher;
 
 return [
     (new Extend\Assets('forum'))
-        ->asset(__DIR__.'/js/forum/dist/extension.js')
+        ->js(__DIR__.'/js/dist/forum.js')
-        ->asset(__DIR__.'/less/forum/extension.less')
+        ->asset(__DIR__.'/less/forum.less'),
-        ->bootstrapper('flarum/tags/main'),
+
     (new Extend\Assets('admin'))
-        ->asset(__DIR__.'/js/admin/dist/extension.js')
+        ->js(__DIR__.'/js/dist/admin.js')
-        ->asset(__DIR__.'/less/admin/extension.less')
+        ->asset(__DIR__.'/less/admin.less'),
-        ->bootstrapper('flarum/tags/main'),
+
     (new Extend\Routes('forum'))
         ->get('/t/{slug}', 'tag', FrontendController::class)
         ->get('/tags', 'tags', FrontendController::class),
+
     (new Extend\Routes('api'))
         ->get('/tags', 'tags.index', Controller\ListTagsController::class)
         ->post('/tags', 'tags.create', Controller\CreateTagController::class)
         ->post('/tags/order', 'tags.order', Controller\OrderTagsController::class)
         ->patch('/tags/{id}', 'tags.update', Controller\UpdateTagController::class)
         ->delete('/tags/{id}', 'tags.delete', Controller\DeleteTagController::class),
+
     function (Dispatcher $events) {
         $events->subscribe(Listener\AddDiscussionTagsRelationship::class);
         $events->subscribe(Listener\AddForumTagsRelationship::class);

extensions/tags/js/admin.js

@@ -0,0 +1,11 @@
+/*
+ * 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/common';
+export * from './src/admin';

extensions/tags/js/admin/Gulpfile.js

@@ -1,13 +0,0 @@
-var gulp = require('flarum-gulp');
-
-gulp({
-  files: [
-    'bower_components/html.sortable/dist/html.sortable.js'
-  ],
-  modules: {
-    'flarum/tags': [
-      '../lib/**/*.js',
-      'src/**/*.js'
-    ]
-  }
-});

extensions/tags/js/admin/bower.json

@@ -1,6 +0,0 @@
-{
-  "name": "flarum-tags-admin",
-  "devDependencies": {
-    "html.sortable": "^0.2.9"
-  }
-}

extensions/tags/js/admin/package.json

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

extensions/tags/js/admin/src/main.js

@@ -1,16 +0,0 @@
-import Tag from 'flarum/tags/models/Tag';
-import addTagsPermissionScope from 'flarum/tags/addTagsPermissionScope';
-import addTagPermission from 'flarum/tags/addTagPermission';
-import addTagsPane from 'flarum/tags/addTagsPane';
-import addTagsHomePageOption from 'flarum/tags/addTagsHomePageOption';
-import addTagChangePermission from 'flarum/tags/addTagChangePermission';
-
-app.initializers.add('flarum-tags', app => {
-  app.store.models.tags = Tag;
-
-  addTagsPermissionScope();
-  addTagPermission();
-  addTagsPane();
-  addTagsHomePageOption();
-  addTagChangePermission();
-});

extensions/tags/js/forum.js

@@ -0,0 +1,11 @@
+/*
+ * 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/common';
+export * from './src/forum';

extensions/tags/js/forum/Gulpfile.js

@@ -1,10 +0,0 @@
-var gulp = require('flarum-gulp');
-
-gulp({
-  modules: {
-    'flarum/tags': [
-      '../lib/**/*.js',
-      'src/**/*.js'
-    ]
-  }
-});

extensions/tags/js/forum/package.json

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

extensions/tags/js/package.json

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

extensions/tags/js/src/admin/addTagsPane.js

@@ -2,7 +2,7 @@ import { extend } from 'flarum/extend';
 import AdminNav from 'flarum/components/AdminNav';
 import AdminLinkButton from 'flarum/components/AdminLinkButton';
 
-import TagsPage from 'flarum/tags/components/TagsPage';
+import TagsPage from './components/TagsPage';
 
 export default function() {
   app.routes.tags = {path: '/tags', component: TagsPage.component()};

extensions/tags/js/src/admin/addTagsPermissionScope.js

@@ -4,9 +4,9 @@ import PermissionDropdown from 'flarum/components/PermissionDropdown';
 import Dropdown from 'flarum/components/Dropdown';
 import Button from 'flarum/components/Button';
 
-import tagLabel from 'flarum/tags/helpers/tagLabel';
+import tagLabel from '../common/helpers/tagLabel';
-import tagIcon from 'flarum/tags/helpers/tagIcon';
+import tagIcon from '../common/helpers/tagIcon';
-import sortTags from 'flarum/tags/utils/sortTags';
+import sortTags from '../common/utils/sortTags';
 
 export default function() {
   override(app, 'getRequiredPermissions', (original, permission) => {

extensions/tags/js/src/admin/compat.js

@@ -0,0 +1,21 @@
+import compat from '../common/compat';
+
+import addTagsHomePageOption from './addTagsHomePageOption';
+import addTagChangePermission from './addTagChangePermission';
+import addTagsPane from './addTagsPane';
+import TagSettingsModal from './components/TagSettingsModal';
+import TagsPage from './components/TagsPage';
+import EditTagModal from './components/EditTagModal';
+import addTagPermission from './addTagPermission';
+import addTagsPermissionScope from './addTagsPermissionScope';
+
+export default Object.assign(compat, {
+  'addTagsHomePageOption': addTagsHomePageOption,
+  'addTagChangePermission': addTagChangePermission,
+  'addTagsPane': addTagsPane,
+  'components/TagSettingsModal': TagSettingsModal,
+  'components/TagsPage': TagsPage,
+  'components/EditTagModal': EditTagModal,
+  'addTagPermission': addTagPermission,
+  'addTagsPermissionScope': addTagsPermissionScope,
+});

extensions/tags/js/src/admin/components/EditTagModal.js

@@ -2,7 +2,7 @@ import Modal from 'flarum/components/Modal';
 import Button from 'flarum/components/Button';
 import { slug } from 'flarum/utils/string';
 
-import tagLabel from 'flarum/tags/helpers/tagLabel';
+import tagLabel from '../../common/helpers/tagLabel';
 
 /**
  * The `EditTagModal` component shows a modal dialog which allows the user

extensions/tags/js/src/admin/components/TagsPage.js

@@ -1,10 +1,12 @@
+import 'html5sortable';
+
 import Page from 'flarum/components/Page';
 import Button from 'flarum/components/Button';
 
-import EditTagModal from 'flarum/tags/components/EditTagModal';
+import EditTagModal from './EditTagModal';
-import TagSettingsModal from 'flarum/tags/components/TagSettingsModal';
+import TagSettingsModal from './TagSettingsModal';
-import tagIcon from 'flarum/tags/helpers/tagIcon';
+import tagIcon from '../../common/helpers/tagIcon';
-import sortTags from 'flarum/tags/utils/sortTags';
+import sortTags from '../../common/utils/sortTags';
 
 function tagItem(tag) {
   return (

extensions/tags/js/src/admin/index.js

@@ -0,0 +1,16 @@
+import Tag from '../common/models/Tag';
+import addTagsPermissionScope from './addTagsPermissionScope';
+import addTagPermission from './addTagPermission';
+import addTagsPane from './addTagsPane';
+import addTagsHomePageOption from './addTagsHomePageOption';
+import addTagChangePermission from './addTagChangePermission';
+
+app.initializers.add('flarum-tags', app => {
+  app.store.models.tags = Tag;
+
+  addTagsPermissionScope();
+  addTagPermission();
+  addTagsPane();
+  addTagsHomePageOption();
+  addTagChangePermission();
+});

extensions/tags/js/src/common/compat.js

@@ -0,0 +1,13 @@
+import sortTags from './utils/sortTags';
+import Tag from './models/Tag';
+import tagsLabel from './helpers/tagsLabel';
+import tagIcon from './helpers/tagIcon';
+import tagLabel from './helpers/tagLabel';
+
+export default {
+  'tags/utils/sortTags': sortTags,
+  'tags/models/Tag': Tag,
+  'tags/helpers/tagsLabel': tagsLabel,
+  'tags/helpers/tagIcon': tagIcon,
+  'tags/helpers/tagLabel': tagLabel
+};

extensions/tags/js/src/common/helpers/tagsLabel.js

@@ -1,6 +1,6 @@
 import extract from 'flarum/utils/extract';
-import tagLabel from 'flarum/tags/helpers/tagLabel';
+import tagLabel from './tagLabel';
-import sortTags from 'flarum/tags/utils/sortTags';
+import sortTags from '../utils/sortTags';
 
 export default function tagsLabel(tags, attrs = {}) {
   const children = [];

extensions/tags/js/src/forum/addTagComposer.js

@@ -2,8 +2,8 @@ import { extend, override } from 'flarum/extend';
 import IndexPage from 'flarum/components/IndexPage';
 import DiscussionComposer from 'flarum/components/DiscussionComposer';
 
-import TagDiscussionModal from 'flarum/tags/components/TagDiscussionModal';
+import TagDiscussionModal from './components/TagDiscussionModal';
-import tagsLabel from 'flarum/tags/helpers/tagsLabel';
+import tagsLabel from '../common/helpers/tagsLabel';
 
 export default function() {
   extend(IndexPage.prototype, 'composeNewDiscussion', function(promise) {

extensions/tags/js/src/forum/addTagControl.js

@@ -2,7 +2,7 @@ import { extend } from 'flarum/extend';
 import DiscussionControls from 'flarum/utils/DiscussionControls';
 import Button from 'flarum/components/Button';
 
-import TagDiscussionModal from 'flarum/tags/components/TagDiscussionModal';
+import TagDiscussionModal from './components/TagDiscussionModal';
 
 export default function() {
   // Add a control allowing the discussion to be moved to another category.

extensions/tags/js/src/forum/addTagFilter.js

@@ -2,7 +2,7 @@ import { extend, override } from 'flarum/extend';
 import IndexPage from 'flarum/components/IndexPage';
 import DiscussionList from 'flarum/components/DiscussionList';
 
-import TagHero from 'flarum/tags/components/TagHero';
+import TagHero from './components/TagHero';
 
 export default function() {
   IndexPage.prototype.currentTag = function() {

extensions/tags/js/src/forum/addTagLabels.js

@@ -3,8 +3,8 @@ import DiscussionListItem from 'flarum/components/DiscussionListItem';
 import DiscussionPage from 'flarum/components/DiscussionPage';
 import DiscussionHero from 'flarum/components/DiscussionHero';
 
-import tagsLabel from 'flarum/tags/helpers/tagsLabel';
+import tagsLabel from '../common/helpers/tagsLabel';
-import sortTags from 'flarum/tags/utils/sortTags';
+import sortTags from '../common/utils/sortTags';
 
 export default function() {
   // Add tag labels to each discussion in the discussion list.

extensions/tags/js/src/forum/addTagList.js

@@ -3,9 +3,9 @@ import IndexPage from 'flarum/components/IndexPage';
 import Separator from 'flarum/components/Separator';
 import LinkButton from 'flarum/components/LinkButton';
 
-import TagLinkButton from 'flarum/tags/components/TagLinkButton';
+import TagLinkButton from './components/TagLinkButton';
-import TagsPage from 'flarum/tags/components/TagsPage';
+import TagsPage from './components/TagsPage';
-import sortTags from 'flarum/tags/utils/sortTags';
+import sortTags from '../common/utils/sortTags';
 
 export default function() {
   // Add a link to the tags page, as well as a list of all the tags,

extensions/tags/js/src/forum/compat.js

@@ -0,0 +1,25 @@
+import compat from '../common/compat';
+
+import addTagFilter from './addTagFilter';
+import addTagControl from './addTagControl';
+import TagHero from './components/TagHero';
+import TagDiscussionModal from './components/TagDiscussionModal';
+import TagsPage from './components/TagsPage';
+import DiscussionTaggedPost from './components/DiscussionTaggedPost';
+import TagLinkButton from './components/TagLinkButton';
+import addTagList from './addTagList';
+import addTagLabels from './addTagLabels';
+import addTagComposer from './addTagComposer';
+
+export default Object.assign(compat, {
+  'addTagFilter': addTagFilter,
+  'addTagControl': addTagControl,
+  'components/TagHero': TagHero,
+  'components/TagDiscussionModal': TagDiscussionModal,
+  'components/TagsPage': TagsPage,
+  'components/DiscussionTaggedPost': DiscussionTaggedPost,
+  'components/TagLinkButton': TagLinkButton,
+  'addTagList': addTagList,
+  'addTagLabels': addTagLabels,
+  'addTagComposer': addTagComposer,
+});

extensions/tags/js/src/forum/components/DiscussionTaggedPost.js

@@ -1,5 +1,5 @@
 import EventPost from 'flarum/components/EventPost';
-import tagsLabel from 'flarum/tags/helpers/tagsLabel';
+import tagsLabel from '../../common/helpers/tagsLabel';
 
 export default class DiscussionTaggedPost extends EventPost {
   static initProps(props) {

extensions/tags/js/src/forum/components/TagDiscussionModal.js

@@ -6,9 +6,9 @@ import classList from 'flarum/utils/classList';
 import extractText from 'flarum/utils/extractText';
 import KeyboardNavigatable from 'flarum/utils/KeyboardNavigatable';
 
-import tagLabel from 'flarum/tags/helpers/tagLabel';
+import tagLabel from '../../common/helpers/tagLabel';
-import tagIcon from 'flarum/tags/helpers/tagIcon';
+import tagIcon from '../../common/helpers/tagIcon';
-import sortTags from 'flarum/tags/utils/sortTags';
+import sortTags from '../../common/utils/sortTags';
 
 export default class TagDiscussionModal extends Modal {
   init() {

extensions/tags/js/src/forum/components/TagLinkButton.js

@@ -1,5 +1,5 @@
 import LinkButton from 'flarum/components/LinkButton';
-import tagIcon from 'flarum/tags/helpers/tagIcon';
+import tagIcon from '../../common/helpers/tagIcon';
 
 export default class TagLinkButton extends LinkButton {
   view() {

extensions/tags/js/src/forum/components/TagsPage.js

@@ -3,8 +3,8 @@ import IndexPage from 'flarum/components/IndexPage';
 import listItems from 'flarum/helpers/listItems';
 import humanTime from 'flarum/helpers/humanTime';
 
-import tagLabel from 'flarum/tags/helpers/tagLabel';
+import tagLabel from '../../common/helpers/tagLabel';
-import sortTags from 'flarum/tags/utils/sortTags';
+import sortTags from '../../common/utils/sortTags';
 
 export default class TagsPage extends Page {
   init() {

extensions/tags/js/src/forum/index.js

@@ -2,15 +2,15 @@ import Model from 'flarum/Model';
 import Discussion from 'flarum/models/Discussion';
 import IndexPage from 'flarum/components/IndexPage';
 
-import Tag from 'flarum/tags/models/Tag';
+import Tag from '../common/models/Tag';
-import TagsPage from 'flarum/tags/components/TagsPage';
+import TagsPage from './components/TagsPage';
-import DiscussionTaggedPost from 'flarum/tags/components/DiscussionTaggedPost';
+import DiscussionTaggedPost from './components/DiscussionTaggedPost';
 
-import addTagList from 'flarum/tags/addTagList';
+import addTagList from './addTagList';
-import addTagFilter from 'flarum/tags/addTagFilter';
+import addTagFilter from './addTagFilter';
-import addTagLabels from 'flarum/tags/addTagLabels';
+import addTagLabels from './addTagLabels';
-import addTagControl from 'flarum/tags/addTagControl';
+import addTagControl from './addTagControl';
-import addTagComposer from 'flarum/tags/addTagComposer';
+import addTagComposer from './addTagComposer';
 
 app.initializers.add('flarum-tags', function(app) {
   app.routes.tags = {path: '/tags', component: TagsPage.component()};
@@ -31,3 +31,10 @@ app.initializers.add('flarum-tags', function(app) {
   addTagControl();
   addTagComposer();
 });
+
+
+// Expose compat API
+import tagsCompat from './compat';
+import { compat } from '@flarum/core/forum';
+
+Object.assign(compat, tagsCompat);

extensions/tags/js/webpack.config.js

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

extensions/tags/less/admin.less

@@ -0,0 +1,11 @@
+@import "common/TagLabel";
+@import "common/TagIcon";
+
+@import "admin/TagsPage";
+@import "admin/EditTagModal";
+@import "admin/TagSettingsModal";
+
+.Dropdown--restrictByTag .Dropdown-menu {
+  max-height: 400px;
+  overflow: auto;
+}

extensions/tags/less/admin/extension.less

@@ -1,11 +0,0 @@
-@import "../lib/TagLabel.less";
-@import "../lib/TagIcon.less";
-
-@import "TagsPage.less";
-@import "EditTagModal.less";
-@import "TagSettingsModal.less";
-
-.Dropdown--restrictByTag .Dropdown-menu {
-  max-height: 400px;
-  overflow: auto;
-}

extensions/tags/less/forum.less

@@ -1,9 +1,9 @@
-@import "../lib/TagLabel.less";
+@import "common/TagLabel";
-@import "../lib/TagIcon.less";
+@import "common/TagIcon";
 
-@import "TagCloud.less";
+@import "forum/TagCloud";
-@import "TagDiscussionModal.less";
+@import "forum/TagDiscussionModal";
-@import "TagTiles.less";
+@import "forum/TagTiles";
 
 .DiscussionHero {
   .item-title {

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