Allow including a js files just before manager.bundle.js

enjoylife · enjoylife · commit 49bc32ef5466 · 2017-05-26T12:59:40.000-07:00
Context &amp; 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.
diff --git a/app/react/package.json b/app/react/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@storybook/react",
-  "version": "3.0.0-rc.0",
+  "name": "@enjoylife/react",
+  "version": "3.0.0-rc.1",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "license": "MIT",
   "main": "dist/client/index.js",
diff --git 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) {
       </head>
       <body style="margin: 0;">
         <div id="root"></div>
+        ${bodyScript}
         <script src="${url.resolve(publicPath, managerUrls.js)}"></script>
       </body>
     </html>
diff --git 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
@@ -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];

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`		`- "name": "@storybook/react",`
`3`		`- "version": "3.0.0-rc.0",`
	`2`	`+ "name": "@enjoylife/react",`
	`3`	`+ "version": "3.0.0-rc.1",`
`4`	`4`	`"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"main": "dist/client/index.js",`