Switch from 'moment' to 'dayjs' (#2219)

* Switch from 'moment' to 'dayjs'

* Use humanize code from duration plugin (without actual plugin) for time lapsed events

js/package-lock.json

@@ -1834,6 +1834,11 @@
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
       "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
     },
+    "dayjs": {
+      "version": "1.8.28",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.28.tgz",
+      "integrity": "sha512-ccnYgKC0/hPSGXxj7Ju6AV/BP4HUkXC2u15mikXT5mX9YorEaoi1bEKOmAqdkJHN4EEkmAf97SpH66Try5Mbeg=="
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -3644,11 +3649,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "moment": {
-      "version": "2.22.2",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
-      "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
-    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

js/package.json

@@ -5,6 +5,7 @@
     "bootstrap": "^3.4.1",
     "classnames": "^2.2.5",
     "color-thief-browser": "^2.0.2",
+    "dayjs": "^1.8.28",
     "expose-loader": "^0.7.5",
     "flarum-webpack-config": "0.1.0-beta.10",
     "jquery": "^3.4.1",
@@ -12,7 +13,6 @@
     "lodash-es": "^4.17.14",
     "m.attrs.bidi": "github:tobscure/m.attrs.bidi",
     "mithril": "^0.2.8",
-    "moment": "^2.22.2",
     "punycode": "^2.1.1",
     "spin.js": "^3.1.0",
     "webpack": "^4.43.0",

js/src/common/helpers/fullTime.js

@@ -6,10 +6,10 @@
  * @return {Object}
  */
 export default function fullTime(time) {
-  const mo = moment(time);
+  const d = dayjs(time);
 
-  const datetime = mo.format();
+  const datetime = d.format();
-  const full = mo.format('LLLL');
+  const full = d.format('LLLL');
 
   return (
     <time pubdate datetime={datetime}>

js/src/common/helpers/humanTime.js

@@ -9,10 +9,10 @@ import humanTimeUtil from '../utils/humanTime';
  * @return {Object}
  */
 export default function humanTime(time) {
-  const mo = moment(time);
+  const d = dayjs(time);
 
-  const datetime = mo.format();
+  const datetime = d.format();
-  const full = mo.format('LLLL');
+  const full = d.format('LLLL');
   const ago = humanTimeUtil(time);
 
   return (

js/src/common/index.js

@@ -1,6 +1,6 @@
 import 'expose-loader?$!expose-loader?jQuery!jquery';
 import 'expose-loader?m!mithril';
-import 'expose-loader?moment!moment';
+import 'expose-loader?moment!expose-loader?dayjs!dayjs';
 import 'expose-loader?m.bidi!m.attrs.bidi';
 import 'bootstrap/js/affix';
 import 'bootstrap/js/dropdown';
@@ -9,6 +9,12 @@ import 'bootstrap/js/tooltip';
 import 'bootstrap/js/transition';
 import 'jquery.hotkeys/jquery.hotkeys';
 
+import relativeTime from 'dayjs/plugin/relativeTime';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+
 import patchMithril from './utils/patchMithril';
 
 patchMithril(window);

js/src/common/models/User.js

@@ -54,7 +54,7 @@ Object.assign(User.prototype, {
    * @public
    */
   isOnline() {
-    return this.lastSeenAt() > moment().subtract(5, 'minutes').toDate();
+    return dayjs().subtract(5, 'minutes').isBefore(this.lastSeenAt());
   },
 
   /**

js/src/common/utils/humanTime.js

@@ -6,30 +6,30 @@
  * @return {String}
  */
 export default function humanTime(time) {
-  let m = moment(time);
+  let d = dayjs(time);
-  const now = moment();
+  const now = dayjs();
 
   // To prevent showing things like "in a few seconds" due to small offsets
   // between client and server time, we always reset future dates to the
   // current time. This will result in "just now" being shown instead.
-  if (m.isAfter(now)) {
+  if (d.isAfter(now)) {
-    m = now;
+    d = now;
   }
 
   const day = 864e5;
-  const diff = m.diff(moment());
+  const diff = d.diff(dayjs());
   let ago = null;
 
   // If this date was more than a month ago, we'll show the name of the month
   // in the string. If it wasn't this year, we'll show the year as well.
   if (diff < -30 * day) {
-    if (m.year() === moment().year()) {
+    if (d.year() === dayjs().year()) {
-      ago = m.format('D MMM');
+      ago = d.format('D MMM');
     } else {
-      ago = m.format('ll');
+      ago = d.format('ll');
     }
   } else {
-    ago = m.fromNow();
+    ago = d.fromNow();
   }
 
   return ago;

js/src/forum/components/PostStream.js

@@ -230,7 +230,7 @@ class PostStream extends Component {
         if (dt > 1000 * 60 * 60 * 24 * 4) {
           content = [
             <div className="PostStream-timeGap">
-              <span>{app.translator.trans('core.forum.post_stream.time_lapsed_text', { period: moment.duration(dt).humanize() })}</span>
+              <span>{app.translator.trans('core.forum.post_stream.time_lapsed_text', { period: dayjs().add(dt, 'ms').fromNow(true) })}</span>
             </div>,
             content,
           ];

js/src/forum/components/PostStreamScrubber.js

@@ -239,7 +239,7 @@ export default class PostStreamScrubber extends Component {
 
     this.index = index;
     this.visible = visible;
-    this.description = period ? moment(period).format('MMMM YYYY') : '';
+    this.description = period ? dayjs(period).format('MMMM YYYY') : '';
   }
 
   config(isInitialized, context) {

js/webpack.config.js

@@ -1,12 +1,8 @@
 const config = require('flarum-webpack-config');
-const webpack = require('webpack');
 const merge = require('webpack-merge');
 
 module.exports = merge(config(), {
   output: {
     library: 'flarum.core'
   },
-  plugins: [
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
-  ]
 });