Components: Add Build by nateweller · Pull Request #41536 · Automattic/jetpack

nateweller · 2025-02-04T06:56:31Z

Proposed changes:

Adds build to the components package.
- Use tsconfig.tsc.json base with custom compilerOptions.
- Update Storybook files for tsconfig compatibility.
- Adds typecasting to unblock build for UplotReact and ReactSlider.

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

p1738271950791069-slack-CDLH4C1UZ

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

No

Testing instructions:

Validate that both jetpack build js-packages/components -v and jetpack build js-packages/components --production -v run successfully.
Validate that both jetpack build plugins/jetpack -v and jetpack build plugins/jetpack --production -v run successfully.
Validate that no extraneous files are generated by the build (empty git status).
Review the generated build directory contents.

github-actions · 2025-02-04T06:57:27Z

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 add/components/build branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/components/build

bin/jetpack-downloader test jetpack-mu-wpcom-plugin add/components/build

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

github-actions · 2025-02-04T06:57:39Z

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:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
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!

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen as soon as you deploy your changes after merging this PR (PCYsg-Jjm-p2).
WoA releases happen weekly.
Releases to self-hosted sites happen monthly:
- Scheduled release: April 1, 2025
- Code freeze: March 30, 2025

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Starter Plugin plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Classic Theme helper plugin plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

github-actions · 2025-02-04T07:20:02Z

Code Coverage Summary

Cannot generate coverage summary while tests are failing. 🤐

Please fix the tests, or re-run the Code coverage job if it was something being flaky.

Full summary · PHP report · JS report

anomiex

Looks reasonable so far.

I wonder if @manzoorwanijk has any better ideas about the inline comments, he knows TypeScript stuff a lot better than I do.

anomiex · 2025-02-10T18:51:55Z

