diff --git a/src/components/appRouter.js b/src/components/appRouter.js index cfc04b1fe7..6d189a13d9 100644 --- a/src/components/appRouter.js +++ b/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 }, diff --git a/src/components/pages/TestPage.js b/src/components/pages/TestPage.js new file mode 100644 index 0000000000..2d42091612 --- /dev/null +++ b/src/components/pages/TestPage.js @@ -0,0 +1,7 @@ +import React from 'react'; + +const TestPage = () => ( +

Hello from React!

+); + +export default TestPage; diff --git a/src/components/reactControllerFactory.js b/src/components/reactControllerFactory.js new file mode 100644 index 0000000000..22aa48b388 --- /dev/null +++ b/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); + }); + } +}; diff --git a/src/components/viewManager/viewManager.js b/src/components/viewManager/viewManager.js index 22faa3a3bd..501bd928ae 100644 --- a/src/components/viewManager/viewManager.js +++ b/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) { diff --git a/src/controllers/reactTest.html b/src/controllers/reactTest.html new file mode 100644 index 0000000000..a0cbc97a91 --- /dev/null +++ b/src/controllers/reactTest.html @@ -0,0 +1 @@ +
diff --git a/src/scripts/routes.js b/src/scripts/routes.js index f9968a1fdf..7b78dff1e9 100644 --- a/src/scripts/routes.js +++ b/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',