Replace MomentJS with Date-Fns (Retry)

.gitignore

@@ -27,3 +27,5 @@ package-lock.json
 
 src/shared/translations
 
+stats.json
+

.prettierignore

@@ -1,3 +1,4 @@
 src/shared/translations
 lemmy-translations
 src/assets/css/themes/*.css
+stats.json

package.json

@@ -6,15 +6,15 @@
   "license": "AGPL-3.0",
   "author": "Dessalines <[email protected]>",
   "scripts": {
+    "analyze": "webpack --mode=none",
     "prebuild:dev": "yarn clean && node generate_translations.js",
     "build:dev": "webpack --mode=development",
     "prebuild:prod": "yarn clean && node generate_translations.js",
     "build:prod": "webpack --mode=production",
     "clean": "yarn run rimraf dist",
-    "dev": "yarn start",
+    "dev": "yarn build:dev --watch",
     "lint": "yarn translations:generate && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
     "prepare": "husky install",
-    "start": "yarn build:dev --watch",
     "themes:build": "sass src/assets/css/themes/:src/assets/css/themes",
     "themes:watch": "sass --watch src/assets/css/themes/:src/assets/css/themes",
     "translations:generate": "node generate_translations.js",
@@ -51,6 +51,7 @@
     "copy-webpack-plugin": "^11.0.0",
     "cross-fetch": "^3.1.5",
     "css-loader": "^6.7.3",
+    "date-fns": "^2.30.0",
     "emoji-mart": "^5.4.0",
     "emoji-short-name": "^2.0.0",
     "express": "~4.18.2",
@@ -76,7 +77,6 @@
     "markdown-it-sub": "^1.0.0",
     "markdown-it-sup": "^1.0.0",
     "mini-css-extract-plugin": "^2.7.5",
-    "moment": "^2.29.4",
     "register-service-worker": "^1.7.2",
     "run-node-webpack-plugin": "^1.3.0",
     "sanitize-html": "^2.10.0",
@@ -101,6 +101,7 @@
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-container": "^2.0.5",
     "@types/node": "^20.1.2",
+    "@types/path-browserify": "^1.0.0",
     "@types/sanitize-html": "^2.9.0",
     "@types/serialize-javascript": "^5.0.1",
     "@types/toastify-js": "^1.11.1",
@@ -122,6 +123,7 @@
     "style-loader": "^3.3.2",
     "terser": "^5.17.3",
     "typescript": "^5.0.4",
+    "webpack-bundle-analyzer": "^4.9.0",
     "webpack-dev-server": "4.15.0"
   },
   "packageManager": "[email protected]",

src/client/index.tsx

@@ -1,4 +1,4 @@
-import { initializeSite } from "@utils/app";
+import { initializeSite, setupDateFns } from "@utils/app";
 import { hydrate } from "inferno-hydrate";
 import { Router } from "inferno-router";
 import { App } from "../shared/components/app/app";
@@ -7,16 +7,22 @@ import { HistoryService } from "../shared/services";
 import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
 
-initializeSite(window.isoData.site_res);
+async function startClient() {
+  initializeSite(window.isoData.site_res);
 
-const wrapper = (
-  <Router history={HistoryService.history}>
-    <App />
-  </Router>
-);
+  await setupDateFns();
 
-const root = document.getElementById("root");
+  const wrapper = (
+    <Router history={HistoryService.history}>
+      <App />
+    </Router>
+  );
 
-if (root) {
-  hydrate(wrapper, root);
+  const root = document.getElementById("root");
+
+  if (root) {
+    hydrate(wrapper, root);
+  }
 }
+
+startClient();

src/server/index.tsx

@@ -1,3 +1,4 @@
+import { setupDateFns } from "@utils/app";
 import express from "express";
 import path from "path";
 import process from "process";
@@ -31,6 +32,7 @@ server.get("/css/themelist", ThemesListHandler);
 server.get("/*", CatchAllHandler);
 
 server.listen(Number(port), hostname, () => {
+  setupDateFns();
   console.log(`http://${hostname}:${port}`);
 });
 

src/shared/components/comment/comment-node.tsx

@@ -16,6 +16,9 @@ import {
   isMod,
 } from "@utils/roles";
 import classNames from "classnames";
+import isBefore from "date-fns/isBefore";
+import parseISO from "date-fns/parseISO";
+import subMinutes from "date-fns/subMinutes";
 import { Component, InfernoNode, linkEvent } from "inferno";
 import { Link } from "inferno-router";
 import {
@@ -46,7 +49,6 @@ import {
   SaveComment,
   TransferCommunity,
 } from "lemmy-js-client";
-import moment from "moment";
 import { commentTreeMaxDepth } from "../../config";
 import {
   BanType,
@@ -1451,9 +1453,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   }
 
   get isCommentNew(): boolean {
-    const now = moment.utc().subtract(10, "minutes");
-    const then = moment.utc(this.commentView.comment.published);
-    return now.isBefore(then);
+    const now = subMinutes(new Date(), 10);
+    const then = parseISO(this.commentView.comment.published);
+    return isBefore(now, then);
   }
 
   handleCommentCollapse(i: CommentNode) {

src/shared/components/common/moment-time.tsx

@@ -1,6 +1,7 @@
-import { capitalizeFirstLetter } from "@utils/helpers";
+import { capitalizeFirstLetter, formatPastDate } from "@utils/helpers";
+import format from "date-fns/format";
+import parseISO from "date-fns/parseISO";
 import { Component } from "inferno";
-import moment from "moment";
 import { I18NextService } from "../../services";
 import { Icon } from "./icon";
 
@@ -11,22 +12,24 @@ interface MomentTimeProps {
   ignoreUpdated?: boolean;
 }
 
+function formatDate(input: string) {
+  return format(parseISO(input), "PPPPpppp");
+}
+
 export class MomentTime extends Component<MomentTimeProps, any> {
   constructor(props: any, context: any) {
     super(props, context);
-
-    moment.locale([...I18NextService.i18n.languages]);
   }
 
   createdAndModifiedTimes() {
     const updated = this.props.updated;
     let line = `${capitalizeFirstLetter(
       I18NextService.i18n.t("created")
-    )}: ${this.format(this.props.published)}`;
+    )}: ${formatDate(this.props.published)}`;
     if (updated) {
       line += `\n\n\n${capitalizeFirstLetter(
         I18NextService.i18n.t("modified")
-      )} ${this.format(updated)}`;
+      )} ${formatDate(updated)}`;
     }
     return line;
   }
@@ -39,23 +42,19 @@ export class MomentTime extends Component<MomentTimeProps, any> {
           className="moment-time font-italics pointer unselectable"
         >
           <Icon icon="edit-2" classes="icon-inline me-1" />
-          {moment.utc(this.props.updated).fromNow(!this.props.showAgo)}
+          {formatPastDate(this.props.updated)}
         </span>
       );
     } else {
       const published = this.props.published;
       return (
         <span
           className="moment-time pointer unselectable"
-          data-tippy-content={this.format(published)}
+          data-tippy-content={formatDate(published)}
         >
-          {moment.utc(published).fromNow(!this.props.showAgo)}
+          {formatPastDate(published)}
         </span>
       );
     }
   }
-
-  format(input: string): string {
-    return moment.utc(input).local().format("LLLL");
-  }
 }

src/shared/components/modlog.tsx

@@ -7,6 +7,7 @@ import {
 } from "@utils/app";
 import {
   debounce,
+  formatPastDate,
   getIdFromString,
   getPageFromString,
   getQueryParams,
@@ -44,7 +45,6 @@ import {
   ModlogActionType,
   Person,
 } from "lemmy-js-client";
-import moment from "moment";
 import { fetchLimit } from "../config";
 import { InitialFetchRequest } from "../interfaces";
 import { FirstLoadService, I18NextService } from "../services";
@@ -371,7 +371,7 @@ function renderModlogType({ type_, view }: ModlogType) {
           )}
           {expires && (
             <span>
-              <div>expires: {moment.utc(expires).fromNow()}</div>
+              <div>expires: {formatPastDate(expires)}</div>
             </span>
           )}
         </>
@@ -403,7 +403,7 @@ function renderModlogType({ type_, view }: ModlogType) {
           )}
           {expires && (
             <span>
-              <div>expires: {moment.utc(expires).fromNow()}</div>
+              <div>expires: {formatPastDate(expires)}</div>
             </span>
           )}
         </>
@@ -467,7 +467,7 @@ function renderModlogType({ type_, view }: ModlogType) {
           )}
           {expires && (
             <span>
-              <div>expires: {moment.utc(expires).fromNow()}</div>
+              <div>expires: {formatPastDate(expires)}</div>
             </span>
           )}
         </>

src/shared/components/person/profile.tsx

@@ -23,6 +23,8 @@ import { canMod, isAdmin, isBanned } from "@utils/roles";
 import type { QueryParams } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
 import classNames from "classnames";
+import format from "date-fns/format";
+import parseISO from "date-fns/parseISO";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import { Link } from "inferno-router";
@@ -70,7 +72,6 @@ import {
   SortType,
   TransferCommunity,
 } from "lemmy-js-client";
-import moment from "moment";
 import { fetchLimit, relTags } from "../../config";
 import { InitialFetchRequest, PersonDetailsView } from "../../interfaces";
 import { mdToHtml } from "../../markdown";
@@ -613,10 +614,7 @@ export class Profile extends Component<
                 <Icon icon="cake" />
                 <span className="ms-2">
                   {I18NextService.i18n.t("cake_day_title")}{" "}
-                  {moment
-                    .utc(pv.person.published)
-                    .local()
-                    .format("MMM DD, YYYY")}
+                  {format(parseISO(pv.person.published), "PPP")}
                 </span>
               </div>
               {!UserService.Instance.myUserInfo && (

src/shared/utils/app/index.ts

@@ -46,6 +46,7 @@ import searchCommentTree from "./search-comment-tree";
 import selectableLanguages from "./selectable-languages";
 import setIsoData from "./set-iso-data";
 import setTheme from "./set-theme";
+import setupDateFns from "./setup-date-fns";
 import showAvatars from "./show-avatars";
 import showLocal from "./show-local";
 import showScores from "./show-scores";
@@ -102,6 +103,7 @@ export {
   selectableLanguages,
   setIsoData,
   setTheme,
+  setupDateFns,
   showAvatars,
   showLocal,
   showScores,

src/shared/utils/app/setup-date-fns.ts

@@ -0,0 +1,19 @@
+import setDefaultOptions from "date-fns/setDefaultOptions";
+import { I18NextService } from "../../services";
+
+export default async function () {
+  let lang = I18NextService.i18n.language;
+  if (lang === "en") {
+    lang = "en-US";
+  }
+
+  const locale = (
+    await import(
+      /* webpackExclude: /\.js\.flow$/ */
+      `date-fns/locale/${lang}`
+    )
+  ).default;
+  setDefaultOptions({
+    locale,
+  });
+}

