fix error in editor

Gruntfile.js

@@ -68,13 +68,34 @@ module.exports = function (grunt) {
                     spawn: false
                 }
             }
+        },
+        uglify: {
+            my_target: {
+                //options: {
+                //    sourceMap: true,
+                //    sourceMapIncludeSources: true,
+                //    sourceMapIn: 'example/coffeescript-sourcemap.js', // input sourcemap from a previous compilation
+                //},
+                files: {
+                    'playground/rt-main.browser.min.js': ['playground/rt-main.browser.js'],
+                    'playground/libs/requirejs-plugins/text.min.js': ['playground/libs/requirejs-plugins/text.js'],
+                    'playground/libs/requirejs-plugins/json.min.js': ['playground/libs/requirejs-plugins/json.js']
+                }
+            }
+        },
+        requirejs: {
+            compile: {
+                options: eval(require('fs').readFileSync('./home.config.js').toString())
+            }
         }
     });
 
     grunt.loadNpmTasks('grunt-browserify');
     grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-requirejs');
     grunt.loadNpmTasks('grunt-eslint');
     grunt.loadNpmTasks('grunt-node-tap');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
 
     grunt.registerTask('default', ['eslint']);
     grunt.registerTask('test', ['node_tap']);
@@ -84,13 +105,14 @@ module.exports = function (grunt) {
     grunt.registerTask('rt', function () {
         var reactTemplates = require('./src/cli');
         var files = grunt.file.expand('playground/*.rt');
-        var conf = {common: false, force: true, _: files};
+        var conf = {commonjs: false, force: true, _: files};
         var ret = reactTemplates.execute(conf);
         return ret === 0;
     });
 
     grunt.registerTask('build', ['rt', 'browserify:pg']);
     grunt.registerTask('home', ['rt', 'browserify:home']);
+    grunt.registerTask('pgall', ['rt', 'browserify', 'uglify']);
 
     grunt.registerTask('all', ['default', 'test']);
 };

index.html

@@ -51,9 +51,9 @@
             </a>
             <ul class="nav-site">
                 <li><a href="https://github.com/wix/react-templates">docs</a></li>
-                <li><a href="https://github.com/wix/react-templates">support</a></li>
+                <!--<li><a href="https://github.com/wix/react-templates">support</a></li>-->
                 <li><a href="https://github.com/wix/react-templates">download</a></li>
-                <li><a href="https://github.com/wix/react-templates/">blog</a></li>
+                <!--<li><a href="https://github.com/wix/react-templates/">blog</a></li>-->
                 <li><a href="https://github.com/wix/react-templates">github</a>
             </ul>
         </div>
@@ -113,6 +113,11 @@
         <hr class="home-divider" />
         <section id="home-section" class="home-section">
         </section>
+        <div id="loading" style="/* padding-bottom: 40px; */
+    margin-bottom: 100px;
+    font-size: 20px;
+    padding-top: 50px;
+    text-align: center;">Loading...</div>
         <hr class="home-divider" />
         <!--<section class="home-bottom-section">-->
             <!--<div class="buttons-unit">-->
@@ -142,7 +147,12 @@
 <script src="playground/libs/ace-builds-1.1.8/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
 <script src="playground/dist/rt-main.browser.min.js"></script>
 <!--<script data-main="playground/home-main.js" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>-->
-<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>
+<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>-->
+<!--http://requirejs.org/docs/release/2.1.15/minified/require.js-->
+
+<!--<script data-main="playground/home-main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>-->
+<!--<script src="playground/home-main.js"></script>-->
+<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>
 <script src="playground/dist/home.min.js"></script>
 </body>
 </html>

package.json

@@ -36,6 +36,8 @@
     "brfs": "^1.2.0",
     "grunt": "^0.4.5",
     "grunt-browserify": "^3.2.0",
+    "grunt-contrib-requirejs": "^0.4.4",
+    "grunt-contrib-uglify": "^0.6.0",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-eslint": "^2.1.0",
     "grunt-node-tap": "^0.1.61",

playground/fiddle-main.js

