Update defaults to match create-react-app (storybookjs#342)

* Match default setup same as create-react-app. * Stop pre-building the manager This allow us to customize the manager dynamically. * Update manager for the production build. * Remove building source-maps. * Fix lint issues. * Improve static file handling. * Update dev docs. * Use dist directory for the manager's source. * Add support for stage-0. * Replace raw loader with the css loader in production CSS handling. * Remove specific babel plugins since we support stage-0.
willowcheng · Aug 1, 2016 · bb426b8 · bb426b8
1 parent 4e64015
commit bb426b8
Show file tree

Hide file tree

Showing 29 changed files with 479 additions and 320 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "es2016", "stage-0", "react"]
 }
diff --git a/dist/client/manager/index.js b/dist/client/manager/index.js
@@ -0,0 +1,16 @@
+'use strict';
+
+require('es6-shim');
+
+var _storybookUi = require('@kadira/storybook-ui');
+
+var _storybookUi2 = _interopRequireDefault(_storybookUi);
+
+var _provider = require('./provider');
+
+var _provider2 = _interopRequireDefault(_provider);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var rootEl = document.getElementById('root');
+(0, _storybookUi2.default)(rootEl, new _provider2.default());
diff --git a/dist/client/manager/preview.js b/dist/client/manager/preview.js
@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var iframeStyle = {
+  width: '100%',
+  height: '100%',
+  border: 0,
+  margin: 0,
+  padding: 0
+};
+
+var Preview = function Preview(_ref) {
+  var url = _ref.url;
+  return _react2.default.createElement('iframe', {
+    style: iframeStyle,
+    src: url
+  });
+};
+
+Preview.propTypes = {
+  url: _react2.default.PropTypes.string
+};
+
+exports.default = Preview;
diff --git a/dist/client/manager/provider.js b/dist/client/manager/provider.js
@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _preview = require('./preview');
+
+var _preview2 = _interopRequireDefault(_preview);
+
+var _qs = require('qs');
+
+var _qs2 = _interopRequireDefault(_qs);
+
+var _uuid = require('uuid');
+
+var _uuid2 = _interopRequireDefault(_uuid);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _pageBus = require('page-bus');
+
+var _pageBus2 = _interopRequireDefault(_pageBus);
+
+var _storybookUi = require('@kadira/storybook-ui');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ReactProvider = function (_Provider) {
+  (0, _inherits3.default)(ReactProvider, _Provider);
+
+  function ReactProvider() {
+    (0, _classCallCheck3.default)(this, ReactProvider);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(ReactProvider).call(this));
+
+    _this.dataId = _uuid2.default.v4();
+    return _this;
+  }
+
+  (0, _createClass3.default)(ReactProvider, [{
+    key: 'renderPreview',
+    value: function renderPreview(selectedKind, selectedStory) {
+      var queryParams = {
+        dataId: this.dataId,
+        selectedKind: selectedKind,
+        selectedStory: selectedStory
+      };
+
+      var queryString = _qs2.default.stringify(queryParams);
+      var url = 'iframe.html?' + queryString;
+      return _react2.default.createElement(_preview2.default, { url: url });
+    }
+  }, {
+    key: 'handleAPI',
+    value: function handleAPI(api) {
+      var dataId = this.dataId;
+      var bus = (0, _pageBus2.default)();
+
+      api.onStory(function (kind, story) {
+        var payload = {
+          kind: kind,
+          story: story
+        };
+
+        bus.emit(dataId + '.setCurrentStory', (0, _stringify2.default)(payload));
+      });
+
+      // watch pageBus and put both actions and stories.
+      bus.on(dataId + '.addAction', function (payload) {
+        var data = JSON.parse(payload);
+        api.addAction(data.action);
+      });
+
+      bus.on(dataId + '.setStories', function (payload) {
+        var data = JSON.parse(payload);
+        api.setStories(data.stories);
+      });
+
+      bus.on(dataId + '.selectStory', function (payload) {
+        var data = JSON.parse(payload);
+        api.selectStory(data.kind, data.story);
+      });
+
+      bus.on(dataId + '.applyShortcut', function (payload) {
+        var data = JSON.parse(payload);
+        api.handleShortcut(data.event);
+      });
+    }
+  }]);
+  return ReactProvider;
+}(_storybookUi.Provider);
+
+exports.default = ReactProvider;
diff --git a/dist/manager.js b/dist/manager.js
diff --git a/dist/manager.js.map b/dist/manager.js.map
diff --git a/dist/server/babel.js b/dist/server/babel.js
@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  babelrc: false,
+  cacheDirectory: true,
+  presets: ['babel-preset-es2015', 'babel-preset-es2016', 'babel-preset-stage-0', 'babel-preset-react'].map(require.resolve),
+  plugins: [].map(require.resolve).concat([[require.resolve('babel-plugin-transform-runtime'), {
+    helpers: false,
+    polyfill: false,
+    regenerator: true
+  }]])
+};
diff --git a/dist/server/babel.prod.js b/dist/server/babel.prod.js
@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = {
+  babelrc: false,
+  presets: ['babel-preset-es2015', 'babel-preset-es2016', 'babel-preset-stage-0', 'babel-preset-react'].map(require.resolve),
+  plugins: ['babel-plugin-transform-react-constant-elements'].map(require.resolve).concat([[require.resolve('babel-plugin-transform-runtime'), {
+    helpers: false,
+    polyfill: false,
+    regenerator: true
+  }]])
+};
diff --git a/dist/server/build.js b/dist/server/build.js
@@ -63,8 +63,11 @@ if (publicPath[0] === '/') {
   publicPath = publicPath.slice(1);
 }
 
