From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Sat, 23 Dec 2023 16:39:21 +0000 (+0100)
Subject: offload some page chunks
X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=9ac5e263a259207e3ecd132188df41f7c3315b88;p=alttp.git

offload some page chunks
---

diff --git a/resources/js/app/Routes.js b/resources/js/app/Routes.js
index 68c4290..e5da45f 100644
--- a/resources/js/app/Routes.js
+++ b/resources/js/app/Routes.js
@@ -1,94 +1,136 @@
 import React from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import {
+	createBrowserRouter,
+	createRoutesFromElements,
+	Navigate,
+	Route,
+	RouterProvider,
+} from 'react-router-dom';
 
 import FullLayout from './FullLayout';
-import AlttpSeed from '../pages/AlttpSeed';
-import DiscordBot from '../pages/DiscordBot';
-import DoorsTracker from '../pages/DoorsTracker';
-import Event from '../pages/Event';
-import Events from '../pages/Events';
 import Front from '../pages/Front';
-import Map from '../pages/Map';
-import Schedule from '../pages/Schedule';
 import Technique from '../pages/Technique';
 import Techniques from '../pages/Techniques';
-import Tournament from '../pages/Tournament';
-import TwitchBot from '../pages/TwitchBot';
 import User from '../pages/User';
 
-const AppRoutes = () => <Routes>
-	<Route element={<FullLayout />}>
-		<Route
-			path="discord-bot"
-			element={<DiscordBot />}
-		/>
-		<Route
-			path="dungeons"
-			element={<Techniques namespace="dungeons" type="dungeon" />}
-		/>
-		<Route
-			path="dungeons/:name"
-			element={<Technique basepath="dungeons" type="dungeon" />}
-		/>
-		<Route
-			path="events"
-			element={<Events />}
-		/>
-		<Route
-			path="events/:name"
-			element={<Event />}
-		/>
-		<Route path="h/:hash" element={<AlttpSeed />} />
-		<Route
-			path="locations"
-			element={<Techniques namespace="locations" type="location" />}
-		/>
-		<Route
-			path="locations/:name"
-			element={<Technique basepath="locations" type="location" />}
-		/>
-		<Route path="map">
-			<Route index element={<Navigate replace to="lw" />} />
-			<Route path=":activeMap" element={<Map />} />
-		</Route>
-		<Route
-			path="modes"
-			element={<Techniques namespace="modes" type="mode" />}
-		/>
-		<Route
-			path="modes/:name"
-			element={<Technique basepath="modes" type="mode" />}
-		/>
-		<Route
-			path="rulesets"
-			element={<Techniques namespace="rulesets" type="ruleset" />}
+const router = createBrowserRouter(
+	createRoutesFromElements(
+		<Route>
+			<Route element={<FullLayout />}>
+				<Route
+					path="discord-bot"
+					lazy={() => import(
+						/* webpackChunkName: "admin" */
+						'../pages/DiscordBot'
+					)}
+				/>
+				<Route
+					path="dungeons"
+					element={<Techniques namespace="dungeons" type="dungeon" />}
+				/>
+				<Route
+					path="dungeons/:name"
+					element={<Technique basepath="dungeons" type="dungeon" />}
+				/>
+				<Route
+					path="events"
+					lazy={() => import(
+						/* webpackChunkName: "events" */
+						'../pages/Events'
+					)}
+				/>
+				<Route
+					path="events/:name"
+					lazy={() => import(
+						/* webpackChunkName: "events" */
+						'../pages/Event'
+					)}
+				/>
+				<Route
+					path="h/:hash"
+					lazy={() => import(
+						/* webpackChunkName: "seeds" */
+						'../pages/AlttpSeed'
+					)}
+				/>
+				<Route
+					path="locations"
+					element={<Techniques namespace="locations" type="location" />}
+				/>
+				<Route
+					path="locations/:name"
+					element={<Technique basepath="locations" type="location" />}
+				/>
+				<Route path="map">
+					<Route index element={<Navigate replace to="lw" />} />
+					<Route
+						path=":activeMap"
+						lazy={() => import(
+							/* webpackChunkName: "map" */
+							'../pages/Map'
+						)}
+					/>
+				</Route>
+				<Route
+					path="modes"
+					element={<Techniques namespace="modes" type="mode" />}
+				/>
+				<Route
+					path="modes/:name"
+					element={<Technique basepath="modes" type="mode" />}
+				/>
+				<Route
+					path="rulesets"
+					element={<Techniques namespace="rulesets" type="ruleset" />}
+					/>
+				<Route
+					path="rulesets/:name"
+					element={<Technique basepath="rulesets" type="ruleset" />}
+				/>
+				<Route
+					path="schedule"
+					lazy={() => import(
+						/* webpackChunkName: "events" */
+						'../pages/Schedule'
+					)}
+				/>
+				<Route
+					path="tech"
+					element={<Techniques namespace="techniques" type="tech" />}
+				/>
+				<Route
+					path="tech/:name"
+					element={<Technique basepath="tech" type="tech" />}
+				/>
+				<Route
+					path="tournaments/:id"
+					lazy={() => import(
+						/* webpackChunkName: "tournament" */
+						'../pages/Tournament'
+					)}
+				/>
+				<Route
+					path="twitch-bot"
+					lazy={() => import(
+						/* webpackChunkName: "admin" */
+						'../pages/TwitchBot'
+					)}
+				/>
+				<Route path="users/:id" element={<User />} />
+				<Route path="/" element={<Front />} />
+				<Route path="*" element={<Navigate to="/" />} />
+			</Route>
+			<Route
+				path="doors-tracker"
+				lazy={() => import(
+					/* webpackChunkName: "tracker" */
+					'../pages/DoorsTracker'
+				)}
 			/>
-		<Route
-			path="rulesets/:name"
-			element={<Technique basepath="rulesets" type="ruleset" />}
-		/>
-		<Route path="schedule" element={<Schedule />} />
-		<Route
-			path="tech"
-			element={<Techniques namespace="techniques" type="tech" />}
-		/>
-		<Route
-			path="tech/:name"
-			element={<Technique basepath="tech" type="tech" />}
-		/>
-		<Route path="tournaments/:id" element={<Tournament />} />
-		<Route
-			path="twitch-bot"
-			element={<TwitchBot />}
-		/>
-		<Route path="users/:id" element={<User />} />
-		<Route path="/" element={<Front />} />
-		<Route path="*" element={<Navigate to="/" />} />
-	</Route>
-	<Route
-		path="doors-tracker"
-		element={<DoorsTracker />}
-	/>
-</Routes>;
+		</Route>
+	)
+);
+
+const AppRoutes = () => <RouterProvider router={router} />;
 
 export default AppRoutes;
