Merge pull request #10125 from storybookjs/tech/parallel-chromatic

ADD script & parallelization for running chromatic on examples

.circleci/config.yml

@@ -56,62 +56,15 @@ jobs:
             - lib
   chromatic:
     <<: *defaults
+    parallelism: 10
     steps:
       - checkout
       - attach_workspace:
           at: .
       - run:
-          name: Run chromatic on the pre-built official example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/official-storybook" --exit-zero-on-changes --app-code="ab7m45tp9p"
-      - run:
-          name: Run chromatic on the pre-built angular example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --app-code="tl92yzsj6w"
-      - run:
-          name: Run chromatic on the pre-built cra-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-kitchen-sink" --app-code="tg55gajmdt"
-      - run:
-          name: Run chromatic on the pre-built cra-react15 example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-react15" --app-code="gxk7iqej3wt"
-      - run:
-          name: Run chromatic on the pre-built cra-ts-essentials example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-essentials" --app-code="b311ypk6of"
-      - run:
-          name: Run chromatic on the pre-built cra-ts-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-kitchen-sink" --app-code="19whyj1tlac"
-      - run:
-          name: Run chromatic on the pre-built dev-kits example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/dev-kits" --app-code="7yykp9ifdxx"
-      - run:
-          name: Run chromatic on the pre-built ember-cli example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/ember-cli" --app-code="19z23qxndju"
-      - run:
-          name: Run chromatic on the pre-built html-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/html-kitchen-sink" --app-code="e8zolxoyg8o"
-      - run:
-          name: Run chromatic on the pre-built marko-cli example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/marko-cli" --app-code="qaegx64axu"
-      - run:
-          name: Run chromatic on the pre-built mithril-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/mithril-kitchen-sink" --app-code="8adgm46jzk8"
-      - run:
-          name: Run chromatic on the pre-built preact-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/preact-kitchen-sink" --app-code="ls0ikhnwqt"
-      - run:
-          name: Run chromatic on the pre-built rax-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/rax-kitchen-sink" --app-code="4co6vptx8qo"
-      - run:
-          name: Run chromatic on the pre-built riot-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/riot-kitchen-sink" --app-code="g2dp3lnr34a"
-      - run:
-          name: Run chromatic on the pre-built svelte-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/svelte-kitchen-sink" --app-code="8ob73wgl995"
-      - run:
-          name: Run chromatic on the pre-built vue-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/vue-kitchen-sink" --app-code="cyxj0e38bqj"
-      - run:
-          name: Run chromatic on the pre-built web-components-kitchen-sink example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/web-components-kitchen-sink" --app-code="npm5gsofwkf"
-
+          name: examples
+          command: |
+            yarn run-chromatics
   packtracker:
     <<: *defaults
     steps:

examples/angular-cli/package.json

@@ -64,5 +64,10 @@
     "protractor": "~5.4.3",
     "ts-node": "~8.6.2",
     "typescript": "^3.4.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "tl92yzsj6w"
+    }
   }
 }

examples/cra-kitchen-sink/package.json

@@ -34,5 +34,10 @@
     "@storybook/react": "6.0.0-alpha.27",
     "@storybook/theming": "6.0.0-alpha.27",
     "react-scripts": "^3.0.1"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "tg55gajmdt"
+    }
   }
 }

examples/cra-react15/package.json

@@ -25,5 +25,10 @@
     "@storybook/theming": "6.0.0-alpha.27",
     "babel-core": "6",
     "babel-runtime": "6"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "gxk7iqej3wt"
+    }
   }
 }

examples/cra-ts-essentials/package.json

@@ -40,5 +40,10 @@
     "@storybook/addons": "6.0.0-alpha.27",
     "@storybook/preset-create-react-app": "^1.5.0",
     "@storybook/react": "6.0.0-alpha.27"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "b311ypk6of"
+    }
   }
 }

examples/cra-ts-kitchen-sink/package.json

@@ -57,5 +57,10 @@
     "tslint": "^6.0.0",
     "tslint-config-airbnb": "^5.11.1",
     "typescript": "^3.4.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "19whyj1tlac"
+    }
   }
 }

examples/dev-kits/package.json

@@ -37,5 +37,10 @@
     "ts-loader": "^6.2.0",
     "uuid": "^3.3.2",
     "webpack": "^4.33.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "19whyj1tlac"
+    }
   }
 }

examples/ember-cli/package.json

@@ -51,5 +51,10 @@
   },
   "engines": {
     "node": "^4.5 || 6.* || >= 7.*"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "19z23qxndju"
+    }
   }
 }

examples/html-kitchen-sink/package.json

@@ -36,5 +36,10 @@
     "format-json": "^1.0.3",
     "global": "^4.3.2",
     "postcss-color-rebeccapurple": "^5.0.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "e8zolxoyg8o"
+    }
   }
 }

examples/marko-cli/package.json

@@ -33,5 +33,10 @@
     "@storybook/source-loader": "6.0.0-alpha.27",
     "prettier": "^1.16.4",
     "webpack": "^4.33.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "qaegx64axu"
+    }
   }
 }

examples/mithril-kitchen-sink/package.json

@@ -24,5 +24,10 @@
     "@storybook/mithril": "6.0.0-alpha.27",
     "@storybook/source-loader": "6.0.0-alpha.27",
     "webpack": "^4.33.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "8adgm46jzk8"
+    }
   }
 }

examples/official-storybook/package.json

@@ -62,5 +62,10 @@
     "ts-loader": "^6.0.0",
     "uuid": "^3.3.2",
     "webpack": "^4.33.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "ab7m45tp9p"
+    }
   }
 }

examples/preact-kitchen-sink/package.json

