Add router level support for rendering react componenent pages

src/components/appRouter.js

@@ -11,6 +11,7 @@ import viewManager from './viewManager/viewManager';
 import Dashboard from '../scripts/clientUtils';
 import ServerConnections from './ServerConnections';
 import alert from './alert';
+import reactControllerFactory from './reactControllerFactory';
 
 class AppRouter {
     allRoutes = [];
@@ -341,7 +342,9 @@ class AppRouter {
             this.sendRouteToViewManager(ctx, next, route, controllerFactory);
         };
 
-        if (route.controller) {
+        if (route.pageComponent) {
+            onInitComplete(reactControllerFactory);
+        } else if (route.controller) {
             import('../controllers/' + route.controller).then(onInitComplete);
         } else {
             onInitComplete();
@@ -373,6 +376,7 @@ class AppRouter {
             fullscreen: route.fullscreen,
             controllerFactory: controllerFactory,
             options: {
+                pageComponent: route.pageComponent,
                 supportsThemeMedia: route.supportsThemeMedia || false,
                 enableMediaControl: route.enableMediaControl !== false
             },

src/components/pages/TestPage.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TestPage = () => (
+    <h1>Hello from React!</h1>
+);
+
+export default TestPage;

src/components/reactControllerFactory.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// TODO: Probably need to rehydrate on view restores
+
+export default (view, params, { detail }) => {
+    if (detail.options?.pageComponent) {
+        import(/* webpackChunkName: "[request]" */ `./pages/${detail.options.pageComponent}`)
+            .then(({ default: component }) => {
+                ReactDOM.render(React.createElement(component), view);
+            });
+    }
+};

src/components/viewManager/viewManager.js

@@ -21,9 +21,9 @@ viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
         newView.initComplete = true;
 
         if (typeof options.controllerFactory === 'function') {
-            new options.controllerFactory(newView, eventDetail.detail.params);
+            new options.controllerFactory(newView, eventDetail.detail.params, eventDetail);
         } else if (options.controllerFactory && typeof options.controllerFactory.default === 'function') {
-            new options.controllerFactory.default(newView, eventDetail.detail.params);
+            new options.controllerFactory.default(newView, eventDetail.detail.params, eventDetail);
         }
 
         if (!options.controllerFactory || dispatchPageEvents) {

src/controllers/reactTest.html

@@ -0,0 +1 @@
+<div id="react-test" data-role="page" class="page standalonePage"></div>

src/scripts/routes.js

@@ -24,6 +24,12 @@ import { appRouter } from '../components/appRouter';
         appRouter.addRoute(path, newRoute);
     }
 
+    defineRoute({
+        alias: '/reactTest.html',
+        path: 'reactTest.html',
+        pageComponent: 'TestPage'
+    });
+
     defineRoute({
         alias: '/addserver.html',
         path: 'session/addServer/index.html',