From 69ef9f2798e29de3963a4fe7fdc9bba7ac78178c Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Fri, 2 Apr 2021 11:02:01 -0700 Subject: [PATCH] fix: initialize all Intl formatters lazily (#2026) fixes #2024 --- .../_components/profile/AccountProfileDetails.html | 9 +++++---- .../settings/instance/WordFilterSettings.html | 7 ++++--- src/routes/_components/status/Status.html | 4 ++-- src/routes/_components/status/StatusDetails.html | 2 +- src/routes/_components/status/StatusPoll.html | 2 +- src/routes/_thirdparty/timeago/timeago.js | 5 +++-- src/routes/_utils/formatters.js | 13 +++++++------ 7 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src/routes/_components/profile/AccountProfileDetails.html b/src/routes/_components/profile/AccountProfileDetails.html index e5a56f76..16af1c37 100644 --- a/src/routes/_components/profile/AccountProfileDetails.html +++ b/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 }) diff --git a/src/routes/_components/settings/instance/WordFilterSettings.html b/src/routes/_components/settings/instance/WordFilterSettings.html index 75ff63ab..3c6aba3d 100644 --- a/src/routes/_components/settings/instance/WordFilterSettings.html +++ b/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' diff --git a/src/routes/_components/status/Status.html b/src/routes/_components/status/Status.html index b94e2db5..0ee386ec 100644 --- a/src/routes/_components/status/Status.html +++ b/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, diff --git a/src/routes/_components/status/StatusDetails.html b/src/routes/_components/status/StatusDetails.html index 5c31e8e5..7a613495 100644 --- a/src/routes/_components/status/StatusDetails.html +++ b/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) { diff --git a/src/routes/_components/status/StatusPoll.html b/src/routes/_components/status/StatusPoll.html index 27adc17e..b00fdd4a 100644 --- a/src/routes/_components/status/StatusPoll.html +++ b/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 }) => ( diff --git a/src/routes/_thirdparty/timeago/timeago.js b/src/routes/_thirdparty/timeago/timeago.js index 8be2004f..0c8c4ac7 100644 --- a/src/routes/_thirdparty/timeago/timeago.js +++ b/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) { diff --git a/src/routes/_utils/formatters.js b/src/routes/_utils/formatters.js index c5cc4db3..cde8368c 100644 --- a/src/routes/_utils/formatters.js +++ b/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' -}) +}))