aspnet#31 Ugrade to Babel 6 and update the ReactGrid sample

xabikos · SteveSandersonMS · commit 225dfdd168b6 · 2016-02-02T15:11:22.000Z
diff --git a/samples/react/ReactGrid/ReactApp/data/columnMeta.jsx b/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;
-
diff --git a/samples/react/ReactGrid/ReactApp/data/fakeData.js b/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;
-
diff --git a/samples/react/ReactGrid/package.json b/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",
diff --git a/samples/react/ReactGrid/webpack.config.js b/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' }
         ]
diff --git a/src/Microsoft.AspNet.ReactServices/Content/Node/react-rendering.js b/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);
     }

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ class RowActionsComponent extends React.Component {`
`7`	`7`	`}`
`8`	`8`	`}`
`9`	`9`
`10`		`-var columnMeta = [`
	`10`	`+export const columnMeta = [`
`11`	`11`	`{`
`12`	`12`	`"columnName": "id",`
`13`	`13`	`"order": 1,`
`@@ -58,6 +58,3 @@ var columnMeta = [`
`58`	`58`	`"customComponent": RowActionsComponent`
`59`	`59`	`}`
`60`	`60`	`];`
`61`		`-`
`62`		`-export var columnMeta;`
`63`		`-`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-var fakeData = [`
	`1`	`+export const fakeData = [`
`2`	`2`	`{`
`3`	`3`	`"id": 0,`
`4`	`4`	`"name": "Mayer Leonard",`
`@@ -2484,6 +2484,3 @@ var fakeData = [`
`2484`	`2484`	`"favoriteNumber": 1`
`2485`	`2485`	`}`
`2486`	`2486`	`];`
`2487`		`-`
`2488`		`-export var fakeData;`
`2489`		`-`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ module.exports = {`
`8`	`8`	`},`
`9`	`9`	`module: {`
`10`	`10`	`loaders: [`
`11`		`- { test: /\.jsx?$/, loader: 'babel-loader' },`
	`11`	`+ { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } },`
`12`	`12`	`{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },`
`13`	`13`	`{ test: /\.(png\|woff\|woff2\|eot\|ttf\|svg)$/, loader: 'url-loader?limit=100000' }`
`14`	`14`	`]`