Auto merge of #3222 - Turbo87:date-fns, r=locks

Replace Moment.js with date-fns

see https://momentjs.com/docs/#/-project-status/

### Before

- cargo.js: 337.66 KB (46.46 KB gzipped)
- vendor.js: 994.86 KB (267.9 KB gzipped)

### After

- cargo.js: 333.25 KB (46.21 KB gzipped)
- vendor.js: 928.56 KB (251.39 KB gzipped)

r? `@locks`

Author: bors

app/components/crate-row.hbs

@@ -35,8 +35,8 @@
       {{svg-jar "latest-updates" height="32" width="32"}}
       <span>
         <abbr title="The last time crate was updated">Updated:</abbr>
-        <time title="Last updated: {{ @crate.updated_at }}" datetime="{{ moment-format @crate.updated_at 'YYYY-MM-DDTHH:mm:ssZ' }}" data-test-updated-at>
-          {{ moment-from-now @crate.updated_at }}
+        <time title="Last updated: {{ @crate.updated_at }}" datetime="{{date-format-iso @crate.updated_at}}" data-test-updated-at>
+          {{date-format-distance-to-now @crate.updated_at addSuffix=true}}
         </time>
       </span>
     </div>

app/components/crate-row.module.css

@@ -7,7 +7,7 @@
     padding-top: 5px;
     display: flex;
     flex-direction: column;
-    width: 75%;
+    width: 70%;
 }
 
 .name {
@@ -51,7 +51,7 @@
 }
 
 .stats {
-    width: 25%;
+    width: 30%;
     color: var(--main-color-light);
 }
 

app/components/download-graph.js

@@ -30,7 +30,7 @@ export default class DownloadGraph extends Component {
           padding: 10,
         },
         scales: {
-          xAxes: [{ type: 'time', time: { stepSize: 7, tooltipFormat: 'MMM D', unit: 'day' } }],
+          xAxes: [{ type: 'time', time: { stepSize: 7, tooltipFormat: 'MMM d', unit: 'day' } }],
           yAxes: [{ stacked: true, ticks: { min: 0, precision: 0 } }],
         },
         tooltips: {

app/components/pending-owner-invite-row.hbs

@@ -26,11 +26,11 @@
       </p>
     </div>
     <div local-class="date-column" data-test-date>
-      {{moment-from-now @invite.created_at}}
+      {{date-format-distance-to-now @invite.created_at addSuffix=true}}
     </div>
     <div>
       <button type="button" local-class="accept-button" data-test-accept-button {{on "click" (perform this.acceptInvitationTask)}}>Accept</button>
       <button type="button" local-class="decline-button" data-test-decline-button {{on "click" (perform this.declineInvitationTask)}}>Decline</button>
     </div>
   </div>
-{{/if}}
+{{/if}}

app/components/settings/api-tokens.hbs

@@ -62,11 +62,11 @@
 
       <div local-class="dates">
         <span title={{token.created_at}} local-class="created-at" data-test-created-at>
-          Created {{moment-from-now token.created_at}}
+          Created {{date-format-distance-to-now token.created_at addSuffix=true}}
         </span>
         <span title={{token.last_used_at}} local-class="last-used-at" data-test-last-used-at>
           {{#if token.last_used_at}}
-            Last used {{moment-from-now token.last_used_at}}
+            Last used {{date-format-distance-to-now token.last_used_at addSuffix=true}}
           {{else}}
             Never used
           {{/if}}

app/controllers/crate/version.js

@@ -3,8 +3,8 @@ import { computed } from '@ember/object';
 import { alias, gt, readOnly } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 
+import subDays from 'date-fns/subDays';
 import { task } from 'ember-concurrency';
-import moment from 'moment';
 
 import ajax from '../../utils/ajax';
 
@@ -53,9 +53,11 @@ export default class CrateVersionController extends Controller {
 
     let dates = {};
     let versions = [];
+
+    let now = new Date();
     for (let i = 0; i < 90; i++) {
-      let now = moment().subtract(i, 'days');
-      dates[now.toISOString().slice(0, 10)] = { date: now, cnt: {} };
+      let date = subDays(now, i);
+      dates[date.toISOString().slice(0, 10)] = { date, cnt: {} };
     }
 
     downloads.forEach(d => {
@@ -95,7 +97,7 @@ export default class CrateVersionController extends Controller {
     }
     let data = [headers];
     for (let date in dates) {
-      let row = [dates[date].date.toDate()];
+      let row = [dates[date].date];
       for (let version of versions) {
         row.push(dates[date].cnt[version.id] || 0);
       }

app/helpers/date-format-distance-to-now.js

@@ -0,0 +1,9 @@
+import { helper } from '@ember/component/helper';
+
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+
+export default helper(function ([date], options) {
+  if (date) {
+    return formatDistanceToNow(date, { ...options });
+  }
+});

app/helpers/date-format-iso.js

@@ -0,0 +1,9 @@
+import { helper } from '@ember/component/helper';
+
+import formatISO from 'date-fns/formatISO';
+
+export default helper(function ([date], options) {
+  if (date) {
+    return formatISO(date, { ...options });
+  }
+});

app/helpers/date-format.js

@@ -0,0 +1,9 @@
+import { helper } from '@ember/component/helper';
+
+import format from 'date-fns/format';
+
+export default helper(function ([date, pattern], options) {
+  if (date) {
+    return format(date, pattern, { ...options });
+  }
+});

app/services/chartjs.js

@@ -1,10 +1,57 @@
+import { assert } from '@ember/debug';
 import Service from '@ember/service';
 
+import addDays from 'date-fns/addDays';
+import differenceInDays from 'date-fns/differenceInDays';
+import endOfDay from 'date-fns/endOfDay';
+import format from 'date-fns/format';
+import startOfDay from 'date-fns/startOfDay';
 import { task } from 'ember-concurrency';
 
 export default class ChartJsLoader extends Service {
   @(task(function* () {
     let Chart = yield import('chart.js').then(module => module.default);
+
+    Chart._adapters._date.override({
+      _id: 'date-fns', // DEBUG
+
+      formats() {
+        return { day: 'MMM d' };
+      },
+
+      parse(value) {
+        if (value === null || value === undefined) {
+          return null;
+        }
+        assert('`value` must be a `Date`', value instanceof Date);
+        return !isNaN(value) ? value.getTime() : null;
+      },
+
+      format(time, fmt) {
+        return format(time, fmt, this.options);
+      },
+
+      add(time, amount, unit) {
+        assert('This basic Chart.js adapter only supports `unit: day`', unit === 'day');
+        return addDays(time, amount);
+      },
+
+      diff(max, min, unit) {
+        assert('This basic Chart.js adapter only supports `unit: day`', unit === 'day');
+        return differenceInDays(max, min);
+      },
+
+      startOf(time, unit) {
+        assert('This basic Chart.js adapter only supports `unit: day`', unit === 'day');
+        return startOfDay(time);
+      },
+
+      endOf(time, unit) {
+        assert('This basic Chart.js adapter only supports `unit: day`', unit === 'day');
+        return endOfDay(time);
+      },
+    });
+
     Chart.platform.disableCSSInjection = true;
     return Chart;
   }).drop())