Support serving TSX files from ASP.NET bundle transforms

Author: dustinsoftware

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
@@ -37,7 +37,7 @@ public class BabelFileOptions
 		/// </summary>
 		public BabelFileOptions()
 		{
-			Extensions = new[] { ".jsx" };
+			Extensions = new[] { ".jsx", ".tsx" };
 			StaticFileOptions = new StaticFileOptions();
 		}
 	}

src/React.Sample.Mvc4/App_Start/BundleConfig.cs

@@ -1,4 +1,4 @@
-/*
+/*
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
@@ -17,7 +17,7 @@ public static void RegisterBundles(BundleCollection bundles)
 		{
 			bundles.Add(new BabelBundle("~/bundles/main").Include(
 				// Add your JSX files here
-				"~/Content/Sample.jsx"	
+				"~/Content/Sample.tsx"	
 			));
 
 			// Force minification/combination even in debug mode

src/React.Sample.Mvc4/App_Start/ReactConfig.cs

@@ -20,7 +20,8 @@ public static void Configure()
 				.SetReuseJavaScriptEngines(true)
 				.SetAllowJavaScriptPrecompilation(true)
 				.AddScriptWithoutTransform("~/Content/lib/reactstrap.min.js")
-				.AddScript("~/Content/Sample.jsx");
+				.SetBabelVersion("babel-7")
+				.AddScript("~/Content/Sample.tsx");
 
 			JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
 			JsEngineSwitcher.Current.EngineFactories.AddV8();

src/React.Sample.Mvc4/Content/Sample.jsx src/React.Sample.Mvc4/Content/Sample.tsx

@@ -7,6 +7,8 @@
  *  of patent rights can be found in the PATENTS file in the same directory.
  */
 
+type Foo = {}
+
 function CommentsBox(props) {
 	let [state, updateState] = React.useState({
 		comments: props.initialComments,

src/React.Sample.Mvc4/React.Sample.Mvc4.csproj

@@ -175,7 +175,7 @@
     <Content Include="Views\Home\Index.cshtml" />
   </ItemGroup>
   <ItemGroup>
-    <Content Include="Content\Sample.jsx" />
+    <None Include="Content\Sample.tsx" />
   </ItemGroup>
   <ItemGroup>
     <Content Include="TransformBabel.proj" />

src/React.Sample.Mvc4/Web.config

@@ -33,10 +33,6 @@
         <add namespace="System.Web.WebPages" />
       </namespaces>
     </pages>
-
-		<httpHandlers>
-			<add verb="GET" path="*.jsx" type="React.Web.BabelHandlerFactory, React.Web" />
-		</httpHandlers>
   </system.web>
 
   <system.webServer>
@@ -47,6 +43,7 @@
 		<handlers>
 			<remove name="babel" />
 			<add name="babel" verb="GET" path="*.jsx" type="React.Web.BabelHandlerFactory, React.Web" preCondition="integratedMode" />
+			<add name="babel-tsx" verb="GET" path="*.tsx" type="React.Web.BabelHandlerFactory, React.Web" preCondition="integratedMode" />
 		</handlers>
 
   </system.webServer>

src/System.Web.Optimization.React/BabelTransform.cs

@@ -1,11 +1,12 @@
-/*
+/*
  * 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.
  */
 
 using React;
+using System.Linq;
 
 namespace System.Web.Optimization.React
 {
@@ -23,7 +24,10 @@ public class BabelTransform : IBundleTransform
 		public void Process(BundleContext context, BundleResponse response)
 		{
 			var environment = ReactEnvironment.Current;
-			response.Content = environment.Babel.Transform(response.Content);
+			response.Content = environment.Babel.Transform(
+				response.Content,
+				response.Files.Any(x => x.IncludedVirtualPath.Contains("tsx")) ? "components.tsx" : "components.jsx"
+			);
 		}
 	}
 }

tutorial-code/Startup.cs

@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;