storybook/scripts/build-storybooks.js

187 lines
4.3 KiB
JavaScript
Raw Normal View History

2019-09-11 00:59:37 +02:00
#!/usr/bin/env node
const { spawn } = require('child_process');
const { promisify } = require('util');
2019-09-11 14:49:18 +02:00
const {
readdir: readdirRaw,
readFile: readFileRaw,
writeFile: writeFileRaw,
statSync,
2020-01-21 10:04:43 +01:00
readFileSync,
2019-09-11 14:49:18 +02:00
} = require('fs');
2019-09-11 00:59:37 +02:00
const { join } = require('path');
const readdir = promisify(readdirRaw);
2019-09-11 14:49:18 +02:00
const writeFile = promisify(writeFileRaw);
2019-09-11 00:59:37 +02:00
const p = l => join(__dirname, '..', ...l);
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
child
.on('close', code => {
if (code) {
reject();
} else {
resolve();
}
})
.on('error', e => {
logger.error(e);
2019-10-17 12:36:23 +02:00
reject();
});
2019-09-11 00:59:37 +02:00
});
2020-01-21 10:04:43 +01:00
const hasBuildScript = l => {
const text = readFileSync(l, 'utf8');
2019-09-11 00:59:37 +02:00
const json = JSON.parse(text);
return !!json.scripts['build-storybook'];
};
const createContent = deployables => {
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;
right: 100px;
2019-09-11 14:49:18 +02:00
left: 10px;
height: 30px;
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>
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>
<button id="open" onclick="handleClick()">open</button>
<select id="select" onchange="handleSelect()">
2019-09-11 14:49:18 +02:00
${deployables.map(i => `<option value="/${i}/">${i}</option>`).join('\n')}
</select>
<iframe id="frame" src="/${deployables[0]}/" />
`;
};
const handleExamples = async files => {
const deployables = files.filter(f => {
const packageJsonLocation = p(['examples', f, 'package.json']);
2020-01-21 00:51:26 +01:00
let stats = null;
try {
stats = statSync(packageJsonLocation);
} catch (e) {
2020-01-21 10:04:43 +01:00
// the folder had no package.json, we'll ignore
2020-01-21 00:51:26 +01:00
}
return stats && stats.isFile() && hasBuildScript(packageJsonLocation);
});
await deployables.reduce(async (acc, d) => {
await acc;
logger.log('');
logger.log(
`-----------------${Array(d.length)
.fill('-')
.join('')}`
);
logger.log(`▶️ building: ${d}`);
logger.log(
`-----------------${Array(d.length)
.fill('-')
.join('')}`
);
const out = p(['built-storybooks', d]);
const cwd = p(['examples', d]);
await exec(`yarn`, [`build-storybook`, `--output-dir=${out}`, '--quiet'], { cwd });
logger.log('-------');
logger.log('✅ done');
logger.log('-------');
}, Promise.resolve());
logger.log('');
logger.log(`📑 creating index`);
const indexLocation = p(['built-storybooks', 'index.html']);
const indexContent = createContent(deployables);
2019-09-11 14:49:18 +02:00
await writeFile(indexLocation, indexContent);
logger.log('-------');
logger.log('✅ done');
logger.log('-------');
2019-09-11 00:59:37 +02:00
};
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);
await handleExamples(list);
2019-09-11 00:59:37 +02:00
};
2020-01-21 00:51:26 +01:00
run().catch(e => {
logger.error(e);
process.exit(1);
});