update components and webpack config generator

Author: robhrt7

src/components/Playground/Playground.js

@@ -1,14 +1,14 @@
 import { Component, PropTypes } from 'react';
 import Editor from 'components/Editor';
 import Preview from 'components/Preview';
-
-import s from './Playground.css';
+import ReactDOM from 'react-dom';
 
 export default class Playground extends Component {
 	static propTypes = {
 		highlightTheme: PropTypes.string.isRequired,
 		code: PropTypes.string.isRequired,
 		evalInContext: PropTypes.func.isRequired,
+		index: PropTypes.string.isRequired
 	}
 
 	constructor(props) {
@@ -24,6 +24,14 @@ export default class Playground extends Component {
 		});
 	}
 
+	componentDidMount() {
+		this.renderEditor(this.props);
+	}
+
+	componentDidUpdate() {
+		this.renderEditor(this.props);
+	}
+
 	componentWillReceiveProps(nextProps) {
 		let { code } = nextProps;
 		if (code) {
@@ -33,19 +41,32 @@ export default class Playground extends Component {
 		}
 	}
 
+	getEditorContainer() {
+		return document.querySelector('.source_styleguidist_code__' + this.props.index);
+	}
+
+	getEditorElement() {
+		let { highlightTheme } = this.props;
+		let { code } = this.state;
+
+		return (
+			<Editor code={code} highlightTheme={highlightTheme} onChange={this.handleChange}/>
+		);
+	}
+
+	renderEditor() {
+		var container = this.getEditorContainer();
+
+		if (container) {
+			ReactDOM.unstable_renderSubtreeIntoContainer(this, this.getEditorElement(), this.getEditorContainer());
+		}
+	}
+
 	render() {
 		let { code } = this.state;
-		let { highlightTheme } = this.props;
 
 		return (
-			<div className={s.root}>
-				<div className={s.preview}>
-					<Preview code={code} evalInContext={this.props.evalInContext}/>
-				</div>
-				<div className={s.editor}>
-					<Editor code={code} highlightTheme={highlightTheme} onChange={this.handleChange}/>
-				</div>
-			</div>
+			<Preview code={code} evalInContext={this.props.evalInContext}/>
 		);
 	}
 }

src/make-webpack-config.js

@@ -1,7 +1,6 @@
 var fs = require('fs');
 var path = require('path');
 var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var AdvancedVariables = require('postcss-advanced-variables');
 var merge = require('webpack-merge');
