Chunk out the different routers and clean up feature logic

resources/scripts/components/App.tsx

@@ -1,11 +1,8 @@
-import React from 'react';
+import React, { lazy } from 'react';
 import { hot } from 'react-hot-loader/root';
 import { Route, Router, Switch } from 'react-router-dom';
 import { StoreProvider } from 'easy-peasy';
 import { store } from '@/state';
-import DashboardRouter from '@/routers/DashboardRouter';
-import ServerRouter from '@/routers/ServerRouter';
-import AuthenticationRouter from '@/routers/AuthenticationRouter';
 import { SiteSettings } from '@/state/settings';
 import ProgressBar from '@/components/elements/ProgressBar';
 import { NotFound } from '@/components/elements/ScreenBlock';
@@ -16,6 +13,11 @@ import { setupInterceptors } from '@/api/interceptors';
 import AuthenticatedRoute from '@/components/elements/AuthenticatedRoute';
 import { ServerContext } from '@/state/server';
 import '@/assets/tailwind.css';
+import Spinner from '@/components/elements/Spinner';
+
+const DashboardRouter = lazy(() => import(/* webpackChunkName: "dash" */'@/routers/DashboardRouter'));
+const ServerRouter = lazy(() => import('@/routers/ServerRouter'));
+const AuthenticationRouter = lazy(() => import('@/routers/AuthenticationRouter'));
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;
@@ -63,15 +65,21 @@ const App = () => {
                     <Router history={history}>
                         <Switch>
                             <Route path={'/auth'}>
+                                <Spinner.Suspense>
                                     <AuthenticationRouter/>
+                                </Spinner.Suspense>
                             </Route>
                             <AuthenticatedRoute path={'/server/:id'}>
+                                <Spinner.Suspense>
                                     <ServerContext.Provider>
                                         <ServerRouter/>
                                     </ServerContext.Provider>
+                                </Spinner.Suspense>
                             </AuthenticatedRoute>
                             <AuthenticatedRoute path={'/'}>
+                                <Spinner.Suspense>
                                     <DashboardRouter/>
+                                </Spinner.Suspense>
                             </AuthenticatedRoute>
                             <Route path={'*'}>
                                 <NotFound/>

resources/scripts/components/server/ServerConsole.tsx

@@ -1,4 +1,4 @@
-import React, { lazy, memo } from 'react';
+import React, { memo } from 'react';
 import { ServerContext } from '@/state/server';
 import Can from '@/components/elements/Can';
 import ContentContainer from '@/components/elements/ContentContainer';
@@ -7,15 +7,14 @@ import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import ServerDetailsBlock from '@/components/server/ServerDetailsBlock';
 import isEqual from 'react-fast-compare';
 import PowerControls from '@/components/server/PowerControls';
-import { EulaModalFeature, JavaVersionModalFeature, GSLTokenModalFeature, PIDLimitModalFeature, SteamDiskSpaceFeature } from '@feature/index';
 import ErrorBoundary from '@/components/elements/ErrorBoundary';
 import Spinner from '@/components/elements/Spinner';
+import Features from '@feature/Features';
+import Console from '@/components/server/Console';
+import StatGraphs from '@/components/server/StatGraphs';
 
 export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
 
-const ChunkedConsole = lazy(() => import(/* webpackChunkName: "console" */'@/components/server/Console'));
-const ChunkedStatGraphs = lazy(() => import(/* webpackChunkName: "graphs" */'@/components/server/StatGraphs'));
-
 const ServerConsole = () => {
     const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling);
     const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring);
@@ -53,17 +52,11 @@ const ServerConsole = () => {
             <div css={tw`w-full lg:w-3/4 mt-4 lg:mt-0 lg:pl-4`}>
                 <Spinner.Suspense>
                     <ErrorBoundary>
-                        <ChunkedConsole/>
+                        <Console/>
                     </ErrorBoundary>
-                    <ChunkedStatGraphs/>
+                    <StatGraphs/>
                 </Spinner.Suspense>
-                <React.Suspense fallback={null}>
+                <Features enabled={eggFeatures} />
-                    {eggFeatures.includes('eula') && <EulaModalFeature/>}
-                    {eggFeatures.includes('java_version') && <JavaVersionModalFeature/>}
-                    {eggFeatures.includes('gsl_token') && <GSLTokenModalFeature/>}
-                    {eggFeatures.includes('pid_limit') && <PIDLimitModalFeature/>}
-                    {eggFeatures.includes('steam_disk_space') && <SteamDiskSpaceFeature/>}
-                </React.Suspense>
             </div>
         </ServerContentBlock>
     );

