2020-05-09 11:34:50 +02:00
|
|
|
import { spawn } from 'child_process';
|
|
|
|
import { promisify } from 'util';
|
|
|
|
import { readdir as readdirRaw, writeFile as writeFileRaw, readFileSync } from 'fs';
|
|
|
|
import { join } from 'path';
|
|
|
|
|
|
|
|
import { getDeployables } from './utils/list-examples';
|
2019-09-11 00:59:37 +02:00
|
|
|
|
|
|
|
const readdir = promisify(readdirRaw);
|
2019-09-11 14:49:18 +02:00
|
|
|
const writeFile = promisify(writeFileRaw);
|
2019-09-11 00:59:37 +02:00
|
|
|
|
2020-03-27 20:04:50 +01:00
|
|
|
const p = (l) => join(__dirname, '..', ...l);
|
2019-09-11 00:59:37 +02:00
|
|
|
const logger = console;
|
|
|
|
|
|
|
|
const exec = async (command, args = [], options = {}) =>
|
|
|
|
new Promise((resolve, reject) => {
|
2019-10-12 14:49:15 +02:00
|
|
|
const child = spawn(command, args, { ...options, stdio: 'inherit', shell: true });
|
2019-09-11 00:59:37 +02:00
|
|
|
|
2019-10-12 14:38:34 +02:00
|
|
|
child
|
2020-03-27 20:04:50 +01:00
|
|
|
.on('close', (code) => {
|
2019-10-12 14:38:34 +02:00
|
|
|
if (code) {
|
|
|
|
reject();
|
|
|
|
} else {
|
|
|
|
resolve();
|
|
|
|
}
|
|
|
|
})
|
2020-03-27 20:04:50 +01:00
|
|
|
.on('error', (e) => {
|
2019-10-12 14:38:34 +02:00
|
|
|
logger.error(e);
|
2019-10-17 12:36:23 +02:00
|
|
|
reject();
|
2019-10-12 14:38:34 +02:00
|
|
|
});
|
2019-09-11 00:59:37 +02:00
|
|
|
});
|
|
|
|
|
2020-03-27 20:04:50 +01:00
|
|
|
const hasBuildScript = (l) => {
|
2020-01-21 10:04:43 +01:00
|
|
|
const text = readFileSync(l, 'utf8');
|
2019-09-11 00:59:37 +02:00
|
|
|
const json = JSON.parse(text);
|
|
|
|
|
|
|
|
return !!json.scripts['build-storybook'];
|
|
|
|
};
|
|
|
|
|
2020-03-27 20:04:50 +01:00
|
|
|
const createContent = (deployables) => {
|
2019-10-17 14:24:06 +02:00
|
|
|
return `
|
2019-09-11 14:49:18 +02:00
|
|
|
<style>
|
|
|
|
body {
|
|
|
|
background: black;
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
#frame {
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
width: 100vw;
|
|
|
|
height: calc(100vh - 30px);
|
|
|
|
bottom: 0;
|
|
|
|
top: 30px;
|
|
|
|
border: 0 none;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
#select {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
2019-09-11 16:37:35 +02:00
|
|
|
right: 100px;
|
2019-09-11 14:49:18 +02:00
|
|
|
left: 10px;
|
|
|
|
height: 30px;
|
2019-09-11 16:37:35 +02:00
|
|
|
width: calc(100vw - 120px);
|
|
|
|
background: black;
|
|
|
|
color: white;
|
|
|
|
border: 0 none;
|
|
|
|
border-radius: 0;
|
|
|
|
padding: 10px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
#open {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
right: 0;
|
|
|
|
width: 100px;
|
|
|
|
height: 30px;
|
2019-09-11 14:49:18 +02:00
|
|
|
background: black;
|
|
|
|
color: white;
|
|
|
|
border: 0 none;
|
|
|
|
border-radius: 0;
|
|
|
|
padding: 10px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<script>
|
2019-09-11 16:37:35 +02:00
|
|
|
function handleClick() {
|
|
|
|
var value = document.getElementById("select").value;
|
|
|
|
window.location = document.location.origin + value;
|
|
|
|
}
|
|
|
|
function handleSelect() {
|
2019-09-11 14:49:18 +02:00
|
|
|
var value = document.getElementById("select").value;
|
|
|
|
var frame = document.getElementById("frame");
|
|
|
|
|
|
|
|
sessionStorage.clear();
|
|
|
|
localStorage.clear();
|
|
|
|
|
|
|
|
frame.setAttribute('src', value);
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2019-09-11 16:37:35 +02:00
|
|
|
<button id="open" onclick="handleClick()">open</button>
|
|
|
|
|
|
|
|
<select id="select" onchange="handleSelect()">
|
2020-03-27 20:04:50 +01:00
|
|
|
${deployables.map((i) => `<option value="/${i}/">${i}</option>`).join('\n')}
|
2019-09-11 14:49:18 +02:00
|
|
|
</select>
|
|
|
|
|
|
|
|
<iframe id="frame" src="/${deployables[0]}/" />
|
|
|
|
`;
|
2019-10-17 14:24:06 +02:00
|
|
|
};
|
|
|
|
|
2020-03-27 20:04:50 +01:00
|
|
|
const handleExamples = async (deployables) => {
|
2019-10-17 14:24:06 +02:00
|
|
|
await deployables.reduce(async (acc, d) => {
|
|
|
|
await acc;
|
|
|
|
|
|
|
|
logger.log('');
|
2020-03-27 20:04:50 +01:00
|
|
|
logger.log(`-----------------${Array(d.length).fill('-').join('')}`);
|
2019-10-17 14:24:06 +02:00
|
|
|
logger.log(`▶️ building: ${d}`);
|
2020-03-27 20:04:50 +01:00
|
|
|
logger.log(`-----------------${Array(d.length).fill('-').join('')}`);
|
2019-10-17 14:24:06 +02:00
|
|
|
const out = p(['built-storybooks', d]);
|
|
|
|
const cwd = p(['examples', d]);
|
|
|
|
|
|
|
|
await exec(`yarn`, [`build-storybook`, `--output-dir=${out}`, '--quiet'], { cwd });
|
2020-03-18 11:10:24 +01:00
|
|
|
await exec(`npx`, [`sb`, 'extract', out, `${out}/stories.json`], { cwd });
|
2019-10-17 14:24:06 +02:00
|
|
|
|
|
|
|
logger.log('-------');
|
2020-03-03 14:55:07 +01:00
|
|
|
logger.log(`✅ ${d} built`);
|
2019-10-17 14:24:06 +02:00
|
|
|
logger.log('-------');
|
|
|
|
}, Promise.resolve());
|
2019-09-11 00:59:37 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
const run = async () => {
|
2020-05-19 16:18:00 +02:00
|
|
|
const list = getDeployables(await readdir(p(['examples'])), hasBuildScript);
|
2019-09-11 00:59:37 +02:00
|
|
|
|
2020-05-18 13:03:07 +02:00
|
|
|
const { length } = list;
|
2019-10-17 14:24:06 +02:00
|
|
|
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;
|
|
|
|
|
2020-05-18 13:03:07 +02:00
|
|
|
const deployables = list.slice().splice(offset, step);
|
2020-03-03 14:55:07 +01:00
|
|
|
|
|
|
|
if (deployables.length) {
|
2020-05-18 13:03:07 +02:00
|
|
|
logger.log(
|
|
|
|
`will build: ${deployables.join(', ')} (${
|
|
|
|
deployables.length
|
2020-05-20 09:01:18 +08:00
|
|
|
} total - offset: ${offset} | step: ${step} | index: ${a} | total: ${b} | length: ${length})`
|
2020-05-18 13:03:07 +02:00
|
|
|
);
|
2020-03-03 14:55:07 +01:00
|
|
|
await handleExamples(deployables);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (
|
|
|
|
deployables.length &&
|
2020-03-03 15:22:41 +01:00
|
|
|
(process.env.CIRCLE_NODE_INDEX === undefined ||
|
2020-03-03 14:55:07 +01:00
|
|
|
process.env.CIRCLE_NODE_INDEX === '0' ||
|
|
|
|
process.env.CIRCLE_NODE_INDEX === 0)
|
|
|
|
) {
|
|
|
|
const indexLocation = p(['built-storybooks', 'index.html']);
|
|
|
|
logger.log('');
|
|
|
|
logger.log(`📑 creating index at: ${indexLocation}`);
|
|
|
|
logger.log('');
|
|
|
|
await writeFile(indexLocation, createContent(deployables));
|
2019-10-17 14:24:06 +02:00
|
|
|
|
2020-03-03 14:55:07 +01:00
|
|
|
logger.log('-------');
|
|
|
|
logger.log('✅ done');
|
|
|
|
logger.log('-------');
|
|
|
|
}
|
2019-09-11 00:59:37 +02:00
|
|
|
};
|
|
|
|
|
2020-03-27 20:04:50 +01:00
|
|
|
run().catch((e) => {
|
2020-01-21 00:51:26 +01:00
|
|
|
logger.error(e);
|
|
|
|
process.exit(1);
|
|
|
|
});
|