From 0177ee784d03aa1b724678635373d6e303d2f717 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 27 Jan 2020 17:36:40 +0100 Subject: [PATCH 1/4] ADD all entrypoints of manager to express routes (prefer manager entries over preview) namechange the webpackDevMiddleWare to preview... for clarity --- lib/core/src/server/dev-server.js | 67 ++++++++++++++++--------------- 1 file changed, 35 insertions(+), 32 deletions(-) diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index 4a49a1a6d3ca..c5acee83d44f 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -41,36 +41,39 @@ export default function(options) { if (options.debugWebpack) { logConfig('Manager webpack config', config, logger); } + const managerCompiler = webpack(config); + + const devMiddlewareOptions = { + publicPath: config.output.publicPath, + watchOptions: { + aggregateTimeout: 2000, + ignored: /node_modules/, + }, + // this actually causes 0 (regular) output from wdm & webpack + logLevel: 'warn', + clientLogLevel: 'warning', + noInfo: true, + }; + + const managerDevMiddlewareInstance = webpackDevMiddleware( + managerCompiler, + devMiddlewareOptions + ); + + router.use(managerDevMiddlewareInstance); + return new Promise((resolve, reject) => { - webpack(config).watch( - { - aggregateTimeout: 1, - ignored: /node_modules/, - }, - (err, stats) => { - managerTotalTime = process.hrtime(startTime); - if (!resolved && (err || stats.hasErrors())) { - const error = new Error('Manager build is broken'); - error.error = err; - error.close = true; - error.stats = stats; - stats.toJson(options.errorDetails); - logger.line(); - logger.line(); - try { - previewReject(error); - previewProcess.close(); - logger.warn('force closed preview build'); - } catch (e) { - logger.warn('Unable to close preview build!'); - } - logger.line(); - reject(error); - } else { - resolve(stats); - } + managerDevMiddlewareInstance.waitUntilValid(stats => { + managerTotalTime = process.hrtime(startTime); + + if (!stats) { + reject(new Error('no stats after building preview')); + } else if (stats.hasErrors()) { + reject(stats); + } else { + resolve(stats); } - ); + }); }); }); @@ -110,17 +113,17 @@ export default function(options) { ...previewConfig.devServer, }; - const webpackDevMiddlewareInstance = webpackDevMiddleware( + const previewDevMiddlewareInstance = webpackDevMiddleware( previewCompiler, devMiddlewareOptions ); - router.use(webpackDevMiddlewareInstance); + router.use(previewDevMiddlewareInstance); router.use(webpackHotMiddleware(previewCompiler)); return new Promise((resolve, reject) => { previewReject = reject; - webpackDevMiddlewareInstance.waitUntilValid(stats => { + previewDevMiddlewareInstance.waitUntilValid(stats => { previewTotalTime = process.hrtime(startTime); if (!stats) { @@ -131,7 +134,7 @@ export default function(options) { resolve(stats); } }); - previewProcess = webpackDevMiddlewareInstance; + previewProcess = previewDevMiddlewareInstance; }); }); From 42b413d0fa2791d0265a375f633bdcf67f9423ca Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 27 Jan 2020 17:37:07 +0100 Subject: [PATCH 2/4] ADD example usage --- examples/dev-kits/logo.svg | 3 +++ examples/dev-kits/manager.js | 8 +++++++- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 examples/dev-kits/logo.svg diff --git a/examples/dev-kits/logo.svg b/examples/dev-kits/logo.svg new file mode 100644 index 000000000000..b9185494179f --- /dev/null +++ b/examples/dev-kits/logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/examples/dev-kits/manager.js b/examples/dev-kits/manager.js index 027b5032041d..f105fc1d65ba 100644 --- a/examples/dev-kits/manager.js +++ b/examples/dev-kits/manager.js @@ -6,8 +6,14 @@ import { useAddonState, useStoryState } from '@storybook/api'; import { themes } from '@storybook/theming'; import { AddonPanel } from '@storybook/components'; +import logo from './logo.svg'; + addons.setConfig({ - theme: themes.dark, + theme: { + brandImage: logo, + brandTitle: 'Custom - Storybook', + ...themes.dark, + }, panelPosition: 'bottom', selectedPanel: 'storybook/roundtrip', }); From 5dfa10c7084ff22c3429821a06751a10d74d4210 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 27 Jan 2020 17:40:50 +0100 Subject: [PATCH 3/4] Because all assets generated by webpack are now added to the routes automatically, we no longer need this. --- lib/core/src/server/dev-server.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index c5acee83d44f..5b85a1d5432c 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -156,10 +156,6 @@ export default function(options) { response.set('Content-Type', 'text/html'); response.sendFile(path.join(`${dllPath}/${request.params[0]}`)); }); - router.get(/(.+\.js)$/, (request, response) => { - response.set('Content-Type', 'text/javascript'); - response.sendFile(path.join(`${outputDir}/${request.params[0]}`)); - }); return { previewStats, managerStats, managerTotalTime, previewTotalTime, router }; }); From 9da592591c4bd35b45a9a869f121e3ba156af0f3 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 5 Feb 2020 16:16:29 +0100 Subject: [PATCH 4/4] IMPROVE rejection --- lib/core/src/server/dev-server.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index 5b85a1d5432c..297f9306982a 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -124,6 +124,7 @@ export default function(options) { return new Promise((resolve, reject) => { previewReject = reject; previewDevMiddlewareInstance.waitUntilValid(stats => { + resolved = true; previewTotalTime = process.hrtime(startTime); if (!stats) { @@ -142,8 +143,19 @@ export default function(options) { const middlewareFn = getMiddleware(configDir); middlewareFn(router); + managerPromise.catch(e => { + try { + if (!resolved) { + previewReject(); + } + previewProcess.close(); + logger.warn('force closed preview build'); + } catch (err) { + logger.warn('Unable to close preview build!'); + } + }); + return Promise.all([managerPromise, previewPromise]).then(([managerStats, previewStats]) => { - resolved = true; router.get('/', (request, response) => { response.set('Content-Type', 'text/html'); response.sendFile(path.join(`${outputDir}/index.html`));