Saved 310kB (374 -> 64) switching from moment to luxon (#19)

cjmalloy · Oct 3, 2024 · d31595b · d31595b
1 parent eef9a05
commit d31595b
Show file tree

Hide file tree

Showing 110 changed files with 342 additions and 337 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,9 +41,9 @@
     "jszip": "^3.10.1",
     "jtd": "^0.1.1",
     "lodash-es": "^4.17.21",
+    "luxon": "^3.5.0",
     "mobx": "^6.13.3",
     "mobx-angular": "^4.8.0",
-    "moment": "^2.30.1",
     "monaco-editor": "^0.50.0",
     "ngx-markdown": "^18.1.0",
     "ngx-monaco-editor": "^12.0.0",
@@ -67,6 +67,7 @@
     "@types/he": "^1.2.3",
     "@types/jasmine": "~5.1.4",
     "@types/lodash-es": "^4.17.12",
+    "@types/luxon": "^3.4.2",
     "@types/qrcode": "^1.5.5",
     "@types/uuid": "^10.0.0",
     "cypress": "^13.15.0",

diff --git a/src/app/component/backgammon/backgammon.component.ts b/src/app/component/backgammon/backgammon.component.ts
@@ -14,8 +14,8 @@ import {
   SimpleChanges
 } from '@angular/core';
 import { defer, delay, filter, range, uniq } from 'lodash-es';
+import { DateTime } from 'luxon';
 import { autorun, IReactionDisposer } from 'mobx';
-import * as moment from 'moment';
 import { catchError, Observable, Subscription, throwError } from 'rxjs';
 import { Ref, RefUpdates } from '../../model/ref';
 import { RefService } from '../../service/api/ref.service';
@@ -552,7 +552,7 @@ export class BackgammonComponent implements OnInit, AfterViewInit, OnChanges, On
       this.writeAccess = true;
       if (this.patchingComment !== comment) return;
       this.ref!.comment = comment;
-      this.ref!.modified = moment(cursor);
+      this.ref!.modified = DateTime.fromISO(cursor);
       this.cursor = this.ref!.modifiedString = cursor;
       this.patchingComment = '';
       if (!this.local) {

diff --git a/src/app/component/blog/blog-entry/blog-entry.component.html b/src/app/component/blog/blog-entry/blog-entry.component.html
@@ -49,7 +49,7 @@ <h2 class="link blog-title" [class.remote]="!local">
                   [appTitle]="icon"
                   [ref]="ref">{{ icon.label }}</span>
           </ng-container>
-          <span [title]="ref.published?.toISOString()">{{ ref.published?.fromNow() }}</span>
+          <span [title]="ref.published?.toISO()">{{ ref.published?.toRelative() }}</span>
           <ng-container *ngIf="!authors.length && ref.created && !local">
             on <a class="origin tag" [routerLink]="['/tag', ref.origin]">{{ ref.origin }}</a>
           </ng-container>

diff --git a/src/app/component/blog/blog-entry/blog-entry.component.ts b/src/app/component/blog/blog-entry/blog-entry.component.ts
@@ -12,8 +12,8 @@ import {
 } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { defer, groupBy, intersection, uniq } from 'lodash-es';
+import { DateTime } from 'luxon';
 import { autorun, IReactionDisposer } from 'mobx';
-import * as moment from 'moment';
 import { catchError, map, of, Subscription, switchMap, throwError } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { writePlugins } from '../../../form/plugins/plugins.component';
@@ -371,7 +371,7 @@ export class BlogEntryComponent implements OnChanges, OnDestroy {
       scrollToFirstInvalid();
       return;
     }
-    const published = moment(this.editForm.value.published, moment.HTML5_FMT.DATETIME_LOCAL_SECONDS);
+    const published = DateTime.fromISO(this.editForm.value.published);
     this.submitting = this.refs.update({
       ...this.ref,
       ...this.editForm.value,

diff --git a/src/app/component/chat/chat-entry/chat-entry.component.html b/src/app/component/chat/chat-entry/chat-entry.component.html
@@ -19,7 +19,7 @@
                    [routerLink]="['/tag', t]">{{ formatAuthor(t) }}</a>
               </ng-container>
             </ng-template>
-  <span class="timestamp" [title]="ref.modified?.toISOString()">{{ ref.modified?.fromNow() }}</span>
+  <span class="timestamp" [title]="ref.modified?.toISO()">{{ ref.modified?.toRelative() }}</span>
   &nbsp;|&nbsp;
 </span>
 <span class="message"

diff --git a/src/app/component/chat/chat.component.html b/src/app/component/chat/chat.component.html
@@ -15,7 +15,7 @@
 <div class="input-box">
   <button type="button"
           class="refresh"
-          [title]="'last polled ' + lastPoll.fromNow()"
+          [title]="'last polled ' + lastPoll.toRelative()"
           (click)="refresh()" i18n>🔄</button>
   <input type="text"
          i18n-placeholder

diff --git a/src/app/component/chat/chat.component.ts b/src/app/component/chat/chat.component.ts
@@ -1,7 +1,7 @@
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { Component, HostBinding, Input, OnDestroy, ViewChild } from '@angular/core';
 import { debounce, defer, delay, pull, pullAllWith, uniq } from 'lodash-es';
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import { catchError, map, Subject, Subscription, takeUntil, throwError } from 'rxjs';
 import { v4 as uuid } from 'uuid';
 import { Ref } from '../../model/ref';
@@ -33,7 +33,7 @@ export class ChatComponent implements OnDestroy {
   cursors = new Map<string, string | undefined>();
   loadingPrev = false;
   plugins = this.store.account.defaultEditors(['plugin/latex']);
-  lastPoll = moment();
+  lastPoll = DateTime.now();
   initialSize = 50;
   messages?: Ref[];
   addText = '';
@@ -108,7 +108,7 @@ export class ChatComponent implements OnDestroy {
       this.loadPrev(true);
       return;
     }
-    this.lastPoll = moment();
+    this.lastPoll = DateTime.now();
     const query = braces(this.query) + ':' + (origin || '@');
     this.refs.page({
       ...getArgs(
@@ -141,7 +141,7 @@ export class ChatComponent implements OnDestroy {
   loadPrev(scrollDown = false) {
     if (this.loadingPrev) return;
     this.loadingPrev = true;
-    this.lastPoll = moment();
+    this.lastPoll = DateTime.now();
     this.refs.page({
       ...getArgs(
         this.query,

diff --git a/src/app/component/chess/chess.component.ts b/src/app/component/chess/chess.component.ts
@@ -14,8 +14,8 @@ import {
 } from '@angular/core';
 import { Chess, Move, Square } from 'chess.js';
 import { defer, delay, flatten, without } from 'lodash-es';
+import { DateTime } from 'luxon';
 import { autorun, IReactionDisposer } from 'mobx';
-import * as moment from 'moment';
 import { catchError, Observable, Subscription, throwError } from 'rxjs';
 import { Ref, RefUpdates } from '../../model/ref';
 import { RefService } from '../../service/api/ref.service';
@@ -337,7 +337,7 @@ export class ChessComponent implements OnInit, OnChanges, OnDestroy {
       if (this.prevComment !== comment) return;
       this.ref!.title = title;
       this.ref!.comment = comment;
-      this.ref!.modified = moment(cursor);
+      this.ref!.modified = DateTime.fromISO(cursor);
       this.ref!.modifiedString = cursor;
       if (!this.local) {
         this.ref!.origin = this.store.account.origin;

diff --git a/src/app/component/comment/comment-reply/comment-reply.component.ts b/src/app/component/comment/comment-reply/comment-reply.component.ts
@@ -2,7 +2,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { AfterViewInit, Component, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';
 import { FormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { defer, merge, pickBy, uniq, without } from 'lodash-es';
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import { catchError, Subject, Subscription, throwError } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { v4 as uuid } from 'uuid';
@@ -126,13 +126,13 @@ export class CommentReplyComponent implements AfterViewInit {
       sources,
       tags,
       plugins: this.inheritedPlugins,
-      published: moment(),
+      published: DateTime.now(),
     };
     this.comment.disable();
     this.replying = this.refs.create(ref).pipe(
       tap(cursor => {
         ref.modifiedString = cursor;
-        ref.modified = moment(cursor);
+        ref.modified = DateTime.fromISO(cursor);
         if (this.admin.getPlugin('plugin/vote/up')) {
           this.ts.createResponse('plugin/vote/up', url).subscribe();
         }
@@ -151,7 +151,7 @@ export class CommentReplyComponent implements AfterViewInit {
       this.editor?.syncText('');
       const update = {
         ...ref,
-        created: moment(),
+        created: DateTime.now(),
         metadata: {
           plugins: {
             'plugin/vote/up': 1

diff --git a/src/app/component/comment/comment.component.html b/src/app/component/comment/comment.component.html
@@ -17,8 +17,8 @@
       </ng-container>
     </ng-template>
     <span *ngIf="store.view.isVoteSorted && admin.getPlugin('plugin/vote/up')" class="vote-score" i18n>{{ score }} points&nbsp;</span>
-    <span [title]="ref.created?.toISOString()">{{ ref.created?.fromNow() }}</span>
-    <span *ngIf="ref.modified && !ref.modified.isSame(ref.created)" [title]="ref.modified.fromNow()">*</span>
+    <span [title]="ref.created?.toISO()">{{ ref.created?.toRelative() }}</span>
+    <span *ngIf="ref.modified && !ref.modified.hasSame(ref.created!, 'millisecond')" [title]="ref.modified.toRelative()">*</span>
     <ng-container *ngFor="let icon of icons">
       <span *ngIf="showIcon(icon)"
             class="icon"
@@ -62,8 +62,8 @@
                [routerLink]="['/tag', t]">{{ formatAuthor(t) }}</a>
           </ng-container>
         </ng-template><span *ngIf="admin.getPlugin('plugin/vote/up')" class="vote-score" i18n>{{ score }} points&nbsp;</span>
-        <span [title]="ref.created?.toISOString()">{{ ref.created?.fromNow() }}</span>
-        <span *ngIf="ref.modified && !ref.modified.isSame(ref.created)" [title]="'last edited ' + ref.modified.fromNow()">*</span>
+        <span [title]="ref.created?.toISO()">{{ ref.created?.toRelative() }}</span>
+        <span *ngIf="ref.modified && !ref.modified.hasSame(ref.created!, 'millisecond')" [title]="'last edited ' + ref.modified.toRelative()">*</span>
         <ng-container *ngIf="tagged.length" i18n>
           tagged
           <ng-container *ngIf="tagExts$ | async as tagExts; else tagNoExts">

diff --git a/src/app/component/ext/ext.component.html b/src/app/component/ext/ext.component.html
@@ -6,7 +6,7 @@
 <div class="stack">
   <div class="info">
     <ng-container *ngIf="ext.modified else notSubmitted">
-      <span [title]="ext.modified.toISOString()" i18n>modified {{ ext.modified.fromNow() }}</span>
+      <span [title]="ext.modified.toISO()" i18n>modified {{ ext.modified.toRelative() }}</span>
     </ng-container>
     <ng-template #notSubmitted>
       <span i18n>not found</span>

diff --git a/src/app/component/ext/ext.component.ts b/src/app/component/ext/ext.component.ts
@@ -12,8 +12,8 @@ import {
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { isObject } from 'lodash-es';
+import { DateTime } from 'luxon';
 import { toJS } from 'mobx';
-import * as moment from 'moment';
 import { catchError, of, switchMap, throwError } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { extForm, ExtFormComponent } from '../../form/ext/ext.component';
@@ -202,7 +202,7 @@ export class ExtComponent implements OnChanges {
       }),
     ).subscribe(cursor => {
       this.ext.modifiedString = cursor;
-      this.ext.modified = moment(cursor);
+      this.ext.modified = DateTime.fromISO(cursor);
       this.ext.origin = this.store.account.origin;
       this.store.submit.removeExt(this.ext);
       this.init();

diff --git a/src/app/component/filter/filter.component.ts b/src/app/component/filter/filter.component.ts
@@ -11,8 +11,8 @@ import {
 import { $localize } from '@angular/localize/init';
 import { Router } from '@angular/router';
 import { filter, find, pullAll, uniq } from 'lodash-es';
+import { DateTime } from 'luxon';
 import { autorun, IReactionDisposer, toJS } from 'mobx';
-import * as moment from 'moment';
 import { Ext } from '../../model/ext';
 import { FilterConfig } from '../../model/tag';
 import { KanbanConfig } from '../../mods/kanban';
@@ -46,14 +46,14 @@ export class FilterComponent implements OnChanges, OnDestroy {
   @Input()
   type?: Type;
 
-  modifiedBeforeFilter: FilterItem = { filter: `modified/before/${moment().toISOString()}`, label: $localize`🕓️ modified before` };
-  modifiedAfterFilter: FilterItem = { filter: `modified/after/${moment().toISOString()}`, label: $localize`🕓️ modified after` };
-  responseBeforeFilter: FilterItem = { filter: `response/before/${moment().toISOString()}`, label: $localize`🧵️ response before` };
-  responseAfterFilter: FilterItem = { filter: `response/after/${moment().toISOString()}`, label: $localize`🧵️ response after` };
-  publishedBeforeFilter: FilterItem = { filter: `published/before/${moment().toISOString()}`, label: $localize`📅️ published before` };
-  publishedAfterFilter: FilterItem = { filter: `published/after/${moment().toISOString()}`, label: $localize`📅️ published after` };
-  createdBeforeFilter: FilterItem = { filter: `created/before/${moment().toISOString()}`, label: $localize`✨️ created before` };
-  createdAfterFilter: FilterItem = { filter: `created/after/${moment().toISOString()}`, label: $localize`✨️ created after` };
+  modifiedBeforeFilter: FilterItem = { filter: `modified/before/${DateTime.now().toISO()}`, label: $localize`🕓️ modified before` };
+  modifiedAfterFilter: FilterItem = { filter: `modified/after/${DateTime.now().toISO()}`, label: $localize`🕓️ modified after` };
+  responseBeforeFilter: FilterItem = { filter: `response/before/${DateTime.now().toISO()}`, label: $localize`🧵️ response before` };
+  responseAfterFilter: FilterItem = { filter: `response/after/${DateTime.now().toISO()}`, label: $localize`🧵️ response after` };
+  publishedBeforeFilter: FilterItem = { filter: `published/before/${DateTime.now().toISO()}`, label: $localize`📅️ published before` };
+  publishedAfterFilter: FilterItem = { filter: `published/after/${DateTime.now().toISO()}`, label: $localize`📅️ published after` };
+  createdBeforeFilter: FilterItem = { filter: `created/before/${DateTime.now().toISO()}`, label: $localize`✨️ created before` };
+  createdAfterFilter: FilterItem = { filter: `created/after/${DateTime.now().toISO()}`, label: $localize`✨️ created after` };
 
   allFilters: FilterGroup[] = [];
   filters: UrlFilter[] = [];
@@ -375,12 +375,12 @@ export class FilterComponent implements OnChanges, OnDestroy {
   }
 
   toIso(date: string) {
-    return moment(date, moment.HTML5_FMT.DATETIME_LOCAL_SECONDS).toISOString();
+    return DateTime.fromISO(date).toISO()!;
   }
 
   toDate(filter: string) {
     if (filter.includes('/')) filter = filter.substring(filter.lastIndexOf('/') + 1);
-    return moment(filter).format(moment.HTML5_FMT.DATETIME_LOCAL_SECONDS);
+    return DateTime.fromISO(filter).toFormat("YYYY-MM-DD'T'TT");
   }
 
 }
diff --git a/src/app/component/graph/force-directed/force-directed.component.ts b/src/app/component/graph/force-directed/force-directed.component.ts
@@ -15,8 +15,8 @@ import {
 import * as d3 from 'd3';
 import { ForceLink, ScaleTime, Selection, Simulation, SimulationNodeDatum } from 'd3';
 import { filter } from 'lodash-es';
+import { DateTime, Duration } from 'luxon';
 import { autorun, IReactionDisposer, runInAction } from 'mobx';
-import * as moment from 'moment';
 import { Observable, of, Subscription } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';
 import { Ref, RefNode } from '../../../model/ref';
@@ -567,11 +567,11 @@ export class ForceDirectedComponent implements AfterViewInit, OnDestroy {
     if (this.store.graph.timeline) {
       let minPublished = this.store.graph.minPublished;
       let maxPublished = this.store.graph.maxPublished;
-      const minDiff = moment.duration(1, 'day').asMilliseconds();
+      const minDiff = Duration.fromObject({ day: 1 }).milliseconds;
       if (this.store.graph.publishedDiff < minDiff) {
-        const half = moment((minPublished || maxPublished || moment()).valueOf() / 2 + (maxPublished || minPublished || moment()).valueOf() / 2);
-        minPublished = moment(half).subtract(minDiff / 2);
-        maxPublished = moment(half).add(minDiff / 2);
+        const half = DateTime.fromMillis((minPublished || maxPublished || DateTime.now()).valueOf() / 2 + (maxPublished || minPublished || DateTime.now()).valueOf() / 2);
+        minPublished = half.minus(minDiff / 2);
+        maxPublished = half.plus(minDiff / 2);
       }
       const height = 20;
       const padding = 40;

diff --git a/src/app/component/kanban/kanban-column/kanban-column.component.ts b/src/app/component/kanban/kanban-column/kanban-column.component.ts
@@ -10,7 +10,7 @@ import {
   SimpleChanges
 } from '@angular/core';
 import { isEqual, uniq } from 'lodash-es';
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import { catchError, Observable, Subject, Subscription, switchMap, takeUntil, throwError } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { v4 as uuid } from 'uuid';
@@ -256,15 +256,15 @@ export class KanbanColumnComponent implements AfterViewInit, OnChanges, OnDestro
         }
         return throwError(err);
       }),
-      tap(cursor => this.accounts.clearNotificationsIfNone(moment(cursor))),
+      tap(cursor => this.accounts.clearNotificationsIfNone(DateTime.fromISO(cursor))),
     ).subscribe(cursor => {
       this.mutated = true;
       this.adding.splice(this.adding.indexOf(text), 1);
       if (!this.page) {
         console.error('Should not happen, will probably get cleared.');
         this.page = {content: []} as any;
       }
-      ref.modified = moment(cursor);
+      ref.modified = DateTime.fromISO(cursor);
       ref.modifiedString = cursor;
       this.page!.content.push(ref)
     });