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:
parent
f071ea2a1f
commit
4a97b27218
1 changed files with 19 additions and 43 deletions
|
@ -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
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue