Skip to content

Janitorial: Remove UUID in favor of crypto#101908

Merged
alshakero merged 9 commits intotrunkfrom
remove/uuid
Mar 31, 2025
Merged

Janitorial: Remove UUID in favor of crypto#101908
alshakero merged 9 commits intotrunkfrom
remove/uuid

Conversation

@alshakero
Copy link
Member

@alshakero alshakero commented Mar 26, 2025

Proposed Changes

This removes the external uuid library in favor of native crypto.

Why are these changes being made?

Getting rid of an external library and get whatever benefits that come with that.

Testing Instructions

I can't possibly write testing steps for everything that changed here. But

  1. Make sure everything is green in this PR.
  2. Make sure all changes of files under server also import Node.js's crypto.
  3. Smoke test /setup/onboarding, ($$) until checkout.
  4. Smoke test My Home.
  5. Smoke test DateRange component /devdocs/design/date-range.
  6. Smoke test Range /devdocs/design/ranges
  7. Go to /plugins/woocommerce-bookings, click 1-review, and make sure the review rating stars work.
  8. Make sure the sidebar works in my Home.

@github-actions
Copy link

github-actions bot commented Mar 26, 2025

@matticbot
Copy link
Contributor

matticbot commented Mar 26, 2025

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

App Entrypoints (~52 bytes added 📈 [gzipped])

Details
name                   parsed_size           gzip_size
entry-stepper               -803 B  (-0.1%)     -316 B  (-0.1%)
entry-login                 -803 B  (-0.0%)     -320 B  (-0.1%)
entry-domains-landing       -721 B  (-0.1%)     -313 B  (-0.2%)
entry-main                  -695 B  (-0.0%)     -289 B  (-0.0%)
entry-browsehappy           +252 B  (+0.1%)      +23 B  (+0.0%)
entry-subscriptions          +47 B  (+0.0%)      +20 B  (+0.0%)

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

Sections (~16312 bytes added 📈 [gzipped])

