Upgrade to Babel 6. Closes #193

Author: Daniel15

build.proj

@@ -10,8 +10,8 @@ of patent rights can be found in the PATENTS file in the same directory.
 <Project ToolsVersion="4.0" DefaultTargets="Build;Test;Package" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
 	<PropertyGroup>
 		<Major>2</Major>
-		<Minor>1</Minor>
-		<Build>3</Build>
+		<Minor>2</Minor>
+		<Build>0</Build>
 		<Revision>0</Revision>
 		<DevNuGetServer>http://reactjs.net/packages/</DevNuGetServer>
 		<MSBuildCommunityTasksPath>$(MSBuildProjectDirectory)\tools\MSBuildTasks</MSBuildCommunityTasksPath>

src/React.AspNet/project.json

@@ -1,5 +1,5 @@
 {
-    "version": "2.1.3-*",
+    "version": "2.2.0-*",
     "configurations": {
         "Debug": {
             "compilationOptions": {

src/React.Core/Babel.cs

@@ -228,7 +228,7 @@ protected virtual JavaScriptWithSourceMap TransformWithHeader(
 				hash = _fileCacheHash.CalculateHash(contents);
 			}
 			// Prepend header to generated code
-			var header = GetFileHeader(hash);
+			var header = GetFileHeader(hash, result.BabelVersion);
 			result.Code = header + result.Code;
 			result.Hash = hash;
 
@@ -302,16 +302,17 @@ public virtual JavaScriptWithSourceMap TransformWithSourceMap(
 		/// validate the cache.
 		/// </summary>
 		/// <param name="hash">Hash of the input</param>
+		/// <param name="babelVersion">Version of Babel used to perform this transformation</param>
 		/// <returns>Header for the cache</returns>
-		protected virtual string GetFileHeader(string hash)
+		protected virtual string GetFileHeader(string hash, string babelVersion)
 		{
 			return string.Format(
 @"{0}
 // Automatically generated by ReactJS.NET. Do not edit, your changes will be overridden.
-// Version: {1}
+// Version: {1} with Babel {3}
 // Generated at: {2}
 ///////////////////////////////////////////////////////////////////////////////
-", _fileCacheHash.AddPrefix(hash), _environment.Version, DateTime.Now);
+", _fileCacheHash.AddPrefix(hash), _environment.Version, DateTime.Now, babelVersion);
 		}
 
 		/// <summary>

src/React.Core/BabelConfig.cs

@@ -1,5 +1,6 @@
 using System.Collections.Generic;
 using Newtonsoft.Json;
+using Newtonsoft.Json.Serialization;
 
 namespace React
 {
@@ -10,52 +11,27 @@ namespace React
 	public class BabelConfig
 	{
 		/// <summary>
-		/// Gets or sets whether Babel's "loose mode" is used for all transformers. See 
-		/// http://babeljs.io/docs/advanced/loose/ for more information. Only one of 
-		/// <see cref="AllLoose"/> or <see cref="Loose"/> can be used at a time.
+		/// Gets or sets the Babel plugins to use. See http://babeljs.io/docs/plugins/ for a full
+		/// list of plugins.
 		/// </summary>
-		public bool AllLoose { get; set; }
+		public ISet<string> Plugins { get; set; }
 
 		/// <summary>
-		/// Gets or sets the transformers to blacklist
+		/// Gets or sets the Babel presets to use. See http://babeljs.io/docs/plugins/ for a full
+		/// list of presets.
 		/// </summary>
-		public IEnumerable<string> Blacklist { get; set; } 
-
-		/// <summary>
-		/// Gets or sets whether Babel should use a reference to babelHelpers instead of placing
-		/// helpers at the top of your code. Meant to be used in conjunction with external 
-		/// helpers (http://babeljs.io/docs/advanced/external-helpers/)
-		/// </summary>
-		public bool ExternalHelpers { get; set; }
-
-		/// <summary>
-		/// Gets or sets the transformers to use in Babel's "loose mode". See
-		/// http://babeljs.io/docs/advanced/loose/ for more information. Only one of 
-		/// <see cref="AllLoose"/> or <see cref="Loose"/> can be used at a time.
-		/// </summary>
-		public IEnumerable<string> Loose { get; set; }
-
-		/// <summary>
-		/// Gets or sets an transformers to optionally use. See 
-		/// http://babeljs.io/docs/advanced/transformers/#optional for a full list of transformers
-		/// </summary>
-		public IEnumerable<string> Optional { get; set; }
-
-		/// <summary>
-		/// Gets or sets the experimental proposal stage (http://babeljs.io/docs/usage/experimental/).
-		/// </summary>
-		public int Stage { get; set; }
+		public ISet<string> Presets { get; set; }
 
 		/// <summary>
 		/// Creates a new instance of <see cref="BabelConfig" />.
 		/// </summary>
 		public BabelConfig()
 		{
-			// By default, we blacklist the "strict" transform, as it messes with the top-level "this".
-			// This is required since we're not actually using JavaScript modules directly in ReactJS.NET yet.
-			// See https://babeljs.io/docs/faq/#why-is-this-being-remapped-to-undefined-
-			Blacklist = new[] {"strict"};
-			Stage = 2;
+			// Use es2015-no-commonjs by default so Babel doesn't prepend "use strict" to the start of the
+			// output. This messes with the top-level "this", as we're not actually using JavaScript modules
+			// in ReactJS.NET yet.
+			Presets = new HashSet<string> { "es2015-no-commonjs", "stage-1", "react" };
+			Plugins = new HashSet<string>();
 		}
 
 		/// <summary>
@@ -64,22 +40,10 @@ public BabelConfig()
 		/// <returns></returns>
 		public string Serialize()
 		{
-			var config = new Dictionary<string, object>
-			{
-				{"blacklist", Blacklist},
-				{"externalHelpers", ExternalHelpers},
-				{"optional", Optional},
-				{"stage", Stage},
-			};
-			if (AllLoose)
-			{
-				config.Add("loose", "all");
-			}
-			else if (Loose != null)
+			return JsonConvert.SerializeObject(this, new JsonSerializerSettings
 			{
-				config.Add("loose", Loose);
-			}
-			return JsonConvert.SerializeObject(config);
+				ContractResolver = new CamelCasePropertyNamesContractResolver(),
+			});
 		}
 	}
 }

src/React.Core/JavaScriptWithSourceMap.cs

@@ -18,6 +18,11 @@ namespace React
 	[Serializable]
 	public class JavaScriptWithSourceMap
 	{
+		/// <summary>
+		/// Gets or sets the version of Babel used to perform this transformation.
+		/// </summary>
+		public string BabelVersion { get; set; }
+
 		/// <summary>
 		/// The transformed result
 		/// </summary>

src/React.Core/React.Core.csproj

@@ -131,20 +131,20 @@
     <Compile Include="TinyIoC\TinyIoC.cs" />
   </ItemGroup>
   <ItemGroup>
+    <None Include="package.json" />
     <None Include="packages.config" />
     <Compile Include="SimpleFileSystem.cs" />
     <None Include="React.Core.nutrans" />
   </ItemGroup>
   <ItemGroup>
     <EmbeddedResource Include="Resources\shims.js" />
   </ItemGroup>
-  <ItemGroup>
-    <EmbeddedResource Include="node_modules\babel-core\browser.js" />
-  </ItemGroup>
   <ItemGroup>
     <Content Include="gulpfile.js" />
     <EmbeddedResource Include="Resources\react.generated.js" />
     <EmbeddedResource Include="Resources\react.generated.min.js" />
+    <EmbeddedResource Include="Resources\babel.generated.min.js" />
+    <Content Include="Resources\babel.js" />
     <Content Include="Resources\react.js" />
   </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />

src/React.Core/ReactEnvironment.cs

@@ -434,10 +434,10 @@ private void EnsureBabelLoaded(IJsEngine engine)
 				throw new BabelNotLoadedException();
 			}
 
-			var babelLoaded = engine.Evaluate<bool>("typeof global.Babel !== 'undefined'");
+			var babelLoaded = engine.Evaluate<bool>("typeof ReactNET_transform !== 'undefined'");
 			if (!babelLoaded)
 			{
-				engine.ExecuteResource("React.node_modules.babel_core.browser.js", typeof(ReactEnvironment).Assembly);
+				engine.ExecuteResource("React.Resources.babel.generated.min.js", typeof(ReactEnvironment).Assembly);
 			}
 		}
 	}

src/React.Core/Resources/babel.js

@@ -0,0 +1,44 @@
+/*
+ *  Copyright (c) 2015, Facebook, Inc.
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the BSD-style license found in the
+ *  LICENSE file in the root directory of this source tree. An additional grant 
+ *  of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+import {transform as babelTransform, version as babelVersion} from 'babel-standalone';
+
+export function ReactNET_transform(input, babelConfig, filename) {
+	babelConfig = {
+		...JSON.parse(babelConfig),
+		ast: false,
+		filename,
+	}
+	try {
+		return babelTransform(input, babelConfig).code;
+	} catch (ex) {
+		// Parsing stack is extremely long and not very useful, so just rethrow the message.
+		throw new Error(ex.message);
+	}
+}
+
+export function ReactNET_transform_sourcemap(input, babelConfig, filename) {
+	babelConfig = {
+		...JSON.parse(babelConfig),
+		ast: false,
+		filename,
+		sourceMaps: true,
+	};
+	try {
+		var result = babelTransform(input, babelConfig);
+		return JSON.stringify({
+			babelVersion,
+			code: result.code,
+			sourceMap: result.map
+		});
+	} catch (ex) {
+		// Parsing stack is extremely long and not very useful, so just rethrow the message.
+		throw new Error(ex.message);
+	}
+}

src/React.Core/Resources/shims.js

@@ -64,31 +64,4 @@ function ReactNET_initReact() {
 	}
 	// :'(
 	return false;
-}
-
-function ReactNET_transform(input, babelConfig, filename) {
-	babelConfig = JSON.parse(babelConfig);
-	babelConfig.filename = filename;
-	try {
-		return global.babel.transform(input, babelConfig).code;
-	} catch (ex) {
-		// Parsing stack is extremely long and not very useful, so just rethrow the message.
-		throw new Error(ex.message);
-	}
-}
-
-function ReactNET_transform_sourcemap(input, babelConfig, filename) {
-	babelConfig = JSON.parse(babelConfig);
-	babelConfig.filename = filename;
-	babelConfig.sourceMap = true;
-	try {
-		var result = global.babel.transform(input, babelConfig);
-		return JSON.stringify({
-			code: result.code,
-			sourceMap: result.map
-		});
-	} catch (ex) {
-		// Parsing stack is extremely long and not very useful, so just rethrow the message.
-		throw new Error(ex.message);
-	}
 }

src/React.Core/gulpfile.js

@@ -8,12 +8,15 @@
  */
 
 var gulp = require('gulp');
+var named = require('vinyl-named');
 var webpack = require('webpack');
 var webpackStream = require('webpack-stream');
 var uglify = require('gulp-uglify');
 
+var OUTPUT_DIR = 'Resources/';
+
 gulp.task('default', ['build']);
-gulp.task('build', ['build-react-dev', 'build-react-prod']);
+gulp.task('build', ['build-react-dev', 'build-deps-prod']);
 
 gulp.task('build-react-dev', function() {
 	return gulp.src('Resources/react.js')
@@ -23,27 +26,44 @@ gulp.task('build-react-dev', function() {
 				libraryTarget: 'this'
 			},
 			plugins: [
-			  new webpack.DefinePlugin({
-			  	'process.env.NODE_ENV': '"development"'
-			  })
+				new webpack.DefinePlugin({
+					'process.env.NODE_ENV': '"development"'
+				}),
+				new webpack.optimize.OccurenceOrderPlugin(),
+				new webpack.optimize.DedupePlugin()
 			]
 		}))
-		.pipe(gulp.dest('Resources/'));
+		.pipe(gulp.dest(OUTPUT_DIR));
 });
 
-gulp.task('build-react-prod', function () {
-	return gulp.src('Resources/react.js')
+gulp.task('build-deps-prod', function () {
+	return gulp.src(['Resources/react.js', 'Resources/babel.js'])
+		.pipe(named())
 		.pipe(webpackStream({
+			module: {
+				loaders: [
+					{
+						exclude: /node_modules/,
+						test: /\.js$/,
+						loader: 'babel',
+						query: {
+							presets: ['es2015', 'stage-0']
+						}
+					},
+				]
+			},
 			output: {
-				filename: 'react.generated.min.js',
+				filename: '[name].generated.min.js',
 				libraryTarget: 'this'
 			},
 			plugins: [
-			  new webpack.DefinePlugin({
-			  	'process.env.NODE_ENV': '"production"'
-			  })
+				new webpack.DefinePlugin({
+					'process.env.NODE_ENV': '"production"'
+				}),
+				new webpack.optimize.OccurenceOrderPlugin(),
+				new webpack.optimize.DedupePlugin()
 			]
 		}))
 		.pipe(uglify())
-		.pipe(gulp.dest('Resources/'));
-});
+		.pipe(gulp.dest(OUTPUT_DIR));
+});