♻️ Refactor to gather story snapshot dom without reloading the page

README.md

@@ -153,7 +153,11 @@ options](https://docs.percy.io/docs/cli-configuration#per-snapshot-configuration
 
 - **skip** - Boolean indicating whether or not to skip this story.
 - **name** - Snapshot name. (default: `${story.kind}: ${story.name}`)
-- **args** - [Story args](https://storybook.js.org/docs/react/writing-stories/args) to use when snapshotting.
+- **args** - [Story args](https://storybook.js.org/docs/react/writing-stories/args) to use when
+  taking the snapshot.
+- **globals** - [Story
+  globals](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#globals) to use when
+  taking the snapshot.
 - **queryParams** - Query parameters to use when snapshotting.
 - **waitForTimeout** - Wait for a timeout before taking the snapshot.
 - **waitForSelector** - Wait for a selector to exist before taking the snapshot.
@@ -164,6 +168,7 @@ options](https://docs.percy.io/docs/cli-configuration#per-snapshot-configuration
   - **suffix** - A suffix added to this additional snapshot's name.
   - **name** - Snapshot name. Replaces the inherited name.
   - **args** - Additional story args for this additional snapshot.
+  - **globals** - Additional story globals for this additional snapshot.
   - **queryParams** - Additional query parameters for this additional snapshot.
   - **include** - Only apply the additional snapshot to matching stories.
   - **exclude** - Do not apply the additional snapshot to matching stories.
@@ -210,6 +215,7 @@ this SDK also adds the following Storybook specific options:
 version: 2
 storybook:
   args: {}
+  globals: {}
   queryParams: {}
   waitForTimeout: 0
   waitForSelector: ''

babel.config.cjs

@@ -7,11 +7,6 @@ module.exports = {
       }
     }]
   ],
-  plugins: [
-    ['@babel/proposal-class-properties', { loose: true }],
-    ['@babel/plugin-proposal-private-methods', { loose: true }],
-    ['@babel/plugin-proposal-private-property-in-object', { loose: true }]
-  ],
   env: {
     test: {
       plugins: [

package.json

@@ -25,7 +25,8 @@
     "lint": "eslint --ignore-path .gitignore .",
     "readme": "percy-cli-readme",
     "pretest": "build-storybook --config-dir=./test/.storybook --output-dir=./test/.storybook-build --loglevel error",
-    "test": "cross-env NODE_ENV=test jasmine --config=./test/jasmine.json",
+    "test": "yarn test:env jasmine --config=./test/jasmine.json",
+    "test:env": "cross-env NODE_ENV=test NODE_OPTIONS='--loader=./test/loader.js'",
     "test:coverage": "nyc yarn test"
   },
   "@percy/cli": {
@@ -34,34 +35,32 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "^1.3.1",
-    "@storybook/router": "~6.4.22",
-    "cross-spawn": "^7.0.3",
-    "qs": "^6.11.0"
+    "@percy/cli-command": "^1.4.0",
+    "@storybook/router": "^6.5.0",
+    "cross-spawn": "^7.0.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",
     "@babel/core": "^7.18.5",
     "@babel/eslint-parser": "^7.18.2",
     "@babel/eslint-plugin": "^7.17.7",
-    "@babel/plugin-proposal-class-properties": "^7.17.12",
     "@babel/preset-env": "^7.18.2",
-    "@babel/register": "^7.17.7",
-    "@storybook/react": "^6.4.22",
+    "@storybook/react": "^6.5.8",
     "babel-eslint": "^10.0.3",
     "babel-plugin-istanbul": "^6.1.1",
     "cross-env": "^7.0.3",
-    "eslint": "^7.32.0",
-    "eslint-config-standard": "^16.0.3",
+    "eslint": "^8.17.0",
+    "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-n": "^15.2.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.0.0",
     "jasmine": "^4.2.1",
     "jasmine-spec-reporter": "^7.0.0",
     "mock-require": "^3.0.3",
     "nock": "^13.2.7",
-    "nyc": "^15.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "nyc": "^15.1.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   }
 }

src/common.js

@@ -12,4 +12,23 @@ export const flags = [{
   type: 'pattern',
   multiple: true,
   short: 'e'
+}, {
+  name: 'shard-count',
+  description: 'Number of shards to split snapshots into',
+  parse: v => parseInt(v, 10),
+  type: 'number'
+}, {
+  name: 'shard-size',
+  description: 'Size of each shard to split snapshots into',
+  parse: v => parseInt(v, 10),
+  type: 'number'
+}, {
+  name: 'shard-index',
+  description: 'Index of the shard to take snapshots of',
+  parse: v => (process.env.PERCY_PARALLEL_TOTAL ||= '-1') && parseInt(v, 10),
+  type: 'index'
+}, {
+  name: 'partial',
+  description: 'Marks the build as a partial build',
+  parse: () => !!(process.env.PERCY_PARTIAL_BUILD ||= '1')
 }];

src/config.js

@@ -10,6 +10,10 @@ export const storybookSchema = {
           type: 'object',
           normalize: false
         },
+        globals: {
+          type: 'object',
+          normalize: false
+        },
         queryParams: {
           type: 'object',
           normalize: false