From e804c04b64b9d59ada86e9feb47f229b311cc5c4 Mon Sep 17 00:00:00 2001 From: Karl O'Keeffe Date: Thu, 7 Apr 2016 21:36:59 +0100 Subject: [PATCH 1/3] WIP: Enable custom html in iframe --- dist/server/iframe.html.js | 4 ++-- dist/server/index.js | 8 +++++++- src/server/iframe.html.js | 3 ++- src/server/index.js | 8 +++++++- 4 files changed, 18 insertions(+), 5 deletions(-) diff --git a/dist/server/iframe.html.js b/dist/server/iframe.html.js index e9730b2d03ac..f43c787e511c 100644 --- a/dist/server/iframe.html.js +++ b/dist/server/iframe.html.js @@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports.default = function () { - return "\n \n \n \n React Storybook\n \n \n
\n \n \n \n "; +exports.default = function (extraHtml) { + return "\n \n \n \n React Storybook\n " + extraHtml + "\n \n \n
\n \n \n \n "; }; \ No newline at end of file diff --git a/dist/server/index.js b/dist/server/index.js index 197302a7007f..a885c5c52663 100755 --- a/dist/server/index.js +++ b/dist/server/index.js @@ -121,6 +121,12 @@ if (_fs2.default.existsSync(customConfigPath)) { }); } +var headHtmlPath = _path2.default.resolve(configDirPath, 'head.html'); +var headHtml = ''; +if (_fs2.default.existsSync(headHtmlPath)) { + headHtml = _fs2.default.readFileSync(headHtmlPath); +} + var compiler = (0, _webpack2.default)(finalConfig); var devMiddlewareOptions = { noInfo: true, @@ -134,7 +140,7 @@ app.get('/', function (req, res) { }); app.get('/iframe', function (req, res) { - res.send((0, _iframe2.default)()); + res.send((0, _iframe2.default)(headHtml)); }); app.listen(_commander2.default.port, function (error) { diff --git a/src/server/iframe.html.js b/src/server/iframe.html.js index 8ba2d0690f13..ea35ad43f456 100644 --- a/src/server/iframe.html.js +++ b/src/server/iframe.html.js @@ -1,9 +1,10 @@ -export default function () { +export default function (extraHtml) { return ` React Storybook + ${extraHtml}
diff --git a/src/server/index.js b/src/server/index.js index 56aaddf1f1ee..389f841ae7b7 100755 --- a/src/server/index.js +++ b/src/server/index.js @@ -94,6 +94,12 @@ if (fs.existsSync(customConfigPath)) { }; } +const headHtmlPath = path.resolve(configDirPath, 'head.html'); +let headHtml = ''; +if (fs.existsSync(headHtmlPath)) { + headHtml = fs.readFileSync(headHtmlPath); +} + const compiler = webpack(finalConfig); const devMiddlewareOptions = { noInfo: true, @@ -107,7 +113,7 @@ app.get('/', function (req, res) { }); app.get('/iframe', function (req, res) { - res.send(getIframeHtml()); + res.send(getIframeHtml(headHtml)); }); app.listen(program.port, function (error) { From 908d405ae81a64d371aec88269d72f8ed21028d4 Mon Sep 17 00:00:00 2001 From: Karl O'Keeffe Date: Fri, 8 Apr 2016 21:34:47 +0100 Subject: [PATCH 2/3] Tweak argument name --- src/server/iframe.html.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/server/iframe.html.js b/src/server/iframe.html.js index ea35ad43f456..3013f8ca5927 100644 --- a/src/server/iframe.html.js +++ b/src/server/iframe.html.js @@ -1,10 +1,10 @@ -export default function (extraHtml) { +export default function (headHtml) { return ` React Storybook - ${extraHtml} + ${headHtml}
From d6794d1333a60c6cfd747d5dd4e981ea54f9e854 Mon Sep 17 00:00:00 2001 From: Karl O'Keeffe Date: Fri, 8 Apr 2016 21:35:02 +0100 Subject: [PATCH 3/3] Add tests for loading head.html --- dist/server/get_head_html.js | 25 +++++++++++++++ dist/server/iframe.html.js | 4 +-- dist/server/index.js | 11 +++---- package.json | 1 + src/server/__tests__/get_head_html.js | 44 +++++++++++++++++++++++++++ src/server/get_head_html.js | 12 ++++++++ src/server/index.js | 8 ++--- 7 files changed, 91 insertions(+), 14 deletions(-) create mode 100644 dist/server/get_head_html.js create mode 100644 src/server/__tests__/get_head_html.js create mode 100644 src/server/get_head_html.js diff --git a/dist/server/get_head_html.js b/dist/server/get_head_html.js new file mode 100644 index 000000000000..ae3c12b57fd4 --- /dev/null +++ b/dist/server/get_head_html.js @@ -0,0 +1,25 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +exports.default = function (configDirPath) { + var headHtmlPath = _path2.default.resolve(configDirPath, 'head.html'); + var headHtml = ''; + if (_fs2.default.existsSync(headHtmlPath)) { + headHtml = _fs2.default.readFileSync(headHtmlPath, 'utf8'); + } + + return headHtml; +}; + +var _path = require('path'); + +var _path2 = _interopRequireDefault(_path); + +var _fs = require('fs'); + +var _fs2 = _interopRequireDefault(_fs); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } \ No newline at end of file diff --git a/dist/server/iframe.html.js b/dist/server/iframe.html.js index f43c787e511c..aec28a47c36a 100644 --- a/dist/server/iframe.html.js +++ b/dist/server/iframe.html.js @@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports.default = function (extraHtml) { - return "\n \n \n \n React Storybook\n " + extraHtml + "\n \n \n
\n \n \n \n "; +exports.default = function (headHtml) { + return "\n \n \n \n React Storybook\n " + headHtml + "\n \n \n
\n \n \n \n "; }; \ No newline at end of file diff --git a/dist/server/index.js b/dist/server/index.js index a885c5c52663..19bfea6b84aa 100755 --- a/dist/server/index.js +++ b/dist/server/index.js @@ -53,6 +53,10 @@ var _fs = require('fs'); var _fs2 = _interopRequireDefault(_fs); +var _get_head_html = require('./get_head_html'); + +var _get_head_html2 = _interopRequireDefault(_get_head_html); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } process.env.NODE_ENV = 'production'; @@ -121,12 +125,6 @@ if (_fs2.default.existsSync(customConfigPath)) { }); } -var headHtmlPath = _path2.default.resolve(configDirPath, 'head.html'); -var headHtml = ''; -if (_fs2.default.existsSync(headHtmlPath)) { - headHtml = _fs2.default.readFileSync(headHtmlPath); -} - var compiler = (0, _webpack2.default)(finalConfig); var devMiddlewareOptions = { noInfo: true, @@ -139,6 +137,7 @@ app.get('/', function (req, res) { res.send((0, _index2.default)()); }); +var headHtml = (0, _get_head_html2.default)(configDirPath); app.get('/iframe', function (req, res) { res.send((0, _iframe2.default)(headHtml)); }); diff --git a/package.json b/package.json index f368b88c729c..e163eb18ef66 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "eslint-plugin-babel": "^3.1.0", "eslint-plugin-react": "^4.2.3", "mocha": "^2.4.5", + "mock-fs": "^3.8.0", "nodemon": "^1.9.1", "react": "^0.14.8", "react-dom": "^0.14.8", diff --git a/src/server/__tests__/get_head_html.js b/src/server/__tests__/get_head_html.js new file mode 100644 index 000000000000..071c314f8d07 --- /dev/null +++ b/src/server/__tests__/get_head_html.js @@ -0,0 +1,44 @@ +const { describe, it, beforeEach, afterEach } = global; +import { expect } from 'chai'; +import getHeadHtml from '../get_head_html'; +import mock from 'mock-fs'; + +const HEAD_HTML_CONTENTS = ''; + +describe('server.getHeadHtml', () => { + describe('when .storybook/head.html does not exist', () => { + beforeEach(() => { + mock({ + config: {}, + }); + }); + + afterEach(() => { + mock.restore(); + }); + + it('return an empty string', () => { + const result = getHeadHtml('./config'); + expect(result).to.be.equal(''); + }); + }); + + describe('when .storybook/head.html exists', () => { + beforeEach(() => { + mock({ + config: { + 'head.html': HEAD_HTML_CONTENTS, + }, + }); + }); + + afterEach(() => { + mock.restore(); + }); + + it('return the contents of the file', () => { + const result = getHeadHtml('./config'); + expect(result).to.be.equal(HEAD_HTML_CONTENTS); + }); + }); +}); diff --git a/src/server/get_head_html.js b/src/server/get_head_html.js new file mode 100644 index 000000000000..10dd15bf728e --- /dev/null +++ b/src/server/get_head_html.js @@ -0,0 +1,12 @@ +import path from 'path'; +import fs from 'fs'; + +export default function (configDirPath) { + const headHtmlPath = path.resolve(configDirPath, 'head.html'); + let headHtml = ''; + if (fs.existsSync(headHtmlPath)) { + headHtml = fs.readFileSync(headHtmlPath, 'utf8'); + } + + return headHtml; +} diff --git a/src/server/index.js b/src/server/index.js index 389f841ae7b7..17591266fb64 100755 --- a/src/server/index.js +++ b/src/server/index.js @@ -13,6 +13,7 @@ import packageJson from '../../package.json'; import config from './webpack.config'; import path from 'path'; import fs from 'fs'; +import getHeadHtml from './get_head_html'; const logger = console; @@ -94,12 +95,6 @@ if (fs.existsSync(customConfigPath)) { }; } -const headHtmlPath = path.resolve(configDirPath, 'head.html'); -let headHtml = ''; -if (fs.existsSync(headHtmlPath)) { - headHtml = fs.readFileSync(headHtmlPath); -} - const compiler = webpack(finalConfig); const devMiddlewareOptions = { noInfo: true, @@ -112,6 +107,7 @@ app.get('/', function (req, res) { res.send(getIndexHtml()); }); +const headHtml = getHeadHtml(configDirPath); app.get('/iframe', function (req, res) { res.send(getIframeHtml(headHtml)); });