chore: Chromatic turbosnap

package.json

@@ -32,9 +32,9 @@
     "start": "cross-env NODE_ENV=storybook storybook dev -p 9003 --ci -c '.storybook'",
     "build:storybook": "storybook build -c .storybook -o dist/$(git rev-parse HEAD)/storybook",
     "start:chromatic": "CHROMATIC=1 NODE_ENV=storybook storybook dev -p 9004 --ci -c '.chromatic'",
-    "build:chromatic": "CHROMATIC=1 storybook build -c .chromatic -o dist/$(git rev-parse HEAD)/chromatic",
+    "build:chromatic": "CHROMATIC=1 storybook build -c .chromatic -o dist/$(git rev-parse HEAD)/chromatic --stats-json",
     "start:chromatic-fc": "CHROMATIC=1 NODE_ENV=storybook storybook dev -p 9005 --ci -c '.chromatic-fc'",
-    "build:chromatic-fc": "CHROMATIC=1 storybook build -c .chromatic-fc -o dist/$(git rev-parse HEAD)/chromatic-fc",
+    "build:chromatic-fc": "CHROMATIC=1 storybook build -c .chromatic-fc -o dist/$(git rev-parse HEAD)/chromatic-fc --stats-json",
     "start:s2": "NODE_ENV=storybook storybook dev -p 6006 --ci -c '.storybook-s2'",
     "build:storybook-s2": "NODE_ENV=storybook storybook build -c .storybook-s2 -o dist/$(git rev-parse HEAD)/storybook-s2",
     "build:s2-storybook-docs": "NODE_ENV=storybook storybook build -c .storybook-s2 --docs",
@@ -62,8 +62,8 @@
     "build:icons": "babel-node --presets @babel/env ./scripts/buildIcons.js",
     "clean:icons": "babel-node --presets @babel/env ./scripts/cleanIcons.js",
     "postinstall": "patch-package && yarn build:icons",
-    "chromatic": "NODE_ENV=production CHROMATIC=1 chromatic --project-token $CHROMATIC_PROJECT_TOKEN --build-script-name 'build:chromatic'",
-    "chromatic:forced-colors": "NODE_ENV=production CHROMATIC=1 chromatic --project-token $CHROMATIC_FC_PROJECT_TOKEN --build-script-name 'build:chromatic-fc'",
+    "chromatic": "NODE_ENV=production CHROMATIC=1 chromatic --project-token $CHROMATIC_PROJECT_TOKEN --build-script-name 'build:chromatic' --only-changed --trace-changed --externals './packages/**/style/**/*'",
+    "chromatic:forced-colors": "NODE_ENV=production CHROMATIC=1 chromatic --project-token $CHROMATIC_FC_PROJECT_TOKEN --build-script-name 'build:chromatic-fc' --only-changed --trace-changed --externals './packages/**/style/**/*'",
     "merge:css": "babel-node --presets @babel/env ./scripts/merge-spectrum-css.js",
     "release": "lerna publish from-package --yes",
     "version:nightly": "yarn workspaces foreach --all --no-private -t version -d 3.0.0-nightly-$(git rev-parse --short HEAD)-$(date +'%y%m%d') && yarn apply-nightly --all",
@@ -142,7 +142,7 @@
     "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-transform-glob-import": "^1.0.1",
     "chalk": "^4.1.2",
-    "chromatic": "^15.0.0",
+    "chromatic": "^17.0.0",
     "clsx": "^2.0.0",
     "color-space": "^1.16.0",
     "concurrently": "^6.0.2",

packages/dev/parcel-reporter-turbosnap-stats/StatsReporter.ts

@@ -0,0 +1,25 @@
+import {addStoryEntries, buildStatsMap, rewriteStoryVirtuals, writeStats} from './helpers';
+import {Reporter} from '@parcel/plugin';
+
+const reporter = new Reporter({
+  async report({event, options, logger}) {
+    if (event.type !== 'buildSuccess') return;
+
+    const statsMap = buildStatsMap(event.bundleGraph, options.projectRoot);
+    rewriteStoryVirtuals(statsMap);
+    addStoryEntries(statsMap, logger);
+
+    const bundles = event.bundleGraph.getBundles();
+    const distDir = bundles[0]?.target.distDir;
+    if (!distDir) {
+      throw new Error(
+        'parcel-reporter-turbosnap-stats: no bundles were produced; cannot determine output dir.'
+      );
+    }
+    await writeStats(distDir, statsMap, options.outputFS, logger);
+  }
+});
+
+// Parcel's plugin loader expects `module.exports = <pluginInstance>`,
+// not the `.default` wrapper TypeScript would otherwise produce.
+module.exports = reporter;

packages/dev/parcel-reporter-turbosnap-stats/__tests__/__fixtures__/.parcelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@parcel/config-default"
+}

packages/dev/parcel-reporter-turbosnap-stats/__tests__/__fixtures__/Button.stories.tsx

@@ -0,0 +1,3 @@
+import {Button} from './Button';
+export {Button};
+export default {title: 'Button'};

packages/dev/parcel-reporter-turbosnap-stats/__tests__/__fixtures__/Button.tsx

@@ -0,0 +1 @@
+export const Button = () => null;

packages/dev/parcel-reporter-turbosnap-stats/__tests__/__fixtures__/index.html

@@ -0,0 +1,6 @@
+<!doctype html>
+<html>
+  <body>
+    <script type="module" src="./preview.js"></script>
+  </body>
+</html>

packages/dev/parcel-reporter-turbosnap-stats/__tests__/__fixtures__/preview.js

@@ -0,0 +1,2 @@
+import stories from './storybook-builder-parcel/generated-entries/stories.js';
+console.log(stories);

packages/dev/parcel-reporter-turbosnap-stats/__tests__/__fixtures__/storybook-builder-parcel/generated-entries/stories.js

@@ -0,0 +1,7 @@
+// Mirrors what parcel-resolver-storybook emits for each `story:` glob: an object
+// of `() => import('./Foo.stories.tsx')` async loaders. rewriteStoryVirtuals
+// renames this file's STORY_VIRTUAL_RE-matching path to ./storybook-stories.js
+// in the emitted stats.
+module.exports = {
+  './Button.stories.tsx': () => import('../../Button.stories.tsx')
+};