src/shared/utils/helpers/format-past-date.ts

@@ -0,0 +1,12 @@
+import formatDistanceStrict from "date-fns/formatDistanceStrict";
+import parseISO from "date-fns/parseISO";
+
+export default function (dateString?: string) {
+  return formatDistanceStrict(
+    parseISO(dateString ?? Date.now().toString()),
+    new Date(),
+    {
+      addSuffix: true,
+    }
+  );
+}

src/shared/utils/helpers/index.ts

@@ -1,6 +1,7 @@
 import capitalizeFirstLetter from "./capitalize-first-letter";
 import debounce from "./debounce";
 import editListImmutable from "./edit-list-immutable";
+import formatPastDate from "./format-past-date";
 import futureDaysToUnixTime from "./future-days-to-unix-time";
 import getIdFromString from "./get-id-from-string";
 import getPageFromString from "./get-page-from-string";
@@ -26,6 +27,7 @@ export {
   capitalizeFirstLetter,
   debounce,
   editListImmutable,
+  formatPastDate,
   futureDaysToUnixTime,
   getIdFromString,
   getPageFromString,

src/shared/utils/helpers/is-cake-day.ts

@@ -1,33 +1,13 @@
-import moment from "moment";
-
-moment.updateLocale("en", {
-  relativeTime: {
-    future: "in %s",
-    past: "%s ago",
-    s: "<1m",
-    ss: "%ds",
-    m: "1m",
-    mm: "%dm",
-    h: "1h",
-    hh: "%dh",
-    d: "1d",
-    dd: "%dd",
-    w: "1w",
-    ww: "%dw",
-    M: "1M",
-    MM: "%dM",
-    y: "1Y",
-    yy: "%dY",
-  },
-});
+import getDayOfYear from "date-fns/getDayOfYear";
+import getYear from "date-fns/getYear";
+import parseISO from "date-fns/parseISO";
 
 export default function isCakeDay(published: string): boolean {
-  const createDate = moment.utc(published).local();
-  const currentDate = moment(new Date());
+  const createDate = parseISO(published);
+  const currentDate = new Date();
 
   return (
-    createDate.date() === currentDate.date() &&
-    createDate.month() === currentDate.month() &&
-    createDate.year() !== currentDate.year()
+    getDayOfYear(createDate) === getDayOfYear(currentDate) &&
+    getYear(createDate) !== getYear(currentDate)
   );
 }