Details
name                                parsed_size           gzip_size
site-blocks                              +932 B  (+0.2%)     +341 B  (+0.2%)
privacy                                  +932 B  (+0.2%)     +338 B  (+0.2%)
me                                       +932 B  (+0.2%)     +337 B  (+0.2%)
developer                                +932 B  (+0.2%)     +338 B  (+0.2%)
account-close                            +932 B  (+0.2%)     +337 B  (+0.2%)
account                                  +932 B  (+0.1%)     +327 B  (+0.1%)
switch-site                              +919 B  (+0.5%)     +388 B  (+0.7%)
a8c-for-agencies-signup                  +919 B  (+0.4%)     +370 B  (+0.5%)
marketing                                +899 B  (+0.1%)     -153 B  (-0.1%)
help                                     +891 B  (+0.2%)     +338 B  (+0.2%)
gutenberg-editor                         +891 B  (+0.2%)     +368 B  (+0.2%)
subscribers                              +878 B  (+0.1%)     +363 B  (+0.1%)
migrate                                  +878 B  (+0.2%)     +381 B  (+0.3%)
media                                    +865 B  (+0.1%)     +805 B  (+0.2%)
security                                 +850 B  (+0.1%)     +300 B  (+0.1%)
patterns                                 +850 B  (+0.0%)     +331 B  (+0.1%)
notification-settings                    +850 B  (+0.1%)     +330 B  (+0.2%)
import                                   +850 B  (+0.1%)     +346 B  (+0.2%)
a8c-for-agencies-purchases               +850 B  (+0.1%)     +324 B  (+0.1%)
performance-profiler                     +837 B  (+0.2%)     +339 B  (+0.3%)
jetpack-cloud-overview                   +837 B  (+0.2%)     +375 B  (+0.3%)
jetpack-cloud                            +837 B  (+0.2%)     +383 B  (+0.3%)
email                                    +837 B  (+0.1%)     +357 B  (+0.1%)
a8c-for-agencies-woopayments             +837 B  (+0.1%)     +340 B  (+0.1%)
a8c-for-agencies-team                    +837 B  (+0.1%)     +340 B  (+0.1%)
a8c-for-agencies-settings                +837 B  (+0.4%)     +360 B  (+0.5%)
a8c-for-agencies-referrals               +837 B  (+0.1%)     +340 B  (+0.1%)
a8c-for-agencies-partner-directory       +837 B  (+0.2%)     +346 B  (+0.2%)
a8c-for-agencies-overview                +837 B  (+0.1%)     +340 B  (+0.1%)
a8c-for-agencies-migrations              +837 B  (+0.1%)     +340 B  (+0.1%)
a8c-for-agencies-marketplace             +837 B  (+0.1%)     +340 B  (+0.1%)
a8c-for-agencies-landing                 +837 B  (+0.5%)     +353 B  (+0.7%)
a8c-for-agencies-client                  +837 B  (+0.1%)     +340 B  (+0.1%)
a8c-for-agencies-agency-tier             +837 B  (+0.4%)     +360 B  (+0.5%)
a8c-for-agencies                         +837 B  (+0.7%)     +353 B  (+1.0%)
themes                                   +809 B  (+0.1%)     +366 B  (+0.1%)
theme                                    +809 B  (+0.1%)     +364 B  (+0.2%)
promote-post-i2                          +809 B  (+0.1%)     +325 B  (+0.1%)
jetpack-cloud-partner-portal             +809 B  (+0.1%)     +310 B  (+0.1%)
async-step-unified-domains               +806 B  (+0.1%)     +368 B  (+0.1%)
staging-site                             +796 B  (+0.1%)     +339 B  (+0.1%)
sites-dashboard                          +796 B  (+0.1%)     +339 B  (+0.1%)
site-settings                            +796 B  (+0.1%)     +339 B  (+0.1%)
site-performance                         +796 B  (+0.1%)     +339 B  (+0.1%)
site-monitoring                          +796 B  (+0.1%)     +339 B  (+0.1%)
reader                                   +796 B  (+0.0%)     +333 B  (+0.0%)
plans                                    +796 B  (+0.0%)     +339 B  (+0.1%)
people                                   +796 B  (+0.1%)     +393 B  (+0.2%)
hosting                                  +796 B  (+0.0%)     +339 B  (+0.1%)
google-my-business                       +796 B  (+0.1%)     +362 B  (+0.2%)
github-deployments                       +796 B  (+0.1%)     +339 B  (+0.1%)
earn                                     +796 B  (+0.1%)     +343 B  (+0.1%)
backup                                   +796 B  (+0.1%)     +351 B  (+0.1%)
a8c-for-agencies-sites                   +796 B  (+0.0%)     +333 B  (+0.1%)
jetpack-connect                          +768 B  (+0.1%)     +306 B  (+0.1%)
jetpack-cloud-agency-dashboard           +768 B  (+0.1%)     +271 B  (+0.1%)
stats                                    +755 B  (+0.1%)     +336 B  (+0.1%)
site-purchases                           +755 B  (+0.0%)     +333 B  (+0.1%)
site-logs                                +755 B  (+0.1%)     +333 B  (+0.1%)
checkout                                 +755 B  (+0.0%)     +326 B  (+0.1%)
settings                                 +751 B  (+0.1%)     +356 B  (+0.1%)
purchases                                +714 B  (+0.0%)     +325 B  (+0.0%)
jetpack-cloud-plugin-management          +714 B  (+0.0%)     +331 B  (+0.0%)
home                                     +714 B  (+0.0%)     +326 B  (+0.1%)
a8c-for-agencies-plugins                 +714 B  (+0.0%)     +331 B  (+0.1%)
overview                                 +673 B  (+0.0%)     +321 B  (+0.0%)
plugins                                  +632 B  (+0.0%)     +315 B  (+0.0%)
domains                                  +629 B  (+0.0%)     +319 B  (+0.0%)
settings-writing                         -123 B  (-0.0%)      -25 B  (-0.0%)
settings-security                        -123 B  (-0.0%)      -25 B  (-0.0%)
settings-performance                     -123 B  (-0.0%)      -25 B  (-0.0%)
settings-jetpack                         -123 B  (-0.0%)      -25 B  (-0.0%)
settings-discussion                      -123 B  (-0.0%)      -25 B  (-0.0%)
scan                                     -123 B  (-0.0%)      -23 B  (-0.0%)
posts-custom                             -123 B  (-0.0%)      -10 B  (-0.0%)
posts                                    -123 B  (-0.0%)      -10 B  (-0.0%)
pages                                    -123 B  (-0.0%)       -7 B  (-0.0%)
comments                                 -123 B  (-0.0%)       -6 B  (-0.0%)
activity                                 -123 B  (-0.0%)      -19 B  (-0.0%)
settings-podcast                          -86 B  (-0.0%)       -7 B  (-0.0%)
site-profiler                             -82 B  (-0.0%)      -23 B  (-0.0%)
jetpack-cloud-pricing                     -82 B  (-0.0%)       -6 B  (-0.0%)
jetpack-cloud-features-comparison         -82 B  (-0.0%)       -7 B  (-0.0%)
accept-invite                             -82 B  (-0.0%)      -14 B  (-0.0%)
woocommerce-installation                  -41 B  (-0.0%)       -1 B  (-0.0%)
woocommerce                               -41 B  (-0.0%)       -1 B  (-0.0%)
stepper-user-step                         -41 B  (-0.0%)       -9 B  (-0.0%)
signup                                    -41 B  (-0.0%)       +3 B  (+0.0%)
settings-reading                          -41 B  (-0.0%)       -1 B  (-0.0%)
settings-newsletter                       -41 B  (-0.0%)       -1 B  (-0.0%)
preview                                   -41 B  (-0.0%)       -1 B  (-0.0%)
onboarding-flow                           -41 B  (-0.0%)       -8 B  (-0.0%)
marketplace                               -41 B  (-0.0%)       -1 B  (-0.0%)
jetpack-social                            -41 B  (-0.0%)       -1 B  (-0.0%)
jetpack-search                            -41 B  (-0.0%)       -1 B  (-0.0%)
jetpack-cloud-settings                    -41 B  (-0.0%)       -1 B  (-0.0%)
export                                    -41 B  (-0.0%)       -1 B  (-0.0%)
devdocs                                   -41 B  (-0.0%)       -6 B  (-0.0%)
customize                                 -41 B  (-0.0%)       -1 B  (-0.0%)
concierge                                 -41 B  (-0.0%)       -1 B  (-0.0%)
async-step-use-my-domain                  -41 B  (-0.0%)       -3 B  (-0.0%)
async-step-unified-plans                  -41 B  (-0.0%)       +3 B  (+0.0%)
add-ons                                   -41 B  (-0.0%)       -1 B  (-0.0%)

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 (~3404 bytes added 📈 [gzipped])

