Add support for React19

Author: oivindhagen

src/Frontend/React19Source/package-lock.json

@@ -0,0 +1,13 @@
+{
+  "dependencies": {
+    "react": "^19.0.0-beta-94eed63c49-20240425",
+    "react-dom": "^19.0.0-beta-94eed63c49-20240425"
+  },
+  "scripts": {
+    "build-dotnetframework": "esbuild ./src/app.tsx --bundle --platform=browser --outfile=../../SSR.Net.DotNetFramework/Frontend/react19example.js",
+    "build-dotnet6": "esbuild ./src/app.tsx --bundle --outfile=../../SSR.Net.DotNet6/wwwroot/react19example.js"
+  },
+  "devDependencies": {
+    "esbuild": "^0.17.7"
+  }
+}

src/Frontend/React19Source/package.json

@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface Props{
+    header?: string;
+    intro?: string;
+    text?: string;
+}
+
+const ArticlePage = ({header, intro, text}: Props)=>{
+return <div><h1>{header}</h1><p style={{fontSize:'24px'}}>{intro}</p><p>{text}</p></div>
+}
+
+export default ArticlePage;

src/Frontend/React19Source/src/Components/ArticlePage.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+
+interface Link {
+  text: string;
+  href: string;
+}
+
+interface Props {
+  header?: string;
+  links?: Link[];
+}
+
+const FrontPage = ({ header, links }: Props) => {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <div>
+      <h1>{header}</h1>
+      {links && (
+        <>
+          <button onClick={() => setExpanded(!expanded)}>Expand links</button>
+          {expanded && (
+            <ul>
+              {links.map((link, idx) => (
+                <li key={idx}>
+                  <a href={link.href}>{link.text}</a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default FrontPage;

src/Frontend/React19Source/src/Components/FrontPage.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import * as ReactDOMServer from 'react-dom/server'
+import * as ReactDOMClient from 'react-dom/client'
+import FrontPage from './Components/FrontPage'
+import ArticlePage from './Components/ArticlePage'
+
+globalThis.React = React;
+globalThis.ReactDOMServer = ReactDOMServer;
+globalThis.ReactDOMClient = ReactDOMClient;
+globalThis.Components = {FrontPage, ArticlePage};

src/Frontend/React19Source/src/app.tsx

@@ -56,6 +56,25 @@ public ActionResult React18() {
             return View(renderedComponent);
         }
 
+        public ActionResult React19() {
+            var propsJson = JsonConvert.SerializeObject(
+                new {
+                    header = "React 19 with SSR",
+                    links = new[]{
+                        new {
+                            text = "Google.com",
+                            href = "https://www.google.com"
+                        },
+                        new {
+                            text = "Hacker news",
+                            href = "https://news.ycombinator.org"
+                        }
+                    }
+                });
+            var renderedComponent = _react18Renderer.RenderComponent("Components.FrontPage", propsJson);
+            return View(renderedComponent);
+        }
+
         public ActionResult Vue3() {
             var propsJson = JsonConvert.SerializeObject(
                 new {

src/SSR.Net.DotNet6/Controllers/HomeController.cs

@@ -7,6 +7,7 @@
 
 builder.Services.AddReact17Renderer(builder.Environment);
 builder.Services.AddReact18Renderer(builder.Environment);
+builder.Services.AddReact19Renderer(builder.Environment);
 builder.Services.AddVue3Renderer(builder.Environment);
 
 var app = builder.Build();

src/SSR.Net.DotNet6/Program.cs

@@ -7,11 +7,11 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="JavaScriptEngineSwitcher.Core" Version="3.19.0" />
-    <PackageReference Include="JavaScriptEngineSwitcher.V8" Version="3.20.10" />
-    <PackageReference Include="Microsoft.ClearScript.Core" Version="7.3.7" />
-    <PackageReference Include="Microsoft.ClearScript.V8.Native.win-x64" Version="7.3.7" />
-    <PackageReference Include="Microsoft.ClearScript.V8.Native.win-x86" Version="7.3.7" />
+    <PackageReference Include="JavaScriptEngineSwitcher.Core" Version="3.24.1" />
+    <PackageReference Include="JavaScriptEngineSwitcher.V8" Version="3.24.2" />
+    <PackageReference Include="Microsoft.ClearScript.Core" Version="7.4.5" />
+    <PackageReference Include="Microsoft.ClearScript.V8.Native.win-x64" Version="7.4.5" />
+    <PackageReference Include="Microsoft.ClearScript.V8.Native.win-x86" Version="7.4.5" />
   </ItemGroup>
 
   <ItemGroup>

src/SSR.Net.DotNet6/SSR.Net.DotNet6.csproj

@@ -0,0 +1,18 @@
+using JavaScriptEngineSwitcher.V8;
+using SSR.Net.Services;
+
+namespace SSR.Net.DotNet6.Services
+{
+    public static class ServiceCollectionExtensionsReact19SSR
+    {
+        public static void AddReact19Renderer(this IServiceCollection services, IWebHostEnvironment webHostEnvironment)
+        {
+            var pool = new JavaScriptEnginePool(new V8JsEngineFactory(), config =>
+                config
+                    .AddScriptFile(Path.Combine(webHostEnvironment.WebRootPath, "React19TextEncoderPolyfill.js"))
+                    .AddScriptFile(Path.Combine(webHostEnvironment.WebRootPath, "react19example.js"))
+            );
+            services.AddSingleton(new React19Renderer(pool));
+        }
+    }
+}

src/SSR.Net.DotNet6/Services/ServiceCollectionExtensionsReact19SSR.cs

@@ -8,6 +8,7 @@
     <ul>
         <li>@Html.ActionLink("React 17","React17")</li>
         <li>@Html.ActionLink("React 18","React18")</li>
+        <li>@Html.ActionLink("React 19","React19")</li>
         <li>@Html.ActionLink("Vue 3","Vue3")</li>
     </ul>
 </body>