Merge pull request #1248 from storybooks/1239-fix-undefined-in-head

Fix `storybook-build` manager-head.html bug
storybookjs · Jun 10, 2017 · 34b96aa · 34b96aa
2 parents bb3e6d9 + a2c3585
commit 34b96aa
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 17 deletions.
diff --git a/app/react/src/server/build.js b/app/react/src/server/build.js
@@ -11,7 +11,7 @@ import getBaseConfig from './config/webpack.config.prod';
 import loadConfig from './config';
 import getIndexHtml from './index.html';
 import getIframeHtml from './iframe.html';
-import { getHeadHtml, parseList, getEnvConfig } from './utils';
+import { getPreviewHeadHtml, getManagerHeadHtml, parseList, getEnvConfig } from './utils';
 
 process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 
@@ -87,9 +87,14 @@ webpack(config).run((err, stats) => {
     publicPath: config.output.publicPath,
     assets: stats.toJson().assetsByChunkName,
   };
-  const headHtml = getHeadHtml(configDir);
 
   // Write both the storybook UI and IFRAME HTML files to destination path.
-  fs.writeFileSync(path.resolve(outputDir, 'index.html'), getIndexHtml(data));
-  fs.writeFileSync(path.resolve(outputDir, 'iframe.html'), getIframeHtml({ ...data, headHtml }));
+  fs.writeFileSync(
+    path.resolve(outputDir, 'index.html'),
+    getIndexHtml({ ...data, headHtml: getManagerHeadHtml(configDir) })
+  );
+  fs.writeFileSync(
+    path.resolve(outputDir, 'iframe.html'),
+    getIframeHtml({ ...data, headHtml: getPreviewHeadHtml(configDir) })
+  );
 });
diff --git a/app/react/src/server/iframe.html.js b/app/react/src/server/iframe.html.js
@@ -38,9 +38,7 @@ const urlsFromAssets = assets => {
   return urls;
 };
 
-export default function(data) {
-  const { assets, headHtml, publicPath } = data;
-
+export default function({ assets, publicPath, headHtml }) {
   const urls = urlsFromAssets(assets);
 
   const cssTags = urls.css

diff --git a/app/react/src/server/index.html.js b/app/react/src/server/index.html.js
@@ -27,9 +27,7 @@ const managerUrlsFromAssets = assets => {
   };
 };
 
-export default function(data) {
-  const { assets, publicPath, headHtml } = data;
-
+export default function({ assets, publicPath, headHtml }) {
   const managerUrls = managerUrlsFromAssets(assets);
 
   return `

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, getManagerHeadHtml, getMiddleware } from './utils';
+import { getPreviewHeadHtml, getManagerHeadHtml, getMiddleware } from './utils';
 
 let webpackResolve = () => {};
 let webpackReject = () => {};
@@ -55,7 +55,7 @@ export default function(configDir) {
     });
 
     router.get('/iframe.html', (req, res) => {
-      const headHtml = getHeadHtml(configDir);
+      const headHtml = getPreviewHeadHtml(configDir);
       res.send(getIframeHtml({ ...data, headHtml, publicPath }));
     });
 

diff --git a/app/react/src/server/utils.js b/app/react/src/server/utils.js
@@ -11,7 +11,7 @@ export function parseList(str) {
   return str.split(',');
 }
 
-export function getHeadHtml(configDirPath) {
+export function getPreviewHeadHtml(configDirPath) {
   const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
   const fallbackHtmlPath = path.resolve(configDirPath, 'head.html');
   let headHtml = '';

diff --git a/app/react/src/server/utils.test.js b/app/react/src/server/utils.test.js
@@ -1,9 +1,9 @@
 import mock from 'mock-fs';
-import { getHeadHtml } from './utils';
+import { getPreviewHeadHtml } from './utils';
 
 const HEAD_HTML_CONTENTS = '<script>console.log("custom script!");</script>';
 
-describe('server.getHeadHtml', () => {
+describe('server.getPreviewHeadHtml', () => {
   describe('when .storybook/head.html does not exist', () => {
     beforeEach(() => {
       mock({
@@ -16,7 +16,7 @@ describe('server.getHeadHtml', () => {
     });
 
     it('return an empty string', () => {
-      const result = getHeadHtml('./config');
+      const result = getPreviewHeadHtml('./config');
       expect(result).toEqual('');
     });
   });
@@ -35,7 +35,7 @@ describe('server.getHeadHtml', () => {
     });
 
     it('return the contents of the file', () => {
-      const result = getHeadHtml('./config');
+      const result = getPreviewHeadHtml('./config');
       expect(result).toEqual(HEAD_HTML_CONTENTS);
     });
   });