Support source maps in JsxHandler

Author: Daniel15

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

@@ -30,21 +30,21 @@ var CommentsBox = React.createClass({
 		var url = evt.target.href;
 		var xhr = new XMLHttpRequest();
 		xhr.open('GET', url, true);
-		xhr.onload = function() {
+		xhr.onload = () => {
 			var data = JSON.parse(xhr.responseText);
 			this.setState({
 				comments: this.state.comments.concat(data.comments),
 				hasMore: data.hasMore,
 				loadingMore: false
 			});
-		}.bind(this);
+		};
 		xhr.send();
 		return false;
 	},
 	render() {
-		var commentNodes = this.state.comments.map(function (comment) {
-			return <Comment author={comment.Author}>{comment.Text}</Comment>;
-		});
+		var commentNodes = this.state.comments.map(comment =>
+			<Comment author={comment.Author}>{comment.Text}</Comment>
+		);
 
 		return (
 			<div className="comments">

src/React.Tests/Core/JsxTransformerTests.cs

@@ -8,7 +8,6 @@
  */
 
 using System;
-using System.Collections.Generic;
 using Moq;
 using NUnit.Framework;
 using React.Exceptions;
@@ -21,7 +20,7 @@ public class JsxTransformerTests
 		private Mock<IReactEnvironment> _environment;
 		private Mock<ICache> _cache;
 		private Mock<IFileSystem> _fileSystem;
-		private Mock<IFileCacheHash> _fileCacheHash; 
+		private Mock<IFileCacheHash> _fileCacheHash;
 		private JsxTransformer _jsxTransformer;
 
 		[SetUp]
@@ -85,13 +84,10 @@ public void ShouldThrowIfEngineNotSupported()
 		[Test]
 		public void ShouldUseCacheProvider()
 		{
-			_cache.Setup(x => x.GetOrInsert(
-				/*key*/ "JSX_foo.jsx",
-				/*slidingExpiration*/ It.IsAny<TimeSpan>(),
-				/*getData*/ It.IsAny<Func<string>>(),
-				/*cacheDependencyKeys*/ It.IsAny<IEnumerable<string>>(),
-				/*cacheDependencyFiles*/ It.IsAny<IEnumerable<string>>()                
-			)).Returns("/* cached */");
+			_cache.Setup(x => x.Get<JavaScriptWithSourceMap>("JSX_v2_foo.jsx", null)).Returns(new JavaScriptWithSourceMap
+			{
+				Code = "/* cached */"
+			});
 
 			var result = _jsxTransformer.TransformJsxFile("foo.jsx");
 			Assert.AreEqual("/* cached */", result);
@@ -104,7 +100,7 @@ public void ShouldUseFileSystemCacheIfHashValid()
 			_fileSystem.Setup(x => x.FileExists("foo.generated.js")).Returns(true);
 			_fileSystem.Setup(x => x.ReadAsString("foo.generated.js")).Returns("/* filesystem cached */");
 			_fileCacheHash.Setup(x => x.ValidateHash(It.IsAny<string>(), It.IsAny<string>())).Returns(true);
-			
+
 			var result = _jsxTransformer.TransformJsxFile("foo.jsx");
 			Assert.AreEqual("/* filesystem cached */", result);
 		}
@@ -117,13 +113,14 @@ public void ShouldTransformJsxIfFileCacheHashInvalid()
 			_fileSystem.Setup(x => x.ReadAsString("foo.generated.js")).Returns("/* filesystem cached invalid */");
 			_fileSystem.Setup(x => x.ReadAsString("foo.jsx")).Returns("<div>Hello World</div>");
 			_fileCacheHash.Setup(x => x.ValidateHash(It.IsAny<string>(), It.IsAny<string>())).Returns(false);
-
-			_jsxTransformer.TransformJsxFile("foo.jsx");
-			_environment.Verify(x => x.ExecuteWithLargerStackIfRequired<string>(
-				"ReactNET_transform",
-				"<div>Hello World</div>",
+			_environment.Setup(x => x.ExecuteWithLargerStackIfRequired<JavaScriptWithSourceMap>(
+				"ReactNET_transform_sourcemap",
+				It.IsAny<string>(),
 				false
-			));
+			)).Returns(new JavaScriptWithSourceMap { Code = "React.DOM.div('Hello World')" });
+
+			var result = _jsxTransformer.TransformJsxFile("foo.jsx");
+			Assert.AreEqual("React.DOM.div('Hello World')", result);
 		}
 
 		[Test]
@@ -132,24 +129,25 @@ public void ShouldTransformJsxIfNoCache()
 			SetUpEmptyCache();
 			_fileSystem.Setup(x => x.FileExists("foo.generated.js")).Returns(false);
 			_fileSystem.Setup(x => x.ReadAsString("foo.jsx")).Returns("<div>Hello World</div>");
-
-			_jsxTransformer.TransformJsxFile("foo.jsx");
-			_environment.Verify(x => x.ExecuteWithLargerStackIfRequired<string>(
-				"ReactNET_transform",
-				"<div>Hello World</div>",
+			_environment.Setup(x => x.ExecuteWithLargerStackIfRequired<JavaScriptWithSourceMap>(
+				"ReactNET_transform_sourcemap",
+				It.IsAny<string>(),
 				false
-			));
+			)).Returns(new JavaScriptWithSourceMap { Code = "React.DOM.div('Hello World')" });
+
+			var result = _jsxTransformer.TransformJsxFile("foo.jsx");
+			Assert.AreEqual("React.DOM.div('Hello World')", result);
 		}
 
 		[Test]
 		public void ShouldSaveTransformationResult()
 		{
 			_fileSystem.Setup(x => x.ReadAsString("foo.jsx")).Returns("<div>Hello World</div>");
-			_environment.Setup(x => x.ExecuteWithLargerStackIfRequired<string>(
-				"ReactNET_transform",
-				"<div>Hello World</div>",
+			_environment.Setup(x => x.ExecuteWithLargerStackIfRequired<JavaScriptWithSourceMap>(
+				"ReactNET_transform_sourcemap",
+				It.IsAny<string>(),
 				false
-			)).Returns("React.DOM.div('Hello World')");
+			)).Returns(new JavaScriptWithSourceMap { Code = "React.DOM.div('Hello World')" });
 
 			string result = null;
 			_fileSystem.Setup(x => x.WriteAsString("foo.generated.js", It.IsAny<string>())).Callback(
@@ -163,20 +161,7 @@ public void ShouldSaveTransformationResult()
 
 		private void SetUpEmptyCache()
 		{
-			_cache.Setup(x => x.GetOrInsert(
-				/*key*/ "JSX_foo.jsx",
-				/*slidingExpiration*/ It.IsAny<TimeSpan>(),
-				/*getData*/ It.IsAny<Func<string>>(),
-				/*cacheDependencyKeys*/ It.IsAny<IEnumerable<string>>(),
-				/*cacheDependencyFiles*/ It.IsAny<IEnumerable<string>>()
-			))
-			.Returns((
-				string key, 
-				TimeSpan slidingExpiration, 
-				Func<string> getData, 
-				IEnumerable<string> cacheDependencyFiles, 
-				IEnumerable<string> cacheDependencyKeys
-			) => getData());
+			_cache.Setup(x => x.Get<JavaScriptWithSourceMap>("JSX_v2_foo.jsx", null)).Returns((JavaScriptWithSourceMap)null);
 		}
 	}
 }

src/React.Web/AspNetCache.cs

@@ -35,15 +35,28 @@ public AspNetCache(HttpContextBase context)
 		}
 
 		/// <summary>
