diff --git a/plugins/devtools/src/alpha/devToolsRouteBlueprint.tsx b/plugins/devtools/src/alpha/devToolsRouteBlueprint.tsx index fec93854ae..21f25a013a 100644 --- a/plugins/devtools/src/alpha/devToolsRouteBlueprint.tsx +++ b/plugins/devtools/src/alpha/devToolsRouteBlueprint.tsx @@ -25,12 +25,12 @@ import { lazy, Suspense, JSX } from 'react'; export interface DevToolsRouteBlueprintParams { path: string; title: string; - loader: () => Promise<{ default: () => JSX.Element }> | (() => JSX.Element); + loader: () => Promise<{ default: () => JSX.Element }>; } /** * Extension blueprint for creating DevTools routes - * + * * @example * ```tsx * const myDevToolsRoute = DevToolsRouteBlueprint.make({ @@ -41,7 +41,7 @@ export interface DevToolsRouteBlueprintParams { * } * }); * ``` - * + * * @alpha */ export const DevToolsRouteBlueprint = createExtensionBlueprint({ @@ -49,23 +49,14 @@ export const DevToolsRouteBlueprint = createExtensionBlueprint({ attachTo: { id: 'page:devtools', input: 'routes' }, output: [devToolsRouteDataRef], factory(params: DevToolsRouteBlueprintParams) { - // Handle both sync and async component loading - const Component = typeof params.loader === 'function' - ? (() => { - const result = params.loader(); - if (result instanceof Promise) { - // Create a lazy component for async loading - return lazy(() => result); - } - // Direct component function - return result; - - })() - : params.loader; + // Create a lazy component for async loading + const LazyComponent = lazy(params.loader); - const children = typeof Component === 'function' - ? Loading...}> - : Component; + const children = ( + Loading...}> + + + ); return [ devToolsRouteDataRef({ @@ -78,4 +69,4 @@ export const DevToolsRouteBlueprint = createExtensionBlueprint({ dataRefs: { route: devToolsRouteDataRef, }, -}); \ No newline at end of file +});