OpenAPI: require passing <APIPage />

Author: fuma-nama

.changeset/thirty-jobs-wish.md

@@ -8,13 +8,15 @@ import { openapiPlugin } from 'fumadocs-openapi/server';
 import { blog as blogPosts, docs } from '@/.source';
 import { lucideIconsPlugin } from 'fumadocs-core/source/lucide-icons';
 import { openapi } from '@/lib/openapi';
+import { APIPage } from 'fumadocs-openapi/ui';
 
 export const source = loader(docs.toFumadocsSource(), {
   baseUrl: '/docs',
   plugins: [
     lucideIconsPlugin(),
     await openapiPlugin.withPages({
       from: openapi,
+      APIPage,
       baseDir: 'openapi/(generated)',
     }),
   ],

apps/docs/lib/source.ts

@@ -8,9 +8,12 @@ import type {
 } from 'fumadocs-core/source';
 import type { OpenAPIServer } from '@/server/create';
 import type { SchemaToPagesOptions } from '@/utils/schema-to-pages';
+import type { FC } from 'react';
+import type { ApiPageProps } from '@/render/api-page';
 
 export type WithPagesOptions = SchemaToPagesOptions & {
   from: OpenAPIServer;
+  APIPage: FC<ApiPageProps>;
   baseDir?: string;
 };
 
@@ -65,14 +68,15 @@ export function openapiPlugin(): LoaderPlugin {
 /**
  * Generate virtual pages
  */
-openapiPlugin.withPages = async (
-  options: WithPagesOptions,
-): Promise<LoaderPlugin> => {
-  const { from, baseDir = '' } = options;
-
+openapiPlugin.withPages = async ({
+  from,
+  baseDir = '',
+  APIPage,
+  ...base
+}: WithPagesOptions): Promise<LoaderPlugin> => {
   const { serverToPages } = await import('@/utils/schema-to-pages');
   const { toBody } = await import('@/utils/pages/to-body');
-  const entries = await serverToPages(from, options);
+  const entries = await serverToPages(from, base);
   const plugin = openapiPlugin();
   let loaderConfig: ResolvedLoaderConfig;
   plugin.config = (loaded) => {
@@ -102,7 +106,7 @@ openapiPlugin.withPages = async (
                   : undefined,
             },
           },
-          body: toBody(from, page),
+          body: toBody(from, APIPage, page),
         }),
         path: page.path,
         absolutePath: '',

packages/openapi/src/server/source-api.tsx

@@ -1,43 +1,43 @@
 import type { OutputEntry } from '@/utils/schema-to-pages';
-import { FC, lazy } from 'react';
+import type { FC } from 'react';
 import type { ApiPageProps } from '@/render/api-page';
 import type { OpenAPIServer } from '@/server';
 
-const APIPageDefault = lazy(() =>
-  import('@/ui').then((mod) => ({
-    default: mod.APIPage,
-  })),
-);
-
-export function toBody(server: OpenAPIServer, entry: OutputEntry): FC<unknown> {
-  const APIPage = (props: ApiPageProps) => (
-    <APIPageDefault {...server.getAPIPageProps(props)} />
-  );
-
+export function toBody(
+  server: OpenAPIServer,
+  APIPage: FC<ApiPageProps>,
+  entry: OutputEntry,
+): FC<unknown> {
   return function body() {
     if (entry.type === 'operation')
       return (
         <APIPage
-          hasHead={false}
-          document={entry.schemaId}
-          operations={[entry.item]}
+          {...server.getAPIPageProps({
+            hasHead: false,
+            document: entry.schemaId,
+            operations: [entry.item],
+          })}
         />
       );
     if (entry.type === 'webhook')
       return (
         <APIPage
-          hasHead={false}
-          document={entry.schemaId}
-          webhooks={[entry.item]}
+          {...server.getAPIPageProps({
+            hasHead: false,
+            document: entry.schemaId,
+            webhooks: [entry.item],
+          })}
         />
       );
 
     return (
       <APIPage
-        hasHead
-        document={entry.schemaId}
-        operations={entry.operations}
-        webhooks={entry.webhooks}
+        {...server.getAPIPageProps({
+          hasHead: true,
+          document: entry.schemaId,
+          operations: entry.operations,
+          webhooks: entry.webhooks,
+        })}
       />
     );
   };