Build static html storybooks

storybookjs · Apr 11, 2016 · 115a566 · 115a566
1 parent adfb72a
commit 115a566
Show file tree

Hide file tree

Showing 13 changed files with 583 additions and 106 deletions.
diff --git a/dist/builder/build.js b/dist/builder/build.js
@@ -0,0 +1,139 @@
+#!/usr/bin/env node
+'use strict';
+
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _webpack = require('webpack');
+
+var _webpack2 = _interopRequireDefault(_webpack);
+
+var _commander = require('commander');
+
+var _commander2 = _interopRequireDefault(_commander);
+
+var _path = require('path');
+
+var _path2 = _interopRequireDefault(_path);
+
+var _fs = require('fs');
+
+var _fs2 = _interopRequireDefault(_fs);
+
+var _shelljs = require('shelljs');
+
+var _shelljs2 = _interopRequireDefault(_shelljs);
+
+var _package = require('../../package.json');
+
+var _package2 = _interopRequireDefault(_package);
+
+var _webpack3 = require('./webpack.config');
+
+var _webpack4 = _interopRequireDefault(_webpack3);
+
+var _index = require('../server/index.html');
+
+var _index2 = _interopRequireDefault(_index);
+
+var _iframe = require('../server/iframe.html');
+
+var _iframe2 = _interopRequireDefault(_iframe);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+process.env.NODE_ENV = 'production';
+
+var logger = console;
+
+_commander2.default.version(_package2.default.version).option('-s, --static-dir [dir-name]', 'Directory where to load static files from').option('-o, --output-dir [dir-name]', 'Directory where to store built files').option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from').parse(process.argv);
+
+// create the output directory if not exists
+var outputDir = _commander2.default.outputDir || './storybook-build';
+var outputDirPath = _path2.default.resolve(outputDir);
+_shelljs2.default.mkdir('-p', _path2.default.resolve(outputDirPath, 'static'));
+
+if (_commander2.default.staticDir) {
+  var staticPath = _path2.default.resolve(_commander2.default.staticDir);
+  if (_fs2.default.existsSync(staticPath)) {
+    logger.log('=> Copying static files from: ' + _commander2.default.staticDir);
+    _shelljs2.default.cp('-r', staticPath + '/', outputDirPath);
+  } else {
+    logger.error('Error: no such directory to load static files: ' + staticPath);
+    process.exit(-1);
+  }
+}
+
+// add config path to the entry
+var configDir = _commander2.default.configDir || './.storybook';
+var configDirPath = _path2.default.resolve(configDir);
+
+// load babelrc file.
+var babelrcPath = _path2.default.resolve('./.babelrc');
+if (_fs2.default.existsSync(babelrcPath)) {
+  logger.info('=> Using custom .babelrc configurations.');
+  var babelrcContent = _fs2.default.readFileSync(babelrcPath);
+  try {
+    var babelrc = JSON.parse(babelrcContent);
+    _webpack4.default.module.loaders[0].query = babelrc;
+  } catch (ex) {
+    logger.error('=> Error parsing .babelrc file: ' + ex.message);
+    throw ex;
+  }
+}
+
+var storybookConfigPath = _path2.default.resolve(configDirPath, 'config.js');
+if (!_fs2.default.existsSync(storybookConfigPath)) {
+  logger.error('=> Create a storybook config file in "' + configDir + '/config.js".\n');
+  process.exit(0);
+}
+_webpack4.default.entry.preview.push(storybookConfigPath);
+
+// load custom webpack configurations
+var customConfigPath = _path2.default.resolve(configDirPath, 'webpack.config.js');
+var finalConfig = _webpack4.default;
+if (_fs2.default.existsSync(customConfigPath)) {
+  var customConfig = require(customConfigPath);
+  logger.info('=> Loading custom webpack config.');
+  finalConfig = (0, _extends3.default)({}, customConfig, _webpack4.default, {
+    // We need to use our and custom plugins.
+    plugins: [].concat((0, _toConsumableArray3.default)(_webpack4.default.plugins), (0, _toConsumableArray3.default)(customConfig.plugins || [])),
+    module: (0, _extends3.default)({}, _webpack4.default.module, {
+      // We need to use our and custom loaders.
+      loaders: [].concat((0, _toConsumableArray3.default)(_webpack4.default.module.loaders), (0, _toConsumableArray3.default)(customConfig.module.loaders || []))
+    })
+  });
+}
+
+// write both the storybook UI and IFRAME HTML files to destination path
+_fs2.default.writeFileSync(_path2.default.resolve(outputDirPath, 'index.html'), (0, _index2.default)());
+_fs2.default.writeFileSync(_path2.default.resolve(outputDirPath, 'iframe.html'), (0, _iframe2.default)());
+
+// compile all other resources and write them to disk
+// TODO this section of the code needs to be verified
+//      by running with a few different scenarios.
+(0, _webpack2.default)(finalConfig).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) {
+      // TODO learn more about "RawSource"
+      var _source = asset.children[0]._value;
+      var _dstPath = _path2.default.resolve(outputDirPath, 'static/' + filename);
+      _fs2.default.writeFileSync(_dstPath, _source);
+      continue;
+    }
+
+    var source = asset._value;
+    var dstPath = _path2.default.resolve(outputDirPath, 'static/' + filename);
+    _fs2.default.writeFileSync(dstPath, source);
+  }
+});
diff --git a/dist/builder/webpack.config.js b/dist/builder/webpack.config.js
@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _path = require('path');
+
+var _path2 = _interopRequireDefault(_path);
+
+var _webpack = require('webpack');
+
+var _webpack2 = _interopRequireDefault(_webpack);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var config = {
+  devtool: 'cheap-module-source-map',
+  entry: {
+    admin: [_path2.default.resolve(__dirname, '../client/init_admin')],
+    preview: [_path2.default.resolve(__dirname, '../client/init_preview')]
+  },
+  output: {
+    // path: path.join(__dirname, 'dist'),
+    path: '/tmp/test',
+    filename: '[name].bundle.js',
+    publicPath: '/static/'
+  },
+  plugins: [new _webpack2.default.optimize.OccurenceOrderPlugin()],
+  module: {
+    loaders: [{
+      test: /\.jsx?$/,
+      loader: 'babel',
+      query: { presets: ['react', 'es2015', 'stage-2'] },
+      exclude: [_path2.default.resolve('./node_modules'), _path2.default.resolve(__dirname, 'node_modules')],
+      include: [_path2.default.resolve('./'), __dirname]
+    }]
+  }
+};
+
+exports.default = config;
diff --git a/dist/client/ui/admin.js b/dist/client/ui/admin.js
@@ -94,7 +94,7 @@ function getIframe(data) {
 
   return _react2.default.createElement('iframe', {
     style: iframeStyle,
-    src: '/iframe?' + queryString
+    src: '/iframe.html?' + queryString
   });
 }
 