@@ -37,5 +37,10 @@
     "svg-url-loader": "^3.0.2",
     "webpack": "^4.33.0",
     "webpack-dev-server": "^3.8.2"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "ls0ikhnwqt"
+    }
   }
 }

examples/rax-kitchen-sink/package.json

@@ -39,5 +39,10 @@
     "babel-eslint": "^10.0.3",
     "build-plugin-rax-app": "^0.2.0",
     "stylesheet-loader": "^0.7.0"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "4co6vptx8qo"
+    }
   }
 }

examples/riot-kitchen-sink/package.json

@@ -36,5 +36,10 @@
     "svg-url-loader": "^3.0.2",
     "webpack": "^4.33.0",
     "webpack-dev-server": "^3.8.2"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "g2dp3lnr34a"
+    }
   }
 }

examples/svelte-kitchen-sink/package.json

@@ -24,5 +24,10 @@
     "@storybook/addons": "6.0.0-alpha.27",
     "@storybook/source-loader": "6.0.0-alpha.27",
     "@storybook/svelte": "6.0.0-alpha.27"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "8ob73wgl995"
+    }
   }
 }

examples/vue-kitchen-sink/package.json

@@ -38,5 +38,10 @@
     "vue-loader": "^15.7.0",
     "webpack": "^4.33.0",
     "webpack-dev-server": "^3.8.2"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "cyxj0e38bqj"
+    }
   }
 }

examples/web-components-kitchen-sink/package.json

@@ -36,5 +36,10 @@
     "format-json": "^1.0.3",
     "global": "^4.3.2",
     "lit-element": "^2.2.1"
+  },
+  "storybook": {
+    "chromatic": {
+      "appCode": "npm5gsofwkf"
+    }
   }
 }

package.json

@@ -68,6 +68,7 @@
     "publish:latest": "lerna publish --exact --concurrency 1 --force-publish",
     "publish:next": "npm run publish:latest -- --npm-tag=next",
     "repo-dirty-check": "node ./scripts/repo-dirty-check",
+    "run-chromatics": "node ./scripts/run-chromatics.js",
     "serve-storybooks": "http-server ./built-storybooks -p 8001",
     "start": "yarn --cwd examples/official-storybook storybook",
     "test": "node ./scripts/test.js",

scripts/run-chromatics.js

@@ -0,0 +1,125 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const { promisify } = require('util');
+const {
+  readdir: readdirRaw,
+  readFile: readFileRaw,
+  writeFile: writeFileRaw,
+  statSync,
+  readFileSync,
+} = require('fs');
+const { join } = require('path');
+
+const readdir = promisify(readdirRaw);
+const writeFile = promisify(writeFileRaw);
+
+const p = l => join(__dirname, '..', ...l);
+const logger = console;
+
+const exec = async (command, args = [], options = {}) =>
+  new Promise((resolve, reject) => {
+    const child = spawn(command, args, { ...options, stdio: 'inherit', shell: true });
+
+    child
+      .on('close', code => {
+        if (code) {
+          reject();
+        } else {
+          resolve();
+        }
+      })
+      .on('error', e => {
+        logger.error(e);
+        reject();
+      });
+  });
+
+const getDeployables = files => {
+  return files.filter(f => {
+    const packageJsonLocation = p(['examples', f, 'package.json']);
+    let stats = null;
+    try {
+      stats = statSync(packageJsonLocation);
+    } catch (e) {
+      // the folder had no package.json, we'll ignore
+    }
+
+    return stats && stats.isFile() && hasChromaticAppCode(packageJsonLocation);
+  });
+};
+
+const hasChromaticAppCode = l => {
+  const text = readFileSync(l, 'utf8');
+  const json = JSON.parse(text);
+
+  return !!(json && json.storybook && json.storybook.chromatic && json.storybook.chromatic.appCode);
+};
+
+const handleExamples = async deployables => {
+  await deployables.reduce(async (acc, d) => {
+    await acc;
+
+    const out = p(['built-storybooks', d]);
+    const cwd = p([]);
+    const {
+      storybook: {
+        chromatic: { appCode },
+      },
+    } = JSON.parse(readFileSync(p(['examples', d, 'package.json'])));
+
+    if (appCode) {
+      await exec(
+        `yarn`,
+        [
+          'chromatic',
+          `--storybook-build-dir="${out}"`,
+          '--exit-zero-on-changes',
+          `--app-code="${appCode}"`,
+        ],
+        { cwd }
+      );
+
+      logger.log('-------');
+      logger.log(`✅ ${d} ran`);
+      logger.log('-------');
+    } else {
+      logger.log('-------');
+      logger.log(`❌ ${d} skipped`);
+      logger.log('-------');
+    }
+  }, Promise.resolve());
+};
+
+const run = async () => {
+  const examples = await readdir(p(['examples']));
+
+  const { length } = examples;
+  const [a, b] = [process.env.CIRCLE_NODE_INDEX || 0, process.env.CIRCLE_NODE_TOTAL || 1];
+  const step = Math.ceil(length / b);
+  const offset = step * a;
+
+  const list = examples.slice().splice(offset, step);
+  const deployables = getDeployables(list);
+
+  if (deployables.length) {
+    logger.log(`will build: ${deployables.join(', ')}`);
+    await handleExamples(deployables);
+  }
+
+  if (
+    deployables.length &&
+    (process.env.CIRCLE_NODE_INDEX === undefined ||
+      process.env.CIRCLE_NODE_INDEX === '0' ||
+      process.env.CIRCLE_NODE_INDEX === 0)
+  ) {
+    logger.log('-------');
+    logger.log('✅ done');
+    logger.log('-------');
+  }
+};
+
+run().catch(e => {
+  logger.error(e);
+  process.exit(1);
+});