From b390c34306617775db51cf3c892bf51dbe881a28 Mon Sep 17 00:00:00 2001 From: Matthew Clemens Date: Fri, 26 May 2017 12:37:57 -0700 Subject: [PATCH 1/5] Allow including a js files just before manager.bundle.js Context & Why? The process went like this: 1. Why are storybook's build times so slow (5 sec or more)? 2. Lets try adding the webpack dll plugin 3. Oh wait, now I need to include a vendor.js (it has the react bits) prior to storybook 4. This commit 5. Now build times are sub 200ms. --- app/react/src/server/index.html.js | 3 ++- app/react/src/server/middleware.js | 5 +++-- app/react/src/server/utils.js | 11 +++++++++++ 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/app/react/src/server/index.html.js b/app/react/src/server/index.html.js index fa7b791d841..3499e26c5b8 100644 --- a/app/react/src/server/index.html.js +++ b/app/react/src/server/index.html.js @@ -28,7 +28,7 @@ const managerUrlsFromAssets = assets => { }; export default function(data) { - const { assets, publicPath } = data; + const { assets, publicPath, bodyScript } = data; const managerUrls = managerUrlsFromAssets(assets); @@ -73,6 +73,7 @@ export default function(data) {
+ ${bodyScript} diff --git a/app/react/src/server/middleware.js b/app/react/src/server/middleware.js index e2ca8d2ace8..c54c792b214 100644 --- a/app/react/src/server/middleware.js +++ b/app/react/src/server/middleware.js @@ -6,7 +6,7 @@ import getBaseConfig from './config/webpack.config'; import loadConfig from './config'; import getIndexHtml from './index.html'; import getIframeHtml from './iframe.html'; -import { getHeadHtml, getMiddleware } from './utils'; +import { getHeadHtml, getBodyScript, getMiddleware } from './utils'; export default function(configDir) { // Build the webpack configuration using the `getBaseConfig` @@ -36,7 +36,8 @@ export default function(configDir) { middlewareFn(router); router.get('/', (req, res) => { - res.send(getIndexHtml({ publicPath })); + const bodyScript = getBodyScript(configDir) + res.send(getIndexHtml({ publicPath, bodyScript })); }); router.get('/iframe.html', (req, res) => { diff --git a/app/react/src/server/utils.js b/app/react/src/server/utils.js index 19811869d4f..1dff08dd162 100644 --- a/app/react/src/server/utils.js +++ b/app/react/src/server/utils.js @@ -15,6 +15,17 @@ export function getHeadHtml(configDirPath) { return headHtml; } +export function getBodyScript(configDirPath) { + const scriptPath = path.resolve(configDirPath, 'bodyscript.html'); + let scriptHtml = ''; + if (fs.existsSync(scriptPath)) { + scriptHtml = fs.readFileSync(scriptPath, 'utf8'); + } + + return scriptHtml; +} + + export function getEnvConfig(program, configEnv) { Object.keys(configEnv).forEach(fieldName => { const envVarName = configEnv[fieldName]; From e1f21bc4ac8b52f34701f9249742b75d5f7346dc Mon Sep 17 00:00:00 2001 From: Matthew Clemens Date: Wed, 7 Jun 2017 09:46:28 -0700 Subject: [PATCH 2/5] rename bodyscript to manager-head to better align with existing conventions --- app/react/src/server/index.html.js | 4 ++-- app/react/src/server/middleware.js | 6 +++--- app/react/src/server/utils.js | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/react/src/server/index.html.js b/app/react/src/server/index.html.js index 3499e26c5b8..375f03acb84 100644 --- a/app/react/src/server/index.html.js +++ b/app/react/src/server/index.html.js @@ -28,7 +28,7 @@ const managerUrlsFromAssets = assets => { }; export default function(data) { - const { assets, publicPath, bodyScript } = data; + const { assets, publicPath, headHtml } = data; const managerUrls = managerUrlsFromAssets(assets); @@ -70,10 +70,10 @@ export default function(data) { background-color: #eee } + ${headHtml}
- ${bodyScript} diff --git a/app/react/src/server/middleware.js b/app/react/src/server/middleware.js index 5afb681c10c..d15201c82a2 100644 --- a/app/react/src/server/middleware.js +++ b/app/react/src/server/middleware.js @@ -6,7 +6,7 @@ import getBaseConfig from './config/webpack.config'; import loadConfig from './config'; import getIndexHtml from './index.html'; import getIframeHtml from './iframe.html'; -import { getHeadHtml, getBodyScript, getMiddleware } from './utils'; +import { getHeadHtml, getManagerHeadHtml, getMiddleware } from './utils'; let webpackResolve = () => {}; let webpackReject = () => {}; @@ -50,8 +50,8 @@ export default function(configDir) { }; router.get('/', (req, res) => { - const bodyScript = getBodyScript(configDir) - res.send(getIndexHtml({ publicPath, bodyScript })); + const headHtml = getManagerHeadHtml(configDir) + res.send(getIndexHtml({ publicPath, headHtml })); }); router.get('/iframe.html', (req, res) => { diff --git a/app/react/src/server/utils.js b/app/react/src/server/utils.js index e8366ecf42e..0f608662153 100644 --- a/app/react/src/server/utils.js +++ b/app/react/src/server/utils.js @@ -15,8 +15,8 @@ export function getHeadHtml(configDirPath) { return headHtml; } -export function getBodyScript(configDirPath) { - const scriptPath = path.resolve(configDirPath, 'bodyscript.html'); +export function getManagerHeadHtml(configDirPath) { + const scriptPath = path.resolve(configDirPath, 'manager-head.html'); let scriptHtml = ''; if (fs.existsSync(scriptPath)) { scriptHtml = fs.readFileSync(scriptPath, 'utf8'); From 5c0eb412c27ece763e4432213bd5d6668d49dd8c Mon Sep 17 00:00:00 2001 From: Matthew Clemens Date: Wed, 7 Jun 2017 10:20:44 -0700 Subject: [PATCH 3/5] rename of head.html to preview-head.html with fallback warning --- app/react/src/server/utils.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/app/react/src/server/utils.js b/app/react/src/server/utils.js index 0f608662153..a126abe7191 100644 --- a/app/react/src/server/utils.js +++ b/app/react/src/server/utils.js @@ -1,15 +1,24 @@ import path from 'path'; import fs from 'fs'; +import chalk from 'chalk'; + +const logger = console; export function parseList(str) { return str.split(','); } export function getHeadHtml(configDirPath) { - const headHtmlPath = path.resolve(configDirPath, 'head.html'); + const headHtmlPath = path.resolve(configDirPath, 'preview-head.html'); + const fallbackHtmlPath = path.resolve(configDirPath, 'head.html') let headHtml = ''; if (fs.existsSync(headHtmlPath)) { headHtml = fs.readFileSync(headHtmlPath, 'utf8'); + } else if(fs.existsSync(fallbackHtmlPath)) { + headHtml = fs.readFileSync(fallbackHtmlPath, 'utf8'); + const msg = "WARNING: head.html has been deprecated.\nPlease rename head.html to preview-head.html" + logger.warn(chalk.bold(msg + chalk.reset('\n'))); + } return headHtml; From c570ea293d5c529dffe7bec5c8af946a5068ce34 Mon Sep 17 00:00:00 2001 From: Matthew Clemens Date: Wed, 7 Jun 2017 10:35:32 -0700 Subject: [PATCH 4/5] add docs --- .../configurations/add-custom-head-tags/index.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/pages/configurations/add-custom-head-tags/index.md b/docs/pages/configurations/add-custom-head-tags/index.md index b7bb8943c8c..6cae4180c75 100644 --- a/docs/pages/configurations/add-custom-head-tags/index.md +++ b/docs/pages/configurations/add-custom-head-tags/index.md @@ -5,7 +5,7 @@ title: 'Add Custom Head Tags' Sometimes, you may need to add different tags to the HTML head. This is useful for adding web fonts or some external scripts. -You can do this very easily. Simply create a file called `head.html` inside the Storybook config directory and add tags like this: +You can do this very easily. Simply create a file called `preview-head.html` inside the Storybook config directory and add tags like this: ```html @@ -17,3 +17,14 @@ That's it. Storybook will inject these tags. > **Important** > > Storybook will inject these tags to the iframe where your components are rendered. So, these won’t be loaded into the main Storybook UI. + +## Add Tags or Scripts to the Main UI. + +Additionally, you may need to add different scripts or tags to the main Storybook UI. This might arise when your custom Webpack configuration outputs or requires additional chunks. + +Create a file called `manager-head.html` inside of the Storybook config directory and add any tags you require. + +> **Important** +> +> Your scripts will run before Storybook's React UI. Also be aware, that this is an uncommon scenario and could potentially break Storybook's UI. So use with caution. + From 468515b6f9434fa1d9fd0837df4adb25f5ce9ccf Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 7 Jun 2017 21:47:39 +0200 Subject: [PATCH 5/5] Use util-deprecate over custom implementation (will only log once) --- app/react/src/server/utils.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/app/react/src/server/utils.js b/app/react/src/server/utils.js index a126abe7191..70f20e268f4 100644 --- a/app/react/src/server/utils.js +++ b/app/react/src/server/utils.js @@ -1,8 +1,11 @@ import path from 'path'; import fs from 'fs'; -import chalk from 'chalk'; +import deprecate from 'util-deprecate'; -const logger = console; +const fallbackHeadUsage = deprecate( + () => {}, + 'Usage of head.html has been deprecated. Please rename head.html to preview-head.html' +); export function parseList(str) { return str.split(','); @@ -10,15 +13,13 @@ export function parseList(str) { export function getHeadHtml(configDirPath) { const headHtmlPath = path.resolve(configDirPath, 'preview-head.html'); - const fallbackHtmlPath = path.resolve(configDirPath, 'head.html') + const fallbackHtmlPath = path.resolve(configDirPath, 'head.html'); let headHtml = ''; if (fs.existsSync(headHtmlPath)) { headHtml = fs.readFileSync(headHtmlPath, 'utf8'); - } else if(fs.existsSync(fallbackHtmlPath)) { + } else if (fs.existsSync(fallbackHtmlPath)) { headHtml = fs.readFileSync(fallbackHtmlPath, 'utf8'); - const msg = "WARNING: head.html has been deprecated.\nPlease rename head.html to preview-head.html" - logger.warn(chalk.bold(msg + chalk.reset('\n'))); - + fallbackHeadUsage(); } return headHtml; @@ -34,7 +35,6 @@ export function getManagerHeadHtml(configDirPath) { return scriptHtml; } - export function getEnvConfig(program, configEnv) { Object.keys(configEnv).forEach(fieldName => { const envVarName = configEnv[fieldName];