@@ -30,7 +29,8 @@ module.exports = function(env) {
 	var webpackConfig = {
 		output: {
 			path: config.styleguideDir,
-			filename: 'build/bundle.js'
+			publicPath: '/',
+			filename: config.bundlePath
 		},
 		resolve: {
 			root: path.join(__dirname),
@@ -51,11 +51,6 @@ module.exports = function(env) {
 			]
 		},
 		plugins: [
-			new HtmlWebpackPlugin({
-				title: config.title,
-				template: config.template,
-				inject: true
-			}),
 			new webpack.DefinePlugin({
 				'process.env': {
 					NODE_ENV: JSON.stringify(env)

src/utils/config.js

@@ -1,60 +1,82 @@
-var fs = require('fs');
 var path = require('path');
-var findup = require('findup');
+var fs = require('fs');
 var minimist = require('minimist');
 var prettyjson = require('prettyjson');
-var _ = require('lodash');
 var utils = require('./server');
+var _ = require('lodash');
+
+var sourceJSUtils;
+var globalConfig;
+var pathToSourceJSUser = '';
+
+if (global.pathToApp) {
+	sourceJSUtils = require(path.join(global.pathToApp, 'core/lib/utils'));
+	globalConfig = global.opts.plugins && global.opts.plugins.reactStyleguidist ? global.opts.plugins.reactStyleguidist : {};
+
+	pathToSourceJSUser = global.userPath;
+}
+
+var config = {
+	enabled: true,
+	bundlePath: 'build/bundle.js',
+
+	// Public object is exposed to Front-end via options API.
+	public: {},
+
+	// Original styleguidist options
+	rootDir: path.join(pathToSourceJSUser, 'specs'),
+	components: './**/*.js',
+	styleguideDir: path.join(pathToSourceJSUser, 'build/styleguide'),
 
-var CONFIG_FILENAME = 'styleguide.config.js';
-var DEFAULT_CONFIG = {
-	rootDir: null,
-	components: null,
-	title: 'Style guide',
-	styleguideDir: 'styleguide',
-	template: path.join(__dirname, '../templates/index.html'),
-	serverHost: 'localhost',
-	serverPort: 3000,
 	highlightTheme: 'base16-light',
 	verbose: false,
 	getExampleFilename: function(componentpath) {
-		return path.join(path.dirname(componentpath), 'Readme.md');
+		return path.join(path.dirname(componentpath), 'readme.md');
 	},
 	updateWebpackConfig: null
+
+	// Not used in SourceJS integration
+	// title: 'Style guide',
+	// template: path.join(__dirname, '../templates/index.html'),
+	// serverHost: 'localhost',
+	// serverPort: 3000,
 };
 
+if (sourceJSUtils) {
+	sourceJSUtils.extendOptions(config, globalConfig);
+}
+
 function readConfig() {
 	var argv = minimist(process.argv.slice(2));
 	var configFilepath = findConfig(argv);
+	var customConfig = {};
+	var options = config;
 
-	var options = require(configFilepath);
-
-	validateConfig(options);
+	if (configFilepath) {
+		customConfig = require(configFilepath);
+	}
 
-	var configDir = path.dirname(configFilepath);
-	var rootDir = path.resolve(configDir, options.rootDir);
+	options = _.merge({}, options, customConfig);
 
-	if (rootDir === configDir) {
-		throw Error('Styleguidist: "rootDir" should not point to a folder with the Styleguidist config and node_modules folder');
-	}
-	if (!utils.isDirectoryExists(rootDir)) {
-		throw Error('Styleguidist: "rootDir" directory not found: ' + rootDir);
+	if (customConfig) {
+		options.rootDir = path.resolve(path.dirname(configFilepath), options.rootDir);
 	}
 
-	options = _.merge({}, DEFAULT_CONFIG, options);
-	options = _.merge({}, options, {
-		verbose: !!argv.verbose,
-		rootDir: rootDir,
-		styleguideDir: path.resolve(configDir, options.styleguideDir)
-	});
+	validateConfig(options);
 
 	if (options.verbose) {
 		console.log();
-		console.log('Using config file:', configFilepath);
 		console.log(prettyjson.render(options));
 		console.log();
 	}
 
+	if (options.rootDir === global.userPath) {
+		throw Error('Styleguidist: "rootDir" should not point to folder with node_modules');
+	}
+	if (!utils.isDirectoryExists(options.rootDir)) {
+		throw Error('Styleguidist: "rootDir" directory not found: ' + options.rootDir);
+	}
+
 	return options;
 }
 
@@ -69,19 +91,6 @@ function findConfig(argv) {
 
 		return configFilepath;
 	}
-	else {
-		// Search config file in all parent directories
-
-		var configDir;
-		try {
-			configDir = findup.sync(__dirname, CONFIG_FILENAME);
-		}
-		catch (e) {
-			throw Error('Styleguidist config not found: ' + CONFIG_FILENAME + '.');
-		}
-
-		return path.join(configDir, CONFIG_FILENAME);
-	}
 }
 
 function validateConfig(options) {

src/utils/utils.js

@@ -1,16 +1,21 @@
 export function setComponentsNames(components) {
-	components.map((component) => {
+	Object.keys(components).forEach(key => {
+		var component = components[key];
+
 		let module = component.module;
 		component.name = module.displayName || module.name;
 		if (!component.name) {
 			throw Error(`Cannot detect component name for ${component.filepath}`);
 		}
 	});
+
 	return components;
 }
 
 export function globalizeComponents(components) {
-	components.map((component) => {
+	Object.keys(components).forEach(key => {
+		var component = components[key];
+
 		global[component.name] = component.module;
 	});
 }

test/examples.loader.spec.js

@@ -70,17 +70,6 @@ describe('examples loader', () => {
 		});
 	});
 
-	describe('readExamples', () => {
-		it('should separate code and html chunks', () => {
-			let examplesMarkdown = '# header\n\n    <div />\n\ntext';
-			let examples = examplesLoader.readExamples(examplesMarkdown);
-			expect(examples).to.have.length(3);
-			expect(examples[0].type).to.equal('html');
-			expect(examples[1].type).to.equal('code');
-			expect(examples[2].type).to.equal('html');
-		});
-	});
-
 	describe('loader', () => {
 		it('should return valid, parsable js', () => {
 			let exampleMarkdown = '# header\n\n    <div />\n\ntext';