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
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 runyarn 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 orOUTPUT_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 underlyingts-node src/cli.ts
command. See the npm documentation for more information.