From 225dfdd168b61a2cfce5818bb78a7fcd645d6864 Mon Sep 17 00:00:00 2001 From: Charalampos Karypidis Date: Sun, 17 Jan 2016 23:42:05 +0100 Subject: [PATCH] #31 Ugrade to Babel 6 and update the ReactGrid sample --- samples/react/ReactGrid/ReactApp/data/columnMeta.jsx | 5 +---- samples/react/ReactGrid/ReactApp/data/fakeData.js | 5 +---- samples/react/ReactGrid/package.json | 6 ++++-- samples/react/ReactGrid/webpack.config.js | 2 +- .../Content/Node/react-rendering.js | 12 +++++++----- 5 files changed, 14 insertions(+), 16 deletions(-) diff --git a/samples/react/ReactGrid/ReactApp/data/columnMeta.jsx b/samples/react/ReactGrid/ReactApp/data/columnMeta.jsx index ba23d4f..f66a8a9 100644 --- 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 index d959fb7..08c8c0e 100644 --- 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 index 0d92af9..0c90f38 100644 --- 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 index 02884bc..b714399 100644 --- 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 index 30aeb3d..534f7ad 100644 --- 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); }