Skip to content

i18n: Provision new number-formatters package#42639

Merged
chriskmnds merged 9 commits intotrunkfrom
update/i18n-number-formatters-package
Mar 25, 2025
Merged

i18n: Provision new number-formatters package#42639
chriskmnds merged 9 commits intotrunkfrom
update/i18n-number-formatters-package

Conversation

@chriskmnds
Copy link
Copy Markdown
Contributor

@chriskmnds chriskmnds commented Mar 21, 2025

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

Proposed changes:

Introduces a new js-package number-formatters for formatting numbers/currencies/percentages/etc. in a unified way across wpcom frontends.

This is a skeleton PR with base configs to provision the new package.

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:

  • Build passing
  • Confirm package release on NPM once shipped

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 21, 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 21, 2025
@chriskmnds chriskmnds requested a review from anomiex March 21, 2025 10:26
@chriskmnds
Copy link
Copy Markdown
Contributor Author

@anomiex Per our chat #42317 - It's a WIP PR but tagging you just in case anything stands out if you get a chance to check. I will start bringing functionality in, but mainly wanted to get a base build working/passing.

@chriskmnds chriskmnds force-pushed the update/i18n-number-formatters-package branch 2 times, most recently from 94ad3d2 to e5ec00c Compare March 21, 2025 10:54
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 21, 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-package branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack update/i18n-number-formatters-package
bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/i18n-number-formatters-package

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

@jp-launch-control
Copy link
Copy Markdown

jp-launch-control bot commented Mar 21, 2025

Code Coverage Summary

2 files are newly checked for coverage.

File Coverage
projects/js-packages/number-formatters/src/format-number.ts 1/1 (100.00%) 💚
projects/js-packages/number-formatters/index.ts 0/0 (—%) 🤷

Full summary · PHP report · JS report

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.

In order for the monorepo tooling to work, you'll need to add a few additional files.

  • A composer.json with some configuration settings.

    Details

    This should do it:

    {
        "name": "automattic/js-number-formatter",
        "description": "Number formatting utilities.",
        "license": "GPL-2.0-or-later",
        "require": {},
        "require-dev": {
            "automattic/jetpack-changelogger": "@dev"
        },
        "scripts": {
            "build-production": [
                "pnpm run build"
            ],
            "build-development": [
                "pnpm run build"
            ],
            "test-js": [
                "pnpm run test"
            ],
            "test-coverage": [
                "pnpm run test-coverage"
            ]
        },
        "repositories": [
            {
                "type": "path",
                "url": "../../packages/*",
                "options": {
                    "monorepo": true
                }
            }
        ],
        "extra": {
            "autotagger": true,
            "npmjs-autopublish": true,
            "mirror-repo": "Automattic/number-formatter",
            "textdomain": "number-formatter",
            "changelogger": {
                "link-template": "https://github.com/Automattic/number-formatter/compare/${old}...${new}"
            }
        }
    }

    The name field here doesn't matter. The really important stuff is in scripts and extra.

    Of particular note in there is the reference to a mirror repo, which as specified would be https://github.com/Automattic/number-formatter. If you'd rather have a different mirror repo name (under the Automattic organization), that's fine. Once the name is settled, I can create it for you or you can try following the instructions in https://github.com/Automattic/jetpack/blob/trunk/docs/monorepo.md#mirror-repositories. 🙂

  • An empty file at changelog/.gitkeep.

  • The .gitignore file mentioned in one of the inline comments.

Comment on lines 1 to 10
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

And finally for the setting things up correctly, you'll need to have this look something like

Suggested change
{
"extends": "jetpack-js-tools/tsconfig.base.json",
"include": [ "./index.ts", "./src" ]
}
{
"extends": "jetpack-js-tools/tsconfig.tsc.json",
"include": [ "./index.ts" ],
"compilerOptions": {
"typeRoots": [ "./node_modules/@types/" ],
"sourceMap": false,
"outDir": "./build/",
"target": "es2022",
}
}