Details
name                                                                              parsed_size           gzip_size
async-load-signup-steps-p2-complete-profile                                            +932 B  (+0.6%)     +333 B  (+0.6%)
async-load-design-wordpress-components-gallery                                         +932 B  (+0.1%)     +334 B  (+0.1%)
async-load-comment-block-editor                                                        +919 B  (+0.0%)     +360 B  (+0.0%)
async-load-calypso-layout-command-palette                                              +919 B  (+0.4%)     +388 B  (+0.6%)
async-load-calypso-blocks-jitm-templates-modal                                         +919 B  (+3.5%)     +373 B  (+4.2%)
async-load-automattic-whats-new                                                        +919 B  (+2.6%)     +371 B  (+3.0%)
async-load-calypso-jetpack-cloud-sections-sidebar-navigation-manage-selected-...       +878 B  (+0.7%)     +384 B  (+1.0%)
async-load-signup-steps-domains                                                        +834 B  (+0.1%)     +379 B  (+0.2%)
async-load-design-playground                                                           +796 B  (+0.1%)     +350 B  (+0.1%)
async-load-design                                                                      +796 B  (+0.1%)     +350 B  (+0.1%)
async-load-automattic-help-center-stepper                                              +786 B  (+0.1%)     +275 B  (+0.1%)
async-load-automattic-help-center                                                      +786 B  (+0.1%)     +275 B  (+0.1%)
async-load-design-blocks                                                               +768 B  (+0.0%)     +340 B  (+0.1%)
async-load-calypso-post-editor-media-modal                                             +755 B  (+0.1%)     +332 B  (+0.1%)
async-load-calypso-post-editor-editor-media-modal                                      -209 B  (-0.0%)      -32 B  (-0.0%)
async-load-calypso-components-web-preview-component                                    -125 B  (-0.0%)      -15 B  (-0.0%)
async-load-store-app-store-stats                                                       -123 B  (-0.0%)      -33 B  (-0.0%)
async-load-calypso-components-jetpack-portal-nav                                        -82 B  (-0.2%)      -23 B  (-0.2%)
async-load-signup-steps-website-content-section-types                                   -45 B  (-0.0%)       -8 B  (-0.0%)
async-load-signup-steps-website-content                                                 -45 B  (-0.0%)       -8 B  (-0.0%)
async-load-store-app-store-stats-listview                                               -41 B  (-0.0%)       -9 B  (-0.0%)
async-load-signup-steps-user                                                            -41 B  (-0.0%)       -7 B  (-0.0%)
async-load-signup-steps-site                                                            -41 B  (-0.1%)       -4 B  (-0.0%)
async-load-signup-steps-p2-site                                                         -41 B  (-0.1%)       -8 B  (-0.0%)
async-load-calypso-reader-sidebar                                                       -41 B  (-0.0%)       -2 B  (-0.0%)
async-load-calypso-lib-analytics-signup                                                 -41 B  (-0.3%)      -13 B  (-0.3%)
async-load-calypso-blocks-support-article-dialog-dialog                                 -41 B  (-0.0%)       -3 B  (-0.0%)
async-load-calypso-blocks-editor-checkout-modal                                         -41 B  (-0.0%)      -11 B  (-0.0%)
async-load-automattic-design-preview                                                    -41 B  (-0.1%)       -7 B  (-0.1%)

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
Copy link
Contributor