diff --git a/resources/js/app/index.js b/resources/js/app/index.js
index 6a6b6c6..2c80c79 100644
--- a/resources/js/app/index.js
+++ b/resources/js/app/index.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-import { BrowserRouter } from 'react-router-dom';
 
 import Routes from './Routes';
 import AlttpBaseRomProvider from '../helpers/AlttpBaseRomContext';
@@ -21,18 +20,16 @@ const App = () => {
 		};
 	}, []);
 
-	return <BrowserRouter>
-		<AlttpBaseRomProvider>
-			<UserProvider>
-				<Helmet>
-					<html lang={i18n.language} />
-					<title>{t('general.appName')}</title>
-					<meta name="description" content={t('general.appDescription')} />
-				</Helmet>
-				<Routes />
-			</UserProvider>
-		</AlttpBaseRomProvider>
-	</BrowserRouter>;
+	return <AlttpBaseRomProvider>
+		<UserProvider>
+			<Helmet>
+				<html lang={i18n.language} />
+				<title>{t('general.appName')}</title>
+				<meta name="description" content={t('general.appDescription')} />
+			</Helmet>
+			<Routes />
+		</UserProvider>
+	</AlttpBaseRomProvider>;
 };
 
 export default App;
diff --git a/resources/js/components/events/Item.js b/resources/js/components/events/Item.js
index 3bfd622..9217d56 100644
--- a/resources/js/components/events/Item.js
+++ b/resources/js/components/events/Item.js
@@ -57,10 +57,16 @@ const Item = ({ event }) => {
 };
 
 Item.propTypes = {
-	event: PropTypes.arrayOf(PropTypes.shape({
+	event: PropTypes.shape({
+		corner: PropTypes.string,
+		description: PropTypes.shape({
+		}),
+		end: PropTypes.string,
 		id: PropTypes.number,
 		name: PropTypes.string,
-	})),
+		start: PropTypes.string,
+		title: PropTypes.string,
+	}),
 };
 
 export default Item;
