Merge pull request marmelab#54 from marmelab/use_browser_transpiler

[RFR] Use JSX transform in blog example

Author: jeromemacias

app/AdminBootstrap.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {RouteHandler} from 'react-router';
+import {RouteHandler, Link} from 'react-router';
 
 import Header from "./View/Common/Header";
 import Sidebar from "./View/Common/Sidebar";
@@ -48,5 +48,6 @@ class AdminBootstrap extends React.Component {
 }
 
 require('./autoloader')('AdminBootstrap', AdminBootstrap);
+require('./autoloader')('Link', Link);
 
 export default AdminBootstrap;

app/Component/Column/TemplateColumn.js

@@ -7,7 +7,7 @@ class TemplateColumn extends React.Component {
 
         let computedTemplate = template;
         if (typeof(template) === 'function') {
-            computedTemplate = template(this.props.entry);
+            computedTemplate = template.apply(this, [this.props.entry]);
         }
 
         return (

examples/blog/config.js

@@ -18,6 +18,14 @@
             };
         });
 
+        // Add custom component
+        var SendEmail = React.createClass({
+            render: function () {
+                return <a className='btn btn-default' href='#/stats'>Show stats</a>;
+            }
+        });
+        autoload('SendEmail', SendEmail);
+
         var admin = nga.application('rest-admin backend demo') // application main title
             .baseApiUrl('http://localhost:3000/'); // main API endpoint
 
@@ -114,7 +122,7 @@
                 post.views['EditView'].fields(), // reuse fields from another view in another order
                  nga.field('custom_action', 'template')
                      .label('')
-                     .template('<SendEmail post="entry"></SendEmail>')
+                     .template(<SendEmail post="entry"></SendEmail>)
             ]);
 
         post.views['DeleteView']
@@ -129,7 +137,9 @@
                 nga.field('body').label('Comment').map(truncate),
                 nga.field(null, 'template') // template fields don't need a name in dashboard view
                      .label('Edition')
-                     .template('<Link to="edit" params={{entity: "comments", id: entry.identifierValue}}>Edit</Link>') // you can use custom directives, too
+                     .template(function() {
+                        return <Link to="edit" params={{entity: "comments", id: this.props.entry.identifierValue}}>Edit</Link>;
+                    }) // you can use custom directives, too
             ]);
 
         comment.views['ListView']
@@ -250,35 +260,23 @@
                 )
             );
 
-        // Add custom component
-        var SendEmail = React.createClass({
-            render: function () {
-                return React.createElement('a', {className: 'btn btn-default', href: '#/stats'}, 'Show stats');
-            }
-        });
-        autoload('SendEmail', SendEmail);
-
         // Add custom route
         var ViewActions = components.ViewActions;
+        var Route = ReactRouter.Route;
         var Stats = React.createClass({
             render: function () {
-                return React.createElement('div', {className: 'page-header'},
-                    React.createElement(ViewActions, {buttons: ['back']}),
-                    React.createElement('h1', null, 'Stats'),
-                    React.createElement('p', {className: 'lead'}, 'You can add custom pages, too')
-                    );
+                return <div>
+                    <ViewActions buttons={['back']} />
+                    <h1>Stats</h1>
+                    <p className='lead'>You can add custom pages, too</p>
+                </div>;
             }
         });
 
-        routes.props.children.push(
-            React.createElement(ReactRouter.Route, { name: 'stats', path: '/stats', handler: Stats })
-        );
+        routes.props.children.push(<Route name="stats" path="/stats" handler={Stats} />);
 
         return admin;
     }
 
-    React.render(
-        React.createElement(ReactAdmin, { configureApp: configureApp }),
-        document.getElementById('my-app')
-    );
+    React.render(<ReactAdmin configureApp={configureApp} />, document.getElementById('my-app'));
 }());

examples/blog/fakerest-init.js

@@ -38,7 +38,7 @@
     // use sinon.js to monkey-patch XmlHttpRequest
     sinon.FakeXMLHttpRequest.useFilters = true;
     sinon.FakeXMLHttpRequest.addFilter(function (method, url) {
-        return url.indexOf('/socket.io/') !== -1;
+        return url.indexOf('/socket.io/') !== -1 || url.indexOf('config.js') !== -1;
     });
 
     var server = sinon.fakeServer.create();

examples/blog/index.html

@@ -8,6 +8,7 @@
 <body>
     <div id="my-app"></div>
 
+    <script src="bower_components/react/JSXTransformer.js" type="text/javascript"></script>
     <script src="bower_components/react/react.js" type="text/javascript"></script>
     <script src="bower_components/react-router/build/umd/ReactRouter.min.js" type="text/javascript"></script>
     <script src="bower_components/fakerest/dist/FakeRest.min.js" type="text/javascript"></script>
@@ -16,6 +17,6 @@
     <script src="fakerest-init.js" type="text/javascript"></script>
 
     <script src="http://localhost:8080/react-admin-standalone.min.js"></script>
-    <script src="config.js"></script>
+    <script src="config.js" type="text/jsx"></script>
 </body>
 </html>

examples/blog/test.html

@@ -8,6 +8,7 @@
 <body>
     <div id="my-app"></div>
 
+    <script src="bower_components/react/JSXTransformer.js" type="text/javascript"></script>
     <script src="bower_components/react/react.js" type="text/javascript"></script>
     <script src="bower_components/react-router/build/umd/ReactRouter.min.js" type="text/javascript"></script>
     <script src="bower_components/fakerest/dist/FakeRest.min.js" type="text/javascript"></script>
@@ -16,6 +17,6 @@
     <script src="fakerest-init.js" type="text/javascript"></script>
 
     <script src="build/react-admin-standalone.min.js"></script>
-    <script src="config.js"></script>
+    <script src="config.js" type="text/jsx"></script>
 </body>
 </html>