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())

app/templates/crate/version.hbs

@@ -84,7 +84,9 @@
       <div local-class='top'>
         <div>
           <div local-class='last-update'>Last Updated</div>
-          <div local-class='{{if this.currentVersion.crate_size 'date-with-small-margin-bot' 'date'}}'>{{moment-from-now this.crate.updated_at}}</div>
+          <div local-class='{{if this.currentVersion.crate_size 'date-with-small-margin-bot' 'date'}}'>
+            {{date-format-distance-to-now this.crate.updated_at addSuffix=true}}
+          </div>
         </div>
 
         {{#if this.currentVersion.crate_size}}
@@ -176,7 +178,7 @@
                 <LinkTo @route="crate.version" @model={{version.num}} data-test-version-link={{version.num}}>
                   {{ version.num }}
                 </LinkTo>
-                {{moment-format version.created_at 'll'}}
+                {{date-format version.created_at "PP"}}
                 {{#if version.yanked}}
                   <span local-class='yanked'>yanked</span>
                 {{/if}}

app/templates/crate/versions.hbs

@@ -3,7 +3,7 @@
 <span local-class="page-description" data-test-page-description>
   All <strong>{{ this.model.versions.length }}</strong>
   versions of <strong>{{ this.model.name }}</strong> since
-  {{moment-format this.model.created_at 'LL'}}
+  {{date-format this.model.created_at 'PPP'}}
 </span>
 
 <div local-class="list">
@@ -12,7 +12,7 @@
       <div>
         <LinkTo @route="crate.version" @model={{version.num}}>{{ version.num }}</LinkTo>
 
-        <span local-class="date">{{moment-format version.created_at 'LL'}}</span>
+        <span local-class="date">{{date-format version.created_at 'PPP'}}</span>
         {{#if version.yanked}}
           <span local-class='yanked'>yanked</span>
         {{/if}}

app/templates/dashboard.hbs

@@ -54,7 +54,7 @@
               <span local-class="feed-version">{{ version.num }}</span>
             </LinkTo>
             <span local-class="feed-date">
-              {{moment-from-now version.created_at}}
+              {{date-format-distance-to-now version.created_at addSuffix=true}}
             </span>
           </div>
         {{/each}}

ember-cli-build.js

@@ -28,6 +28,7 @@ module.exports = function (defaults) {
     autoImport: {
       webpack: {
         externals: {
+          // prevent Chart.js from bundling Moment.js
           moment: 'moment',
         },
       },

package.json

@@ -41,6 +41,7 @@
     "@sentry/integrations": "6.0.3",
     "chart.js": "2.9.4",
     "copy-text-to-clipboard": "3.0.0",
+    "date-fns": "2.16.1",
     "fastboot-app-server": "3.0.0",
     "morgan": "1.10.0",
     "pretty-bytes": "5.5.0"
@@ -73,7 +74,6 @@
     "ember-cli-inject-live-reload": "2.0.2",
     "ember-cli-meta-tags": "6.1.2",
     "ember-cli-mirage": "2.0.1",
-    "ember-cli-moment-shim": "3.8.0",
     "ember-cli-notifications": "6.3.2",
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.1",
@@ -91,7 +91,6 @@
     "ember-load-initializers": "2.1.2",
     "ember-maybe-import-regenerator": "0.1.6",
     "ember-modifier": "2.1.1",
-    "ember-moment": "8.0.1",
     "ember-page-title": "6.2.0",
     "ember-prism": "0.9.0",
     "ember-promise-helpers": "1.0.9",

tests/acceptance/api-token-test.js

@@ -46,7 +46,7 @@ module('Acceptance | api-tokens', function (hooks) {
 
     let [row1, row2] = findAll('[data-test-api-token]');
     assert.dom('[data-test-name]', row1).hasText('BAR');
-    assert.dom('[data-test-created-at]', row1).hasText('Created 18 hours ago');
+    assert.dom('[data-test-created-at]', row1).hasText('Created about 18 hours ago');
     assert.dom('[data-test-last-used-at]', row1).hasText('Never used');
     assert.dom('[data-test-save-token-button]', row1).doesNotExist();
     assert.dom('[data-test-revoke-token-button]', row1).exists();

tests/acceptance/crate-test.js

@@ -100,7 +100,7 @@ module('Acceptance | crate page', function (hooks) {
     await visit('/crates/nanomsg');
     await click('[data-test-all-versions-link]');
 
-    assert.dom('[data-test-page-description]').hasText(/All 13\s+versions of nanomsg since\s+December \d+, 2014/);
+    assert.dom('[data-test-page-description]').hasText(/All 13\s+versions of nanomsg since\s+December \d+th, 2014/);
   });
 
   test('navigating to the reverse dependencies page', async function (assert) {

tests/acceptance/invites-test.js

@@ -47,15 +47,15 @@ module('Acceptance | /me/pending-invites', function (hooks) {
     assert.equal(currentURL(), '/me/pending-invites');
     assert.dom('[data-test-invite]').exists({ count: 2 });
     assert.dom('[data-test-invite="nanomsg"]').exists();
-    assert.dom('[data-test-invite="nanomsg"] [data-test-date]').hasText('a year ago');
+    assert.dom('[data-test-invite="nanomsg"] [data-test-date]').hasText('11 months ago');
     assert.dom('[data-test-invite="nanomsg"] [data-test-accept-button]').exists();
     assert.dom('[data-test-invite="nanomsg"] [data-test-decline-button]').exists();
     assert.dom('[data-test-invite="ember-rs"]').exists();
     assert.dom('[data-test-invite="ember-rs"] [data-test-crate-link]').hasText('ember-rs');
     assert.dom('[data-test-invite="ember-rs"] [data-test-crate-link]').hasAttribute('href', '/crates/ember-rs');
     assert.dom('[data-test-invite="ember-rs"] [data-test-inviter-link]').hasText('wycats');
     assert.dom('[data-test-invite="ember-rs"] [data-test-inviter-link]').hasAttribute('href', '/users/wycats');
-    assert.dom('[data-test-invite="ember-rs"] [data-test-date]').hasText('in 3 years');
+    assert.dom('[data-test-invite="ember-rs"] [data-test-date]').hasText('in about 3 years');
     assert.dom('[data-test-invite="ember-rs"] [data-test-accept-button]').exists();
     assert.dom('[data-test-invite="ember-rs"] [data-test-decline-button]').exists();
     assert.dom('[data-test-error-message]').doesNotExist();