react-styleguidist/lib/rsg-components/Preview/Preview.js

React components style guide generator

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { transform } from 'buble';
import PlaygroundError from 'rsg-components/PlaygroundError';
import Wrapper from 'rsg-components/Wrapper';
import splitExampleCode from '../../utils/splitExampleCode';

/* eslint-disable no-invalid-this, react/no-multi-comp */

var Fragment = React.Fragment ? React.Fragment : 'div';
var FragmentTag = React.Fragment ? 'React.Fragment' : "'div'";

var _compileCode = function _compileCode(code, config) {
	return transform(code, config).code;
};
var wrapCodeInFragment = function wrapCodeInFragment(code) {
	return '<' + FragmentTag + '>' + code + '</' + FragmentTag + '>;';
};

// Wrap everything in a React component to leverage the state management
// of this component

var PreviewComponent = function (_Component) {
	_inherits(PreviewComponent, _Component);

	function PreviewComponent() {
		var _ref;

		var _temp, _this, _ret;

		_classCallCheck(this, PreviewComponent);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
			args[_key] = arguments[_key];
		}

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = PreviewComponent.__proto__ || Object.getPrototypeOf(PreviewComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = _this.props.initialState, _this.setStateBinded = _this.setState.bind(_this), _temp), _possibleConstructorReturn(_this, _ret);
	}

	_createClass(PreviewComponent, [{
		key: 'render',
		value: function render() {
			return this.props.component(this.state, this.setStateBinded);
		}
	}]);

	return PreviewComponent;
}(Component);

PreviewComponent.propTypes = {
	component: PropTypes.func.isRequired,
	initialState: PropTypes.object.isRequired
};

var Preview = function (_Component2) {
	_inherits(Preview, _Component2);

	function Preview() {
		var _ref2;

		var _temp2, _this2, _ret2;

		_classCallCheck(this, Preview);

		for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
			args[_key2] = arguments[_key2];
		}

		return _ret2 = (_temp2 = (_this2 = _possibleConstructorReturn(this, (_ref2 = Preview.__proto__ || Object.getPrototypeOf(Preview)).call.apply(_ref2, [this].concat(args))), _this2), _this2.state = {
			error: null
		}, _this2.handleError = function (err) {
			_this2.unmountPreview();

			_this2.setState({
				error: err.toString()
			});

			console.error(err); // eslint-disable-line no-console
		}, _temp2), _possibleConstructorReturn(_this2, _ret2);
	}

	_createClass(Preview, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			// Clear console after hot reload, do not clear on the first load
			// to keep any warnings
			if (this.context.codeRevision > 0) {
				// eslint-disable-next-line no-console
				console.clear();
			}

			this.executeCode();
		}
	}, {
		key: 'shouldComponentUpdate',
		value: function shouldComponentUpdate(nextProps, nextState) {
			return this.state.error !== nextState.error || this.props.code !== nextProps.code;
		}
	}, {
		key: 'componentDidUpdate',
		value: function componentDidUpdate(prevProps) {
			if (this.props.code !== prevProps.code) {
				this.executeCode();
			}
		}
	}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
			this.unmountPreview();
		}

		// Eval the code to extract the value of the initial state

	}, {
		key: 'getExampleInitialState',
		value: function getExampleInitialState(compiledCode) {
			if (compiledCode.indexOf('initialState') === -1) {
				return {};
			}

			return this.props.evalInContext('\n\t\t\tvar state = {}, initialState = {};\n\t\t\ttry {\n\t\t\t\t' + compiledCode + ';\n\t\t\t} catch (err) {}\n\t\t\treturn initialState;\n\t\t')();
		}

		// Run example code and return the last top-level expression

	}, {
		key: 'getExampleComponent',
		value: function getExampleComponent(compiledCode) {
			return this.props.evalInContext('\n\t\t\tvar initialState = {};\n\t\t\t' + compiledCode + '\n\t\t');
		}
	}, {
		key: 'unmountPreview',
		value: function unmountPreview() {
			if (this.mountNode) {
				ReactDOM.unmountComponentAtNode(this.mountNode);
			}
		}
	}, {
		key: 'executeCode',
		value: function executeCode() {
			var _this3 = this;

			this.setState({
				error: null
			});

			var code = this.props.code;

			if (!code) {
				return;
			}

			var compiledCode = this.compileCode(code);
			if (!compiledCode) {
				return;
			}

			var _splitExampleCode = splitExampleCode(compiledCode),
			    head = _splitExampleCode.head,
			    example = _splitExampleCode.example;

			var initialState = this.getExampleInitialState(head);
			var exampleComponent = this.getExampleComponent(example);
			var wrappedComponent = React.createElement(
				Wrapper,
				{ onError: this.handleError },
				React.createElement(PreviewComponent, { component: exampleComponent, initialState: initialState })
			);

			window.requestAnimationFrame(function () {
				_this3.unmountPreview();
				try {
					ReactDOM.render(wrappedComponent, _this3.mountNode);
				} catch (err) {
					_this3.handleError(err);
				}
			});
		}
	}, {
		key: 'compileCode',
		value: function compileCode(code) {
			try {
				var wrappedCode = code.trim().match(/^</) ? wrapCodeInFragment(code) : code;
				return _compileCode(wrappedCode, this.context.config.compilerConfig);
			} catch (err) {
				this.handleError(err);
			}
			return false;
		}
	}, {
		key: 'render',
		value: function render() {
			var _this4 = this;

			var error = this.state.error;

			return React.createElement(
				Fragment,
				null,
				React.createElement('div', { ref: function ref(_ref3) {
						return _this4.mountNode = _ref3;
					} }),
				error && React.createElement(PlaygroundError, { message: error })
			);
		}
	}]);

	return Preview;
}(Component);

Preview.propTypes = {
	code: PropTypes.string.isRequired,
	evalInContext: PropTypes.func.isRequired
};
Preview.contextTypes = {
	config: PropTypes.object.isRequired,
	codeRevision: PropTypes.number.isRequired
};
export default Preview;