matticbot commented Mar 26, 2025

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

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

  • blaze-dashboard
  • happy-blocks
  • help-center
  • notifications
  • odyssey-stats
  • whats-new
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug remove/uuid on your sandbox.

@alshakero alshakero marked this pull request as ready for review March 27, 2025 22:26
@alshakero alshakero requested review from a team as code owners March 27, 2025 22:26
@matticbot matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 27, 2025
@alshakero alshakero requested review from jsnajdr and tyxla March 27, 2025 22:26
Copy link
Member

@sejas sejas left a comment

Choose a reason for hiding this comment

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

Changes look good to me, and the tests are simpler now. Thanks for these changes.
I confirm I don't see any import from 'uuid'; in the code.
I see we import the crypto dependency in both server files:

  • client/server/lib/analytics/index.js
  • client/server/middleware/logger.js

I smoke tested the setup/onboarding, My home, DateRange and Range, and attempted to leave a review in plugins. Everything worked as expected. I didn't notice any errors in any page or in the console.

Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

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

LGTM, great cleanup 👍

Just a few minor thoughts, but nothing blocking IMO.

class DataMailboxFormField extends MailboxFormFieldBase< string > {
isVisible = false;
value = uuid_v4();
value = crypto.randomUUID() as string;
Copy link
Member

Choose a reason for hiding this comment

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

Bummer that we need to cast to string. crypto.randomUUID() will always return a string after all. Are you sure this is really necessary?

Copy link
Member Author

Choose a reason for hiding this comment

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

It doesn't return a normal string, it returns a specific string like ${string}-${string}-${string}-${string}-${string}, and below in the file something tries to do value = normalString and TS complains because normalString doesn't match ${string}-${string}-${string}-${string}-${string}. That's why I cast without remorse 😄 .

Copy link
Member

Choose a reason for hiding this comment

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

😅 sounds good

Object.assign( {}, DUMMY_MEDIA[ 0 ], { ID: 'media-1', transient: true } ),
Object.assign( {}, DUMMY_MEDIA[ 1 ], { ID: 'media-2', transient: true } ),
Object.assign( {}, DUMMY_MEDIA[ 0 ], { ID: 'media-fake-uuid', transient: true } ),
Object.assign( {}, DUMMY_MEDIA[ 1 ], { ID: 'media-fake-uuid', transient: true } ),
Copy link
Member

Choose a reason for hiding this comment

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

To keep the original intent, should keep -1 and -2 suffixes?

Copy link
Member Author

@alshakero alshakero Mar 31, 2025

Choose a reason for hiding this comment

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

We could, but I'd have to complicate mocking a global (vs a module) and pollute other tests. I could cache the global, overwrite the mock, then reset the global. But is it worth it?

Copy link
Member

Choose a reason for hiding this comment

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

It could be worth it in some cases, to differentiate between the various IDs. Theoretically, we could at some point introduce bugs that duplicate IDs and we wouldn't catch them.

// by using uniqueId, which increments its value within the same session.
const transientItems = [
Object.assign( {}, DUMMY_VIDEO_MEDIA[ 0 ], { ID: 'media-3', transient: true } ),
Object.assign( {}, DUMMY_VIDEO_MEDIA[ 0 ], { ID: 'media-fake-uuid', transient: true } ),
Copy link
Member

Choose a reason for hiding this comment

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

Same here with the -3 suffix.

} ) );

// Mock crypto.randomUUID with its Node.js implementation
global.crypto.randomUUID = () => 'fake-uuid';
Copy link
Member

Choose a reason for hiding this comment

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

That's not great because it'll always be the same and that might cause some weird behaviors. We might want to keep uniqueness in some tests and add further inline mocks that set unique UUIDs.

Copy link
Member Author

Choose a reason for hiding this comment

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

That makes sense. I'll do as I originally meant (shown in the comment) and see what tests break and hardcode only those tests.

"@automattic/calypso-typescript-config": "workspace:^"
debug: "npm:^4.4.0"
postcss: "npm:^8.5.3"
uuid: "npm:^9.0.1"
Copy link
Member

Choose a reason for hiding this comment

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

Ah well, it would be nice to do this replacement in Gutenberg at some point, too.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes 😿

@alshakero alshakero added Groundskeeping Issues handled through Dotcom Groundskeeping rotations [Type] Janitorial labels Mar 31, 2025
@alshakero alshakero merged commit a367d31 into trunk Mar 31, 2025
13 of 14 checks passed
@alshakero alshakero deleted the remove/uuid branch March 31, 2025 10:14
@github-actions github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Groundskeeping Issues handled through Dotcom Groundskeeping rotations [Type] Janitorial

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

Comments