1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

Use react-router lazy for dynamic route import

This commit is contained in:
Bill Thornton 2024-07-15 11:04:56 -04:00
parent f071ea2a1f
commit 4a97b27218

View file

@ -1,5 +1,4 @@
import loadable, { LoadableComponent } from '@loadable/component'; import type { RouteObject } from 'react-router-dom';
import React from 'react';
export enum AsyncRouteType { export enum AsyncRouteType {
Stable, Stable,
@ -15,50 +14,27 @@ export interface AsyncRoute {
* Will fallback to using the `path` value if not specified. * Will fallback to using the `path` value if not specified.
*/ */
page?: string page?: string
/** The page element to render. */
element?: LoadableComponent<AsyncPageProps>
/** The page type used to load the correct page element. */ /** The page type used to load the correct page element. */
type?: AsyncRouteType type?: AsyncRouteType
} }
export interface AsyncPageProps { const importPage = (page: string, type: AsyncRouteType) => {
/** The relative path to the page component in the routes directory. */ switch (type) {
page: string case AsyncRouteType.Dashboard:
} return import(/* webpackChunkName: "[request]" */ `../../apps/dashboard/routes/${page}`);
case AsyncRouteType.Experimental:
const DashboardAsyncPage = loadable( return import(/* webpackChunkName: "[request]" */ `../../apps/experimental/routes/${page}`);
(props: { page: string }) => import(/* webpackChunkName: "[request]" */ `../../apps/dashboard/routes/${props.page}`), case AsyncRouteType.Stable:
{ cacheKey: (props: AsyncPageProps) => props.page } return import(/* webpackChunkName: "[request]" */ `../../apps/stable/routes/${page}`);
);
const ExperimentalAsyncPage = loadable(
(props: { page: string }) => import(/* webpackChunkName: "[request]" */ `../../apps/experimental/routes/${props.page}`),
{ cacheKey: (props: AsyncPageProps) => props.page }
);
const StableAsyncPage = loadable(
(props: { page: string }) => import(/* webpackChunkName: "[request]" */ `../../apps/stable/routes/${props.page}`),
{ cacheKey: (props: AsyncPageProps) => props.page }
);
export function toAsyncPageRoute({ path, page, element, type = AsyncRouteType.Stable }: AsyncRoute) {
let Element = element;
if (!Element) {
switch (type) {
case AsyncRouteType.Dashboard:
Element = DashboardAsyncPage;
break;
case AsyncRouteType.Experimental:
Element = ExperimentalAsyncPage;
break;
case AsyncRouteType.Stable:
default:
Element = StableAsyncPage;
}
} }
};
return { export const toAsyncPageRoute = ({ path, page, type = AsyncRouteType.Stable }: AsyncRoute): RouteObject => ({
path, path,
element: <Element page={page ?? path} /> lazy: async () => {
}; const { default: Component } = await importPage(page ?? path, type);
} return {
Component
};
}
});