React 18 root support

.gitignore

@@ -190,3 +190,4 @@ UpgradeLog*.htm
 
 # Microsoft Fakes
 FakesAssemblies/
+src/.idea

src/React.Core/IReactSiteConfiguration.cs

@@ -228,5 +228,17 @@ public interface IReactSiteConfiguration
 		/// <param name="reactAppBuildPath"></param>
 		/// <returns></returns>
 		IReactSiteConfiguration SetReactAppBuildPath(string reactAppBuildPath);
+
+		/// <summary>
+		/// Gets or sets if the React 18+ create root api should be used for rendering / hydration.
+		/// If false ReactDOM.render / ReactDOM.hydrate will be used. 
+		/// </summary>
+		bool UseRootAPI { get; set; }
+
+		/// <summary>
+		/// Enables usage of the React 18 root API when rendering / hydrating.
+		/// </summary>
+		/// <returns></returns>
+		void EnableReact18RootAPI();
 	}
 }

src/React.Core/ReactComponent.cs

@@ -251,19 +251,62 @@ public virtual void RenderJavaScript(TextWriter writer, bool waitForDOMContentLo
 				writer.Write("window.addEventListener('DOMContentLoaded', function() {");
 			}
 
-			writer.Write(
-				!_configuration.UseServerSideRendering || ClientOnly ? "ReactDOM.render(" : "ReactDOM.hydrate(");
-			WriteComponentInitialiser(writer);
-			writer.Write(", document.getElementById(\"");
-			writer.Write(ContainerId);
-			writer.Write("\"))");
+			if (_configuration.UseRootAPI)
+			{
+				WriteComponentInitialization(writer);
+			}
+			else
+			{
+				WriteLegacyComponentInitialization(writer);
+			}
 
 			if (waitForDOMContentLoad)
 			{
 				writer.Write("});");
 			}
 		}
 
+		/// <summary>
+		/// Writes initialization code using the React 18 root API
+		/// </summary>
+		private void WriteComponentInitialization(TextWriter writer)
+		{
+			var hydrate = _configuration.UseServerSideRendering && !ClientOnly;
+			if (hydrate)
+			{
+				writer.Write("ReactDOM.hydrateRoot(");
+				writer.Write("document.getElementById(\"");
+				writer.Write(ContainerId);
+				writer.Write("\")");
+				writer.Write(", ");
+				WriteComponentInitialiser(writer);
+				writer.Write(")");
+			}
+			else
+			{
+				writer.Write("ReactDOM.createRoot(");
+				writer.Write("document.getElementById(\"");
+				writer.Write(ContainerId);
+				writer.Write("\"))");
+				writer.Write(".render(");
+				WriteComponentInitialiser(writer);
+				writer.Write(")");	
+			}
+		}
+
+		/// <summary>
+		/// Writes initialization code using the old ReactDOM.render / ReactDOM.hydrate APIs.
+		/// </summary>
+		private void WriteLegacyComponentInitialization(TextWriter writer)
+		{
+			writer.Write(
+				!_configuration.UseServerSideRendering || ClientOnly ? "ReactDOM.render(" : "ReactDOM.hydrate(");
+			WriteComponentInitialiser(writer);
+			writer.Write(", document.getElementById(\"");
+			writer.Write(ContainerId);
+			writer.Write("\"))");
+		}
+
 		/// <summary>
 		/// Ensures that this component exists in global scope
 		/// </summary>

src/React.Core/ReactSiteConfiguration.cs

@@ -375,5 +375,20 @@ public IReactSiteConfiguration SetReactAppBuildPath(string reactAppBuildPath)
 			ReactAppBuildPath = reactAppBuildPath;
 			return this;
 		}
+
+		/// <summary>
+		/// Gets or sets if the React 18+ create root api should be used for rendering / hydration.
+		/// If false ReactDOM.render / ReactDOM.hydrate will be used. 
+		/// </summary>
+		public bool UseRootAPI { get; set; }
+
+		/// <summary>
+		/// Enables usage of the React 18 root API when rendering / hydrating.
+		/// </summary>
+		/// <returns></returns>
+		public void EnableReact18RootAPI()
+		{
+			UseRootAPI = true;
+		}
 	}
 }

tests/React.Tests/Core/ReactComponentTest.cs

@@ -296,6 +296,114 @@ public void RenderJavaScriptShouldHandleWaitForContentLoad()
 				);
 			}
 		}
