fix update sample issue

playground/CMLint.js

@@ -1,12 +1,5 @@
 define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror'], function (React, _, $, CodeMirror) {
     'use strict';
-    //var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
-    //    lineNumbers: true,
-    //    viewportMargin: Infinity,
-    //    gutters: ['CodeMirror-linenumbers', 'GUTTER_ID']
-    //});
-    //
-    //editor.markText({line: 1, ch: 1}, {line: 1, ch: 10}, {className: 'editor-error'});
 
     function annotationTooltip(ann) {
         var severity = ann.severity;

playground/playground-fiddle.rt

@@ -1,26 +1,22 @@
 <!--suppress CheckEmptyScriptTag -->
 <rt-require dependency="./CodeMirrorEditor" as="CodeEditor"/>
-<!--suppress ALL -->
 <div class="playground">
     <div class="fiddle-row">
         <div class="code-area" id="area-rt">
-            <!--style="border: {this.validHTML ? '' : '2px solid red'};"-->
             <CodeEditor ref="editorRT" id="editor-rt" class="large-text-area"
                         value="{this.state.templateHTML}"
                         mode="html"
-                        onChange="(evt) => this.setState({'templateHTML':evt.target.value})" />
+                        onChange="(e)=>this.setState({templateHTML:e.target.value})" />
         </div>
         <div class="code-area" id="area-code">
-            <!--style="border: {this.validProps ? '' : '2px solid red'};"-->
             <CodeEditor ref="editorCode" id="editor-code" class="large-text-area"
                         value="{this.state.templateProps}"
                         mode="javascript"
-                        onChange="(evt) => this.setState({'templateProps':evt.target.value})" />
+                        onChange="(e)=>this.setState({templateProps:e.target.value})" />
         </div>
     </div>
     <div class="fiddle-row">
         <div class="code-area" id="area-generated">
-            <!--style="border:0px none black;"-->
             <CodeEditor id="editor-generated" class="large-text-area"
                         ref="editorGenerated"
                         value="{this.templateSource}"
@@ -30,8 +26,7 @@
         <div class="code-area" id="area-result">
         <!--<div id="result-container" class="result-area">-->
             <div id="result-area" key="result-area" class="sample-view">
-                <!--<h2>Preview:</h2>-->
+                <form class="result-area-form" ref="mount" onSubmit="(e)=>e.preventDefault();">
-                <form class="result-area-form" ref="mount" onSubmit="(e) => e.preventDefault();">
                     <!--<this.sample key="sample">-->
                     <!--</this.sample>-->
                 </form>

playground/playground-fiddle.rt.js

@@ -4,11 +4,11 @@ define([
     './CodeMirrorEditor'
 ], function (React, _, CodeEditor) {
     'use strict';
-    function onChange1(evt) {
+    function onChange1(e) {
-        this.setState({ 'templateHTML': evt.target.value });
+        this.setState({ templateHTML: e.target.value });
     }
-    function onChange2(evt) {
+    function onChange2(e) {
-        this.setState({ 'templateProps': evt.target.value });
+        this.setState({ templateProps: e.target.value });
     }
     function onSubmit3(e) {
         e.preventDefault();
@@ -17,7 +17,7 @@ define([
         return React.createElement('div', { 'className': 'playground' }, React.createElement('div', { 'className': 'fiddle-row' }, React.createElement('div', {
             'className': 'code-area',
             'id': 'area-rt'
-        }    /* style="border: {this.validHTML ? '' : '2px solid red'};" */, React.createElement(CodeEditor, {
+        }, React.createElement(CodeEditor, {
             'ref': 'editorRT',
             'id': 'editor-rt',
             'className': 'large-text-area',
@@ -27,7 +27,7 @@ define([
         })), React.createElement('div', {
             'className': 'code-area',
             'id': 'area-code'
-        }    /* style="border: {this.validProps ? '' : '2px solid red'};" */, React.createElement(CodeEditor, {
+        }, React.createElement(CodeEditor, {
             'ref': 'editorCode',
             'id': 'editor-code',
             'className': 'large-text-area',
@@ -37,7 +37,7 @@ define([
         }))), React.createElement('div', { 'className': 'fiddle-row' }, React.createElement('div', {
             'className': 'code-area',
             'id': 'area-generated'
-        }    /* style="border:0px none black;" */, React.createElement(CodeEditor, {
+        }, React.createElement(CodeEditor, {
             'id': 'editor-generated',
             'className': 'large-text-area',
             'ref': 'editorGenerated',
@@ -51,7 +51,7 @@ define([
             'id': 'result-area',
             'key': 'result-area',
             'className': 'sample-view'
-        }    /* <h2>Preview:</h2> */, React.createElement('form', {
+        }, React.createElement('form', {
             'className': 'result-area-form',
             'ref': 'mount',
             'onSubmit': onSubmit3.bind(this)

playground/playground.js

@@ -17,13 +17,10 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
             code = window.reactTemplates.convertTemplateToReact(html.trim().replace(/\r/g, ''), {modules: 'none', name: name});
             clearMessage(editor);
         } catch (e) {
-            var msg;
             if (e.name === 'RTCodeError') {
                 //index: -1 line: -1 message: "Document should have a root element" name: "RTCodeError"
-                msg = e.message + ', line: ' + e.line;
                 editor.annotate({line: e.line, message: e.message, index: e.index});
             } else {
-                msg = e.message;
                 editor.annotate({line: 1, message: e.message});
             }
             //showMessage(editor, msg);
@@ -34,23 +31,13 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
 
     function showMessage(editor, msg) {
         if (editor && editor.showMessage) {
-            //editor.showMessage(msg);
             editor.annotate({line: 1, message: msg});
-            //calcSize();
-        }
-    }
-
-    function calcSize() {
-        if (window.calcSize) {
-            window.calcSize();
         }
     }
 
     function clearMessage(editor) {
         if (editor && editor.clearMessage) {
-            //editor.clearMessage();
             editor.clearAnnotations();
-            //calcSize();
         }
     }
 
@@ -165,13 +152,12 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
             }
         },
         updateSample: function (state) {
-            var mountNode = this.refs.mount.getDOMNode();
 
             //try {
             //    React.unmountComponentAtNode(mountNode);
             //} catch (e) { }
 
-            this.generateCode();
+            this.generateCode(state);
             //this.sampleFunc = generateTemplateFunction(this.templateSource);
             //this.validHTML = this.sampleFunc !== emptyFunc;
             this.validHTML = true;
@@ -185,14 +171,12 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
                 //    throw 'failed to eval';
                 //}
                 this.sample = eval('(function () {' + this.templateSource + '\n' + state.templateProps + '\n return React.createElement(' + state.name + ');})()');
-                if (this.sample) {
+
-                    React.render(this.sample, mountNode);
-                }
                 clearMessage(this.refs.editorCode);
             } catch (e) {
                 //classBase = {};
-                this.rtMessage = e.toString();
                 this.validProps = false;
+                this.sample = null;
                 var editor = this.refs.editorCode;
                 this.setTimeout(function() {
                     showMessage(editor, e.message);
@@ -231,8 +215,17 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
                 this.calcSize();
             }
             this.updateSample(this.state);
+            this.renderSample();
+        },
+        renderSample: function () {
+            var mountNode = this.refs.mount.getDOMNode();
+            if (this.sample) {
+                React.render(this.sample, mountNode);
+            }
+        },
+        componentDidUpdate: function () {
+            this.renderSample();
         },
-
         componentWillUnmount: function(){
             window.removeEventListener('resize', this.calcSize);
         },
@@ -255,12 +248,12 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
             }
         },
         render: function () {
-            this.generateCode();
+            this.generateCode(this.state);
             var template = this.props.fiddle ? pgFiddleTemplate : playgroundTemplate;
             return template.apply(this);
         },
-        generateCode: function () {
+        generateCode: function (state) {
-            this.templateSource = generateTemplateSource(this.state.templateHTML, this.refs.editorRT, window.reactTemplates.normalizeName(this.state.name) + 'RT');
+            this.templateSource = generateTemplateSource(state.templateHTML, this.refs.editorRT, window.reactTemplates.normalizeName(state.name) + 'RT');
         }
     });