Feat: Config option to debounce preview rendering while live editing

PR styleguidist#227

Author: sapegin

docs/Configuration.md

@@ -108,6 +108,10 @@ You can change settings in the `styleguide.config.js` file in your project’s r
   Type: `String`, default: `base16-light`<br>
   [CodeMirror theme](http://codemirror.net/demo/theme.html) name to use for syntax highlighting in examples.
 
+* **`previewDelay`**<br>
+  Type: `Number`, default: 500<br>
+  Debounce time used before render the changes from the editor. While inserting code the preview will not be updated.
+
 * **`getExampleFilename`**<br>
   Type: `Function`, default: finds `Readme.md` in the component folder<br>
   Function that returns examples file path for a given component path.

loaders/styleguide.loader.js

@@ -141,6 +141,7 @@ module.exports.pitch = function() {
 		'title',
 		'highlightTheme',
 		'showCode',
+		'previewDelay',
 	]);
 
 	const code = toCode({

scripts/config.js

@@ -8,6 +8,8 @@ const findup = require('findup');
 const semverUtils = require('semver-utils');
 const prettyjson = require('prettyjson');
 const merge = require('lodash/merge');
+const isFinite = require('lodash/isFinite');
+const isUndefined = require('lodash/isUndefined');
 const utils = require('./utils/utils');
 const consts = require('./consts');
 const StyleguidistError = require('./utils/error');
@@ -28,6 +30,7 @@ const DEFAULT_CONFIG = {
 	serverHost: 'localhost',
 	serverPort: 3000,
 	highlightTheme: 'base16-light',
+	previewDelay: 500,
 	verbose: false,
 	getExampleFilename: componentpath => path.join(path.dirname(componentpath), 'Readme.md'),
 	getComponentPathLine: componentpath => componentpath,
@@ -170,6 +173,9 @@ function validateConfig(config) {
 		throw new StyleguidistError('Styleguidist: "defaultExample" option must be either false, true, ' +
 			'or a string path to a markdown file.');
 	}
+	if (!isUndefined(config.previewDelay) && !isFinite(config.previewDelay)) {
+		throw new StyleguidistError('Styleguidist: "previewDelay" option must be a positive number.');
+	}
 }
 
 /**

src/rsg-components/Playground/Playground.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import debounce from 'lodash/debounce';
 import PlaygroundRenderer from 'rsg-components/Playground/PlaygroundRenderer';
 
 export default class Playground extends Component {
@@ -17,6 +18,7 @@ export default class Playground extends Component {
 		super(props, context);
 		const { code } = props;
 		const { showCode } = context.config;
+
 		this.state = {
 			code,
 			showCode,
@@ -37,10 +39,35 @@ export default class Playground extends Component {
 		);
 	}
 
+	componentWillUnmount() {
+		// clear pending changes before unmount
+		if (this.queuedChange) {
+			this.queuedChange.cancel();
+		}
+	}
+
 	handleChange(code) {
-		this.setState({
+		// clear pending changes before proceed
+		if (this.queuedChange) {
+			this.queuedChange.cancel();
+		}
+
+		// stored update action
+		const queuedChange = () => this.setState({
 			code,
 		});
+
+		const { previewDelay } = context.config;
+
+		if (previewDelay) {
+			// if previewDelay is enabled debounce the code
+			this.queuedChange = debounce(queuedChange, previewDelay);
+			this.queuedChange();
+		}
+		else {
+			// otherwise execute it
+			queuedChange();
+		}
 	}
 
 	handleCodeToggle() {