setState doesn't trigger rerender

Readme.md

@@ -138,8 +138,7 @@ Code examples in Markdown use the ES6+JSX syntax. They can access all the compon
 You can also `require` other modules (e.g. mock data that you use in your unit tests) from examples in Markdown:
 
 ```js
-const mockData = require('./mocks');
-<Message content={mockData.hello}/>
+<Message content={require('./mocks').hello}/>
 ```
 
 As an utility, also the [lodash](https://lodash.com/) library is available globally as `_`.
@@ -159,7 +158,7 @@ Each example has its own state that you can access at the `state` variable and
 If you want to set the default state you can do:
 
 ```js
-'key' in state || setState({key: 42});
+setState({key: 42});
 ```
 
 You *can* use `React.createClass` in your code examples, but if you need a more complex demo it’s often a good idea to define it in a separate JavaScript file instead and then just `require` it in Markdown.

loaders/examples.loader.js

@@ -98,9 +98,9 @@ function examplesLoader(source, map) {
 		'}',
 		'module.exports = ' + JSON.stringify(examples).replace(
 			new RegExp(_.escapeRegExp(JSON.stringify(evalPlaceholder)), 'g'),
-			'function(code, setState) {' +
-			'   var require = requireInRuntime;' +
-			'   return eval(code);' +
+			'function(code) {' +
+			'   var func = new Function (\"require\", \"state\", \"setState\", \"__initialStateCB\", code);' +
+			'		return func.bind(null, requireInRuntime);' +
 			'}'
 		) + ';'
 	].join('\n');

src/rsg-components/Preview/Preview.js

@@ -31,11 +31,6 @@ export default class Preview extends Component {
 		}
 	}
 
-	setComponentState(newState) {
-		this.componentState = {...this.componentState, ...newState};
-		setTimeout(this.executeCode.bind(this), 0);
-	}
-
 	compileCode(code) {
 		return transform(code, {
 			presets: ['es2015', 'react', 'stage-0']
@@ -57,15 +52,65 @@ export default class Preview extends Component {
 		}
 
 		try {
-			code = `
-				const state = Object.freeze(${JSON.stringify(this.componentState)});
-				${code}
+			let compiledCode = this.compileCode(this.props.code);
+
+			// the code contains the setup of the state and the react component to render.
+			// we split the setup of the state and the react component;
+
+			const splitIndex = compiledCode.indexOf('React.createElement');
+
+			// initiate state and set with the callback in the bottom component;
+			const initCode = `
+				var initialState = {};
+				${compiledCode.substring(0, splitIndex)}
+				__initialStateCB(initialState);
+			`;
+			// evalInContext returns a function which takes state, setState and a callback to handle the
+			// initial state and returns the evaluated code
+			const initial = this.props.evalInContext(initCode);
+
+			// 1) setup initialState so that we don't get an error;
+			// 2) use require data or make other setup for the example component;
+			// 3) return the example component
+			const renderCode = `
+				var initialState = {};
+				${compiledCode.substring(0, splitIndex)}
+				return ${compiledCode.substring(splitIndex)};
 			`;
-			let compiledCode = this.compileCode(code);
-			let component = this.props.evalInContext(compiledCode, this.setComponentState.bind(this));
+			const render = this.props.evalInContext(renderCode);
+
+			// wrap everything in a react component, such that we can leverage the state management of this component
+			class PreviewComponent extends React.Component {
+
+				constructor(props) {
+					super(props);
+
+					const state = {};
+					const initialStateCB = (initialState) => {
+						Object.assign(state, initialState);
+					};
+					const setStateError = (partialState) => {
+						const err = 'Calling setState to setup the initial state is deprecated. Use\ninitialState = ';
+						Object.assign(state, {error: err + JSON.stringify(partialState) + ';'});
+					};
+					initial({}, setStateError, initialStateCB);
+					this.state = state;
+				}
+
+				render() {
+					if (this.state.error) {
+						return <pre className={s.playgroundError}>{this.state.error}</pre>;
+					}
+					const setState = partialState => this.setState(partialState);
+					const state = this.state;
+					// pass through props from the wrapper component
+					return React.cloneElement(render(state, setState, null), this.props);
+				}
+			}
+
 			let wrappedComponent = (
 				<Wrapper>
-					{component}
+					<PreviewComponent />
 				</Wrapper>
 			);
 			ReactDOM.render(wrappedComponent, mountNode);