Introduce component usage stats

[tyxla]

What?

This PR introduces react-scanner to keep an eye on component usage stats.

Why?

It can be useful to track the adoption of our components over time, and we're automating that as part of our work on design systems (bjpUB-p2).

See WordPress/gutenberg#65463 for the same in Gutenberg itelf.

How?

Running react-scanner with the default config to count components and props yields a result like this:

{
 "LinkPicker": {
    "instances": [
      {
        "importInfo": {
          "imported": "LinkPicker",
          "local": "LinkPicker",
          "moduleName": "@wordpress/components",
          "importType": "ImportSpecifier"
        },
        "props": {
          "value": "(Identifier)",
          "onLinkPicked": "(Identifier)",
          "onCancel": "(Identifier)"
        },
        "propsSpread": false,
        "location": {
          "file": "gutenberg/packages/format-library/src/link/modal-screens/link-picker-screen.native.js",
          "start": {
            "line": 52,
            "column": 4
          }
        }
      }
    ]
  },
  "CardHeader": {
    "instances": [
      {
        "importInfo": {
          "imported": "CardHeader",
          "local": "CardHeader",
          "moduleName": "@wordpress/components",
          "importType": "ImportSpecifier"
        },
        "props": {
          "isBorderless": false,
          "justify": "left",
          "size": "small",
          "gap": "6"
        },
        "propsSpread": false,
        "location": {
          "file": "gutenberg/packages/preferences/src/components/preferences-modal-tabs/index.js",
          "start": {
            "line": 142,
            "column": 10
          }
        }
      }
    ]
  }
}

Testing Instructions

• Checkout this branch
• Run yarn install
• Run yarn run component-usage-stats
• Check out the output

Testing Instructions for Keyboard

Same

Screenshots or screencast

None

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

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

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

• notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/react-scanner-component-stats on your sandbox.

[tyxla]

Ignoring the result dir.

We're going with the same naming choice as in the Gutenberg repo.

[tyxla]

React Scanner comes with a newer TS version, so I'm pinning the current one.

[tyxla]

In order for React Scanner to pick our TS version up, we need to specifically pin the resolution version here.

[ciampo]

While the script generates a 32k lines results.json file, I'm getting some errors while running the command:

❯ yarn run component-usage-stats
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/a8c-for-agencies/sections/partner-directory/agency-details/hooks/use-country-list.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/a8c-for-agencies/sections/signup/agency-details-form/hooks/use-countries-and-states.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/components/search-sites/utils.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/data/plugins/helpers.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/jetpack-cloud/sections/partner-portal/company-details-form/hooks/use-countries-and-states.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/landing/stepper/constants.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/landing/stepper/utils/shuffle-array.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/landing/subscriptions/helpers/index.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/lib/promote-post/index.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/my-sites/email/form/mailboxes/components/utilities/get-cart-items.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/my-sites/plans/jetpack-plans/iterations.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/my-sites/stats/hooks/default-query-params.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/state/reader/recommended-sites/selectors/get-reader-recommended-sites.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/constants/akismet.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/constants/jetpack.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/constants/terms.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/constants/titan.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/constants/types.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/constants/wpcom.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/types.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/create-calypso-config/src/index.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/data-stores/src/add-ons/constants.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/domains-table/src/use-domain-row.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/explat-client/src/internal/test-common.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/js-utils/src/key-by.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/search/src/use-fuzzy-search.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/state-utils/src/create-selector/index.ts
Scanned 15730 files in 16.430049041 seconds

Using [email protected] and [email protected]

[tyxla]

While the script generates a 32k lines results.json file, I'm getting some errors while running the command:

❯ yarn run component-usage-stats
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/a8c-for-agencies/sections/partner-directory/agency-details/hooks/use-country-list.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/a8c-for-agencies/sections/signup/agency-details-form/hooks/use-countries-and-states.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/components/search-sites/utils.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/data/plugins/helpers.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/jetpack-cloud/sections/partner-portal/company-details-form/hooks/use-countries-and-states.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/landing/stepper/constants.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/landing/stepper/utils/shuffle-array.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/landing/subscriptions/helpers/index.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/lib/promote-post/index.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/my-sites/email/form/mailboxes/components/utilities/get-cart-items.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/my-sites/plans/jetpack-plans/iterations.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/my-sites/stats/hooks/default-query-params.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/client/state/reader/recommended-sites/selectors/get-reader-recommended-sites.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/constants/akismet.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/constants/jetpack.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/constants/terms.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/constants/titan.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/constants/types.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/constants/wpcom.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/calypso-products/src/types.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/create-calypso-config/src/index.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/data-stores/src/add-ons/constants.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/domains-table/src/use-domain-row.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/explat-client/src/internal/test-common.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/js-utils/src/key-by.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/search/src/use-fuzzy-search.ts
Failed to parse: /Users/marcociampini/Code/a8c/wp-calypso/packages/state-utils/src/create-selector/index.ts
Scanned 15730 files in 16.430049041 seconds

Using [email protected] and [email protected]

Yeah, that's expected. Just like in the other repos we ran react-scanner in, these can occur for some files that the tool can't parse. I'm not particularly concerned about having a few of them, especially because neither contains component usage, and because we can follow-up and fix them if needed.

IMHO we should be good to go if that's your only concern.

[ciampo]

My only worry is that if the number of files continues to grow, it may eventually skew stats.

Maybe we could also track the files that are not parsed (or at least the number of files), so that we can monitor the stat and act on it in case the number keeps growing?

Otherwise I'm good with merging this PR and iterating on it.

[mirka]

Working as expected 👍

And with the suggested config changes, there are no parse failures and the JSON output is identical.

[mirka]

I understand this is mostly just for automated execution on a server somewhere, but it might be helpful to have components-usage or components-usage-stats in the folder name, instead of just results.

[tyxla]

I agree - I got this feedback multiple times and I'll be addressing it, first in Gutenberg and in the related script, then here and in the Jetpack PR.

[ciampo]

No further feedback left on my end