#31 Ugrade to Babel 6 and update the ReactGrid sample

samples/react/ReactGrid/ReactApp/data/columnMeta.jsx

@@ -7,7 +7,7 @@ class RowActionsComponent extends React.Component {
     }
 }
 
-var columnMeta = [
+export const columnMeta = [
   {
     "columnName": "id",
     "order": 1,
@@ -58,6 +58,3 @@ var columnMeta = [
     "customComponent": RowActionsComponent
   }
 ];
-
-export var columnMeta;
-

samples/react/ReactGrid/ReactApp/data/fakeData.js

@@ -1,4 +1,4 @@
-var fakeData =  [
+export const fakeData =  [
   {
     "id": 0,
     "name": "Mayer Leonard",
@@ -2484,6 +2484,3 @@ var fakeData =  [
     "favoriteNumber": 1
   }
 ];
-
-export var fakeData;
-

samples/react/ReactGrid/package.json

@@ -2,7 +2,7 @@
   "name": "ReactExample",
   "version": "0.0.0",
   "dependencies": {
-    "babel-core": "^5.8.29",
+    "babel-core": "^6.4.0",
     "bootstrap": "^3.3.5",
     "formsy-react": "^0.17.0",
     "formsy-react-components": "^0.6.3",
@@ -14,7 +14,9 @@
     "underscore": "^1.8.3"
   },
   "devDependencies": {
-    "babel-loader": "^5.3.2",
+    "babel-loader": "^6.2.1",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
     "css-loader": "^0.21.0",
     "extract-text-webpack-plugin": "^0.8.2",
     "file-loader": "^0.8.4",

samples/react/ReactGrid/webpack.config.js

@@ -8,7 +8,7 @@ module.exports = {
     },
     module: {
         loaders: [
-            { test: /\.jsx?$/, loader: 'babel-loader' },
+            { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } },
             { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
             { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
         ]

src/Microsoft.AspNet.ReactServices/Content/Node/react-rendering.js

@@ -4,9 +4,11 @@ var React = require('react');
 var ReactDOMServer = require('react-dom/server');
 var createMemoryHistory = require('history/lib/createMemoryHistory');
 var babelCore = require('babel-core');
-var babelConfig = {};
+var babelConfig = {
+    presets: ["es2015", "react"]
+};
 
-var origJsLoader = require.extensions['.js']; 
+var origJsLoader = require.extensions['.js'];
 require.extensions['.js'] = loadViaBabel;
 require.extensions['.jsx'] = loadViaBabel;
 
@@ -20,7 +22,7 @@ function findReactComponent(options) {
         }
         return loadedModule[options.exportName];
     } else if (typeof loadedModule === 'function') {
-        // Otherwise, if the module itself is a function, assume that is the component 
+        // Otherwise, if the module itself is a function, assume that is the component
         return loadedModule;
     } else if (typeof loadedModule.default === 'function') {
         // Otherwise, if the module has a default export which is a function, assume that is the component
@@ -33,11 +35,11 @@ function findReactComponent(options) {
 function loadViaBabel(module, filename) {
     // Assume that all the app's own code is ES2015+ (optionally with JSX), but that none of the node_modules are.
     // The distinction is important because ES2015+ forces strict mode, and it may break ES3/5 if you try to run it in strict
-    // mode when the developer didn't expect that (e.g., current versions of underscore.js can't be loaded in strict mode). 
+    // mode when the developer didn't expect that (e.g., current versions of underscore.js can't be loaded in strict mode).
     var useBabel = filename.indexOf('node_modules') < 0;
     if (useBabel) {
         var transformedFile = babelCore.transformFileSync(filename, babelConfig);
-        return module._compile(transformedFile.code, filename);        
+        return module._compile(transformedFile.code, filename);
     } else {
         return origJsLoader.apply(this, arguments);
     }