chore: Chromatic turbosnap

[snowystinger]

First, I upgraded chromatic to the latest CLI version.

After that, I attempted to turn on turbo snap, only to find out that there was a file artifact necessary for it to work, it's included in webpack and there's a community vite version, but there is no parcel version. So I set out to have Claude write me a Parcel Reporter Plugin to generate preview-stats.json.

This is preview-stats.json which contains a json map that tells chromatic what files a story depends on, so that if one of those files changes, it retakes the snapshots for that story file. It looks a little like this:

    {
      "id": "./packages/@react-spectrum/s2/src/TagGroup.tsx",
      "name": "./packages/@react-spectrum/s2/src/TagGroup.tsx",
      "reasons": [
        {"moduleName": "./packages/@react-spectrum/s2/chromatic/Forms.stories.tsx"},
        {"moduleName": "./packages/@react-spectrum/s2/chromatic/TagGroup.stories.tsx"}
      ]
    },

So if I make a change to TagGroup, then Chromatic TurboSnap knows to run Forms and TagGroup.

    {
      "id": "./packages/react-aria-components/src/TagGroup.tsx",
      "name": "./packages/react-aria-components/src/TagGroup.tsx",
      "reasons": [{"moduleName": "./packages/@react-spectrum/s2/src/TagGroup.tsx"}]
    },

And farther back, if I make a change to RAC TagGroup, then it's also a change to S2 TagGroup, which again results in the same stories. We have no RAC Chromatic and v3 doesn't use RAC, so that's why we only see the S2 ones.

There are a few handy methods to debug issues with this.
After running a yarn build:chromatic you can run this

npx chromatic@latest trace ./packages/react-aria/src/tag/useTag.ts -s dist/{{commitHash}}/chromatic/preview-stats.json

To see every story file that a particular file will affect.

You can also run the entire Chromatic command with a --dry-run by appending that flag to our script target. Also, there are various options for --trace-changed and we may want to turn that off entirely when our changes affect many files.

    "chromatic": "NODE_ENV=production CHROMATIC=1 chromatic --project-token $CHROMATIC_PROJECT_TOKEN --build-script-name 'build:chromatic' --only-changed --trace-changed --dry-run",

After running this end to end, I see in my console something like this (I changed the background color of Tag's in S2).

Which I promptly denied here https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=1227 You can also see the number of snapshots used in the top right of the report. For instance, the first one has 20 snapshots, 1228 also has the same 20 after reverting my change and all of them pass against the baseline, then finally 1229: https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=1229 has zero snapshots because there were no changes that would affect a story.

Resources :

https://github.com/storybookjs/storybook/blob/next/code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
https://www.youtube.com/watch?v=TZKIlqLF_Xk

📝 Test Instructions:

1. Make a local change that changes the appearance of something
2. Run

yarn build:chromatic
npx chromatic@latest trace ./packages/{{path to file you are curious about}} -s dist/{{git commit hash}}/chromatic/preview-stats.json
// change script target to "chromatic": "NODE_ENV=production CHROMATIC=1 chromatic --project-token $CHROMATIC_PROJECT_TOKEN --build-script-name 'build:chromatic' --only-changed --trace-changed --dry-run",
yarn chromatic

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs