Skip to content

Commit 7197d28

Browse files
DaneEverittDaneEveritt
committed
Chunk out the different routers and clean up feature logic
1 parent 04e97cc commit 7197d28

File tree

5 files changed

+54
-32
lines changed

5 files changed

+54
-32
lines changed

‎resources/scripts/components/App.tsx‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
import React from 'react';
1+
import React, { lazy } from 'react';
22
import { hot } from 'react-hot-loader/root';
33
import { Route, Router, Switch } from 'react-router-dom';
44
import { StoreProvider } from 'easy-peasy';
55
import { store } from '@/state';
6-
import DashboardRouter from '@/routers/DashboardRouter';
7-
import ServerRouter from '@/routers/ServerRouter';
8-
import AuthenticationRouter from '@/routers/AuthenticationRouter';
96
import { SiteSettings } from '@/state/settings';
107
import ProgressBar from '@/components/elements/ProgressBar';
118
import { NotFound } from '@/components/elements/ScreenBlock';
@@ -16,6 +13,11 @@ import { setupInterceptors } from '@/api/interceptors';
1613
import AuthenticatedRoute from '@/components/elements/AuthenticatedRoute';
1714
import { ServerContext } from '@/state/server';
1815
import '@/assets/tailwind.css';
16+
import Spinner from '@/components/elements/Spinner';
17+
18+
const DashboardRouter = lazy(() => import(/* webpackChunkName: "dash" */'@/routers/DashboardRouter'));
19+
const ServerRouter = lazy(() => import('@/routers/ServerRouter'));
20+
const AuthenticationRouter = lazy(() => import('@/routers/AuthenticationRouter'));
1921