@@ -1,14 +1,14 @@
 requirejs.config({
 //    baseUrl: '/',
     paths: {
-        lodash: 'http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash',
+        lodash: 'http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min',
         jquery: 'http://code.jquery.com/jquery-1.11.0.min',
         firebase: 'https://cdn.firebase.com/js/client/2.0.5/firebase',
-        react: 'http://fb.me/react-with-addons-0.12.1',
+        react: 'http://fb.me/react-with-addons-0.12.1.min',
         //ace: '../ace-builds-1.1.8/src-min/ace',
         fiddle: './fiddle',
         text: 'libs/requirejs-plugins/text',
-        json: 'libs/requirejs-plugins/json',
+        json: 'libs/requirejs-plugins/json'
         //codeMirror: 'libs/codemirror-4.8/lib/codemirror',
         //htmlmixed: 'libs/codemirror-4.8/mode/htmlmixed/htmlmixed',
         //javascript: 'libs/codemirror-4.8/mode/javascript/javascript'

playground/fiddle.rt

@@ -3,9 +3,7 @@
     <div id="header">
         <div id="header-title">
             <a href="index.html" class="title-link">
-
                 <img class="nav-logo" src="https://wix.github.io/react-templates/img/logo-rt.svg" width="56" height="24" />
-
             </a>
             RTFiddle
         </div>

playground/home-main.js

@@ -28,6 +28,7 @@ requirejs(['jquery', 'react', './examples'], function ($, React, Examples) {
     'use strict';
     //var Examples = require('./examples.js');
     React.render(Examples(), document.getElementById('home-section'));
+    $('#loading').hide();
     //window.fiddle = React.render(fiddle(), document.getElementById('container'));
 });
 

playground/playground.js

@@ -9,9 +9,7 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio
         var code = null;
         try {
             code = window.reactTemplates.convertTemplateToReact(html.trim().replace(/\r/g, ''));
-            if (editor) {
+            clearMessage(editor);
-                editor.clearMessage();
-            }
         } catch (e) {
             var msg;
             if (e.name === 'RTCodeError') {
@@ -20,14 +18,24 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio
             } else {
                 msg = e.message;
             }
-            if (editor) {
+            showMessage(editor, msg);
-                editor.showMessage(msg);
-            }
             console.log(e);
         }
         return code;
     }
 
+    function showMessage(editor, msg) {
+        if (editor && editor.showMessage) {
+            editor.showMessage(msg);
+        }
+    }
+
+    function clearMessage(editor) {
+        if (editor && editor.clearMessage) {
+            editor.clearMessage();
+        }
+    }
+
     function generateTemplateFunction(code) {
         try {
             var defineMap = {'react/addons': React, lodash: _};
@@ -69,7 +77,7 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio
         displayName: 'Playground',
         mixins: [React.addons.LinkedStateMixin],
         propTypes: {
-            direction: React.PropTypes.string,
+            direction: React.PropTypes.oneOf(['horizontal', 'vertical']),
             codeVisible: React.PropTypes.bool,
             fiddle: React.PropTypes.bool
         },
@@ -82,7 +90,7 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio
         },
         updateSample: function (state) {
             this.templateSource = generateTemplateSource(state.templateHTML, this.refs.editorRT);
-            this.sampleFunc = generateTemplateFunction(this.templateSource, this.refs.editorCode);
+            this.sampleFunc = generateTemplateFunction(this.templateSource);
             this.validHTML = this.sampleFunc !== emptyFunc;
             this.sampleRender = generateRenderFunc(this.sampleFunc);
             var classBase = {};
@@ -93,15 +101,11 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio
                 if (!_.isObject(classBase)) {
                     throw 'failed to eval';
                 }
-                if (this.refs.editorCode) {
+                clearMessage(this.refs.editorCode);
-                    this.refs.editorCode.clearMessage();
-                }
             } catch (e) {
                 classBase = {};
                 this.validProps = false;
-                if (this.refs.editorCode) {
+                showMessage(this.refs.editorCode, e.message);
-                    this.refs.editorCode.showMessage(e.message);
-                }
             }
             classBase.render = this.sampleRender;
             this.sample = React.createFactory(React.createClass(classBase));