You're welcome to use whichever target is appropriate, rename "build" to "dist" if you prefer that, etc.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Ok. Added. Indeed I changed "build" to "dist".

The only problem is changing "extends": "jetpack-js-tools/tsconfig.base.json" to "extends": "jetpack-js-tools/tsconfig.tsc.json". It gives the error I mentioned above

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Ok - my replies from the editor may not be coming through. I said earlier:

with the suggested change in "extends", I get the following error in index.ts:

Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './src/format-number.js'?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

That's expected, and you should make the change it calls for.

What's going on here is that Node requires the extension for esm imports, while bundlers like webpack typically don't.

tsc doesn't try to rewrite the imports at all, it just outputs what its given. If the tsconfig has moduleResolution set to "nodenext" rather than "bundler", it issues that error to flag that the import won't work if the output is going to be run by Node. When you're writing a library like this one, you don't know whether the project using your library is going to be using "nodenext" or "bundler", so TypeScript recommends using the stricter setting for best compatibility.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

That's interesting. Thanks for explaining. I did come across this in the long distant past. I need to get my head around it.

I don't exactly understand this part:

When you're writing a library like this one, you don't know whether the project using your library is going to be using "nodenext" or "bundler"

How do I not know that? Does that make every package we export from wp-calypso faulty in that sense (cause this is the first time I come across this)?

Sorry for my ignorance. I'll try and sum it up in my head

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Does that make every package we export from wp-calypso faulty in that sense (cause this is the first time I come across this)?

Maybe? Or maybe I've misunderstood something at some point. But most likely it just hasn't come up because either all reusers are processing the packages via a bundler like webpack or they're using tsc with moduleResolution set to "bundler" (and aren't running the package via node directly either).

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Interesting. That may well be the case. Thanks for clarifying and sharing the links above.

@chriskmnds chriskmnds force-pushed the update/i18n-number-formatters-package branch from e5ec00c to 563eeb3 Compare March 24, 2025 10:14
@chriskmnds chriskmnds force-pushed the update/i18n-number-formatters-package branch from e95bec2 to 668eceb Compare March 24, 2025 10:44
@chriskmnds
Copy link
Copy Markdown
Contributor Author

@anomiex Thanks for the help/feedback! :-)

I've addressed most comments and left a couple of questions above. I'd be happy to get a bare-bones package shipped (with no more functionality), just to have a base-line setup to refer to. I'd like that if acceptable. Bringing more code into this PR may require additional dependencies, etc.

pnpm-lock.yaml Outdated
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Something seems to be going wrong with this file, it's getting massively reformatted.

Your best bet may be to git checkout origin/trunk pnpm-lock.yaml and then pnpm dedupe to regenerate it.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

👍

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Since there's no link for the 0.1.0 version in the file, we need to delink it here.

Suggested change
## [0.1.0] - 2024-03-18
## 0.1.0 - 2024-03-18

@chriskmnds
Copy link
Copy Markdown
Contributor Author

@anomiex you are trully awesome. Thanks for the continued help and feedback :-)

@chriskmnds chriskmnds marked this pull request as ready for review March 24, 2025 16:50
@chriskmnds
Copy link
Copy Markdown
Contributor Author

I think this looks good to go now, thanks to @anomiex.
I'd like to see the package on NPM next so I can start practically using it

I created the mirror repo here, although I couldn't figure out steps 4 and 6 from the instruactions:

iv. Make sure that matticbot can push to the repo. You would do this here: https://github.com/Automattic/example-repository-name/settings/branches - creating a new branch protection rule where only Matticbot (and whoever needs access to push, for example Garage) can push to that repository.

I created the ruleset, but that's as far as I got. I couldn't find the Automattic Bot app to add to the bypass list (if that's what I'm supposed to do)

