Skip to content

i18n: Implement number-formatters v1#42746

Merged
chriskmnds merged 19 commits intotrunkfrom
update/i18n-number-formatters-v1
Apr 2, 2025
Merged

i18n: Implement number-formatters v1#42746
chriskmnds merged 19 commits intotrunkfrom
update/i18n-number-formatters-v1

Conversation

@chriskmnds
Copy link
Copy Markdown
Contributor

@chriskmnds chriskmnds commented Mar 27, 2025

See PT: pxLjZ-9ME-p2
Part of addressing https://github.com/Automattic/i18n-issues/issues/942

Proposed changes:

  • This PR is a follow-up to i18n: Provision new number-formatters package #42639 and brings the implementation of number-formatters from i18n-calypso
  • Methods for formatting regular and compact numbers, and currencies
  • The APIs are essentially abstractions over Intl.NumberFormat
  • Includes a closure/layer for handling locale state
  • Some structural changes

See the package's README for details on the API, usages, and some dev/workflow notes.

Setup

We try to keep a similar functional separation with Intl.NumberFormat( ... ).format( ... ):

src/
├── number-format-currency/index.ts
├── number-format.ts { numberformat, numberFormatCompact }
  • these bring back cached instances of Intl.NumberFormat()
  • exported on their own, they require a locale to be passed as a parameter (we don't currently export these, but we can down the line)
  • the above isn't the case yet for number-format-currency. It returns the formatted number, so it's essentially a full Intl.NumberFormat( ... ).format( ... ) call. It may receive a refactor to sync down the line, which will idealy improve some of the code sharing
src/
├── create-number-formatters.ts { formatNumber, formatNumberCompact, formatCurrency, etc.}
  • a closure to handle locale state, returning abstractions over the number formatters from above, called formaNumber, formatNumberCompact, etc.
  • rhe returned method signatures are adopted from i18n-calypso, which will make migration in wp-calypso easy(er)
  • the methods accept arguments to parameterise the underlying formatters and enable conveniences over common usages (e.g. a convenient decimals prop)

Adding a new formatter to the mix, like for "percentages", would basically just repeat what we've done for "compact" numbers: a method returned from create-number-formatters.ts and a function in number-format.ts (or separate file if anything deeper than a few simple defaults).

TODO

  • Update README

Other information:

  • Have you written new tests for your changes, if applicable?
  • Have you checked the E2E test CI results, and verified that your changes do not break them?
  • Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

  • Unit tests should pass
  • The package is not linked yet, so nothing outside of build passing right now

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 27, 2025

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  • ✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  • ✅ Add testing instructions.
  • ✅ Specify whether this PR includes any changes to data or privacy.
  • ✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖


Follow this PR Review Process:

  1. Ensure all required checks appearing at the bottom of this PR are passing.
  2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
  3. You can use GitHub's Reviewers functionality to request a review.
  4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

@github-actions github-actions bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Mar 27, 2025
@jp-launch-control
Copy link
Copy Markdown

jp-launch-control bot commented Mar 27, 2025

Code Coverage Summary

8 files are newly checked for coverage. Only the first 5 are listed here.

File Coverage
projects/js-packages/number-formatters/src/index.ts 0/2 (0.00%) 💔
projects/js-packages/number-formatters/src/create-number-formatters.ts 19/20 (95.00%) 💚
projects/js-packages/number-formatters/src/number-format-currency/index.ts 75/78 (96.15%) 💚
projects/js-packages/number-formatters/src/constants.ts 2/2 (100.00%) 💚
projects/js-packages/number-formatters/src/get-cached-formatter.ts 9/9 (100.00%) 💚

Full summary · PHP report · JS report

Coverage check overridden by Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR .

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 28, 2025

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

  • To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the update/i18n-number-formatters-v1 branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack update/i18n-number-formatters-v1
bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/i18n-number-formatters-v1

Interested in more tips and information?

  • In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
  • Read more about our development workflow here: PCYsg-eg0-p2
  • Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

@chriskmnds chriskmnds marked this pull request as ready for review March 31, 2025 09:11
@github-actions github-actions bot added the Docs label Mar 31, 2025
@chriskmnds
Copy link
Copy Markdown
Contributor Author

@Automattic/i18n I can't add/find you in Reviewers list. @dlind1 may be something you need to create/do on JP repo?

Please also review the new package for any obvious code hit-misses. It's not linked anywhere, so nothing to test unless you really want to.

@anomiex if you'd like to give this a review - is this the proper way of shipping a "alpha" release (or does it not matter and could just go for v1)? I'm branching off this PR to bring usage inside JP, so we'll be testing separately.

@chriskmnds chriskmnds requested a review from anomiex March 31, 2025 09:46
@chriskmnds
Copy link
Copy Markdown
Contributor Author

chriskmnds commented Mar 31, 2025

@anomiex a NIT question/observation about setup: Could/should the types/ and tests/ folders, and the main index.ts file all migrate under src/ folder? Just for my own knowledge, is there a convention/suggestion or is it pretty loose right now?

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR implements the first version of the number-formatters package by porting functionality from i18n-calypso and introducing locale-aware number, compact number, and currency formatting methods. Key changes include the addition of TypeScript type definitions, a caching mechanism for Intl.NumberFormat instances, and comprehensive tests covering the new functionality.

Reviewed Changes

Copilot reviewed 16 out of 18 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
projects/js-packages/number-formatters/types/index.ts Adds TypeScript interfaces and types for number formatting parameters and currency objects.
projects/js-packages/number-formatters/tests/ Introduces new tests covering plain, compact, and currency formatting as well as caching behavior.
projects/js-packages/number-formatters/src/ Implements number formatting methods, currency formatting with overrides, caching and a factory for creating formatters.
projects/js-packages/number-formatters/README.md Updates documentation to reflect the new API and provides usage examples.
projects/js-packages/number-formatters/CHANGELOG.md Documents the release version changes.
Files not reviewed (2)
  • pnpm-lock.yaml: Language not supported
  • projects/js-packages/number-formatters/package.json: Language not supported

Copy link
Copy Markdown
Contributor

@anomiex anomiex left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if you'd like to give this a review - is this the proper way of shipping a "alpha" release (or does it not matter and could just go for v1)?

You're missing one thing that will stop it from actually releasing the alpha: when this is merged to trunk, the directory projects/js-packages/number-formatters/changelog/ needs to be empty of everything except the .gitkeep file. As it is now, that update-i18n-number-formatters-package file in there will prevent a release from being tagged.

The normal way to do it is to follow the instructions in PCYsg-Np7-p2 to make a PR that does only the cleaning out of the changelog/ dir and updating the CHANGELOG.md. As written it even uses a special branch ("prerelease") to avoid the possibility that someone might merge a conflicting PR right in the middle of your release.

Also of note:

  • The autotagger won't tag versions that end in "-alpha" or "-a." (where <num> is an even number), but "-alpha.1" should be ok.
  • The publish-to-NPM works on any version like "v*..", so as long as the tag gets tagged that should be good.

a NIT question/observation about setup: Could/should the types/ and tests/ folders, and the main index.ts file all migrate under src/ folder? Just for my own knowledge, is there a convention/suggestion or is it pretty loose right now?

It's pretty loose. Our JS-related tooling is set up for several common conventions:

  • Tests in files named *.test.js or *.spec.js (or jsx, ts, or tsx).
    • This can be alongside the sources, or in the tests/ directory.
  • Tests in directories like **/__tests__/**/*.js
  • Tests in directories **/test/*.js, usually alongside the sources.

Looks like in practice things are using either **/test/*.js style (and some are even **/test/*.test.js) or tests/**.test.js style. I see only three instances of *.test.js not under a test/ or tests/ directory, and no /__tests__/ or *.spec.js anywhere.

As far as types go, I don't think any of our tooling has any special configuration or requirements. Checking sources, the few types/ dirs I see are under src/ or an equivalent. I also see some .d.ts-named files not under a types/ dir. I don't know if there are also .ts files (no .d.) that happen to be types-only.

The main index.ts can go under src/ if you want it there. Again, I see both conventions in use.

@chriskmnds
Copy link
Copy Markdown
Contributor Author

Thanks @anomiex for the feedback.

I certainly made some changes/ structural changes based on what you mentioned.

  • moved everything under src/
  • renamed tests/ to test/
  • moved types/index.ts to types.ts

You're missing one thing that will stop it from actually releasing the alpha: when this is merged to trunk, the directory projects/js-packages/number-formatters/changelog/ needs to be empty of everything except the .gitkeep file. As it is now, that update-i18n-number-formatters-package file in there will prevent a release from being tagged.

The normal way to do it is to follow the instructions in PCYsg-Np7-p2 to make a PR that does only the cleaning out of the changelog/ dir and updating the CHANGELOG.md. As written it even uses a special branch ("prerelease") to avoid the possibility that someone might merge a conflicting PR right in the middle of your release.

So I removed the entry/version from the changelog. From what I understand, I should follow up with a PR now doing the changelog cleanup and adding the new version, per PCYsg-Np7-p2. 🤔

Also of note:

  • The autotagger won't tag versions that end in "-alpha" or "-a." (where <num> is an even number), but "-alpha.1" should be ok.
  • The publish-to-NPM works on any version like "v*..", so as long as the tag gets tagged that should be good.

Got it, thanks for the additional notes. The reason I'm going with -alpha.1 is I'd rather do a proper v1 release once this is linked in code and tested well.

@chriskmnds chriskmnds requested a review from Copilot April 1, 2025 14:20
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR implements the v1 number-formatters package for formatting regular numbers, compact numbers, and currencies with locale-aware customizations. Key changes include:

  • Removing legacy tests from projects/js-packages/number-formatters/tests/format-number.test.ts.
  • Introducing new files and tests in the src/ folder to support refined formatting logic for numbers and currencies.
  • Structural updates to improve caching, locale handling, and error fallback behavior.

Reviewed Changes

Copilot reviewed 17 out of 21 changed files in this pull request and generated no comments.

Show a summary per file
File Description
tests/format-number.test.ts Removed legacy tests, presumably replaced by tests in the src/test folder.
src/types.ts Added detailed type definitions for formatter parameters and currency objects.
src/test/* New test files covering various formatting functions.
src/number-format.ts Implements basic number formatting with locale and option integration.
src/number-format-currency/index.ts Provides extensive currency formatting logic with overrides and fallback handling.
src/create-number-formatters.ts Creates a closure-based factory managing locale state and exposing formatter methods.
README.md & CHANGELOG.md Updated documentation and changelog to reflect the new v1 functionality.
Files not reviewed (4)
  • pnpm-lock.yaml: Language not supported
  • projects/js-packages/number-formatters/.gitattributes: Language not supported
  • projects/js-packages/number-formatters/package.json: Language not supported
  • projects/js-packages/number-formatters/tsconfig.json: Language not supported
Comments suppressed due to low confidence (1)

projects/js-packages/number-formatters/tests/format-number.test.ts:1

  • The removal of this test file means that the functionality of formatNumber should be verified elsewhere. Please ensure that equivalent tests are present in the new test suite, so that no regressions occur.
import { describe, expect, test } from '@jest/globals';

@chriskmnds chriskmnds force-pushed the update/i18n-number-formatters-v1 branch from c5c11ce to fcee859 Compare April 1, 2025 14:32
@anomiex
Copy link
Copy Markdown
Contributor

anomiex commented Apr 1, 2025

Looks reasonable to me from a structural perspective. I didn't review the code at all though.

So I removed the entry/version from the changelog. From what I understand, I should follow up with a PR now doing the changelog cleanup and adding the new version, per PCYsg-Np7-p2. 🤔

Yes. 🙂

@chriskmnds chriskmnds added the Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR label Apr 2, 2025
@chriskmnds
Copy link
Copy Markdown
Contributor Author

The test coverage seems to only be lacking in the main index file, where the exports happen. I can add a test later to confirm that what's expected is returned.

@chriskmnds chriskmnds merged commit 7b55ae6 into trunk Apr 2, 2025
85 checks passed
@chriskmnds chriskmnds deleted the update/i18n-number-formatters-v1 branch April 2, 2025 09:09
@github-actions github-actions bot removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. [Status] In Progress labels Apr 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR Docs [JS Package] Number Formatters RNA [Tests] Includes Tests

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants