Webpack (#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"
* Refactor JS initializers into Application subclasses
* Maintain partial compatibility API (importing from absolute paths) for extensions
* Remove minification responsibility from PHP asset compiler
* Restructure `less` directory

js/src/common/helpers/avatar.js

@@ -0,0 +1,36 @@
+/**
+ * The `avatar` helper displays a user's avatar.
+ *
+ * @param {User} user
+ * @param {Object} attrs Attributes to apply to the avatar element
+ * @return {Object}
+ */
+export default function avatar(user, attrs = {}) {
+  attrs.className = 'Avatar ' + (attrs.className || '');
+  let content = '';
+
+  // If the `title` attribute is set to null or false, we don't want to give the
+  // avatar a title. On the other hand, if it hasn't been given at all, we can
+  // safely default it to the user's username.
+  const hasTitle = attrs.title === 'undefined' || attrs.title;
+  if (!hasTitle) delete attrs.title;
+
+  // If a user has been passed, then we will set up an avatar using their
+  // uploaded image, or the first letter of their username if they haven't
+  // uploaded one.
+  if (user) {
+    const username = user.displayName() || '?';
+    const avatarUrl = user.avatarUrl();
+
+    if (hasTitle) attrs.title = attrs.title || username;
+
+    if (avatarUrl) {
+      return <img {...attrs} src={avatarUrl}/>;
+    }
+
+    content = username.charAt(0).toUpperCase();
+    attrs.style = {background: user.color()};
+  }
+
+  return <span {...attrs}>{content}</span>;
+}

js/src/common/helpers/fullTime.js

@@ -0,0 +1,15 @@
+/**
+ * The `fullTime` helper displays a formatted time string wrapped in a <time>
+ * tag.
+ *
+ * @param {Date} time
+ * @return {Object}
+ */
+export default function fullTime(time) {
+  const mo = moment(time);
+
+  const datetime = mo.format();
+  const full = mo.format('LLLL');
+
+  return <time pubdate datetime={datetime}>{full}</time>;
+}

js/src/common/helpers/highlight.js

@@ -0,0 +1,37 @@
+import { truncate } from '../utils/string';
+
+/**
+ * The `highlight` helper searches for a word phrase in a string, and wraps
+ * matches with the <mark> tag.
+ *
+ * @param {String} string The string to highlight.
+ * @param {String|RegExp} phrase The word or words to highlight.
+ * @param {Integer} [length] The number of characters to truncate the string to.
+ *     The string will be truncated surrounding the first match.
+ * @return {Object}
+ */
+export default function highlight(string, phrase, length) {
+  if (!phrase && !length) return string;
+
+  // Convert the word phrase into a global regular expression (if it isn't
+  // already) so we can search the string for matched.
+  const regexp = phrase instanceof RegExp ? phrase : new RegExp(phrase, 'gi');
+
+  let highlighted = string;
+  let start = 0;
+
+  // If a length was given, the truncate the string surrounding the first match.
+  if (length) {
+    if (phrase) start = Math.max(0, string.search(regexp) - length / 2);
+
+    highlighted = truncate(highlighted, length, start);
+  }
+
+  // Convert the string into HTML entities, then highlight all matches with
+  // <mark> tags. Then we will return the result as a trusted HTML string.
+  highlighted = $('<div/>').text(highlighted).html();
+
+  if (phrase) highlighted = highlighted.replace(regexp, '<mark>$&</mark>');
+
+  return m.trust(highlighted);
+}

js/src/common/helpers/humanTime.js

@@ -0,0 +1,19 @@
+import humanTimeUtil from '../utils/humanTime';
+
+/**
+ * The `humanTime` helper displays a time in a human-friendly time-ago format
+ * (e.g. '12 days ago'), wrapped in a <time> tag with other information about
+ * the time.
+ *
+ * @param {Date} time
+ * @return {Object}
+ */
+export default function humanTime(time) {
+  const mo = moment(time);
+
+  const datetime = mo.format();
+  const full = mo.format('LLLL');
+  const ago = humanTimeUtil(time);
+
+  return <time pubdate datetime={datetime} title={full} data-humantime>{ago}</time>;
+}

js/src/common/helpers/icon.js

@@ -0,0 +1,12 @@
+/**
+ * The `icon` helper displays an icon.
+ *
+ * @param {String} fontClass The full icon class, prefix and the icon’s name.
+ * @param {Object} attrs Any other attributes to apply.
+ * @return {Object}
+ */
+export default function icon(fontClass, attrs = {}) {
+  attrs.className = 'icon ' + fontClass + ' ' + (attrs.className || '');
+
+  return <i {...attrs}/>;
+}

js/src/common/helpers/listItems.js

@@ -0,0 +1,53 @@
+import Separator from '../components/Separator';
+import classList from '../utils/classList';
+
+function isSeparator(item) {
+  return item && item.component === Separator;
+}
+
+function withoutUnnecessarySeparators(items) {
+  const newItems = [];
+  let prevItem;
+
+  items.forEach((item, i) => {
+    if (!isSeparator(item) || (prevItem && !isSeparator(prevItem) && i !== items.length - 1)) {
+      prevItem = item;
+      newItems.push(item);
+    }
+  });
+
+  return newItems;
+}
+
+/**
+ * The `listItems` helper wraps a collection of components in <li> tags,
+ * stripping out any unnecessary `Separator` components.
+ *
+ * @param {*} items
+ * @return {Array}
+ */
+export default function listItems(items) {
+  if (!(items instanceof Array)) items = [items];
+
+  return withoutUnnecessarySeparators(items).map(item => {
+    const isListItem = item.component && item.component.isListItem;
+    const active = item.component && item.component.isActive && item.component.isActive(item.props);
+    const className = item.props ? item.props.itemClassName : item.itemClassName;
+
+    if (isListItem) {
+      item.attrs = item.attrs || {};
+      item.attrs.key = item.attrs.key || item.itemName;
+    }
+
+    return isListItem
+      ? item
+      : <li className={classList([
+          (item.itemName ? 'item-' + item.itemName : ''),
+          className,
+          (active ? 'active' : '')
+        ])}
+          key={item.itemName}>
+          {item}
+        </li>;
+  });
+}

js/src/common/helpers/punctuateSeries.js

@@ -0,0 +1,35 @@
+/**
+ * The `punctuateSeries` helper formats a list of strings (e.g. names) to read
+ * fluently in the application's locale.
+ *
+ * ```js
+ * punctuateSeries(['Toby', 'Franz', 'Dominion']) // Toby, Franz, and Dominion
+ * ```
+ *
+ * @param {Array} items
+ * @return {VirtualElement}
+ */
+export default function punctuateSeries(items) {
+  if (items.length === 2) {
+    return app.translator.trans('core.lib.series.two_text', {
+      first: items[0],
+      second: items[1]
+    });
+  } else if (items.length >= 3) {
+    // If there are three or more items, we will join all but the first and
+    // last items with the equivalent of a comma, and then we will feed that
+    // into the translator along with the first and last item.
+    const second = items
+      .slice(1, items.length - 1)
+      .reduce((list, item) => list.concat([item, app.translator.trans('core.lib.series.glue_text')]), [])
+      .slice(0, -1);
+
+    return app.translator.trans('core.lib.series.three_text', {
+      first: items[0],
+      second,
+      third: items[items.length - 1]
+    });
+  }
+
+  return items;
+}

js/src/common/helpers/userOnline.js

@@ -0,0 +1,13 @@
+import icon from './icon';
+
+/**
+ * The `useronline` helper displays a green circle if the user is online
+ *
+ * @param {User} user
+ * @return {Object}
+ */
+export default function userOnline(user) {
+    if (user.lastSeenTime() && user.isOnline()) {
+        return <span className="UserOnline">{icon('fas fa-circle')}</span>;
+    }
+}

js/src/common/helpers/username.js

@@ -0,0 +1,12 @@
+/**
+ * The `username` helper displays a user's username in a <span class="username">
+ * tag. If the user doesn't exist, the username will be displayed as [deleted].
+ *
+ * @param {User} user
+ * @return {Object}
+ */
+export default function username(user) {
+  const name = (user && user.displayName()) || app.translator.trans('core.lib.username.deleted_text');
+
+  return <span className="username">{name}</span>;
+}