fix: initialize all Intl formatters lazily (#2026)

fixes #2024

src/routes/_components/profile/AccountProfileDetails.html

@@ -126,21 +126,22 @@
   import { importShowAccountProfileOptionsDialog } from '../dialog/asyncDialogs/importShowAccountProfileOptionsDialog.js'
   import { LOCALE } from '../../_static/intl'
   import { formatIntl } from '../../_utils/formatIntl'
+  import { thunk } from '../../_utils/thunk'
 
-  const numberFormat = new Intl.NumberFormat(LOCALE)
+  const numberFormat = thunk(() => new Intl.NumberFormat(LOCALE))
 
   export default {
     computed: {
       numStatuses: ({ account }) => account.statuses_count || 0,
       numFollowing: ({ account }) => account.following_count || 0,
       numFollowers: ({ account }) => account.followers_count || 0,
-      numStatusesDisplay: ({ numStatuses }) => numberFormat.format(numStatuses),
-      numFollowingDisplay: ({ numFollowing }) => numberFormat.format(numFollowing),
+      numStatusesDisplay: ({ numStatuses }) => numberFormat().format(numStatuses),
+      numFollowingDisplay: ({ numFollowing }) => numberFormat().format(numFollowing),
       numFollowersDisplay: ({ numFollowers, $disableFollowerCounts }) => {
         if ($disableFollowerCounts && numFollowers >= 10) {
           return '10+'
         }
-        return numberFormat.format(numFollowers)
+        return numberFormat().format(numFollowers)
       },
       followersLabel: ({ numFollowers }) => (
         formatIntl('intl.followersLabel', { count: numFollowers })

src/routes/_components/settings/instance/WordFilterSettings.html

@@ -57,16 +57,17 @@
   import { LOCALE } from '../../../_static/intl'
   import { importShowWordFilterDialog } from '../../dialog/asyncDialogs/importShowWordFilterDialog'
   import { deleteFilter } from '../../../_actions/filters'
+  import { thunk } from '../../../_utils/thunk'
 
-  const listFormat = new Intl.ListFormat(LOCALE, { style: 'long', type: 'conjunction' })
+  const listFormat = thunk(() => new Intl.ListFormat(LOCALE, { style: 'long', type: 'conjunction' }))
 
-export default {
+  export default {
     store: () => store,
     computed: {
       filters: ({ instanceName, $instanceFilters }) => $instanceFilters[instanceName] || [],
       formattedFilters: ({ filters }) => filters.map(filter => ({
         ...filter,
-        formattedContexts: listFormat.format(filter.context.map(context => {
+        formattedContexts: listFormat().format(filter.context.map(context => {
           switch (context) {
             case 'home':
               return 'intl.filterHome'

src/routes/_components/status/Status.html

@@ -276,10 +276,10 @@
       },
       createdAtDate: ({ originalStatus }) => originalStatus.created_at,
       createdAtDateTS: ({ createdAtDate }) => new Date(createdAtDate).getTime(),
-      absoluteFormattedDate: ({ createdAtDateTS }) => absoluteDateFormatter.format(createdAtDateTS),
+      absoluteFormattedDate: ({ createdAtDateTS }) => absoluteDateFormatter().format(createdAtDateTS),
       shortInlineFormattedDate: ({ createdAtDateTS, $now, $disableRelativeTimestamps }) => (
         $disableRelativeTimestamps
-          ? dayOnlyAbsoluteDateFormatter.format(createdAtDateTS)
+          ? dayOnlyAbsoluteDateFormatter().format(createdAtDateTS)
           : formatTimeagoDate(createdAtDateTS, $now)
       ),
       reblog: ({ status }) => status.reblog,

src/routes/_components/status/StatusDetails.html

@@ -178,7 +178,7 @@
         return originalStatus.favourites_count || 0
       },
       displayAbsoluteFormattedDate: ({ createdAtDateTS, $isMobileSize }) => (
-        ($isMobileSize ? shortAbsoluteDateFormatter : absoluteDateFormatter).format(createdAtDateTS)
+        ($isMobileSize ? shortAbsoluteDateFormatter : absoluteDateFormatter)().format(createdAtDateTS)
       ),
       reblogsLabel: ({ $disableReblogCounts, numReblogs }) => {
         if ($disableReblogCounts) {

src/routes/_components/status/StatusPoll.html

@@ -307,7 +307,7 @@
       expiresAtTimeagoFormatted: ({ expiresAtTS, expired, $now }) => (
         expired ? formatTimeagoDate(expiresAtTS, $now) : formatTimeagoFutureDate(expiresAtTS, $now)
       ),
-      expiresAtAbsoluteFormatted: ({ expiresAtTS }) => absoluteDateFormatter.format(expiresAtTS),
+      expiresAtAbsoluteFormatted: ({ expiresAtTS }) => absoluteDateFormatter().format(expiresAtTS),
       expiryText: ({ expired }) => expired ? 'intl.expired' : 'intl.expires',
       refreshElementId: ({ uuid }) => `poll-refresh-${uuid}`,
       useNarrowSize: ({ $isMobileSize, expired, isStatusInOwnThread }) => (

src/routes/_thirdparty/timeago/timeago.js

@@ -1,9 +1,10 @@
 // adapted from https://unpkg.com/timeago.js@4.0.0-beta.1/lib/index.js
 import { LOCALE } from '../../_static/intl'
+import { thunk } from '../../_utils/thunk'
 
 const IndexMapEn = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year']
 const SEC_ARRAY = [60, 60, 24, 7, 365 / 7 / 12, 12]
-const intlFormat = new Intl.RelativeTimeFormat(LOCALE)
+const intlFormat = thunk(() => new Intl.RelativeTimeFormat(LOCALE))
 
 function formatRelativeTime (number, index) {
   if (index === 0) {
@@ -14,7 +15,7 @@ function formatRelativeTime (number, index) {
   }
   const unit = IndexMapEn[Math.floor(index / 2)]
 
-  return intlFormat.format(number, unit)
+  return intlFormat().format(number, unit)
 }
 
 function formatDiff (seconds) {

src/routes/_utils/formatters.js

@@ -1,23 +1,24 @@
 import { LOCALE } from '../_static/intl'
+import { thunk } from './thunk'
 
-export const absoluteDateFormatter = new Intl.DateTimeFormat(LOCALE, {
+export const absoluteDateFormatter = thunk(() => new Intl.DateTimeFormat(LOCALE, {
   year: 'numeric',
   month: 'long',
   day: 'numeric',
   hour: '2-digit',
   minute: '2-digit'
-})
+}))
 
-export const shortAbsoluteDateFormatter = new Intl.DateTimeFormat(LOCALE, {
+export const shortAbsoluteDateFormatter = thunk(() => new Intl.DateTimeFormat(LOCALE, {
   year: 'numeric',
   month: 'short',
   day: 'numeric',
   hour: '2-digit',
   minute: '2-digit'
-})
+}))
 
-export const dayOnlyAbsoluteDateFormatter = new Intl.DateTimeFormat(LOCALE, {
+export const dayOnlyAbsoluteDateFormatter = thunk(() => new Intl.DateTimeFormat(LOCALE, {
   year: 'numeric',
   month: 'short',
   day: 'numeric'
-})
+}))