i18n: Deprecate use of `number-format-compact` utility functions. Use `numberFormat` instead (for now) #98533

chriskmnds · 2025-01-17T10:51:08Z

Related to #98405
Related to #46564

Proposed Changes

This is a follow-up to #98405 and continuing on the path to either deprecate or centralize i18n-calypso numberFormat. It is part of a series of PRs that complete the refactor incrementally. See pxLjZ-9Eg-p2 for details on how we'll approach deprecation of numberFormat (or alternatively a general refactor around it).

Removes the formatNumberCompact and formatNumberMetric utilities from core Calypso and @automattic/components
Updates usages to go through numberFormat with "compact" notation and adds a few tests to address the force of latin numeric for localised numbering systems

Why are these changes being made?

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

Examples of compact / non-compact and Count usage:

/stats/day/:site that number in views etc. render correctly in compact form

/plugins/:site that number of installs renders in compact form (Count component)

/read sidebar > organizations (Count component)

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 · 2025-01-17T10:51:22Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-01-17T10:51:49Z

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

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

name                   parsed_size           gzip_size
entry-subscriptions         -392 B  (-0.0%)     -236 B  (-0.0%)
entry-stepper               +113 B  (+0.0%)      +33 B  (+0.0%)
entry-main                  +113 B  (+0.0%)      +33 B  (+0.0%)
entry-login                 +113 B  (+0.0%)      +33 B  (+0.0%)
entry-domains-landing       +113 B  (+0.0%)      +33 B  (+0.0%)
entry-browsehappy            -41 B  (-0.0%)      -22 B  (-0.0%)

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

Sections (~5118 bytes removed 📉 [gzipped])