-		/// Get an item from the cache. If it doesn't exist, call the function to load it
+		/// Get an item from the cache. Returns <paramref name="fallback"/> if the item does
+		/// not exist.
 		/// </summary>
 		/// <typeparam name="T">Type of data</typeparam>
-		/// <param name="key">The cache key.</param>
+		/// <param name="key">The cache key</param>
+		/// <param name="fallback">Value to return if item is not in the cache</param>
+		/// <returns>Data from cache, otherwise <paramref name="fallback"/></returns>
+		public T Get<T>(string key, T fallback = default(T))
+		{
+			return (T)(_cache[key] ?? fallback);
+		}
+
+		/// <summary>
+		/// Sets an item in the cache.
+		/// </summary>
+		/// <typeparam name="T">Type of data</typeparam>
+		/// <param name="key">The cache key</param>
+		/// <param name="data">Data to cache</param>
 		/// <param name="slidingExpiration">
 		/// Sliding expiration, if cache key is not accessed in this time period it will 
 		/// automatically be removed from the cache
 		/// </param>
-		/// <param name="getData">Function to load data to cache. Called if data isn't in the cache, or is stale</param>
 		/// <param name="cacheDependencyFiles">
 		/// Filenames this cached item is dependent on. If any of these files change, the cache
 		/// will be cleared automatically
