GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 22:51:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

Built-in stories.json extraction in dev server (on startup)

Browse Source
This commit is contained in:
Michael Shilman 2021-05-17 13:11:56 +08:00
parent 937b48c526
commit 4a59ea7bed
3 changed files with 35 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
examples/html-kitchen-sink/.storybook/main.js
View File

@ -24,4 +24,15 @@ module.exports = {
core: {
builder: 'webpack4',
},
// Test code for built-in stories.json extraction
//
// refs: {
// 'react-ts': {
// title: 'React TS',
// // development
// url: 'http://localhost:9011',
// // production
// // url: 'http://localhost:8080',
// },
// },
};

2
lib/core-server/src/dev-server.ts
View File

@ -7,6 +7,7 @@ import { getMiddleware } from './utils/middleware';
import { getServerAddresses } from './utils/server-address';
import { getServer } from './utils/server-init';
import { useStatics } from './utils/server-statics';
import { useStoriesJson } from './utils/stories-json';
import * as managerBuilder from './manager/builder';
@ -35,6 +36,7 @@ export async function storybookDevServer(options: Options) {
// User's own static files
await useStatics(router, options);
await useStoriesJson(router, options);
getMiddleware(options.configDir)(router);
app.use(router);

42
lib/core-server/src/utils/stories-json.ts
View File

@ -2,7 +2,7 @@ import path from 'path';
import fs from 'fs-extra';
import glob from 'globby';
import { logger } from '@storybook/node-logger';
// import { Options } from '@storybook/core-common';
import { resolvePathInStorybookCache, Options } from '@storybook/core-common';
import { readCsf } from '@storybook/csf-tools';
interface ExtractedStory {
@ -43,23 +43,25 @@ export async function extractStoriesJson(fileName: string, storiesGlobs: string[
await fs.writeJson(fileName, { v: 3, stories });
}
// const timeout = 30000; // 30s
// const step = 100; // .1s
const timeout = 30000; // 30s
const step = 100; // .1s
// export async function useStoriesJson(router: any, options: Options) {
// const storiesFile = '/tmp/stories.json';
// await fs.remove(storiesFile);
// const storiesGlobs = (await options.presets.apply('stories')) as string[];
// extractStoriesJson(storiesFile, storiesGlobs);
// router.use('/stories.json', async (_req: any, res: any) => {
// for (let i = 0; i < timeout / step; i += 1) {
// if (fs.existsSync(storiesFile)) {
// // eslint-disable-next-line no-await-in-loop
// return res.json(await fs.readFile(storiesFile, 'utf-8'));
// }
// // eslint-disable-next-line no-await-in-loop
// await new Promise((r: any) => setTimeout(r, step));
// }
// res.status(408).send('stories.json timeout');
// });
// }
export async function useStoriesJson(router: any, options: Options) {
const storiesFile = resolvePathInStorybookCache('stories.json');
await fs.remove(storiesFile);
const storiesGlobs = (await options.presets.apply('stories')) as string[];
extractStoriesJson(storiesFile, storiesGlobs);
router.use('/stories.json', async (_req: any, res: any) => {
for (let i = 0; i < timeout / step; i += 1) {
if (fs.existsSync(storiesFile)) {
// eslint-disable-next-line no-await-in-loop
const json = await fs.readFile(storiesFile, 'utf-8');
res.header('Content-Type', 'application/json');
return res.send(json);
}
// eslint-disable-next-line no-await-in-loop
await new Promise((r: any) => setTimeout(r, step));
}
return res.status(408).send('stories.json timeout');
});
}