diff --git a/resources/js/pages/AlttpSeed.js b/resources/js/pages/AlttpSeed.js
index 5a7e5fd..74769d8 100644
--- a/resources/js/pages/AlttpSeed.js
+++ b/resources/js/pages/AlttpSeed.js
@@ -9,7 +9,7 @@ import ErrorBoundary from '../components/common/ErrorBoundary';
 import ErrorMessage from '../components/common/ErrorMessage';
 import Loading from '../components/common/Loading';
 
-const AlttpSeed = () => {
+export const Component = () => {
 	const params = useParams();
 	const { hash } = params;
 
@@ -104,5 +104,3 @@ const AlttpSeed = () => {
 		<Seed onRetry={retry} patch={patch} seed={seed} />
 	</ErrorBoundary>;
 };
-
-export default AlttpSeed;
diff --git a/resources/js/pages/DiscordBot.js b/resources/js/pages/DiscordBot.js
index 1bea822..0e1d2d1 100644
--- a/resources/js/pages/DiscordBot.js
+++ b/resources/js/pages/DiscordBot.js
@@ -9,7 +9,7 @@ import Controls from '../components/discord-bot/Controls';
 const authEndpoint = 'https://discord.com/oauth2/authorize';
 const clientId = process.env.MIX_DISCORD_CLIENT_ID;
 
-const DiscordBot = () => {
+export const Component = () => {
 	const { t } = useTranslation();
 
 	return <Container>
@@ -34,5 +34,3 @@ const DiscordBot = () => {
 		<Controls />
 	</Container>;
 };
-
-export default DiscordBot;
diff --git a/resources/js/pages/DoorsTracker.js b/resources/js/pages/DoorsTracker.js
index be98f82..087a249 100644
--- a/resources/js/pages/DoorsTracker.js
+++ b/resources/js/pages/DoorsTracker.js
@@ -64,7 +64,7 @@ const nextCSwitch = cur => {
 
 const prevCSwitch = cur => nextCSwitch(nextCSwitch(cur));
 
-const DoorsTracker = () => {
+export const Component = () => {
 	const [state, setState] = React.useState(DUNGEONS.reduce((state, dungeon) => ({
 		...state,
 		[dungeon]: ITEMS.reduce((items, item) => ({
@@ -184,5 +184,3 @@ const DoorsTracker = () => {
 		</div>
 	</>;
 };
-
-export default DoorsTracker;
diff --git a/resources/js/pages/Event.js b/resources/js/pages/Event.js
index 70b3bef..fa5dc21 100644
--- a/resources/js/pages/Event.js
+++ b/resources/js/pages/Event.js
@@ -3,7 +3,7 @@ import moment from 'moment';
 import React from 'react';
 import { Container } from 'react-bootstrap';
 import { Helmet } from 'react-helmet';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import toastr from 'toastr';
 
@@ -23,10 +23,11 @@ import { getTranslation } from '../helpers/Technique';
 import { useUser } from '../hooks/user';
 import i18n from '../i18n';
 
-const Event = () => {
+export const Component = () => {
 	const params = useParams();
 	const { name } = params;
 	const { user } = useUser();
+	const { t } = useTranslation();
 
 	const [error, setError] = React.useState(null);
 	const [loading, setLoading] = React.useState(true);
@@ -76,14 +77,14 @@ const Event = () => {
 				parent_id: event.description_id,
 				...values,
 			});
-			toastr.success(i18n.t('content.saveSuccess'));
+			toastr.success(t('content.saveSuccess'));
 			setEvent(event => ({
 				...event,
 				description: response.data,
 			}));
 			setShowContentDialog(false);
 		} catch (e) {
-			toastr.error(i18n.t('content.saveError'));
+			toastr.error(t('content.saveError'));
 		}
 	}, [event && event.description_id]);
 
@@ -149,7 +150,7 @@ const Event = () => {
 			<Detail actions={actions} event={event} />
 			{episodes.length ? <>
 				<h2 className="mt-4">
-					{i18n.t(hasConcluded(event)
+					{t(hasConcluded(event)
 						? 'events.pastEpisodes'
 						: 'events.upcomingEpisodes'
 					)}
@@ -166,5 +167,3 @@ const Event = () => {
 		/>
 	</ErrorBoundary>;
 };
-
-export default withTranslation()(Event);
diff --git a/resources/js/pages/Events.js b/resources/js/pages/Events.js
index dd24865..d7ecde2 100644
--- a/resources/js/pages/Events.js
+++ b/resources/js/pages/Events.js
@@ -10,7 +10,7 @@ import ErrorMessage from '../components/common/ErrorMessage';
 import Loading from '../components/common/Loading';
 import List from '../components/events/List';
 
-const Events = () => {
+export const Component = () => {
 	const { t } = useTranslation();
 
 	const [error, setError] = React.useState(null);
@@ -90,5 +90,3 @@ const Events = () => {
 		</Container>
 	</ErrorBoundary>;
 };
-
-export default Events;
diff --git a/resources/js/pages/Map.js b/resources/js/pages/Map.js
index 7085019..cd3d96d 100644
--- a/resources/js/pages/Map.js
+++ b/resources/js/pages/Map.js
@@ -11,7 +11,7 @@ import OpenSeadragon from '../components/map/OpenSeadragon';
 import Pins from '../components/map/Pins';
 import UWSuperTiles from '../components/map/UWSuperTiles';
 
-const Map = () => {
+export const Component = () => {
 	const [uwOverlay, setUWOverlay] = React.useState(false);
 
 	const { activeMap } = useParams();
@@ -36,5 +36,3 @@ const Map = () => {
 		</OpenSeadragon>
 	</Container>;
 };
-
-export default Map;
diff --git a/resources/js/pages/Schedule.js b/resources/js/pages/Schedule.js
index 065b915..5007739 100644
--- a/resources/js/pages/Schedule.js
+++ b/resources/js/pages/Schedule.js
@@ -16,7 +16,7 @@ import RestreamDialog from '../components/episodes/RestreamDialog';
 import { toggleEventFilter } from '../helpers/Episode';
 import { useUser } from '../hooks/user';
 
-const Schedule = () => {
+export const Component = () => {
 	const [ahead] = React.useState(14);
 	const [applyAs, setApplyAs] = React.useState('commentary');
 	const [behind] = React.useState(0);
@@ -329,5 +329,3 @@ const Schedule = () => {
 		</> : null}
 	</Container>;
 };
-
-export default Schedule;
diff --git a/resources/js/pages/Tournament.js b/resources/js/pages/Tournament.js
index 7e651fe..5de5dbe 100644
--- a/resources/js/pages/Tournament.js
+++ b/resources/js/pages/Tournament.js
@@ -19,7 +19,7 @@ import {
 	sortParticipants,
 } from '../helpers/Tournament';
 
-const Tournament = () => {
+export const Component = () => {
 	const params = useParams();
 	const { id } = params;
 
@@ -135,5 +135,3 @@ const Tournament = () => {
 		<Detail addRound={addRound} tournament={tournament} />
 	</ErrorBoundary>;
 };
-
-export default Tournament;
diff --git a/resources/js/pages/TwitchBot.js b/resources/js/pages/TwitchBot.js
index 90ff9d2..de13f7f 100644
--- a/resources/js/pages/TwitchBot.js
+++ b/resources/js/pages/TwitchBot.js
@@ -7,7 +7,7 @@ import Controls from '../components/twitch-bot/Controls';
 import { mayManageTwitchBot } from '../helpers/permissions';
 import { useUser } from '../hooks/user';
 
-const TwitchBot = () => {
+export const Component = () => {
 	const { t } = useTranslation();
 	const { user } = useUser();
 
@@ -26,5 +26,3 @@ const TwitchBot = () => {
 		}
 	</Container>;
 };
-
-export default TwitchBot;
diff --git a/webpack.mix.js b/webpack.mix.js
index 30984a0..60085ab 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -69,16 +69,16 @@ mix.js('resources/js/index.js', 'public/js')
 	])
 	.sourceMaps(true)
 	.version();
-if (mix.inProduction()) {
+//if (mix.inProduction()) {
 	mix.webpackConfig({
 		output: {
 			chunkFilename: 'js/chunks/[name].[chunkhash].js',
 		},
 	});
-} else {
-	mix.webpackConfig({
-		output: {
-			asyncChunks: false,
-		},
-	});
-}
+//} else {
+//	mix.webpackConfig({
+//		output: {
+//			asyncChunks: false,
+//		},
+//	});
+//}