Component Stats

About this repo | Project board | How to use this repo

About this repo

This tool tracks progress against the project to update Shopify/web to remove duplicate components in favor of a single, extensible component and remove use of polaris-next.

The tool generates usage statistics for a target directory.

| Current status | Owner | Help | | -------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------ | | ongoing | @polaris-team | #core-deliver-global-components |

Project board

World class admin components

Usage

While this package can be globally installed we recommend executing the CLI directly with npx.

npx @shopify/component-stats --type [stat type] [target directory]

Run npx @shopify/component-stats --help for detailed usage descriptions.

Examples

Note: The following commands assume you have Shopify/web cloned and have navigated to it's directory in your terminal.

Generate a single SCSS stats file for the target directory.

npx @shopify/component-stats --type scss ./web

Generate historical SCSS stats files for the target directory.

npx @shopify/component-stats --type scss --historical ./web/packages/@Shopify/polaris-next

Generate a CSS stats file for the target directory.

For the following command to work in @Shopify/web you must first run yarn build to generate the css assets. Be aware, this process takes 30+ minutes.

npx @shopify/component-stats --type css ./web

Note: The above commands will output the generated stats in the current working directory unless overridden by the --output-dir flag or OUTPUT_DIR environment variable.

Local Development

To run the script on an existing Shopify repository, make sure you have that repository cloned to your computer.

Make sure Git and Node.js are installed on your computer. You should be on Node version 14+. Run the following commands in your terminal to get started:

$ git clone https://github.com/Shopify/component-stats    # git clone repository
$ cd component-stats                                      # access the files
$ npm install                                             # install dependencies
$ npm run cli -- --type [stat type] [target directory]    # run locally

Note: npm run cli -- allows us to pass additional flags to the underlying ts-node src/cli.ts command. See the npm documentation for more information.