OpenAPI: Move APIPage to fumadocs-openapi/ui

Author: fuma-nama

.changeset/full-rabbits-stop.md

@@ -0,0 +1,27 @@
+---
+'fumadocs-openapi': major
+---
+
+**Move `APIPage` to `fumadocs-openapi/ui`**
+
+migrate:
+
+in your `mdx-components.tsx` (or where you pass MDX components):
+
+```tsx
+import defaultComponents from 'fumadocs-ui/mdx';
+import { APIPage } from 'fumadocs-openapi/ui';
+import { openapi } from '@/lib/source';
+import type { MDXComponents } from 'mdx/types';
+
+export function getMDXComponents(components?: MDXComponents): MDXComponents {
+    return {
+        ...defaultComponents,
+        // use this instead
+        APIPage: (props) => <APIPage {...openapi.getAPIPageProps(props)} />,
+        ...components,
+    };
+}
+```
+
+why: Next.js compiles the same module in different layers: route handlers, pages (which include browser bundle), and middleware (Edge Runtime). It avoids compiling React components of `fumadocs-openapi` twice when you reference the OpenAPI server in a route handler.

apps/docs/app/docs/[...slug]/page.tsx

@@ -35,6 +35,7 @@ import { createGenerator } from 'fumadocs-typescript';
 import { getPageTreePeers } from 'fumadocs-core/server';
 import { Card, Cards } from 'fumadocs-ui/components/card';
 import { getMDXComponents } from '@/mdx-components';
+import { APIPage } from 'fumadocs-openapi/ui';
 
 function PreviewRenderer({ preview }: { preview: string }): ReactNode {
   if (preview && preview in Preview) {
@@ -123,7 +124,7 @@ export default async function Page(props: {
             ),
             Wrapper,
             blockquote: Callout as unknown as FC<ComponentProps<'blockquote'>>,
-            APIPage: openapi.APIPage,
+            APIPage: (props) => <APIPage {...openapi.getAPIPageProps(props)} />,
             DocsCategory: ({ url }) => {
               return <DocsCategory url={url ?? page.url} />;
             },

apps/docs/content/docs/ui/(integrations)/openapi/index.mdx

@@ -3,8 +3,6 @@ title: OpenAPI
 description: Generating docs for OpenAPI schema
 ---
 
-You can setup Fumadocs OpenAPI manually, or use Fumadocs CLI.
-
 ## Manual Setup
 
 Install the required packages.
@@ -55,13 +53,14 @@ Add `APIPage` to your MDX Components, so that you can use it in MDX files.
 
 ```tsx title="mdx-components.tsx"
 import defaultComponents from 'fumadocs-ui/mdx';
+import { APIPage } from 'fumadocs-openapi/ui';
 import { openapi } from '@/lib/source';
 import type { MDXComponents } from 'mdx/types';
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
     ...defaultComponents,
-    APIPage: openapi.APIPage,
+    APIPage: (props) => <APIPage {...openapi.getAPIPageProps(props)} />,
     ...components,
   };
 }

examples/openapi/mdx-components.tsx

@@ -1,11 +1,12 @@
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 import type { MDXComponents } from 'mdx/types';
 import { openapi } from '@/lib/source';
+import { APIPage } from 'fumadocs-openapi/ui';
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
     ...defaultMdxComponents,
+    APIPage: (props) => <APIPage {...openapi.getAPIPageProps(props)} />,
     ...components,
-    APIPage: openapi.APIPage,
   };
 }

packages/openapi/src/build-routes.ts

@@ -1,6 +1,6 @@
 import { type Document } from '@/types';
 import type { NoReference } from '@/utils/schema';
-import type { OperationItem, WebhookItem } from '@/server/api-page';
+import type { OperationItem, WebhookItem } from '@/render/api-page';
 import type { OpenAPIV3_1 } from 'openapi-types';
 
 export const methodKeys = [

packages/openapi/src/generate.ts

@@ -7,7 +7,7 @@ import {
 import { idToTitle } from '@/utils/id-to-title';
 import type { OperationObject, PathItemObject } from './types';
 import type { NoReference } from '@/utils/schema';
-import type { OperationItem, WebhookItem } from '@/server/api-page';
+import type { OperationItem, WebhookItem } from '@/render/api-page';
 import { type DocumentInput, processDocument } from '@/utils/process-document';
 
 export interface GenerateOptions {

packages/openapi/src/server/api-page.tsx renamed to packages/openapi/src/render/api-page.tsx

@@ -1,5 +1,4 @@
-import { type FC } from 'react';
-import { APIPage, type ApiPageProps } from '@/server/api-page';
+import type { ApiPageProps } from '@/render/api-page';
 import type { DocumentInput } from '@/utils/process-document';
 import { createProxy } from '@/server/proxy';
 
@@ -12,15 +11,18 @@ export interface OpenAPIOptions
 }
 
 export interface OpenAPIServer {
-  APIPage: FC<ApiPageProps>;
+  getAPIPageProps: (from: ApiPageProps) => ApiPageProps;
   createProxy: typeof createProxy;
 }
 
 export function createOpenAPI(options: OpenAPIOptions = {}): OpenAPIServer {
   return {
     createProxy,
-    APIPage(props) {
-      return <APIPage {...options} {...props} />;
+    getAPIPageProps(props) {
+      return {
+        ...options,
+        ...props,
+      };
     },
   };
 }

packages/openapi/src/server/create.tsx

@@ -135,3 +135,5 @@ export function ObjectCollapsible(props: {
     </Collapsible>
   );
 }
+
+export { APIPage, type ApiPageProps } from '@/render/api-page';

packages/openapi/src/ui/index.tsx

@@ -6,7 +6,7 @@ import type {
   ApiPageProps,
   OperationItem,
   WebhookItem,
-} from '@/server/api-page';
+} from '@/render/api-page';
 import type { GenerateOptions } from '@/generate';
 import { idToTitle } from '@/utils/id-to-title';
 import type { Document, TagObject } from '@/types';