playground changes: update dependencies, minor fixes in samples and code

fiddle.html

@@ -12,9 +12,9 @@
     <link href='//fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
 
     <!-- Latest compiled and minified CSS -->
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
     <!-- Optional theme -->
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
     <!-- Latest compiled and minified JavaScript -->
 
     <link rel="stylesheet" href="playground/libs/codemirror-4.8/lib/codemirror.css" />
@@ -38,8 +38,9 @@
 <!--<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>-->
 <!--<script src="playground/dist/fiddle.min.js"></script>-->
 
-<!--<script data-main="playground/fiddle-main.js" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>-->
+<!--<script data-main="playground/fiddle-main.js" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js"></script>-->
-<script data-main="playground/dist/fiddle.min.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>
+<script data-main="playground/dist/fiddle.min.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.min.js"></script>
+
 <script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

index.html

@@ -11,7 +11,7 @@
     <link href='//fonts.googleapis.com/css?family=Lato:100,300,700' rel='stylesheet' type='text/css'>
 
     <!-- Latest compiled and minified CSS -->
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
     <!-- Optional theme -->
     <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">-->
 
@@ -82,8 +82,9 @@
 
 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
 <script src="playground/dist/rt-main.browser.min.js"></script>
-<!--<script data-main="playground/home-main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>-->
+<!--<script data-main="playground/home-main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.min.js"></script>-->
-<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.min.js"></script>
+<!--<script src="playground/home-main.js"></script>-->
 <script src="playground/dist/home.min.js"></script>
 <script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

playground/CMLint.js

@@ -62,7 +62,7 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror'], fu
                 return CodeMirror.off(document, 'mousemove', position);
             }
             tt.style.top = Math.max(0, ev.clientY - tt.offsetHeight - 5) + 'px';
-            tt.style.left = (ev.clientX + 5) + 'px';
+            tt.style.left = (ev.clientX + 5) + 'px'; //eslint-disable-line no-extra-parens
         }
         CodeMirror.on(document, 'mousemove', position);
         position(e);

playground/CodeMirrorViewer.js