@@ -52,31 +65,18 @@ public AspNetCache(HttpContextBase context)
 		/// Other cache keys this cached item is dependent on. If any of these keys change, the
 		/// cache will be cleared automatically
 		/// </param>
-		/// <returns>Data</returns>
-		public T GetOrInsert<T>(
-			string key, 
-			TimeSpan slidingExpiration,
-			Func<T> getData,
+		public void Set<T>(
+			string key, T data, 
+			TimeSpan slidingExpiration, 
 			IEnumerable<string> cacheDependencyFiles = null,
 			IEnumerable<string> cacheDependencyKeys = null
 		)
 		{
-			// Check for data in cache
-			var data = (T)(_cache[key] ?? default(T));
-
-			// http://stackoverflow.com/questions/65351/null-or-default-comparsion-of-generic-argument-in-c-sharp
-			if (object.Equals(data, default(T)))
-			{
-				// Load data and save into cache
-				data = getData();
-				var cacheDependency = new CacheDependency(
-					(cacheDependencyFiles ?? Enumerable.Empty<string>()).ToArray(),
-					(cacheDependencyKeys ?? Enumerable.Empty<string>()).ToArray()
-				);
-				_cache.Insert(key, data, cacheDependency, Cache.NoAbsoluteExpiration, slidingExpiration);
-			}
-
-			return data;
+			var cacheDependency = new CacheDependency(
+				(cacheDependencyFiles ?? Enumerable.Empty<string>()).ToArray(),
+				(cacheDependencyKeys ?? Enumerable.Empty<string>()).ToArray()
+			);
+			_cache.Insert(key, data, cacheDependency, Cache.NoAbsoluteExpiration, slidingExpiration);
 		}
 	}
 }

src/React.Web/JsxHandler.cs

@@ -8,7 +8,6 @@
  */
 
 using System.Web;
-using System.Web.Caching;
 
 namespace React.Web
 {
@@ -46,18 +45,75 @@ HttpResponseBase response
 		/// Executes the handler. Outputs JavaScript to the response.
 		/// </summary>
 		public void Execute()
+		{
+			if (_request.QueryString["map"] != null)
+			{
+				RenderSourceMap();
+			}
+			else
+			{
+				RenderJsxFile();
+			}
+		}
+
+		/// <summary>
+		/// Renders the JSX file converted to regular JavaScript.
+		/// </summary>
+		private void RenderJsxFile()
 		{
 			var relativePath = _request.Url.LocalPath;
-			var result = _environment.JsxTransformer.TransformJsxFile(relativePath);
+			var result = _environment.JsxTransformer.TransformJsxFileWithSourceMap(relativePath);
+			var sourceMapUri = GetSourceMapUri(relativePath, result.Hash);
+			ConfigureCaching();
+			_response.ContentType = "text/javascript";
+			// The sourcemap spec says to use SourceMap, but Firefox only accepts X-SourceMap
+			_response.AddHeader("SourceMap", sourceMapUri);
+			_response.AddHeader("X-SourceMap", sourceMapUri);
 
-			// Only cache on the server-side for now
-			_response.AddFileDependency(_fileSystem.MapPath(relativePath));
+			_response.Write(result.Code);
+		}
+
+		/// <summary>
+		/// Renders the source map for this JSX file.
+		/// </summary>
+		private void RenderSourceMap()
+		{
+			var relativePath = _request.Url.LocalPath;
+			var result = _environment.JsxTransformer.TransformJsxFileWithSourceMap(relativePath, forceGenerateSourceMap: true);
+			if (result.SourceMap == null)
+			{
+				_response.StatusCode = 500;
+				_response.StatusDescription = "Unable to generate source map";
+				return;
+			}
+			var sourceMap = result.SourceMap.ToJson();
+
+			ConfigureCaching();
+			_response.ContentType = "application/json";
+			//_response.Write(")]}\n"); // Recommended by the spec but Firefox doesn't support it
+			_response.Write(sourceMap);
+		}
+
+		/// <summary>
+		/// Send headers to cache the response. Only caches on the server-side for now
+		/// </summary>
+		private void ConfigureCaching()
+		{
+			_response.AddFileDependency(_fileSystem.MapPath(_request.Url.LocalPath));
 			_response.Cache.SetCacheability(HttpCacheability.Server);
 			_response.Cache.SetLastModifiedFromFileDependencies();
 			_response.Cache.SetETagFromFileDependencies();
+		}
 
-			_response.ContentType = "text/javascript";
-			_response.Write(result);
+		/// <summary>
+		/// Gets the URI to the source map of the specified file
+		/// </summary>
+		/// <param name="relativePath">Relative path to the JavaScript file</param>
+		/// <param name="hash">Hash of the file</param>
+		/// <returns>URI to the file</returns>
+		private static string GetSourceMapUri(string relativePath, string hash)
+		{
+			return string.Format("{0}?map={1}", relativePath, hash);
 		}
 	}
 }