name                                parsed_size           gzip_size
plugins                                 -1322 B  (-0.0%)     -626 B  (-0.1%)
jetpack-cloud-plugin-management         -1322 B  (-0.1%)     -626 B  (-0.1%)
a8c-for-agencies-plugins                -1322 B  (-0.1%)     -626 B  (-0.1%)
reader                                  -1294 B  (-0.1%)     -626 B  (-0.1%)
site-profiler                            -701 B  (-0.2%)    -1116 B  (-1.3%)
performance-profiler                     -701 B  (-0.2%)     -722 B  (-0.6%)
write-flow                               -505 B  (-0.0%)     -263 B  (-0.1%)
woocommerce-installation                 -505 B  (-0.1%)     -252 B  (-0.2%)
woocommerce                              -505 B  (-0.2%)     -252 B  (-0.3%)
update-design-flow                       -505 B  (-0.0%)     -266 B  (-0.1%)
themes                                   -505 B  (-0.0%)     -252 B  (-0.1%)
theme                                    -505 B  (-0.1%)     -252 B  (-0.1%)
subscribers                              -505 B  (-0.0%)     -252 B  (-0.1%)
stats                                    -505 B  (-0.0%)     -252 B  (-0.1%)
staging-site                             -505 B  (-0.0%)     -252 B  (-0.1%)
sites-dashboard                          -505 B  (-0.0%)     -252 B  (-0.1%)
site-tools                               -505 B  (-0.0%)     -252 B  (-0.1%)
site-settings                            -505 B  (-0.0%)     -252 B  (-0.1%)
site-purchases                           -505 B  (-0.0%)     -252 B  (-0.0%)
site-performance                         -505 B  (-0.0%)     -252 B  (-0.1%)
site-overview                            -505 B  (-0.0%)     -252 B  (-0.1%)
site-monitoring                          -505 B  (-0.0%)     -252 B  (-0.1%)
site-marketing                           -505 B  (-0.0%)     -252 B  (-0.1%)
site-logs                                -505 B  (-0.0%)     -252 B  (-0.1%)
site-blocks                              -505 B  (-0.1%)     -265 B  (-0.2%)
settings-writing                         -505 B  (-0.1%)     -252 B  (-0.1%)
settings-security                        -505 B  (-0.1%)     -252 B  (-0.2%)
settings-reading                         -505 B  (-0.1%)     -252 B  (-0.2%)
settings-podcast                         -505 B  (-0.1%)     -252 B  (-0.2%)
settings-performance                     -505 B  (-0.1%)     -252 B  (-0.1%)
settings-newsletter                      -505 B  (-0.1%)     -252 B  (-0.2%)
settings-jetpack                         -505 B  (-0.1%)     -252 B  (-0.2%)
settings-discussion                      -505 B  (-0.1%)     -252 B  (-0.2%)
settings                                 -505 B  (-0.0%)     -252 B  (-0.1%)
security                                 -505 B  (-0.1%)     -274 B  (-0.1%)
scan                                     -505 B  (-0.1%)     -252 B  (-0.1%)
purchases                                -505 B  (-0.0%)     -252 B  (-0.0%)
promote-post-i2                          -505 B  (-0.1%)     -252 B  (-0.1%)
privacy                                  -505 B  (-0.1%)     -253 B  (-0.1%)
preview                                  -505 B  (-0.2%)     -252 B  (-0.3%)
posts-custom                             -505 B  (-0.1%)     -252 B  (-0.1%)
posts                                    -505 B  (-0.1%)     -252 B  (-0.1%)
plans                                    -505 B  (-0.0%)     -252 B  (-0.1%)
people                                   -505 B  (-0.1%)     -252 B  (-0.1%)
patterns                                 -505 B  (-0.0%)     -258 B  (-0.0%)
pages                                    -505 B  (-0.1%)     -252 B  (-0.2%)
notification-settings                    -505 B  (-0.1%)     -262 B  (-0.1%)
migrate                                  -505 B  (-0.1%)     -252 B  (-0.2%)
media                                    -505 B  (-0.0%)     -252 B  (-0.1%)
me                                       -505 B  (-0.1%)     -254 B  (-0.2%)
marketplace                              -505 B  (-0.1%)     -252 B  (-0.1%)
marketing                                -505 B  (-0.1%)     -252 B  (-0.1%)
link-in-bio-tld-flow                     -505 B  (-0.0%)     -266 B  (-0.0%)
jetpack-social                           -505 B  (-0.1%)     -252 B  (-0.1%)
jetpack-search                           -505 B  (-0.1%)     -252 B  (-0.1%)
jetpack-connect                          -505 B  (-0.0%)     -252 B  (-0.1%)
jetpack-cloud-settings                   -505 B  (-0.1%)     -252 B  (-0.1%)
jetpack-cloud-pricing                    -505 B  (-0.1%)     -252 B  (-0.1%)
jetpack-cloud-partner-portal             -505 B  (-0.1%)     -260 B  (-0.1%)
jetpack-cloud-overview                   -505 B  (-0.1%)     -252 B  (-0.2%)
jetpack-cloud-features-comparison        -505 B  (-0.1%)     -252 B  (-0.1%)
jetpack-cloud-agency-dashboard           -505 B  (-0.0%)     -260 B  (-0.1%)
jetpack-cloud                            -505 B  (-0.1%)     -252 B  (-0.2%)
import-hosted-site-flow                  -505 B  (-0.0%)     -238 B  (-0.1%)
import                                   -505 B  (-0.1%)     -252 B  (-0.1%)
hosting-features                         -505 B  (-0.0%)     -252 B  (-0.1%)
hosting                                  -505 B  (-0.0%)     -252 B  (-0.0%)
home                                     -505 B  (-0.0%)     -252 B  (-0.1%)
help                                     -505 B  (-0.1%)     -267 B  (-0.2%)
gutenberg-editor                         -505 B  (-0.1%)     -252 B  (-0.1%)
google-my-business                       -505 B  (-0.1%)     -252 B  (-0.2%)
github-deployments                       -505 B  (-0.0%)     -252 B  (-0.1%)
export                                   -505 B  (-0.1%)     -252 B  (-0.2%)
email                                    -505 B  (-0.1%)     -252 B  (-0.1%)
earn                                     -505 B  (-0.1%)     -252 B  (-0.1%)
domains                                  -505 B  (-0.0%)     -252 B  (-0.0%)
developer                                -505 B  (-0.1%)     -256 B  (-0.1%)
devdocs                                  -505 B  (-0.3%)     -252 B  (-0.4%)
customize                                -505 B  (-0.2%)     -252 B  (-0.3%)
copy-site-flow                           -505 B  (-0.0%)     -266 B  (-0.1%)
concierge                                -505 B  (-0.1%)     -252 B  (-0.2%)
comments                                 -505 B  (-0.1%)     -252 B  (-0.1%)
checkout                                 -505 B  (-0.0%)     -252 B  (-0.0%)
build-flow                               -505 B  (-0.0%)     -264 B  (-0.1%)
backup                                   -505 B  (-0.0%)     -252 B  (-0.1%)
add-ons                                  -505 B  (-0.1%)     -252 B  (-0.2%)
activity                                 -505 B  (-0.1%)     -252 B  (-0.1%)
account-close                            -505 B  (-0.1%)     -259 B  (-0.2%)
account                                  -505 B  (-0.1%)     -268 B  (-0.1%)
a8c-for-agencies-team                    -505 B  (-0.1%)     -264 B  (-0.1%)
a8c-for-agencies-sites                   -505 B  (-0.0%)     -260 B  (-0.0%)
a8c-for-agencies-settings                -505 B  (-0.2%)     -254 B  (-0.4%)
a8c-for-agencies-referrals               -505 B  (-0.0%)     -264 B  (-0.1%)
a8c-for-agencies-purchases               -505 B  (-0.1%)     -292 B  (-0.1%)
a8c-for-agencies-partner-directory       -505 B  (-0.1%)     -264 B  (-0.2%)
a8c-for-agencies-overview                -505 B  (-0.0%)     -260 B  (-0.1%)
a8c-for-agencies-migrations              -505 B  (-0.0%)     -276 B  (-0.1%)
a8c-for-agencies-marketplace             -505 B  (-0.1%)     -264 B  (-0.1%)
a8c-for-agencies-landing                 -505 B  (-0.3%)     -261 B  (-0.6%)
a8c-for-agencies-client                  -505 B  (-0.0%)     -264 B  (-0.1%)
a8c-for-agencies-agency-tier             -505 B  (-0.2%)     -260 B  (-0.4%)
a8c-for-agencies                         -505 B  (-0.4%)     -263 B  (-0.7%)

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 (~2225 bytes removed 📉 [gzipped])

