playground version 0.0002

playground/main.js

@@ -27,26 +27,59 @@ function generateTemplateFunction(html) {
     } catch (e) {
         return emptyFunc
     }
-
 }
 
+function generateRenderFunc(renderFunc) {
+    return function() {
+        var res = null;
+        try {
+            res = renderFunc.apply(this)
+        } catch (e) {
+
+        }
+        return React.DOM.div.apply(this, _.flatten([
+            {},
+            res
+        ]));
+    }
+}
+var z = {getInitialState: function() {return {name:"reactTemplates"}}};
+
 var Playground = React.createClass({
 
     displayName: 'Playground',
     mixins: [React.addons.LinkedStateMixin],
 
+    updateSample: function (state) {
+
+        this.sampleFunc = generateTemplateFunction(state.templateHTML);
+        this.sampleRender = generateRenderFunc(this.sampleFunc);
+        var classBase = {};
+        try {
+            console.log(state.templateProps);
+            classBase = eval("("+state.templateProps+")");
+            /*if (typeof classBase !== 'Object') {
+                throw "failed to eval";
+            }*/
+        } catch (e) {
+            classBase = {};
+        }
+        classBase.render = this.sampleRender;
+        console.log(classBase);
+        this.sample = React.createClass(classBase);
+    },
+
     getInitialState: function () {
         var currentState = {
             templateHTML: '<div>\n hello {this.state.name}\n</div>',
-            templateProps: JSON.stringify({name:"reactTemplates"})
+            templateProps: '{getInitialState: function () {return {name:"reactTemplates"}}}'
         };
-        this.templateFunc = generateTemplateFunction(currentState.templateHTML);
+        this.updateSample(currentState);
-        console.log(this.templateFunc);
         return currentState;
     },
     componentWillUpdate: function (nextProps,nextState) {
-        if (nextState.templateHTML !== this.state.templateHTML) {
+        if (nextState.templateHTML !== this.state.templateHTML || nextState.templateProps !== this.state.templateProps) {
-            this.templateFunc = generateTemplateFunction(nextState.templateHTML)
+            this.updateSample(nextState);
         }
     },
 

playground/playground.rt

@@ -5,7 +5,7 @@
         <br/>
         <textarea valueLink="{this.linkState('templateProps')}" class="large-text-area"></textarea>
     </form>
-    <PlaygroundSample renderFunc="{this.templateFunc}" stateString="{this.state.templateProps}">
+    <this.sample>
 
-    </PlaygroundSample>
+    </this.sample>
 </div>

playground/playground.rt.js

@@ -9,8 +9,5 @@ module.exports = function () {
     }), React.DOM.br({}), React.DOM.textarea({
         'valueLink': this.linkState('templateProps'),
         'className': 'large-text-area'
-    })), PlaygroundSample({
+    })), this.sample({}));
-        'renderFunc': this.templateFunc,
-        'stateString': this.state.templateProps
-    }));
 };