resources/scripts/components/server/features/Features.tsx

@@ -0,0 +1,19 @@
+import React, { useMemo } from 'react';
+import features from './index';
+import { getObjectKeys } from '@/helpers';
+
+type ListItems = [ string, React.ComponentType ][];
+
+export default ({ enabled }: { enabled: string[] }) => {
+    const mapped: ListItems = useMemo(() => {
+        return getObjectKeys(features)
+            .filter(key => enabled.map((v) => v.toLowerCase()).includes(key.toLowerCase()))
+            .reduce((arr, key) => [ ...arr, [ key, features[key] ] ], [] as ListItems);
+    }, [ enabled ]);
+
+    return (
+        <React.Suspense fallback={null}>
+            {mapped.map(([ key, Component ]) => <Component key={key}/>)}
+        </React.Suspense>
+    );
+};

resources/scripts/components/server/features/index.ts

@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { ComponentType, lazy } from 'react';
 
 /**
  * Custom features should be registered here as lazy components so that they do
@@ -6,10 +6,12 @@ import { lazy } from 'react';
  * whenever they are actually loaded for the client (which may be never, depending
  * on the feature and the egg).
  */
-const EulaModalFeature = lazy(() => import(/* webpackChunkName: "feature.eula" */'@feature/eula/EulaModalFeature'));
+const features: Record<string, ComponentType> = {
-const JavaVersionModalFeature = lazy(() => import(/* webpackChunkName: "feature.java_version" */'@feature/JavaVersionModalFeature'));
+    eula: lazy(() => import('@feature/eula/EulaModalFeature')),
-const GSLTokenModalFeature = lazy(() => import(/* webpackChunkName: "feature.gsl_token" */'@feature/GSLTokenModalFeature'));
+    java_version: lazy(() => import('@feature/JavaVersionModalFeature')),
-const PIDLimitModalFeature = lazy(() => import(/* webpackChunkName: "feature.pid_limit" */'@feature/PIDLimitModalFeature'));
+    gsl_token: lazy(() => import('@feature/GSLTokenModalFeature')),
-const SteamDiskSpaceFeature = lazy(() => import(/* webpackChunkName: "feature.steam_disk_space" */'@feature/SteamDiskSpaceFeature'));
+    pid_limit: lazy(() => import('@feature/PIDLimitModalFeature')),
+    steam_disk_space: lazy(() => import('@feature/SteamDiskSpaceFeature')),
+};
 
-export { EulaModalFeature, JavaVersionModalFeature, GSLTokenModalFeature, PIDLimitModalFeature, SteamDiskSpaceFeature };
+export default features;

resources/scripts/routers/routes.ts

@@ -6,11 +6,11 @@ import UsersContainer from '@/components/server/users/UsersContainer';
 import BackupContainer from '@/components/server/backups/BackupContainer';
 import NetworkContainer from '@/components/server/network/NetworkContainer';
 import StartupContainer from '@/components/server/startup/StartupContainer';
+import FileManagerContainer from '@/components/server/files/FileManagerContainer';
+import SettingsContainer from '@/components/server/settings/SettingsContainer';
 
-const FileManagerContainer = lazy(() => import('@/components/server/files/FileManagerContainer'));
 const FileEditContainer = lazy(() => import('@/components/server/files/FileEditContainer'));
 const ScheduleEditContainer = lazy(() => import('@/components/server/schedules/ScheduleEditContainer'));
-const SettingsContainer = lazy(() => import('@/components/server/settings/SettingsContainer'));
 
 interface ServerRouteDefinition {
     path: string;