vi. Create any secrets needed (e.g. for Autotagger or Npmjs-Autopublisher). See PCYsg-xsv-p2#mirror-repo-secrets for details.

@anomiex
Copy link
Copy Markdown
Contributor

anomiex commented Mar 24, 2025

The step about matticbot usually doesn't actually need you to do anything.

I'll go ahead and add the secrets.

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.

You still need to add a .gitignore file with contents like

/dist/

@chriskmnds chriskmnds force-pushed the update/i18n-number-formatters-package branch from 83ef570 to 4de61b4 Compare March 25, 2025 08:24
@chriskmnds
Copy link
Copy Markdown
Contributor Author

chriskmnds commented Mar 25, 2025

Thanks @anomiex. Up to you how best to proceed from here. We can flesh this out into the full package or ship the skeleton and add the logic next. Come to think of it, it doesn't make a lot of difference on my end :-)

You still need to add a .gitignore file with contents like

👍

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.

Looks good to me to merge and iterate.

If you want a version actually published to npm after merging this, you'll want to follow the instructions in PCYsg-Np7-p2 to have a release tagged. Feel free to ask in Slack (#jetpack-releases) if you want help with that.

@chriskmnds
Copy link
Copy Markdown
Contributor Author

@anomiex Thanks again! I'll follow up on the release from here

@chriskmnds chriskmnds force-pushed the update/i18n-number-formatters-package branch from 4de61b4 to 2181f78 Compare March 25, 2025 15:47
@chriskmnds
Copy link
Copy Markdown
Contributor Author

chriskmnds commented Mar 25, 2025

I get these E2E tests consistently failing, although they don't look related. Do I proceed with merging?

I'm assuming a similar wp-calypso process - with "required" being the "go" flag.

@chriskmnds chriskmnds merged commit 363244e into trunk Mar 25, 2025
81 of 83 checks passed
@chriskmnds chriskmnds deleted the update/i18n-number-formatters-package branch March 25, 2025 16:33
@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 Mar 25, 2025
@chriskmnds
Copy link
Copy Markdown
Contributor Author

Looks like the "Push to mirror repos" job failing https://github.com/Automattic/jetpack/actions/runs/14065109246/job/39386553959

@anomiex
Copy link
Copy Markdown
Contributor

anomiex commented Mar 25, 2025

Yeah, "required" is the real blocker. Unfortunately some of these E2Es are a bit flaky and no one has stepped up to fix them.

Looks like the "Push to mirror repos" job failing https://github.com/Automattic/jetpack/actions/runs/14065109246/job/39386553959

Whatever you did for the "Make sure that matticbot can push to the repo" step somehow prevented it. 😅 Really, for repos under the Automattic organization, it just works by default anyway. I made #42702 to update that doc, and fixed the mirror repo settings so the re-run at https://github.com/Automattic/jetpack/actions/runs/14065109246/job/39388963330 worked. 👍

## Usage

```typescript
import { formatNumber } from '@automattic/jetpack-number-formatters';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Oops, we missed this earlier. 😅 Something for a followup.

Suggested change
import { formatNumber } from '@automattic/jetpack-number-formatters';
import { formatNumber } from '@automattic/number-formatters';

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Gotcha. We'll have a PR soon with lots of changes here :-)

Comment on lines +31 to +39
"jetpack:src": "./index.ts",
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
},
"scripts": {
"build": "pnpm run clean && pnpm run compile-ts",
"clean": "rm -rf dist/",
"compile-ts": "tsc --pretty",
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Do we really need a build step here?

Is the package used outside Jetpack? If not, then may be we can only have "jetpack:src" and remove everything else?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Hi!

Is the package used outside Jetpack?

Yes, intended for use outside.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Personally, I'd say if it has TS and we're publishing it to npm then it probably should have a build script set up. If we really don't want it to be possibly used externally, we probably shouldn't be publishing it in the first place.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Yes, I think the same.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants