i18n: Use Intl.NumberFormat internally in i18n-calypso

[chriskmnds]

Fixes Automattic/i18n-issues#795
Related to https://github.com/Automattic/i18n-issues/issues/923

Proposed Changes

• This refactors numberFormat method in i18n-calypso to utilise Intl.NumberFormat internally
• Introduces getBrowserSafeLocale method
• This should also fix the issue that the combination of number_fornat internally and Tannin may have introduced for HE locale (Automattic/i18n-issues#795)

Notes on approach/direction:

• See pxLjZ-9Eg-p2 for details on how we'll approach deprecation of numberFormat (or alternatively a general refactor around it)
• This is part one of a series of PRs, depending on whether we will keep the wrapper in the end or not.
• The signature changes have been kept minimal to not introduce more changes than needed to make the transition. In the next couple of follow-ups, the signature will be adapted to be a simple relay of Intl.NumberFormatOptions (and from there consider full deprecation or not). This is therefore an incremental change (in a way that best works for the author pursuing the refactor).

Media

• Under /me/purchases

ES

EN

• Under /start/day/:site

EN

Why are these changes being made?

Fixes Automattic/i18n-issues#795
Related to https://href.li/?https://github.com/Automattic/i18n-issues/issues/923

We only really need one way of formatting numbers in the codebase. Maybe one wrapper, or maybe one straight-up use of a vanilla API. Unless there is a good reason to not do so, we will pursue this path.

Testing Instructions

We use the numberFormat in several places and formatNumberCompact in just a few. The latter is affected by the changes more prominently.

• Follow the instructions in Add quantity to stats and ai in purchases list #90407 to purchase the JP AI and Stats plugins
  • Go to /me/purchases thereafter and confirm the "views" shown in the description show the correct formatting (see media above). Confirm with HE locale specifically for Automattic/i18n-issues#795
• Go to /stats/day/:fieldguide and confirm the media above. All the stats like "views", "posts", etc. use the formatNumberCompact wrapper

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-130598

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-130598&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-130598&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~481 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-subscriptions        -1354 B  (-0.1%)     -481 B  (-0.1%)
entry-stepper               -930 B  (-0.1%)     -400 B  (-0.1%)
entry-main                  -930 B  (-0.0%)     -400 B  (-0.1%)
entry-login                 -930 B  (-0.0%)     -400 B  (-0.1%)
entry-domains-landing       -930 B  (-0.1%)     -400 B  (-0.2%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~1688 bytes removed 📉 [gzipped])

name                                parsed_size           gzip_size
reader                                   -848 B  (-0.1%)     -155 B  (-0.0%)
plugins                                  -848 B  (-0.0%)     -136 B  (-0.0%)
jetpack-cloud-plugin-management          -848 B  (-0.0%)     -136 B  (-0.0%)
write-flow                               -424 B  (-0.0%)      -78 B  (-0.0%)
woocommerce-installation                 -424 B  (-0.1%)      -72 B  (-0.1%)
woocommerce                              -424 B  (-0.1%)      -72 B  (-0.1%)
update-design-flow                       -424 B  (-0.0%)      -74 B  (-0.0%)
themes                                   -424 B  (-0.0%)      -72 B  (-0.0%)
theme                                    -424 B  (-0.1%)      -72 B  (-0.0%)
subscribers                              -424 B  (-0.0%)      -72 B  (-0.0%)
stats                                    -424 B  (-0.0%)      -72 B  (-0.0%)
staging-site                             -424 B  (-0.0%)      -72 B  (-0.0%)
sites-dashboard                          -424 B  (-0.0%)      -72 B  (-0.0%)
site-tools                               -424 B  (-0.0%)      -72 B  (-0.0%)
site-settings                            -424 B  (-0.0%)      -72 B  (-0.0%)
site-purchases                           -424 B  (-0.0%)      -72 B  (-0.0%)
site-profiler                            -424 B  (-0.1%)      -70 B  (-0.1%)
site-performance                         -424 B  (-0.0%)      -72 B  (-0.0%)
site-overview                            -424 B  (-0.0%)      -72 B  (-0.0%)
site-monitoring                          -424 B  (-0.0%)      -72 B  (-0.0%)
site-marketing                           -424 B  (-0.0%)      -72 B  (-0.0%)
site-logs                                -424 B  (-0.0%)      -72 B  (-0.0%)
site-blocks                              -424 B  (-0.1%)      -68 B  (-0.0%)
settings-writing                         -424 B  (-0.1%)      -72 B  (-0.0%)
settings-security                        -424 B  (-0.1%)      -72 B  (-0.0%)
settings-reading                         -424 B  (-0.1%)      -72 B  (-0.1%)
settings-podcast                         -424 B  (-0.1%)      -72 B  (-0.0%)
settings-performance                     -424 B  (-0.1%)      -72 B  (-0.0%)
settings-newsletter                      -424 B  (-0.1%)      -72 B  (-0.0%)
settings-jetpack                         -424 B  (-0.1%)      -72 B  (-0.0%)
settings-discussion                      -424 B  (-0.1%)      -72 B  (-0.1%)
settings                                 -424 B  (-0.0%)      -72 B  (-0.0%)
security                                 -424 B  (-0.1%)      -84 B  (-0.0%)
scan                                     -424 B  (-0.0%)      -72 B  (-0.0%)
purchases                                -424 B  (-0.0%)      -72 B  (-0.0%)
promote-post-i2                          -424 B  (-0.1%)      -72 B  (-0.0%)
privacy                                  -424 B  (-0.1%)      -73 B  (-0.0%)
preview                                  -424 B  (-0.1%)      -72 B  (-0.1%)
posts-custom                             -424 B  (-0.1%)      -72 B  (-0.0%)
posts                                    -424 B  (-0.1%)      -72 B  (-0.0%)
plans                                    -424 B  (-0.0%)      -72 B  (-0.0%)
performance-profiler                     -424 B  (-0.1%)      -70 B  (-0.1%)
people                                   -424 B  (-0.0%)      -72 B  (-0.0%)
patterns                                 -424 B  (-0.0%)      -72 B  (-0.0%)
pages                                    -424 B  (-0.1%)      -72 B  (-0.0%)
notification-settings                    -424 B  (-0.1%)      -75 B  (-0.0%)
migrate                                  -424 B  (-0.1%)      -72 B  (-0.1%)
media                                    -424 B  (-0.0%)      -72 B  (-0.0%)
me                                       -424 B  (-0.1%)      -73 B  (-0.0%)
marketplace                              -424 B  (-0.0%)      -72 B  (-0.0%)
marketing                                -424 B  (-0.0%)      -72 B  (-0.0%)
link-in-bio-tld-flow                     -424 B  (-0.0%)      -74 B  (-0.0%)
jetpack-social                           -424 B  (-0.1%)      -72 B  (-0.0%)
jetpack-search                           -424 B  (-0.1%)      -72 B  (-0.0%)
jetpack-connect                          -424 B  (-0.0%)      -72 B  (-0.0%)
jetpack-cloud-settings                   -424 B  (-0.1%)      -72 B  (-0.0%)
jetpack-cloud-pricing                    -424 B  (-0.1%)      -72 B  (-0.0%)
jetpack-cloud-partner-portal             -424 B  (-0.0%)      -75 B  (-0.0%)
jetpack-cloud-overview                   -424 B  (-0.1%)      -72 B  (-0.1%)
jetpack-cloud-features-comparison        -424 B  (-0.1%)      -72 B  (-0.0%)
jetpack-cloud-agency-dashboard           -424 B  (-0.0%)      -75 B  (-0.0%)
jetpack-cloud                            -424 B  (-0.1%)      -72 B  (-0.1%)
import-hosted-site-flow                  -424 B  (-0.0%)      -75 B  (-0.0%)
import                                   -424 B  (-0.1%)      -72 B  (-0.0%)
hosting-features                         -424 B  (-0.0%)      -72 B  (-0.0%)
hosting                                  -424 B  (-0.0%)      -72 B  (-0.0%)
home                                     -424 B  (-0.0%)      -72 B  (-0.0%)
help                                     -424 B  (-0.1%)     -106 B  (-0.1%)
gutenberg-editor                         -424 B  (-0.1%)      -72 B  (-0.0%)
google-my-business                       -424 B  (-0.1%)      -72 B  (-0.0%)
github-deployments                       -424 B  (-0.0%)      -72 B  (-0.0%)
export                                   -424 B  (-0.1%)      -72 B  (-0.1%)
email                                    -424 B  (-0.1%)      -72 B  (-0.0%)
earn                                     -424 B  (-0.1%)      -72 B  (-0.0%)
domains                                  -424 B  (-0.0%)      -72 B  (-0.0%)
developer                                -424 B  (-0.1%)      -73 B  (-0.0%)
devdocs                                  -424 B  (-0.2%)      -95 B  (-0.2%)
customize                                -424 B  (-0.1%)      -72 B  (-0.1%)
copy-site-flow                           -424 B  (-0.0%)      -74 B  (-0.0%)
concierge                                -424 B  (-0.1%)      -72 B  (-0.1%)
comments                                 -424 B  (-0.1%)      -72 B  (-0.0%)
checkout                                 -424 B  (-0.0%)      -72 B  (-0.0%)
build-flow                               -424 B  (-0.0%)      -78 B  (-0.0%)
backup                                   -424 B  (-0.0%)      -72 B  (-0.0%)
add-ons                                  -424 B  (-0.1%)      -72 B  (-0.1%)
activity                                 -424 B  (-0.1%)      -72 B  (-0.0%)
account-close                            -424 B  (-0.1%)      -73 B  (-0.0%)
account                                  -424 B  (-0.1%)      -85 B  (-0.0%)
a8c-for-agencies-team                    -424 B  (-0.0%)      -70 B  (-0.0%)
a8c-for-agencies-sites                   -424 B  (-0.0%)      -70 B  (-0.0%)
a8c-for-agencies-settings                -424 B  (-0.2%)      -70 B  (-0.1%)
a8c-for-agencies-referrals               -424 B  (-0.0%)      -70 B  (-0.0%)
a8c-for-agencies-purchases               -424 B  (-0.1%)      -70 B  (-0.0%)
a8c-for-agencies-plugins                 -424 B  (-0.2%)      -70 B  (-0.1%)
a8c-for-agencies-partner-directory       -424 B  (-0.1%)      -70 B  (-0.0%)
a8c-for-agencies-overview                -424 B  (-0.0%)      -70 B  (-0.0%)
a8c-for-agencies-migrations              -424 B  (-0.0%)      -70 B  (-0.0%)
a8c-for-agencies-marketplace             -424 B  (-0.0%)      -70 B  (-0.0%)
a8c-for-agencies-landing                 -424 B  (-0.3%)      -70 B  (-0.1%)
a8c-for-agencies-client                  -424 B  (-0.0%)      -70 B  (-0.0%)
a8c-for-agencies-agency-tier             -424 B  (-0.2%)      -70 B  (-0.1%)
a8c-for-agencies                         -424 B  (-0.4%)      -70 B  (-0.2%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~602 bytes removed 📉 [gzipped])

name                                              parsed_size           gzip_size
async-load-signup-steps-site-picker                    -424 B  (-0.2%)      -71 B  (-0.1%)
async-load-signup-steps-domains                        -424 B  (-0.1%)      -68 B  (-0.0%)
async-load-signup-steps-difm-site-picker               -424 B  (-0.2%)      -74 B  (-0.1%)
async-load-signup-steps-clone-credentials              -424 B  (-0.4%)      -69 B  (-0.2%)
async-load-calypso-my-sites-stats-pages-insights       -424 B  (-0.7%)      -77 B  (-0.5%)
async-load-calypso-my-sites-checkout-modal             -424 B  (-0.0%)      -85 B  (-0.0%)
async-load-calypso-components-jetpack-portal-nav       -424 B  (-0.9%)      -73 B  (-0.5%)
async-load-automattic-help-center-stepper              -424 B  (-0.0%)      -85 B  (-0.0%)
async-load-automattic-help-center                      -424 B  (-0.1%)      -85 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• command-palette-wp-admin
• happy-blocks
• help-center
• notifications
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/i18n-deprecate-number-format-func on your sandbox.

[chriskmnds]

I'm leaving some TODOs withclk/initials. I intend to immediately come back to and address in next 1-2 PRs.

[jsnajdr]

Something to think about: the Intl.NumberFormat is designed to have two steps: 1. create the formatter (once); 2. use it to format numbers (many times).

It's like if creating the formatter was expensive: find the translation resources and initialize everything. And the actual formatting is cheap.

Can we somehow cache the formatter? Create it just once and then in numberFormat just call its .format method?

[chriskmnds]

Thanks. I like the idea, and it's definitely doable. If we keep numberFormat going forward, we can explore a caching layer, assuming it brings any real benefits I guess.

It might be the case that we also expose a hook around this.

For now, I think we can proceed with the current form and rework it as we go. WDYT? I intend to have a few more PRs before we make the final call, whether to deprecate or not (and from there do the additional cleanup).

[chriskmnds]

Thanks again @jsnajdr. For all your suggestions/guideance. Following up on the above in #99110.

If my tests are correct, there are indeed gains from a bit of caching.

[chriskmnds]

Thank you all for reviewing! 🎉
I will proceed with deploying this as it's blocking my work, which will sit on top. I confirmed the couple of cases from the testing instructions and they LGTM.

---

p.s. While testing, I noticed in the stats page popup the numbers shown aren't following proper translation e.g. 12,117 would have been 12.117 (with a dot) if passed through Intl.NumberFormat:

It's the same in production, so I will create an issue and add it to the board. cc @dlind1

[chriskmnds]

It's the same in production, so I will create an issue and add it to the board. cc @dlind1

https://github.com/Automattic/i18n-issues/issues/918