Remove remnants of moment.js

CHANGELOG.md

@@ -9,6 +9,14 @@ release channel, you can take advantage of these new features and fixes.
 
 ## Code Quality/Technical Changes
 
+- The `moment.js` library, rather bulky in size and now no longer recommended for new application development, has been
+  replaced across the application with the `luxon` library, which relies instead on new JavaScript functionality built
+  directly into the browser to do date/time normalization and localization.
+
+- Our Vue component build process has been completely overhauled to be fully independent of our legacy asset management;
+  if you're contributing Vue components to our codebase, it should much more intuitively match the experience you would
+  expect from other Vue-based apps using Webpack than before.
+
 - A number of security fixes are being incorporated into the software as of this version. See below for details.
 
 ## Bug Fixes

config/assets.php

@@ -190,32 +190,38 @@ return [
         ],
     ],
 
-    // Moment standalone (with locales)
-    'moment' => [
+    'luxon' => [
         'order' => 8,
         'files' => [
             'js' => [
                 [
-                    'src' => 'dist/lib/moment/moment.min.js',
-                ],
-                [
-                    'src' => 'dist/lib/moment/locales.min.js',
-                    'charset' => 'UTF-8',
-                ],
-                [
-                    'src' => 'dist/lib/moment-timezone/moment-timezone-with-data-10-year-range.min.js',
+                    'src' => 'dist/lib/luxon/luxon.min.js',
                 ],
             ],
         ],
         'inline' => [
             'js' => [
                 function (Request $request) {
-                    return 'moment.locale(App.locale_with_dashes);';
+                    return <<<'JS'
+                    luxon.Settings.defaultLocale = App.locale_with_dashes;
+                    luxon.Settings.defaultZoneName = 'UTC';
+                    JS;
                 },
             ],
         ],
     ],
 
+    'humanize-duration' => [
+        'order' => 8,
+        'files' => [
+            'js' => [
+                [
+                    'src' => 'dist/lib/humanize-duration/humanize-duration.js',
+                ],
+            ],
+        ],
+    ],
+
     'clipboard' => [
         'order' => 10,
         'files' => [

frontend/gulpfile.js

@@ -79,25 +79,14 @@ var jsFiles = {
       'node_modules/select2/dist/js/select2.full.min.js'
     ]
   },
-  'moment': {
-    base: 'node_modules/moment/min',
+  'luxon': {
     files: [
-      'node_modules/moment/min/moment.min.js',
-      'node_modules/moment/min/locales.min.js'
+      'node_modules/luxon/build/global/luxon.min.js'
     ]
   },
-  'moment-timezone': {
-    base: 'node_modules/moment-timezone/builds',
+  'humanize-duration': {
     files: [
-      'node_modules/moment-timezone/builds/moment-timezone-with-data-10-year-range.min.js'
-    ]
-  },
-  'codemirror': {
-    base: null,
-    files: [
-      'node_modules/codemirror/lib/codemirror.*',
-      'node_modules/codemirror/mode/css/css.js',
-      'node_modules/codemirror/mode/javascript/javascript.js'
+      'node_modules/humanize-duration/humanize-duration.js'
     ]
   },
   'clipboard': {

templates/admin/backups/index.js.phtml

@@ -1,29 +1,24 @@
-$(function() {
-
-    moment.relativeTimeThreshold('ss', 1);
-    moment.relativeTimeRounding(function (value) {
-        return Math.round(value * 10) / 10;
-    });
+$(function () {
 
     $('time[data-content]').each(function () {
         let tz_display = $(this).data('content');
-        $(this).text(moment.unix(tz_display).format('lll'));
+        $(this).text(luxon.DateTime.fromSeconds(tz_display).toLocaleString(luxon.DateTime.DATETIME_SHORT));
     });
 
     $('time[data-duration]').each(function () {
-        $(this).text(moment.duration($(this).data('duration'), "seconds").humanize(true));
+        $(this).text(humanizeDuration($(this).data('duration') * 1000, {locale: App.locale_short}));
     });
 
-    $('span[data-file-size]').each(function() {
+    $('span[data-file-size]').each(function () {
         let original_size = $(this).data('file-size');
         $(this).text(formatFileSize(original_size));
     });
 
     function formatFileSize(bytes) {
-        var s = ['bytes', 'KB','MB','GB','TB','PB','EB'];
-        for(var pos = 0;bytes >= 1000; pos++,bytes /= 1000);
-        var d = Math.round(bytes*10);
-        return pos ? [parseInt(d/10),".",d%10," ",s[pos]].join('') : bytes + ' bytes';
+        var s = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
+        for (var pos = 0; bytes >= 1000; pos++, bytes /= 1000) ;
+        var d = Math.round(bytes * 10);
+        return pos ? [parseInt(d / 10), ".", d % 10, " ", s[pos]].join('') : bytes + ' bytes';
     }
 
     var log_modal = $('#modal-log-view');

templates/admin/backups/index.phtml

@@ -11,7 +11,8 @@ $this->layout('main', [
 ]);
 
 $assets
-    ->load('moment')
+    ->load('luxon')
+    ->load('humanize-duration')
     ->addInlineJs($this->fetch('admin/backups/index.js'), 99);
 ?>
 

templates/admin/index/index.js.phtml

@@ -1,8 +1,5 @@
-jQuery(function($) {
-    moment.relativeTimeThreshold('ss', 1);
-    moment.relativeTimeRounding(Math.round);
-
-    $('time').each(function () {
-        $(this).text(moment.duration(0-$(this).data('duration'), "seconds").humanize(true));
+jQuery(function ($) {
+    $('time[data-duration]').each(function () {
+        $(this).text(humanizeDuration($(this).data('duration') * 1000, {locale: App.locale_short}));
     });
 });

templates/admin/index/index.phtml

@@ -11,7 +11,7 @@ $this->layout('main', [
 ]);
 
 $assets
-    ->load('moment')
+    ->load('humanize-duration')
     ->addInlineJs($this->fetch('admin/index/index.js'), 99);
 ?>
 

templates/admin/relays/index.js.phtml

@@ -1,9 +1,6 @@
-$(function() {
-    moment.relativeTimeThreshold('ss', 1);
-    moment.relativeTimeRounding(function(value) { return Math.round(value * 10) / 10; });
-
-    $('time[data-content]').each(function() {
+$(function () {
+    $('time[data-content]').each(function () {
         let tz_display = $(this).data('content');
-        $(this).text(moment(tz_display).format('LT'));
+        $(this).text(luxon.DateTime.fromSeconds(tz_display).toLocaleString(luxon.DateTime.TIME_SIMPLE));
     });
 });

templates/admin/relays/index.phtml

@@ -6,7 +6,7 @@ $this->layout('main', [
 
 /** @var \App\Assets $assets */
 $assets
-    ->load('moment')
+    ->load('luxon')
     ->addInlineJs($this->fetch('admin/relays/index.js'));
 ?>