src/React.Web/React.Web.csproj

@@ -46,6 +46,9 @@
       <Private>True</Private>
       <HintPath>..\packages\Microsoft.Web.Infrastructure.1.0.0.0\lib\net40\Microsoft.Web.Infrastructure.dll</HintPath>
     </Reference>
+    <Reference Include="Newtonsoft.Json, Version=4.5.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed, processorArchitecture=MSIL">
+      <HintPath>..\packages\Newtonsoft.Json.5.0.4\lib\net40\Newtonsoft.Json.dll</HintPath>
+    </Reference>
     <Reference Include="System" />
     <Reference Include="System.Core" />
     <Reference Include="Microsoft.CSharp" />

src/React.Web/packages.config

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
   <package id="Microsoft.Web.Infrastructure" version="1.0.0.0" targetFramework="net40" />
+  <package id="Newtonsoft.Json" version="5.0.4" targetFramework="net40" />
   <package id="WebActivatorEx" version="2.0.5" targetFramework="net40" />
 </packages>

src/React/FileCacheHash.cs

@@ -21,7 +21,7 @@ public class FileCacheHash : IFileCacheHash
 		/// <summary>
 		/// Prefix used for hash line in transformed file. Used for caching.
 		/// </summary>
-		internal const string HASH_PREFIX = "// @hash ";
+		internal const string HASH_PREFIX = "// @hash v2-";
 
 		/// <summary>
 		/// Althorithm for calculating file hashes

src/React/ICache.cs

@@ -18,15 +18,25 @@ namespace React
 	public interface ICache
 	{
 		/// <summary>
-		/// Get an item from the cache. If it doesn't exist, call the function to load it
+		/// Get an item from the cache. Returns <paramref name="fallback"/> if the item does
+		/// not exist.
 		/// </summary>
 		/// <typeparam name="T">Type of data</typeparam>
-		/// <param name="key">The cache key.</param>
+		/// <param name="key">The cache key</param>
+		/// <param name="fallback">Value to return if item is not in the cache</param>
+		/// <returns>Data from cache, otherwise <paramref name="fallback"/></returns>
+		T Get<T>(string key, T fallback = default(T));
+
+		/// <summary>
+		/// Sets an item in the cache.
+		/// </summary>
+		/// <typeparam name="T">Type of data</typeparam>
+		/// <param name="key">The cache key</param>
+		/// <param name="data">Data to cache</param>
 		/// <param name="slidingExpiration">
 		/// Sliding expiration, if cache key is not accessed in this time period it will 
 		/// automatically be removed from the cache
 		/// </param>
-		/// <param name="getData">Function to load data to cache. Called if data isn't in the cache, or is stale</param>
 		/// <param name="cacheDependencyFiles">
 		/// Filenames this cached item is dependent on. If any of these files change, the cache
 		/// will be cleared automatically
@@ -35,11 +45,10 @@ public interface ICache
 		/// Other cache keys this cached item is dependent on. If any of these keys change, the
 		/// cache will be cleared automatically
 		/// </param>
-		/// <returns>Data</returns>
-		T GetOrInsert<T>(
-			string key, 
+		void Set<T>(
+			string key,
+			T data,
 			TimeSpan slidingExpiration,
-			Func<T> getData,
 			IEnumerable<string> cacheDependencyFiles = null,
 			IEnumerable<string> cacheDependencyKeys = null
 		);