offload some page chunks

diff --git a/resources/js/app/Routes.js b/resources/js/app/Routes.js
index 68c4290b0c1b9e759b2d8e6911bd6df1ec0537c7..e5da45f293d28b74c7f4c2fbe6fee5b1a54a2707 100644 (file)
--- 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 6a6b6c6bbda6f0184451cadefbe1ff74d7aa8528..2c80c798bccb397862cb29e576345ef59da594ff 100644 (file)
--- 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 3bfd6222c955beab525268a7bead88642b79ad10..9217d56e4022b6b22c6c252a96a61bffc34f5314 100644 (file)
--- 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 5a7e5fd2e265a5a907b0aeed944405d218a05e3e..74769d83eb6319e850e25e88251b7add06dda607 100644 (file)
--- 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 1bea822ce2503450e2956da7ef5e9d525d13d46f..0e1d2d1a51a97daf7cb747407a2c107b9ac7f8c8 100644 (file)
--- 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 be98f82778a9221406ccfc3975eaf2d8312ddea3..087a2496dfbf23bcc4184ea5e76e2432d019ee93 100644 (file)
--- 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 70b3beffa021d489bc463697ed2a6aea8612221b..fa5dc2163c30c3432356857dbfa330fa153c28ff 100644 (file)
--- 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 dd24865cb17995ae58fc958f8cca7c4d1042c80e..d7ecde26ef5a5cdec5eb160210704a58805ae5a4 100644 (file)
--- 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 7085019c9501d85257d833c17a65dcefcbd63d91..cd3d96da485a99845fd9f61e2648b742c8deb2eb 100644 (file)
--- 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 065b9150cf84b118d4ea759755dc54696cfb2476..50077390d1118ae7666ed46a25d2cebf688a150c 100644 (file)
--- 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 7e651fedcdf521a915c4ce06f2b93c8f2f5d0e4a..5de5dbe32758c1215cc48d30c37db0dea946b79c 100644 (file)
--- 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 90ff9d2204f6d6eb8fc07a7ac2ccd368332fc3ce..de13f7f309be1ef67cbefa9c11e69c95e1cf78c1 100644 (file)
--- 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 30984a07e238bbbcd41e8f5f3164824e37e5c84e..60085abec5e04a85b5ad1d4f000ae5ebf7e0f388 100644 (file)
--- 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,
+//             },
+//     });
+//}