fix: initialize all Intl formatters lazily (#2026)

fixes #2024
This commit is contained in:
Nolan Lawson 2021-04-02 11:02:01 -07:00 committed by GitHub
parent 3c307a47fc
commit 69ef9f2798
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 23 additions and 19 deletions

View File

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

View File

@ -57,16 +57,17 @@
import { LOCALE } from '../../../_static/intl' import { LOCALE } from '../../../_static/intl'
import { importShowWordFilterDialog } from '../../dialog/asyncDialogs/importShowWordFilterDialog' import { importShowWordFilterDialog } from '../../dialog/asyncDialogs/importShowWordFilterDialog'
import { deleteFilter } from '../../../_actions/filters' 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, store: () => store,
computed: { computed: {
filters: ({ instanceName, $instanceFilters }) => $instanceFilters[instanceName] || [], filters: ({ instanceName, $instanceFilters }) => $instanceFilters[instanceName] || [],
formattedFilters: ({ filters }) => filters.map(filter => ({ formattedFilters: ({ filters }) => filters.map(filter => ({
...filter, ...filter,
formattedContexts: listFormat.format(filter.context.map(context => { formattedContexts: listFormat().format(filter.context.map(context => {
switch (context) { switch (context) {
case 'home': case 'home':
return 'intl.filterHome' return 'intl.filterHome'

View File

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

View File

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

View File

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

View File

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

View File

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