Use GUIDs for container IDs, rather than sequential IDs. Closes #230

Author: Daniel15

src/React.Core/GuidExtensions.cs

@@ -0,0 +1,32 @@
+/*
+ *  Copyright (c) 2016-Present, 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.
+ */
+
+using System;
+
+namespace React
+{
+	/// <summary>
+	/// Extension methods relating to GUIDs.
+	/// </summary>
+	public static class GuidExtensions
+	{
+		/// <summary>
+		/// Returns a short identifier for this GUID.
+		/// </summary>
+		/// <param name="guid">The unique identifier.</param>
+		/// <returns>A short version of the unique identifier</returns>
+		public static string ToShortGuid(this Guid guid)
+		{
+			return Convert.ToBase64String(guid.ToByteArray())
+				.Replace("/", string.Empty)
+				.Replace("+", string.Empty)
+				.TrimEnd('=');
+		}
+	}
+}

src/React.Core/React.Core.csproj

@@ -98,6 +98,7 @@
     <Compile Include="Exceptions\BabelNotLoadedException.cs" />
     <Compile Include="Exceptions\ReactNotInitialisedException.cs" />
     <Compile Include="FileSystemExtensions.cs" />
+    <Compile Include="GuidExtensions.cs" />
     <Compile Include="JavaScriptEngineUtils.cs" />
     <Compile Include="VroomJsEngine.cs" />
     <Compile Include="Exceptions\ClearScriptV8InitialisationException.cs" />

src/React.Core/ReactComponent.cs

@@ -7,6 +7,7 @@
  *  of patent rights can be found in the PATENTS file in the same directory.
  */
 
+using System;
 using System.Linq;
 using System.Text.RegularExpressions;
 using JavaScriptEngineSwitcher.Core;
@@ -75,7 +76,7 @@ public ReactComponent(IReactEnvironment environment, IReactSiteConfiguration con
 			_environment = environment;
 			_configuration = configuration;
 			ComponentName = componentName;
-			ContainerId = containerId;
+			ContainerId = string.IsNullOrEmpty(containerId) ? GenerateId() : containerId;
 			ContainerTag = "div";
 		}
 
@@ -188,5 +189,14 @@ internal static void EnsureComponentNameValid(string componentName)
 				));
 			}
 		}
+
+		/// <summary>
+		/// Generates a unique identifier for this component, if one was not passed in.
+		/// </summary>
+		/// <returns></returns>
+		private static string GenerateId()
+		{
+			return "react_" + Guid.NewGuid().ToShortGuid();
+		}
 	}
 }

src/React.Core/ReactEnvironment.cs

@@ -26,11 +26,6 @@ namespace React
 	/// </summary>
 	public class ReactEnvironment : IReactEnvironment, IDisposable
 	{
-		/// <summary>
-		/// Format string used for React component container IDs
-		/// </summary>
-		protected const string CONTAINER_ELEMENT_NAME = "react{0}";
-
 		/// <summary>
 		/// JavaScript variable set when user-provided scripts have been loaded
 		/// </summary>
@@ -75,10 +70,6 @@ public class ReactEnvironment : IReactEnvironment, IDisposable
 		/// </summary>
 		protected readonly Lazy<IJsEngine> _engineFromPool;
 
-		/// <summary>
-		/// Number of components instantiated in this environment
-		/// </summary>
-		protected int _maxContainerId = 0;
 		/// <summary>
 		/// List of all components instantiated in this environment
 		/// </summary>
@@ -269,12 +260,6 @@ public virtual bool HasVariable(string name)
 		public virtual IReactComponent CreateComponent<T>(string componentName, T props, string containerId = null)
 		{
 			EnsureUserScriptsLoaded();
-			if (string.IsNullOrEmpty(containerId))
-			{
-				_maxContainerId++;
-				containerId = string.Format(CONTAINER_ELEMENT_NAME, _maxContainerId);	
-			}
-			
 			var component = new ReactComponent(this, _config, componentName, containerId)
 			{
 				Props = props

src/React.Tests/Core/GuidExtensionsTests.cs

@@ -0,0 +1,25 @@
+/*
+ *  Copyright (c) 2016-Present, 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.
+ */
+
+using System;
+using NUnit.Framework;
+
+namespace React.Tests.Core
+{
+	[TestFixture]
+	public class GuidExtensionsTests
+	{
+		[TestCase]
+		public void ToShortGuid()
+		{
+			var guid = Guid.Parse("c027191d-3785-485d-9fd7-5e0b376bd547");
+			Assert.AreEqual("HRknwIU3XUif114LN2vVRw", guid.ToShortGuid());
+		}
+	}
+}

src/React.Tests/Core/ReactComponentTest.cs

@@ -173,5 +173,17 @@ public void TestEnsureComponentNameValid(string input, bool expected)
 			}
 			Assert.AreEqual(expected, isValid);
 		}
+
+
+		[Test]
+		public void GeneratesContainerIdIfNotProvided()
+		{
+			var environment = new Mock<IReactEnvironment>();
+			var config = new Mock<IReactSiteConfiguration>();
+
+			var component = new ReactComponent(environment.Object, config.Object, "Foo", null);
+			StringAssert.StartsWith("react_", component.ContainerId);
+		}
+
 	}
 }

src/React.Tests/Core/ReactEnvironmentTest.cs

@@ -91,8 +91,8 @@ public void GeneratesContainerIdIfNotProvided()
 
 			var component1 = environment.CreateComponent("ComponentName", new { });
 			var component2 = environment.CreateComponent("ComponentName", new { });
-			Assert.AreEqual("react1", component1.ContainerId);
-			Assert.AreEqual("react2", component2.ContainerId);
+			StringAssert.StartsWith("react_", component1.ContainerId);
+			StringAssert.StartsWith("react_", component2.ContainerId);
 		}
 
 		[Test]
@@ -105,7 +105,7 @@ public void UsesProvidedContainerId()
 			var component1 = environment.CreateComponent("ComponentName", new { }, "foo");
 			var component2 = environment.CreateComponent("ComponentName", new { });
 			Assert.AreEqual("foo", component1.ContainerId);
-			Assert.AreEqual("react1", component2.ContainerId);
+			StringAssert.StartsWith("react_", component2.ContainerId);
 		}
 
 		private class Mocks

src/React.Tests/React.Tests.csproj

@@ -99,6 +99,7 @@
     <Compile Include="Core\FileCacheHashTests.cs" />
     <Compile Include="Core\FileSystemBaseTests.cs" />
     <Compile Include="Core\FileSystemExtensionsTest.cs" />
+    <Compile Include="Core\GuidExtensionsTests.cs" />
     <Compile Include="Core\JavaScriptEngineFactoryTest.cs" />
     <Compile Include="Core\JavaScriptEngineUtilsTests.cs" />
     <Compile Include="Core\BabelTransformerTests.cs" />