+
+		[Fact]
+		public void RenderJavaScriptShouldCallRenderComponentUsingRootAPI()
+		{
+			var environment = new Mock<IReactEnvironment>();
+			var config = CreateDefaultConfigMock();
+			config.SetupGet(x => x.UseRootAPI).Returns(true);
+			var reactIdGenerator = new Mock<IReactIdGenerator>();
+
+			var component = new ReactComponent(environment.Object, config.Object, reactIdGenerator.Object, "Foo", "container")
+			{
+				Props = new { hello = "World" }
+			};
+			var result = component.RenderJavaScript(false);
+
+			Assert.Equal(
+				@"ReactDOM.hydrateRoot(document.getElementById(""container""), React.createElement(Foo, {""hello"":""World""}))",
+				result
+			);
+		}
+
+		[Fact]
+		public void RenderJavaScriptShouldCallRenderComponentWithRootRender()
+		{
+			var environment = new Mock<IReactEnvironment>();
+			var config = CreateDefaultConfigMock();
+			config.SetupGet(x => x.UseRootAPI).Returns(true);
+			var reactIdGenerator = new Mock<IReactIdGenerator>();
+
+			var component = new ReactComponent(environment.Object, config.Object, reactIdGenerator.Object, "Foo", "container")
+			{
+				ClientOnly = true,
+				Props = new { hello = "World" }
+			};
+			var result = component.RenderJavaScript(false);
+
+			Assert.Equal(
+				@"ReactDOM.createRoot(document.getElementById(""container"")).render(React.createElement(Foo, {""hello"":""World""}))",
+				result
+			);
+		}
+
+		[Fact]
+		public void RenderJavaScriptShouldCallRenderComponentwithReactDOMHydrateRoot()
+		{
+			var environment = new Mock<IReactEnvironment>();
+			var config = CreateDefaultConfigMock();
+			config.SetupGet(x => x.UseRootAPI).Returns(true);
+			var reactIdGenerator = new Mock<IReactIdGenerator>();
+
+			var component = new ReactComponent(environment.Object, config.Object, reactIdGenerator.Object, "Foo", "container")
+			{
+				ClientOnly = false,
+				Props = new { hello = "World" }
+			};
+			var result = component.RenderJavaScript(false);
+
+			Assert.Equal(
+				@"ReactDOM.hydrateRoot(document.getElementById(""container""), React.createElement(Foo, {""hello"":""World""}))",
+				result
+			);
+		}
+
+		[Fact]
+		public void RenderJavaScriptShouldCallRootRenderWhenSsrDisabled()
+		{
+			var environment = new Mock<IReactEnvironment>();
+			var config = CreateDefaultConfigMock();
+			config.SetupGet(x => x.UseServerSideRendering).Returns(false);
+			config.SetupGet(x => x.UseRootAPI).Returns(true);
+
+			var reactIdGenerator = new Mock<IReactIdGenerator>();
+			var component = new ReactComponent(environment.Object, config.Object, reactIdGenerator.Object, "Foo", "container")
+			{
+				ClientOnly = false,
+				Props = new {hello = "World"}
+			};
+			var result = component.RenderJavaScript(false);
+
+			Assert.Equal(
+				@"ReactDOM.createRoot(document.getElementById(""container"")).render(React.createElement(Foo, {""hello"":""World""}))",
+				result
+			);
+		}
+
+		[Fact]
+		public void RenderJavaScriptShouldHandleWaitForContentLoadWhenUsingRootAPI()
+		{
+			var environment = new Mock<IReactEnvironment>();
+			var config = CreateDefaultConfigMock();
+			config.SetupGet(x => x.UseServerSideRendering).Returns(false);
+			config.SetupGet(x => x.UseRootAPI).Returns(true);
+
+			var reactIdGenerator = new Mock<IReactIdGenerator>();
+			var component = new ReactComponent(environment.Object, config.Object, reactIdGenerator.Object, "Foo", "container")
+			{
+				ClientOnly = false,
+				Props = new {hello = "World"}
+			};
+			using (var writer = new StringWriter())
+			{
+				component.RenderJavaScript(writer, waitForDOMContentLoad: true);
+				Assert.Equal(
+					@"window.addEventListener('DOMContentLoaded', function() {ReactDOM.createRoot(document.getElementById(""container"")).render(React.createElement(Foo, {""hello"":""World""}))});",
+					writer.ToString()
+				);
+			}
+		}
 
 		[Theory]
 		[InlineData("Foo", true)]