name                                              parsed_size           gzip_size
async-load-calypso-my-sites-stats-pages-insights       -698 B  (-1.2%)     -354 B  (-2.2%)
async-load-signup-steps-site-picker                    -505 B  (-0.2%)     -258 B  (-0.3%)
async-load-signup-steps-domains                        -505 B  (-0.1%)     -266 B  (-0.1%)
async-load-signup-steps-difm-site-picker               -505 B  (-0.2%)     -257 B  (-0.3%)
async-load-signup-steps-clone-credentials              -505 B  (-0.5%)     -265 B  (-0.8%)
async-load-calypso-my-sites-checkout-modal             -505 B  (-0.0%)     -260 B  (-0.1%)
async-load-calypso-components-jetpack-portal-nav       -505 B  (-1.0%)     -261 B  (-1.8%)
async-load-automattic-help-center-stepper              -505 B  (-0.1%)     -307 B  (-0.1%)
async-load-automattic-help-center                      -505 B  (-0.1%)     -307 B  (-0.2%)
async-load-calypso-reader-tag-stream-main               +45 B  (+0.2%)       +1 B  (+0.0%)
async-load-calypso-reader-site-stream                   -22 B  (-0.1%)       +2 B  (+0.0%)
async-load-calypso-reader-feed-stream                   -22 B  (-0.1%)       +2 B  (+0.0%)
async-load-signup-steps-website-content                 -12 B  (-0.0%)       +0 B

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.

chriskmnds · 2025-01-17T12:08:56Z

packages/i18n-calypso/src/i18n.js

@@ -182,6 +182,7 @@ I18N.prototype.numberFormat = function ( number, options = {}, forceLatin = true
 			minimumFractionDigits: decimals, // default is 0
 			maximumFractionDigits: decimals, // default is the greater between minimumFractionDigits and 3
 			// TODO clk numberFormat this may be the only difference, where some cases use 2 (they can just pass the option to Intl.NumberFormat)
+			...( options?.notation && { notation: options.notation } ),


This will change next to simply spread the full options here

… compact

matticbot · 2025-01-22T16:56:56Z

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-compact on your sandbox.

…non-TS cases

chriskmnds self-assigned this Jan 17, 2025

chriskmnds added the i18n label Jan 17, 2025

chriskmnds commented Jan 17, 2025

View reviewed changes

chriskmnds force-pushed the update/i18n-deprecate-number-format-func branch from 6957664 to c671734 Compare January 22, 2025 09:20

Base automatically changed from update/i18n-deprecate-number-format-func to trunk January 22, 2025 09:44

chriskmnds added 2 commits January 22, 2025 18:38

i18n: Deprecate formatNumberCompact / udpate to use numberFormat with…

114010a

… compact

add some compact tests

0fff918

chriskmnds force-pushed the update/i18n-deprecate-number-format-compact branch from 7f44aba to 0fff918 Compare January 22, 2025 16:38

refactor @automattic/components:count

e91cc57

chriskmnds added 4 commits January 22, 2025 19:17

extra check in number-format for undefined/null values. for fallback …

55246a9

…non-TS cases

cleanup

d2e8b0b

version bump. changelog

988ffab

update arguments type to optional

c80a5ff

chriskmnds marked this pull request as ready for review January 22, 2025 18:00

chriskmnds requested review from a team as code owners January 22, 2025 18:00

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 22, 2025

fix type checks

d5a5454

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

i18n: Deprecate use of `number-format-compact` utility functions. Use `numberFormat` instead (for now) #98533

i18n: Deprecate use of `number-format-compact` utility functions. Use `numberFormat` instead (for now) #98533

chriskmnds commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited by matticbot

Loading

matticbot commented Jan 17, 2025 •

edited

Loading

chriskmnds Jan 17, 2025

matticbot commented Jan 22, 2025

i18n: Deprecate use of number-format-compact utility functions. Use numberFormat instead (for now) #98533

Are you sure you want to change the base?

i18n: Deprecate use of number-format-compact utility functions. Use numberFormat instead (for now) #98533

Conversation

chriskmnds commented Jan 17, 2025 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jan 17, 2025 • edited by matticbot Loading

matticbot commented Jan 17, 2025 • edited Loading

chriskmnds Jan 17, 2025

Choose a reason for hiding this comment

matticbot commented Jan 22, 2025

i18n: Deprecate use of `number-format-compact` utility functions. Use `numberFormat` instead (for now) #98533

i18n: Deprecate use of `number-format-compact` utility functions. Use `numberFormat` instead (for now) #98533

chriskmnds commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited by matticbot

Loading

matticbot commented Jan 17, 2025 •

edited

Loading