-// create output directory (and the static dir) if not exists
 var outputDir = _commander2.default.outputDir || './storybook-static';
+config.output.path = outputDir;
+
+// create output directory (and the static dir) if not exists
+_shelljs2.default.rm('-rf', outputDir);
 _shelljs2.default.mkdir('-p', _path2.default.resolve(outputDir, publicPath));
 
 // copy all static files
@@ -86,30 +89,10 @@ _fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'iframe.html'), (0,
 
 // compile all resources with webpack and write them to the disk.
 logger.log('Building storybook ...');
-(0, _webpack2.default)(config).compile(function (err, stats) {
-  for (var filename in stats.assets) {
-    if (!stats.assets.hasOwnProperty(filename)) {
-      continue;
-    }
-
-    var asset = stats.assets[filename];
-    if (asset.children && asset.children.length) {
-      var _source = asset.children[0]._value;
-      var _dstPath = _path2.default.resolve(outputDir, publicPath, filename);
-      _fs2.default.writeFileSync(_dstPath, _source);
-      continue;
-    }
-
-    var source = asset._value;
-    var dstPath = _path2.default.resolve(outputDir, publicPath, filename);
-
-    // Ensure the asset directory exists
-    _shelljs2.default.mkdir('-p', _path2.default.parse(dstPath).dir);
-    _fs2.default.writeFileSync(dstPath, source);
+(0, _webpack2.default)(config).run(function (err) {
+  if (err) {
+    logger.error('Failed to build the storybook');
+    logger.error(err.message);
+    process.exit(1);
   }
-
-  // We need to copy the manager bundle distributed via the React Storybook
-  // directly into the production build overring webpack.
-  _shelljs2.default.cp(_path2.default.resolve(__dirname, '../manager.js'), _path2.default.resolve(outputDir, publicPath, 'manager.bundle.js'));
-  _shelljs2.default.cp(_path2.default.resolve(__dirname, '../manager.js.map'), _path2.default.resolve(outputDir, publicPath, 'manager.js.map'));
 });
diff --git a/dist/server/config.js b/dist/server/config.js
@@ -34,20 +34,6 @@ exports.default = function (configType, baseConfig, configDir) {
     config.module.loaders[0].query = babelConfig;
   }
 
-  // Dev build needs some specific babel presets.
-  // So, we need to add them here, if not specified.
-  if (process.env.DEV_BUILD) {
-    (function () {
-      var requiredPresets = ['react', 'es2015', 'stage-0'];
-      var loadedPresets = config.module.loaders[0].query.presets;
-      requiredPresets.forEach(function (preset) {
-        if (loadedPresets.indexOf(preset) < 0) {
-          loadedPresets.push(preset);
-        }
-      });
-    })();
-  }
-
   // Check whether a config.js file exists inside the storybook
   // config directory and throw an error if it's not.
   var storybookConfigPath = _path2.default.resolve(configDir, 'config.js');

diff --git a/dist/server/iframe.html.js b/dist/server/iframe.html.js
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 exports.default = function (headHtml, publicPath) {
-  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <script>\n          if (window.parent !== window) {\n            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n          }\n        </script>\n        <title>React Storybook</title>\n        ' + headHtml + '\n      </head>\n      <body>\n        <div id="root"></div>\n        <div id="error-display"></div>\n        <script src="' + _url2.default.resolve(publicPath, 'preview.bundle.js') + '"></script>\n      </body>\n    </html>\n  ';
+  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <script>\n          if (window.parent !== window) {\n            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n          }\n        </script>\n        <title>React Storybook</title>\n        ' + headHtml + '\n      </head>\n      <body>\n        <div id="root"></div>\n        <div id="error-display"></div>\n        <script src="' + _url2.default.resolve(publicPath, 'static/preview.bundle.js') + '"></script>\n      </body>\n    </html>\n  ';
 };
 
 var _url = require('url');

diff --git a/dist/server/index.html.js b/dist/server/index.html.js
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 exports.default = function (publicPath) {
-  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <title>React Storybook</title>\n        <style>\n          /*\n            When resizing panels, the drag event breaks if the cursor\n            moves over the iframe. Add the \'dragging\' class to the body\n            at drag start and remove it when the drag ends.\n           */\n          .dragging iframe {\n            pointer-events: none;\n          }\n\n          /* Styling the fuzzy search box placeholders */\n          .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n            color: #ddd;\n            font-size: 16px;\n          }\n\n          .searchBox::-moz-placeholder { /* Firefox 19+ */\n            color: #ddd;\n            font-size: 16px;\n          }\n\n          .searchBox:focus{\n            border-color: #EEE !important;\n          }\n\n          .btn:hover{\n            background-color: #eee\n          }\n        </style>\n      </head>\n      <body style="margin: 0;">\n        <div id="root"></div>\n        <script src="' + _url2.default.resolve(publicPath, 'manager.bundle.js') + '"></script>\n      </body>\n    </html>\n  ';
+  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <title>React Storybook</title>\n        <style>\n          /*\n            When resizing panels, the drag event breaks if the cursor\n            moves over the iframe. Add the \'dragging\' class to the body\n            at drag start and remove it when the drag ends.\n           */\n          .dragging iframe {\n            pointer-events: none;\n          }\n\n          /* Styling the fuzzy search box placeholders */\n          .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n            color: #ddd;\n            font-size: 16px;\n          }\n\n          .searchBox::-moz-placeholder { /* Firefox 19+ */\n            color: #ddd;\n            font-size: 16px;\n          }\n\n          .searchBox:focus{\n            border-color: #EEE !important;\n          }\n\n          .btn:hover{\n            background-color: #eee\n          }\n        </style>\n      </head>\n      <body style="margin: 0;">\n        <div id="root"></div>\n        <script src="' + _url2.default.resolve(publicPath, 'static/manager.bundle.js') + '"></script>\n      </body>\n    </html>\n  ';
 };
 
 var _url = require('url');

diff --git a/dist/server/paths.js b/dist/server/paths.js
@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.includePaths = undefined;
+
+var _path = require('path');
+
+var _path2 = _interopRequireDefault(_path);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var includePaths = exports.includePaths = [_path2.default.resolve('./'), __dirname, _path2.default.resolve(__dirname, '../../src')];
diff --git a/dist/server/webpack.config.js b/dist/server/webpack.config.js
@@ -12,30 +12,63 @@ var _webpack = require('webpack');
 
 var _webpack2 = _interopRequireDefault(_webpack);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _paths = require('./paths');
+
+var _autoprefixer = require('autoprefixer');
+
+var _autoprefixer2 = _interopRequireDefault(_autoprefixer);
+
+var _caseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin');
 
-var managerEntry = process.env.DEV_BUILD ? _path2.default.resolve(__dirname, '../../src/client/manager') : _path2.default.resolve(__dirname, '../manager');
+var _caseSensitivePathsWebpackPlugin2 = _interopRequireDefault(_caseSensitivePathsWebpackPlugin);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var config = {
   devtool: '#cheap-module-eval-source-map',
   entry: {
-    manager: [managerEntry],
+    manager: [_path2.default.resolve(__dirname, '../client/manager')],
     preview: [_path2.default.resolve(__dirname, './error_enhancements'), 'webpack-hot-middleware/client?noInfo=true']
   },
   output: {
     path: _path2.default.join(__dirname, 'dist'),
-    filename: '[name].bundle.js',
-    publicPath: '/static/'
+    filename: 'static/[name].bundle.js',
+    publicPath: '/'
   },
-  plugins: [new _webpack2.default.optimize.OccurenceOrderPlugin(), new _webpack2.default.HotModuleReplacementPlugin()],
+  plugins: [new _webpack2.default.optimize.OccurenceOrderPlugin(), new _webpack2.default.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin2.default()],
   module: {
     loaders: [{
       test: /\.jsx?$/,
       loader: 'babel',
-      query: { presets: ['react', 'es2015', 'stage-0'] },
-      exclude: [_path2.default.resolve('./node_modules'), _path2.default.resolve(__dirname, 'node_modules')],
-      include: [_path2.default.resolve('./'), __dirname, _path2.default.resolve(__dirname, '../../src')]
+      query: require('./babel.js'),
+      include: _paths.includePaths
+    }, {
+      test: /\.css?$/,
+      include: _paths.includePaths,
+      loader: 'style!css!postcss'
+    }, {
+      test: /\.json$/,
+      include: _paths.includePaths,
+      loader: 'json'
+    }, {
+      test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
+      include: _paths.includePaths,
+      loader: 'file',
+      query: {
+        name: 'static/media/[name].[ext]'
+      }
+    }, {
+      test: /\.(mp4|webm)(\?.*)?$/,
+      include: _paths.includePaths,
+      loader: 'url',
+      query: {
+        limit: 10000,
+        name: 'static/media/[name].[ext]'
+      }
     }]
+  },
+  postcss: function postcss() {
+    return [_autoprefixer2.default];
   }
 };