projects/js-packages/components/components/boost-score-graph/uplot-line-chart.tsx


 	return (
 		<div ref={ uplotContainer } className="boost-uplot-container">
+			{ /* @ts-expect-error JSX element type 'UplotReact' does not have any construct or call signatures.ts(2604) */ }


As far as I can tell, there's either some sort of weirdness when a package's default export is a function that gets TypeScript confused, or there's some sort of confusing mismatch between what the .js actually has and what the .d.ts says when the package's default export is a function. I haven't been able to find a really clear explanation.

Either way, this seems like a reasonable workaround to me. 🤷

Ended up with an interesting conflict where jetpack build plugins/jetpack would fail due to no TS error being thrown, but required for jetpack build plugins/jetpack --production when the TS errors are thrown.

I resorted to typecasting with as unknown as ... to manually specify the component types for UplotReact and ReactSlider.

anomiex · 2025-02-10T18:52:01Z

projects/js-packages/components/components/number-slider/index.tsx


 	return (
 		<div className={ componentClassName } data-testid="number-slider">
+			{ /* @ts-expect-error JSX element type 'ReactSlider' does not have any construct or call signatures.ts(2604) */ }


projects/js-packages/components/components/pricing-card/test/component.tsx

manzoorwanijk · 2025-02-11T04:29:23Z

Using this tsconfig should fix those errors

{
	"extends": "jetpack-js-tools/tsconfig.tsc.json",
	"include": [ "./index.ts", "./components", "./lib", "./tools" ],
	"compilerOptions": {
		"module": "esnext",
		"moduleResolution": "bundler",
		// ... Rest of the config
	}
}

manzoorwanijk · 2025-02-11T04:30:26Z

As rightly pointed out by @anomiex, if you wish to include test files in tsconfig, then you will need to have a separate tsconfig for build.

anomiex · 2025-02-13T20:00:10Z

Using this tsconfig should fix those errors

{
	"extends": "jetpack-js-tools/tsconfig.tsc.json",
	"include": [ "./index.ts", "./components", "./lib", "./tools" ],
	"compilerOptions": {
		"module": "esnext",
		"moduleResolution": "bundler",
		// ... Rest of the config
	}
}

Using that tsconfig will fail the test we have that complains about trying to set "module" or "moduleResolution". 😀

After getting complaints about how "bundler" is infectious and seeing that TypeScript says libraries should use "nodenext" for best compatibility, we set up the current structure with three base tsconfig files and tests that reject use of "module", "moduleResolution", or "noEmit" elsewhere.

jetpack-js-tools/tsconfig.base.json is a base for setting noEmit true and using "bundler" (i.e. what you'll want for a plugin where tsc is only being used to check).
jetpack-js-tools/tsconfig.tsc.json is a base for setting noEmit false and using "nodenext", for when you want tsc to build the JS and emit .d.ts files (i.e. what you'll want for most libraries).
jetpack-js-tools/tsconfig.tsc-declaration-only.json is a base for setting noEmit false, emitDeclarationOnly true, and using "nodenext", for when you want to generate .d.ts files without using tsc for building the JS (for libs that want to use webpack to bundle the js but still want to generate .d.ts too).

manzoorwanijk · 2025-02-14T06:55:43Z

Instead of having the bundling in that components package, should we instead bundle it via a PHP package like assets and have it loaded externally?

That way, we won't need to change anything with the components package as it's used in many different ways that may break.

For example, the weird imports like these can be tedious and can result in duplicated code in bundles

jetpack/projects/js-packages/components/components/jetpack-footer/index.tsx

Line 7 in 0e6a53e

    
           import { STORE_ID as CONNECTION_STORE_ID } from '../../../../js-packages/connection/state/store';

anomiex · 2025-02-14T14:44:38Z

Instead of having the bundling in that components package, should we instead bundle it via a PHP package like assets and have it loaded externally?

The package still needs to be usable to build against. And not every reuser would want to (or be able to) externalize the dependency and use a PHP package.

For example, the weird imports like these can be tedious and can result in duplicated code in bundles

jetpack/projects/js-packages/components/components/jetpack-footer/index.tsx

Line 7 in 0e6a53e

import { STORE_ID as CONNECTION_STORE_ID } from '../../../../js-packages/connection/state/store';

That's definitely something that needs to be fixed before this PR can work. See some prior discussion at #41524 (comment) for a few more details.

anomiex

Looks good to me from a Garage perspective, assuming we're ok with losing TypeScript type checking of the various test files. The right files are being produced in the build artifact, no unexpected changes.

projects/js-packages/components/package.json

anomiex

Now that I think of it, we should probably update
https://github.com/Automattic/jetpack/blob/1571c9f4d847cbe757727d73b2b6f747ecedd345/projects/js-packages/components/package.json#L87-L88
to be something like

		"build": "pnpm run clean && pnpm run compile-ts",
		"clean": "rm -rf build/",
		"compile-ts": "tsc --pretty",

projects/js-packages/components/package.json

projects/js-packages/components/tsconfig.json

Thought of stuff to improve

…nts build

Co-authored-by: Brad Jorsch <anomiex@users.noreply.github.com>

nateweller · 2025-03-16T21:47:13Z

@anomiex Applied all of your suggestions, builds and tests continue to pass, and TS hints/lints appear to work nicely for package consumers 👍

anomiex

LGTM

github-actions bot added [JS Package] Components [JS Package] Script Data [Status] In Progress [Tests] Includes Tests RNA labels Feb 4, 2025

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 Feb 4, 2025

nateweller force-pushed the add/components/build branch from b5f288c to fd3a6ac Compare February 4, 2025 06:58

nateweller force-pushed the add/components/build branch from 486cf38 to e93e444 Compare February 4, 2025 20:37

nateweller force-pushed the add/components/js-imports branch 3 times, most recently from 643217f to 93a48e4 Compare February 10, 2025 00:08

nateweller force-pushed the add/components/build branch from e93e444 to 48b4c75 Compare February 10, 2025 00:46

nateweller self-assigned this Feb 10, 2025

nateweller added the [Type] Janitorial label Feb 10, 2025

nateweller requested a review from a team February 10, 2025 00:57

anomiex reviewed Feb 10, 2025

View reviewed changes

nateweller force-pushed the add/components/js-imports branch from 878df52 to 60f0892 Compare February 12, 2025 18:18

nateweller force-pushed the add/components/build branch from 48b4c75 to 9ff1e56 Compare February 12, 2025 19:54

Base automatically changed from add/components/js-imports to trunk February 15, 2025 21:31

github-actions bot added [JS Package] Storybook [JS Package] Webpack Config labels Feb 15, 2025

nateweller force-pushed the add/components/build branch from 9ff1e56 to 1ae73fb Compare February 20, 2025 20:57

nateweller marked this pull request as ready for review March 11, 2025 22:10

nateweller requested review from anomiex and manzoorwanijk March 11, 2025 22:10

anomiex previously approved these changes Mar 12, 2025

View reviewed changes

manzoorwanijk reviewed Mar 12, 2025

View reviewed changes

projects/js-packages/components/package.json Outdated Show resolved Hide resolved

anomiex reviewed Mar 12, 2025

View reviewed changes

projects/js-packages/components/package.json Outdated Show resolved Hide resolved

projects/js-packages/components/package.json Outdated Show resolved Hide resolved

projects/js-packages/components/tsconfig.json Outdated Show resolved Hide resolved

anomiex mentioned this pull request Mar 14, 2025

i18n: Introduce i18n-calypso for formatting currencies #42317

Closed

3 tasks

nateweller and others added 10 commits March 16, 2025 14:57

Update Storybook type usage for compatibility with build

5a87dbb

Add type decs to ensure components are buildable

d5de88b

Use .js imports in script-data package for compatibility with compone…

e28637a

…nts build

Components: add build

c24fe19

Changelogs

1ad4484

Fix additional js import in script-data package

4bd9dd4

Add types config to package.json

145b55c

Co-authored-by: Brad Jorsch <anomiex@users.noreply.github.com>

Update jp-redirect entrypoint

c6f07f7

Co-authored-by: Brad Jorsch <anomiex@users.noreply.github.com>

Include jp-redirect

cf37885

Co-authored-by: Brad Jorsch <anomiex@users.noreply.github.com>

Fix missing comma

9d02ba5

nateweller force-pushed the add/components/build branch from 510a836 to 9d02ba5 Compare March 16, 2025 20:58

add clean step to build script

4dbc89e

nateweller requested review from anomiex and manzoorwanijk March 16, 2025 21:45

nateweller added [Status] Needs Review This PR is ready for review. and removed [Status] In Progress labels Mar 16, 2025

nateweller requested a review from a team March 16, 2025 21:47

anomiex approved these changes Mar 17, 2025

View reviewed changes

nateweller merged commit 8c7cd54 into trunk Mar 17, 2025
86 checks passed

nateweller deleted the add/components/build branch March 17, 2025 15:56

anomiex mentioned this pull request Apr 9, 2025

@automattic/jetpack-connection npm package is not usable in a custom plugin with @wordpress/scripts #39532

Open

Conversation

nateweller commented Feb 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Other information:

Jetpack product discussion

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

Testing instructions:

Uh oh!

github-actions bot commented Feb 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Feb 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Feb 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

anomiex left a comment

Choose a reason for hiding this comment

Uh oh!

anomiex Feb 10, 2025

Choose a reason for hiding this comment

Uh oh!

nateweller Feb 23, 2025

Choose a reason for hiding this comment

Uh oh!

anomiex Feb 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

manzoorwanijk commented Feb 11, 2025

Uh oh!

manzoorwanijk commented Feb 11, 2025

Uh oh!

anomiex commented Feb 13, 2025

Uh oh!

manzoorwanijk commented Feb 14, 2025

Uh oh!

anomiex commented Feb 14, 2025

Uh oh!

anomiex left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

anomiex left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nateweller commented Mar 16, 2025

Uh oh!

anomiex left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nateweller commented Feb 4, 2025 •

edited

Loading

github-actions bot commented Feb 4, 2025 •

edited

Loading

github-actions bot commented Feb 4, 2025 •

edited

Loading

github-actions bot commented Feb 4, 2025 •

edited

Loading