Optimize loading of date-fns

src/components/activitylog.js

@@ -2,8 +2,8 @@ import escapeHtml from 'escape-html';
 import Events from '../utils/events.ts';
 import globalize from '../scripts/globalize';
 import dom from '../scripts/dom';
-import * as datefns from 'date-fns';
-import dfnshelper from '../scripts/dfnshelper';
+import { formatRelative } from 'date-fns';
+import { getLocale } from '../scripts/dfnshelper';
 import serverNotifications from '../scripts/serverNotifications';
 import '../elements/emby-button/emby-button';
 import './listview/listview.scss';
@@ -38,7 +38,7 @@ import { toBoolean } from '../utils/string.ts';
         html += escapeHtml(entry.Name);
         html += '</div>';
         html += '<div class="listItemBodyText secondary">';
-        html += datefns.formatRelative(Date.parse(entry.Date), Date.parse(new Date()), { locale: dfnshelper.getLocale() });
+        html += formatRelative(Date.parse(entry.Date), Date.now(), { locale: getLocale() });
         html += '</div>';
         html += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
         html += escapeHtml(entry.ShortOverview || '');

src/scripts/dfnshelper.js

@@ -1,81 +1,86 @@
-import { af, arDZ, be, bg, bn, ca, cs, cy, da, de, el, enGB, enUS, eo, es, et, eu, faIR, fi, fr, frCA, gl, he, hi, hr, hu, id, is, it, ja, kk, ko, lt, lv, ms, nb,
-    nl, nn, pl, ptBR, pt, ro, ru, sk, sl, sv, ta, th, tr, uk, vi, zhCN, zhTW } from 'date-fns/locale';
-import globalize from './globalize';
+import enUS from 'date-fns/locale/en-US';
 
-const dateLocales = (locale) => ({
-    'af': af,
-    'ar': arDZ,
-    'be-by': be,
-    'bg-bg': bg,
-    'bn': bn,
-    'ca': ca,
-    'cs': cs,
-    'cy': cy,
-    'da': da,
-    'de': de,
-    'el': el,
-    'en-gb': enGB,
-    'en-us': enUS,
-    'eo': eo,
-    'es': es,
-    'es-ar': es,
-    'es-do': es,
-    'es-mx': es,
-    'et': et,
-    'eu': eu,
-    'fa': faIR,
-    'fi': fi,
-    'fr': fr,
-    'fr-ca': frCA,
-    'gl': gl,
-    'gsw': de,
-    'he': he,
-    'hi-in': hi,
-    'hr': hr,
-    'hu': hu,
-    'id': id,
-    'is': is,
-    'it': it,
-    'ja': ja,
-    'kk': kk,
-    'ko': ko,
-    'lt-lt': lt,
-    'lv': lv,
-    'ms': ms,
-    'nb': nb,
-    'nl': nl,
-    'nn': nn,
-    'pl': pl,
-    'pt': pt,
-    'pt-br': ptBR,
-    'pt-pt': pt,
-    'ro': ro,
-    'ru': ru,
-    'sk': sk,
-    'sl-si': sl,
-    'sv': sv,
-    'ta': ta,
-    'th': th,
-    'tr': tr,
-    'uk': uk,
-    'vi': vi,
-    'zh-cn': zhCN,
-    'zh-hk': zhCN,
-    'zh-tw': zhTW
-})[locale];
+const LOCALE_MAP = {
+    'af': 'af',
+    'ar': 'ar-DZ',
+    'be-by': 'be',
+    'bg-bg': 'bg',
+    'bn': 'bn',
+    'ca': 'ca',
+    'cs': 'cs',
+    'cy': 'cy',
+    'da': 'da',
+    'de': 'de',
+    'el': 'el',
+    'en-gb': 'en-GB',
+    'en-us': 'en-US',
+    'eo': 'eo',
+    'es': 'es',
+    'es-ar': 'es',
+    'es-do': 'es',
+    'es-mx': 'es',
+    'et': 'et',
+    'eu': 'eu',
+    'fa': 'fa-IR',
+    'fi': 'fi',
+    'fr': 'fr',
+    'fr-ca': 'fr-CA',
+    'gl': 'gl',
+    'gsw': 'de',
+    'he': 'he',
+    'hi-in': 'hi',
+    'hr': 'hr',
+    'hu': 'hu',
+    'id': 'id',
+    'is': 'is',
+    'it': 'it',
+    'ja': 'ja',
+    'kk': 'kk',
+    'ko': 'ko',
+    'lt-lt': 'lt',
+    'lv': 'lv',
+    'ms': 'ms',
+    'nb': 'nb',
+    'nl': 'nl',
+    'nn': 'nn',
+    'pl': 'pl',
+    'pt': 'pt',
+    'pt-br': 'pt-BR',
+    'pt-pt': 'pt',
+    'ro': 'ro',
+    'ru': 'ru',
+    'sk': 'sk',
+    'sl-si': 'sl',
+    'sv': 'sv',
+    'ta': 'ta',
+    'th': 'th',
+    'tr': 'tr',
+    'uk': 'uk',
+    'vi': 'vi',
+    'zh-cn': 'zh-CN',
+    'zh-hk': 'zh-HK',
+    'zh-tw': 'zh-TW'
+};
+
+const DEFAULT_LOCALE = 'en-US';
+
+let localeString = DEFAULT_LOCALE;
+let locale = enUS;
+
+export async function updateLocale(newLocale) {
+    console.debug('[dfnshelper] updating date-fns locale', newLocale);
+    localeString = LOCALE_MAP[newLocale] || LOCALE_MAP[newLocale.replace(/-.*/, '')] || DEFAULT_LOCALE;
+    console.debug('[dfnshelper] mapped to date-fns locale', localeString);
+    locale = await import(`date-fns/locale/${localeString}/index.js`);
+}
 
 export function getLocale() {
-    return dateLocales(globalize.getCurrentLocale()) || dateLocales(globalize.getCurrentLocale().replace(/-.*/, '')) || enUS;
+    return locale;
 }
 
 export function getLocaleWithSuffix() {
     return {
         addSuffix: true,
-        locale: getLocale()
+        locale
     };
 }
-
-export default {
-    getLocale: getLocale,
-    getLocaleWithSuffix
-};

src/scripts/globalize.js

@@ -2,6 +2,7 @@ import isEmpty from 'lodash-es/isEmpty';
 
 import { currentSettings as userSettings } from './settings/userSettings';
 import Events from '../utils/events.ts';
+import { updateLocale } from './dfnshelper';
 
 const Direction = {
     rtl: 'rtl',
@@ -100,6 +101,8 @@ const Direction = {
         } else {
             currentDateTimeCulture = currentCulture;
         }
+        updateLocale(currentDateTimeCulture);
+
         ensureTranslations(currentCulture);
     }
 

webpack.common.js

@@ -113,6 +113,21 @@ const config = {
                             return `node_modules.${parts[0]}.${parts[1]}`;
                         }
 
+                        if (packageName === 'date-fns') {
+                            const parts = module.context
+                                .substring(module.context.lastIndexOf(packageName))
+                                .split(/[\\/]/);
+
+                            let name = `node_modules.${parts[0]}`;
+                            if (parts[1]) {
+                                name += `.${parts[1]}`;
+                            }
+                            if (parts[1] === 'locale') {
+                                name += `.${parts[2]}`;
+                            }
+                            return name;
+                        }
+
                         return `node_modules.${packageName}`;
                     }
                 }