@@ -13,14 +13,10 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
             valueLink: React.PropTypes.string
         },
         getDefaultProps: function () {
-            return {
+            return {mode: 'html'};
-                mode: 'html'
-            };
         },
         getInitialState: function () {
-            return {
+            return {editorId: _.uniqueId()};
-                editorId: _.uniqueId()
-            };
         },
         render: function () {
             var props = _.omit(this.props, ['ref', 'key', 'value', 'valueLink', 'onChange']);

playground/dist/rt-main.browser.js

@@ -55574,6 +55574,10 @@ function convertHtmlToReact(node, context) {
                 data.scopeMapping[boundParam] = boundParam;
             });
             _.each(node.attribs[scopeProp].split(';'), function (scopePart) {
+                if (scopePart.trim().length === 0) {
+                    return;
+                }
+
                 var scopeSubParts = scopePart.split(' as ');
                 if (scopeSubParts.length < 2) {
                     throw RTCodeError.build("invalid scope part '" + scopePart + "'", context, node);
@@ -55630,7 +55634,7 @@ function convertHtmlToReact(node, context) {
         if (node.attribs[templateProp]) {
             data.repeatFunction = generateInjectedFunc(context, 'repeat' + stringUtils.capitalize(data.item), 'return ' + data.body);
             data.repeatBinds = ['this'].concat(_.reject(context.boundParams, function (param) {
-                return (param === data.item || param === data.item + 'Index');
+                return param === data.item || param === data.item + 'Index';
             }));
             data.body = repeatTemplate(data);
         }
@@ -55643,7 +55647,7 @@ function convertHtmlToReact(node, context) {
         }
         return data.body;
     } else if (node.type === 'comment') {
-        return (commentTemplate(node));
+        return commentTemplate(node);
     } else if (node.type === 'text') {
         if (node.data.trim()) {
             return convertText(node, context, node.data);

playground/fiddle-main.js

@@ -4,7 +4,7 @@ requirejs.config({
         lodash: '//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min',
         jquery: '//code.jquery.com/jquery-2.1.4.min',
         firebase: 'https://cdn.firebase.com/js/client/2.0.5/firebase',
-        react: '//fb.me/react-with-addons-0.12.2',
+        react: '//fb.me/react-with-addons-0.13.3.min',
         //ace: '../ace-builds-1.1.8/src-min/ace',
         fiddle: './fiddle',
         text: 'libs/requirejs-plugins/text',

playground/fiddle.js

@@ -9,7 +9,7 @@ define(['react', 'firebase', 'lodash', './fiddle.rt', 'jquery'], function (React
     function generateRandomId() {
         var uuid = 'xxxxxxxx'.replace(/[xy]/g, function (c) {
             var r = _.random(0, 15);
-            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+            return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
         });
         return uuid;
     }

playground/home-main.js

@@ -4,7 +4,7 @@ requirejs.config({
         lodash: '//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min',
         jquery: '//code.jquery.com/jquery-2.1.4.min',
         firebase: 'https://cdn.firebase.com/js/client/2.0.5/firebase',
-        react: '//fb.me/react-with-addons-0.12.2',
+        react: '//fb.me/react-with-addons-0.13.3.min',
         text: 'libs/requirejs-plugins/text',
         json: 'libs/requirejs-plugins/json'
         //ace: '../ace-builds-1.1.8/src-min/ace',
@@ -18,9 +18,7 @@ requirejs.config({
         react: {exports: 'React'}
     },
     map: {
-        '*': {
+        '*': {'react/addons': 'react'}
-            'react/addons': 'react'
-        }
     }
 });
 

playground/playground.js

@@ -111,7 +111,7 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
             };
         },
         getLayoutClass: function () {
-            return (this.props.direction === 'horizontal' && 'horizontal') || 'vertical';
+            return (this.props.direction === 'horizontal' && 'horizontal') || 'vertical'; //eslint-disable-line no-extra-parens
         },
         //executeCode: function() {
         //    var mountNode = this.refs.mount.getDOMNode();
@@ -247,7 +247,7 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
         componentDidUpdate: function () {
             this.renderSample();
         },
-        componentWillUnmount: function (){
+        componentWillUnmount: function () {
             window.removeEventListener('resize', this.calcSize);
         },
         calcSize: function () {

playground/playground.rt

@@ -5,7 +5,7 @@
     <div id="{this.props.id}-myTab" class="code-area {this.getLayoutClass()}">
         <!-- Nav tabs -->
         <ul class="nav nav-tabs" role="tablist">
-            <li rt-repeat="tab in this.getTabs()" role="presentation"
+            <li rt-repeat="tab in this.getTabs()" role="presentation" key="tab{tabIndex}"
                 rt-class="{active:this.state.currentTab === tab[0]}"
                 onClick="(evt)=> evt.preventDefault();this.setState({'currentTab':tab[0]});">
                 <a aria-controls="{tab[1]}">{tab[1]}</a>

playground/playground.rt.js

@@ -11,6 +11,7 @@ define([
     function repeatTab2(tab, tabIndex) {
         return React.createElement('li', {
             'role': 'presentation',
+            'key': 'tab' + tabIndex,
             'className': _.keys(_.pick({ active: this.state.currentTab === tab[0] }, _.identity)).join(' '),
             'onClick': onClick1.bind(this, tab, tabIndex)
         }, React.createElement('a', { 'aria-controls': tab[1] }, tab[1]));

playground/samples/hello.code

@@ -1,5 +1,3 @@
 var <%= name %> = React.createClass({
-    render: function () {
+    render: <%= name %>RT
-        return <%= name %>RT.apply(this);
-    }
 });

playground/samples/rt-if.code

@@ -5,7 +5,5 @@ var <%= name %> = React.createClass({
     toggle: function() {
         this.setState({open: !this.state.open});
     },
-    render: function () {
+    render: <%= name %>RT
-        return <%= name %>RT.apply(this);
-    }
 });

playground/samples/rt-props.code

@@ -12,7 +12,5 @@ var <%= name %> = React.createClass({
         ret.style[this.state.key] = this.state.val;
         return ret;
     },
-    render: function () {
+    render: <%= name %>RT
-        return <%= name %>RT.apply(this);
-    }
 });

playground/samples/rt-repeat.code

@@ -4,7 +4,5 @@ var <%= name %> = React.createClass({
             items: ['One', 'Two', 'Three']
         };
     },
-    render: function () {
+    render: <%= name %>RT
-        return <%= name %>RT.apply(this);
-    }
 });

playground/samples/todo.code

@@ -19,9 +19,13 @@ var <%= name %> = React.createClass({
         this.setState({todos: todos});
     },
     clearDone: function () {
-        this.setState({todos: _.filter(this.state.todos, {done: false})});
+        this.setState({todos: this.getPending()});
     },
-    render: function () {
+    getDone: function () {
-        return <%= name %>RT.apply(this);
+        return _.filter(this.state.todos, {done: true});
-    }
+    },
+    getPending: function () {
+        return _.filter(this.state.todos, {done: false});
+    },
+    render: <%= name %>RT
 });

playground/samples/todo.rt

@@ -1,7 +1,7 @@
 <div>
-    <strong>{_.filter(this.state.todos, {done:true}).length}</strong>
+    <strong>{this.getDone().length}</strong>
     done,
-    <strong>{_.filter(this.state.todos, {done:false}).length}</strong>
+    <strong>{this.getPending().length}</strong>
     pending
     <br/>
     <div rt-repeat="todo in this.state.todos" key="{todo.key}">

playground/samples/todo2.code

@@ -1,8 +1,7 @@
 {
     mixins: [React.addons.LinkedStateMixin],
-        getInitialState: function () {
+    getInitialState: function () {
-    return {
+        return {edited: '', todos: [], counter: 0};
-        edited: '', todos: [], counter: 0};
     },
     add: function () {
         if (this.state.edited.trim().length === 0) {

playground/samples/weather.code

@@ -30,7 +30,5 @@ var <%= name %> = React.createClass({
     fetchWeatherCallback: function(result) {
         this.setState({ loading:false, info: result.list });
     },
-    render: function () {
+    render: <%= name %>RT
-        return <%= name %>RT.apply(this);
-    }
 });