Implement babel 7 support (#763)

* Add option to switch between babel versions

* Fix build

* Fix babel 7 build

* Don't opt in to babel 7 by default

* Drop babel-loader

* Add integration tests for babel 6 / 7

* It's late

* Add test for working typescript transform

* Add test for TSX rendering

* Support serving TSX files from ASP.NET bundle transforms

* Remove out of date IIS classic mode transform

* Support serving TSX files on .NET Core

* Fix build

* Drop unused using

Author: dustinsoftware

build.proj

@@ -52,6 +52,10 @@ of patent rights can be found in the PATENTS file in the same directory.
 			WorkingDirectory="src/React.Core"
 			Command="npm install"
 		/>
+		<Exec
+			WorkingDirectory="src/React.Core/Resources/babel-legacy"
+			Command="npm install"
+		/>
 		<Exec
 			WorkingDirectory="src/React.Sample.Webpack.CoreMvc"
 			Command="npm install"
@@ -93,6 +97,7 @@ of patent rights can be found in the PATENTS file in the same directory.
 
 	<Target Name="Build" DependsOnTargets="RestorePackages;UpdateVersion">
 		<Exec WorkingDirectory="src/React.Core" Command="node_modules/.bin/webpack" />
+		<Exec WorkingDirectory="src/React.Core/Resources/babel-legacy" Command="node_modules/.bin/webpack" />
 		<MSBuild Projects="$(SolutionFile)" Targets="Rebuild" Properties="Configuration=Release;Platform=Any CPU;NoWarn=1607,7035,1701;Version=$(VersionString)" />
 		<Exec WorkingDirectory="src/React.Sample.Webpack.CoreMvc" Command="node_modules/.bin/webpack" />
 	</Target>

src/React.AspNet.Middleware/BabelFileOptions.cs

@@ -1,4 +1,4 @@
-/*
+/*
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
@@ -7,8 +7,10 @@
 using System.Collections.Generic;
 #if OWIN
 using Microsoft.Owin.StaticFiles;
+using Microsoft.Owin.StaticFiles.ContentTypes;
 #else
 using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.StaticFiles;
 #endif
 
 #if OWIN
@@ -37,8 +39,17 @@ public class BabelFileOptions
 		/// </summary>
 		public BabelFileOptions()
 		{
-			Extensions = new[] { ".jsx" };
-			StaticFileOptions = new StaticFileOptions();
+			Extensions = new[] { ".jsx", ".tsx" };
+			StaticFileOptions = new StaticFileOptions() { ContentTypeProvider = new JsxContentTypeProvider() } ;
+		}
+
+		private class JsxContentTypeProvider : IContentTypeProvider
+		{
+			public bool TryGetContentType(string subpath, out string contentType)
+			{
+				contentType = "text/javascript";
+				return true;
+			}
 		}
 	}
 }

src/React.Core/Babel.cs

@@ -1,4 +1,4 @@
-/*
+/*
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
@@ -74,7 +74,7 @@ public Babel(IReactEnvironment environment, ICache cache, IFileSystem fileSystem
 			_fileSystem = fileSystem;
 			_fileCacheHash = fileCacheHash;
 			_config = siteConfig;
-			_babelConfig = siteConfig.BabelConfig.Serialize();
+			_babelConfig = siteConfig.BabelConfig.Serialize(_config.BabelVersion);
 		}
 
 		/// <summary>

src/React.Core/BabelConfig.cs

@@ -1,6 +1,8 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using Newtonsoft.Json;
 using Newtonsoft.Json.Serialization;
+using React.Exceptions;
 
 namespace React
 {
@@ -22,28 +24,34 @@ public class BabelConfig
 		/// </summary>
 		public ISet<string> Presets { get; set; }
 
-		/// <summary>
-		/// Creates a new instance of <see cref="BabelConfig" />.
-		/// </summary>
-		public BabelConfig()
-		{
-			// 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>
 		/// Serializes this Babel configuration into the format required for Babel.
 		/// </summary>
 		/// <returns></returns>
-		public string Serialize()
+		public string Serialize(string babelVersion)
 		{
-			return JsonConvert.SerializeObject(this, new JsonSerializerSettings
-			{
-				ContractResolver = new CamelCasePropertyNamesContractResolver(),
-			});
+			ISet<string> defaultPresets = babelVersion == BabelVersions.Babel7
+				? new HashSet<string> { "typescript", "react" }
+				: babelVersion == BabelVersions.Babel6 || babelVersion == null
+					? new HashSet<string> { "es2015-no-commonjs", "stage-1", "react" }
+					: throw new ArgumentException(nameof(babelVersion));
+
+			ISet<string> defaultPlugins = babelVersion == BabelVersions.Babel7
+				? new HashSet<string> { "proposal-class-properties", "proposal-object-rest-spread" }
+				: babelVersion == BabelVersions.Babel6 || babelVersion == null
+					? new HashSet<string>()
+					: throw new ArgumentException(nameof(babelVersion));
+
+			return JsonConvert.SerializeObject(
+				new BabelConfig
+				{
+					Plugins = Plugins ?? defaultPlugins,
+					Presets = Presets ?? defaultPresets,
+				}, 
+				new JsonSerializerSettings
+				{
+					ContractResolver = new CamelCasePropertyNamesContractResolver(),
+				});
 		}
 	}
 }

src/React.Core/BabelVersions.cs

@@ -0,0 +1,23 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+
+namespace React
+{
+	/// <summary>
+	/// Public string values for babel versions
+	/// </summary>
+	public static class BabelVersions
+	{
+		/// <summary>
+		/// Babel 6
+		/// </summary>
+		public static readonly string Babel6 = "babel-6";
+
+		/// <summary>
+		/// Babel 7
+		/// </summary>
+		public static readonly string Babel7 = "babel-7";
+	}
+}

src/React.Core/IReactSiteConfiguration.cs

@@ -158,6 +158,17 @@ public interface IReactSiteConfiguration
 		/// <returns>The configuration, for chaining</returns>
 		IReactSiteConfiguration SetBabelConfig(BabelConfig value);
 
+		/// <summary>
+		/// Gets or sets the Babel version to use. Supports "babel@6 or babel@7".
+		/// </summary>
+		string BabelVersion { get; set; }
+
+		/// <summary>
+		/// Sets the Babel configuration to use.
+		/// </summary>
+		/// <returns>The configuration, for chaining</returns>
+		IReactSiteConfiguration SetBabelVersion(string value);
+
 		/// <summary>
 		/// Gets or sets whether to use the debug version of React. This is slower, but gives
 		/// useful debugging tips.

src/React.Core/React.Core.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <Description>ReactJS and Babel tools for .NET. Important: This package does not do much on its own; you probably want an integration package (like React.Web.Mvc4) as well. Please refer to project site (http://reactjs.net/) for more details, usage examples and sample code.</Description>
@@ -21,13 +21,21 @@
 
   <ItemGroup>
     <Compile Remove="node_modules\**" />
+    <Compile Remove="Resources\babel-legacy\node_modules\**" />
     <EmbeddedResource Remove="node_modules\**" />
+    <EmbeddedResource Remove="Resources\babel-legacy\node_modules\**" />
     <None Remove="node_modules\**" />
+    <None Remove="Resources\babel-legacy\node_modules\**" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Remove="Resources\babel-legacy.generated.min.js" />
   </ItemGroup>
 
   <ItemGroup>
     <Compile Include="..\SharedAssemblyInfo.cs" />
     <Compile Include="..\SharedAssemblyVersionInfo.cs" />
+    <EmbeddedResource Include="Resources\babel-legacy.generated.min.js" />
     <EmbeddedResource Include="Resources\shims.js;Resources\react.generated.js;Resources\react.generated.min.js;Resources\babel.generated.min.js" />
   </ItemGroup>
 

src/React.Core/ReactEnvironment.cs

@@ -480,7 +480,11 @@ private void EnsureBabelLoaded(IJsEngine engine)
 #else
 				var assembly = typeof(ReactEnvironment).GetTypeInfo().Assembly;
 #endif
-				const string resourceName = "React.Core.Resources.babel.generated.min.js";
+				string resourceName = _config.BabelVersion == BabelVersions.Babel7
+					? "React.Core.Resources.babel.generated.min.js"
+					: _config.BabelVersion == BabelVersions.Babel6 || _config.BabelVersion == null
+						? "React.Core.Resources.babel-legacy.generated.min.js"
+						: throw new ReactConfigurationException("BabelVersion was not null, but did not contain a valid value.");
 
 				if (_config.AllowJavaScriptPrecompilation
 					&& engine.TryExecuteResourceWithPrecompilation(_cache, resourceName, assembly))

src/React.Core/ReactSiteConfiguration.cs

@@ -280,6 +280,21 @@ public IReactSiteConfiguration SetBabelConfig(BabelConfig value)
 			return this;
 		}
 
+		/// <summary>
+		/// Gets or sets the Babel version to use. Supports "babel@6 or babel@7".
+		/// </summary>
+		public string BabelVersion { get; set; }
+
+		/// <summary>
+		/// Sets the Babel version to use.
+		/// </summary>
+		/// <returns>The configuration, for chaining</returns>
+		public IReactSiteConfiguration SetBabelVersion(string value)
+		{
+			BabelVersion = value;
+			return this;
+		}
+
 		/// <summary>
 		/// Gets or sets whether to use the debug version of React. This is slower, but gives
 		/// useful debugging tips.

src/React.Core/Resources/babel-legacy/babel.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+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);
+	}
+}