Skip to content

Commit

Permalink
ADD script & parallelization for running chromatic on examples
Browse files Browse the repository at this point in the history
  • Loading branch information
ndelangen committed Mar 13, 2020
1 parent 961240d commit cd00059
Show file tree
Hide file tree
Showing 20 changed files with 214 additions and 51 deletions.
55 changes: 4 additions & 51 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
5 changes: 5 additions & 0 deletions examples/angular-cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,5 +64,10 @@
"protractor": "~5.4.3",
"ts-node": "~8.6.2",
"typescript": "^3.4.0"
},
"storybook": {
"chromatic": {
"appCode": "tl92yzsj6w"
}
}
}
5 changes: 5 additions & 0 deletions examples/cra-kitchen-sink/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
}
5 changes: 5 additions & 0 deletions examples/cra-react15/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,10 @@
"@storybook/theming": "6.0.0-alpha.27",
"babel-core": "6",
"babel-runtime": "6"
},
"storybook": {
"chromatic": {
"appCode": "gxk7iqej3wt"
}
}
}
5 changes: 5 additions & 0 deletions examples/cra-ts-essentials/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
}
5 changes: 5 additions & 0 deletions examples/cra-ts-kitchen-sink/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,10 @@
"tslint": "^6.0.0",
"tslint-config-airbnb": "^5.11.1",
"typescript": "^3.4.0"
},
"storybook": {
"chromatic": {
"appCode": "19whyj1tlac"
}
}
}
5 changes: 5 additions & 0 deletions examples/dev-kits/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,10 @@
"ts-loader": "^6.2.0",
"uuid": "^3.3.2",
"webpack": "^4.33.0"
},
"storybook": {
"chromatic": {
"appCode": "19whyj1tlac"
}
}
}
5 changes: 5 additions & 0 deletions examples/ember-cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,5 +51,10 @@
},
"engines": {
"node": "^4.5 || 6.* || >= 7.*"
},
"storybook": {
"chromatic": {
"appCode": "19z23qxndju"
}
}
}
5 changes: 5 additions & 0 deletions examples/html-kitchen-sink/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,5 +36,10 @@
"format-json": "^1.0.3",
"global": "^4.3.2",
"postcss-color-rebeccapurple": "^5.0.0"
},
"storybook": {
"chromatic": {
"appCode": "e8zolxoyg8o"
}
}
}
5 changes: 5 additions & 0 deletions examples/marko-cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,5 +33,10 @@
"@storybook/source-loader": "6.0.0-alpha.27",
"prettier": "^1.16.4",
"webpack": "^4.33.0"
},
"storybook": {
"chromatic": {
"appCode": "qaegx64axu"
}
}
}
5 changes: 5 additions & 0 deletions examples/mithril-kitchen-sink/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
}
5 changes: 5 additions & 0 deletions examples/official-storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,5 +62,10 @@
"ts-loader": "^6.0.0",
"uuid": "^3.3.2",
"webpack": "^4.33.0"
},
"storybook": {
"chromatic": {
"appCode": "ab7m45tp9p"
}
}
}
5 changes: 5 additions & 0 deletions examples/preact-kitchen-sink/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,10 @@
"svg-url-loader": "^3.0.2",
"webpack": "^4.33.0",
"webpack-dev-server": "^3.8.2"
},
"storybook": {
"chromatic": {
"appCode": "ls0ikhnwqt"
}
}
}
5 changes: 5 additions & 0 deletions examples/rax-kitchen-sink/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
}
5 changes: 5 additions & 0 deletions examples/riot-kitchen-sink/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,5 +36,10 @@
"svg-url-loader": "^3.0.2",
"webpack": "^4.33.0",
"webpack-dev-server": "^3.8.2"
},
"storybook": {
"chromatic": {
"appCode": "g2dp3lnr34a"
}
}
}
5 changes: 5 additions & 0 deletions examples/svelte-kitchen-sink/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
}
5 changes: 5 additions & 0 deletions examples/vue-kitchen-sink/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,5 +38,10 @@
"vue-loader": "^15.7.0",
"webpack": "^4.33.0",
"webpack-dev-server": "^3.8.2"
},
"storybook": {
"chromatic": {
"appCode": "cyxj0e38bqj"
}
}
}
5 changes: 5 additions & 0 deletions examples/web-components-kitchen-sink/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,5 +36,10 @@
"format-json": "^1.0.3",
"global": "^4.3.2",
"lit-element": "^2.2.1"
},
"storybook": {
"chromatic": {
"appCode": "npm5gsofwkf"
}
}
}
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"bootstrap:docs": "yarn install --cwd docs",
"build-packs": "lerna exec --scope '@storybook/*' -- \\$LERNA_ROOT_PATH/scripts/build-pack.sh \\$LERNA_ROOT_PATH/packs",
"build-storybooks": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true node ./scripts/build-storybooks.js",
"run-chromatics": "node ./scripts/run-chromatics.js",
"changelog": "pr-log --sloppy --cherry-pick",
"changelog:next": "pr-log --sloppy --since-prerelease",
"coverage": "codecov",
Expand Down
124 changes: 124 additions & 0 deletions scripts/run-chromatics.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
#!/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.scripts.storybook;
};

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);
});

0 comments on commit cd00059

Please sign in to comment.