diff --git a/dist/server/build.js b/dist/server/build.js
@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+'use strict';
+
+var _webpack = require('webpack');
+
+var _webpack2 = _interopRequireDefault(_webpack);
+
+var _commander = require('commander');
+
+var _commander2 = _interopRequireDefault(_commander);
+
+var _path = require('path');
+
+var _path2 = _interopRequireDefault(_path);
+
+var _fs = require('fs');
+
+var _fs2 = _interopRequireDefault(_fs);
+
+var _shelljs = require('shelljs');
+
+var _shelljs2 = _interopRequireDefault(_shelljs);
+
+var _package = require('../../package.json');
+
+var _package2 = _interopRequireDefault(_package);
+
+var _webpackConfig = require('./webpack.config.prod');
+
+var _webpackConfig2 = _interopRequireDefault(_webpackConfig);
+
+var _config = require('./config');
+
+var _config2 = _interopRequireDefault(_config);
+
+var _index = require('./index.html');
+
+var _index2 = _interopRequireDefault(_index);
+
+var _iframe = require('./iframe.html');
+
+var _iframe2 = _interopRequireDefault(_iframe);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+process.env.NODE_ENV = 'production';
+
+// avoid ESLint errors
+var logger = console;
+
+_commander2.default.version(_package2.default.version).option('-s, --static-dir [dir-name]', 'Directory where to load static files from').option('-o, --output-dir [dir-name]', 'Directory where to store built files').option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from').parse(process.argv);
+
+// create output directory (and the static dir) if not exists
+var outputDir = _commander2.default.outputDir || './storybook-static';
+_shelljs2.default.mkdir('-p', _path2.default.resolve(outputDir, 'static'));
+
+// Write both the storybook UI and IFRAME HTML files to destination path.
+_fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'index.html'), (0, _index2.default)());
+_fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'iframe.html'), (0, _iframe2.default)());
+
+// copy all static files
+if (_commander2.default.staticDir) {
+  if (!_fs2.default.existsSync(_commander2.default.staticDir)) {
+    logger.error('Error: no such directory to load static files: ' + _commander2.default.staticDir);
+    process.exit(-1);
+  }
+  logger.log('=> Copying static files from: ' + _commander2.default.staticDir);
+  _shelljs2.default.cp('-r', _commander2.default.staticDir + '/', outputDir);
+}
+
+// Build the webpack configuration using the `baseConfig`
+// custom `.babelrc` file and `webpack.config.js` files
+var configDir = _commander2.default.configDir || './.storybook';
+var config = (0, _config2.default)(_webpackConfig2.default, configDir);
+
+// compile all resources with webpack and write them to the disk
+// TODO make sure this section of code does what it says it does
+(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, 'static/' + filename);
+      _fs2.default.writeFileSync(_dstPath, _source);
+      continue;
+    }
+
+    var source = asset._value;
+    var dstPath = _path2.default.resolve(outputDir, 'static/' + filename);
+    _fs2.default.writeFileSync(dstPath, source);
+  }
+});
diff --git a/dist/server/config.js b/dist/server/config.js
@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+exports.default = function (baseConfig, configDir) {
+  var config = baseConfig;
+
+  // if user has a .babelrc file in current directory
+  // use that to extend webpack configurations
+  if (_fs2.default.existsSync('./.babelrc')) {
+    var content = _fs2.default.readFileSync('./.babelrc');
+    try {
+      var babelrc = JSON.parse(content);
+      config.module.loaders[0].query = babelrc;
+    } catch (e) {
+      logger.error('=> Error parsing .babelrc file: ' + e.message);
+      throw e;
+    }
+  }
+
+  // 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');
+  if (!_fs2.default.existsSync(storybookConfigPath)) {
+    var err = new Error('=> Create a storybook config file in "' + configDir + '/config.js".');
+    throw err;
+  }
+  config.entry.preview.push(storybookConfigPath);
+
+  // Check whether user has a custom webpack config file and
+  // return the (extended) base configuration if it's not available.
+  var customConfigPath = _path2.default.resolve(configDir, 'webpack.config.js');
+  if (!_fs2.default.existsSync(customConfigPath)) {
+    return config;
+  }
+
+  var customConfig = require(customConfigPath);
+  logger.info('=> Loading custom webpack config.');
+
+  return (0, _extends3.default)({}, customConfig, config, {
+    // We need to use our and custom plugins.
+    plugins: [].concat((0, _toConsumableArray3.default)(config.plugins), (0, _toConsumableArray3.default)(customConfig.plugins || [])),
+    module: (0, _extends3.default)({}, config.module, {
+      // We need to use our and custom loaders.
+      loaders: [].concat((0, _toConsumableArray3.default)(config.module.loaders), (0, _toConsumableArray3.default)(customConfig.module.loaders || []))
+    })
+  });
+};
+
+var _fs = require('fs');
+
+var _fs2 = _interopRequireDefault(_fs);
+
+var _path = require('path');
+
+var _path2 = _interopRequireDefault(_path);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// avoid ESLint errors
+var logger = console;
+
+// `baseConfig` is a webpack configuration bundled with storybook.
+// React Storybook will look in the `configDir` directory
+// (inside working directory) if a config path is not provided.