2022
interface ExtendedWindow extends Window {
2123
SiteConfiguration?: SiteSettings;
@@ -63,15 +65,21 @@ const App = () => {
6365
<Router history={history}>
6466
<Switch>
6567
<Route path={'/auth'}>
66-
<AuthenticationRouter/>
68+
<Spinner.Suspense>
69+
<AuthenticationRouter/>
70+
</Spinner.Suspense>
6771
</Route>
6872
<AuthenticatedRoute path={'/server/:id'}>
69-
<ServerContext.Provider>
70-
<ServerRouter/>
71-
</ServerContext.Provider>
73+
<Spinner.Suspense>
74+
<ServerContext.Provider>
75+
<ServerRouter/>
76+
</ServerContext.Provider>
77+
</Spinner.Suspense>
7278
</AuthenticatedRoute>
7379
<AuthenticatedRoute path={'/'}>
74-
<DashboardRouter/>
80+
<Spinner.Suspense>
81+
<DashboardRouter/>
82+
</Spinner.Suspense>
7583
</AuthenticatedRoute>
7684
<Route path={'*'}>
7785
<NotFound/>

‎resources/scripts/components/server/ServerConsole.tsx‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { lazy, memo } from 'react';
1+
import React, { memo } from 'react';
22
import { ServerContext } from '@/state/server';
33
import Can from '@/components/elements/Can';
44
import ContentContainer from '@/components/elements/ContentContainer';
@@ -7,15 +7,14 @@ import ServerContentBlock from '@/components/elements/ServerContentBlock';
77
import ServerDetailsBlock from '@/components/server/ServerDetailsBlock';
88
import isEqual from 'react-fast-compare';
99
import PowerControls from '@/components/server/PowerControls';
10-
import { EulaModalFeature, JavaVersionModalFeature, GSLTokenModalFeature, PIDLimitModalFeature, SteamDiskSpaceFeature } from '@feature/index';
1110
import ErrorBoundary from '@/components/elements/ErrorBoundary';
1211
import Spinner from '@/components/elements/Spinner';
12+
import Features from '@feature/Features';
13+
import Console from '@/components/server/Console';
14+
import StatGraphs from '@/components/server/StatGraphs';
1315

1416
export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
1517

16-
const ChunkedConsole = lazy(() => import(/* webpackChunkName: "console" */'@/components/server/Console'));
17-
const ChunkedStatGraphs = lazy(() => import(/* webpackChunkName: "graphs" */'@/components/server/StatGraphs'));
18-
1918
const ServerConsole = () => {
2019
const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling);
2120
const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring);
@@ -53,17 +52,11 @@ const ServerConsole = () => {
5352
<div css={tw`w-full lg:w-3/4 mt-4 lg:mt-0 lg:pl-4`}>
5453
<Spinner.Suspense>
5554
<ErrorBoundary>
56-
<ChunkedConsole/>
55+
<Console/>
5756
</ErrorBoundary>
58-
<ChunkedStatGraphs/>
57+
<StatGraphs/>
5958
</Spinner.Suspense>
60-
<React.Suspense fallback={null}>
61-
{eggFeatures.includes('eula') && <EulaModalFeature/>}
62-
{eggFeatures.includes('java_version') && <JavaVersionModalFeature/>}
63-
{eggFeatures.includes('gsl_token') && <GSLTokenModalFeature/>}
64-
{eggFeatures.includes('pid_limit') && <PIDLimitModalFeature/>}
65-
{eggFeatures.includes('steam_disk_space') && <SteamDiskSpaceFeature/>}
66-
</React.Suspense>
59+
<Features enabled={eggFeatures} />
6760
</div>
6861
</ServerContentBlock>
6962
);

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { useMemo } from 'react';
2+
import features from './index';
3+
import { getObjectKeys } from '@/helpers';
4+
5+
type ListItems = [ string, React.ComponentType ][];
6+
7+
export default ({ enabled }: { enabled: string[] }) => {
8+
const mapped: ListItems = useMemo(() => {
9+
return getObjectKeys(features)
10+
.filter(key => enabled.map((v) => v.toLowerCase()).includes(key.toLowerCase()))
11+
.reduce((arr, key) => [ ...arr, [ key, features[key] ] ], [] as ListItems);
12+
}, [ enabled ]);
13+
14+
return (
15+
<React.Suspense fallback={null}>
16+
{mapped.map(([ key, Component ]) => <Component key={key}/>)}
17+
</React.Suspense>
18+
);
19+
};

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import { lazy } from 'react';
1+
import { ComponentType, lazy } from 'react';
22

33
/**
44
* Custom features should be registered here as lazy components so that they do
55
* not impact the generated JS bundle size. They will be automatically loaded in
66
* whenever they are actually loaded for the client (which may be never, depending
77
* on the feature and the egg).
88
*/
9-
const EulaModalFeature = lazy(() => import(/* webpackChunkName: "feature.eula" */'@feature/eula/EulaModalFeature'));
10-
const JavaVersionModalFeature = lazy(() => import(/* webpackChunkName: "feature.java_version" */'@feature/JavaVersionModalFeature'));
11-
const GSLTokenModalFeature = lazy(() => import(/* webpackChunkName: "feature.gsl_token" */'@feature/GSLTokenModalFeature'));
12-
const PIDLimitModalFeature = lazy(() => import(/* webpackChunkName: "feature.pid_limit" */'@feature/PIDLimitModalFeature'));
13-
const SteamDiskSpaceFeature = lazy(() => import(/* webpackChunkName: "feature.steam_disk_space" */'@feature/SteamDiskSpaceFeature'));
9+
const features: Record<string, ComponentType> = {
10+
eula: lazy(() => import('@feature/eula/EulaModalFeature')),
11+
java_version: lazy(() => import('@feature/JavaVersionModalFeature')),
12+
gsl_token: lazy(() => import('@feature/GSLTokenModalFeature')),
13+
pid_limit: lazy(() => import('@feature/PIDLimitModalFeature')),
14+
steam_disk_space: lazy(() => import('@feature/SteamDiskSpaceFeature')),
15+
};
1416

15-
export { EulaModalFeature, JavaVersionModalFeature, GSLTokenModalFeature, PIDLimitModalFeature, SteamDiskSpaceFeature };
17+
export default features;

‎resources/scripts/routers/routes.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import UsersContainer from '@/components/server/users/UsersContainer';
66
import BackupContainer from '@/components/server/backups/BackupContainer';
77
import NetworkContainer from '@/components/server/network/NetworkContainer';
88
import StartupContainer from '@/components/server/startup/StartupContainer';
9+
import FileManagerContainer from '@/components/server/files/FileManagerContainer';
10+
import SettingsContainer from '@/components/server/settings/SettingsContainer';
911

10-
const FileManagerContainer = lazy(() => import('@/components/server/files/FileManagerContainer'));
1112
const FileEditContainer = lazy(() => import('@/components/server/files/FileEditContainer'));
1213
const ScheduleEditContainer = lazy(() => import('@/components/server/schedules/ScheduleEditContainer'));
13-
const SettingsContainer = lazy(() => import('@/components/server/settings/SettingsContainer'));
1414

1515
interface ServerRouteDefinition {
1616
path: string;

0 commit comments

Comments
 (0)