fumadocs-openapi 11.4.3 → 12.0.0

package/dist/ui/base.d.ts

@@ -1,11 +1,12 @@
-import { CreateOpenAPIPageOptions, OpenAPIPageProps } from "./index.js";
+import { OpenAPIPageProps } from "../utils/pages/builder.js";
+import { CreateOpenAPIPageOptions } from "./index.js";
 import { FC } from "react";
 import { ShikiFactory } from "fumadocs-core/highlight/shiki";
 //#region src/ui/base.d.ts
 /**
  * Create `<OpenAPIPage />` (a client component) without the full Shiki bundle.
  */
-export declare function createOpenAPIPageBase({ shiki, shikiOptions, schemaUI: schemaUIOptions, codeUsages, generateTypeScriptDefinitions, ...options }: CreateOpenAPIPageOptions & {
+export declare function createOpenAPIPageBase(options: CreateOpenAPIPageOptions & {
   shiki: ShikiFactory;
 }): FC<OpenAPIPageProps>;
 //#endregion

package/dist/ui/base.js

@@ -1,178 +1,27 @@
 "use client";
-import { RenderContextProvider, ServerProvider, useRenderContext } from "./contexts/api.js";
-import { ClientCodeBlock } from "./components/codeblock.js";
-import { createCodeUsageGeneratorRegistry } from "../requests/generators/index.js";
-import { AuthProvider } from "../playground/auth.js";
-import { defaultAdapters } from "../requests/media/adapter.js";
-import { Markdown } from "./components/markdown.js";
+import { createOpenAPIRenderer } from "../utils/create-page.js";
+import { Schema } from "../packages/shared-api/dist/components/schema/index.js";
 import { Operation } from "./operation/index.js";
-import { dereferenceBundledDocument } from "../utils/document/dereference.js";
-import { registerDefault } from "../requests/generators/all.js";
-import { getRaw } from "@scalar/json-magic/magic-proxy";
-import { Children, useMemo } from "react";
-import * as JsxRuntime from "react/jsx-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { remarkGfm } from "fumadocs-core/mdx-plugins/remark-gfm";
-import defaultMdxComponents from "fumadocs-ui/mdx";
-import { remark } from "remark";
-import remarkRehype from "remark-rehype";
-import { toJsxRuntime } from "hast-util-to-jsx-runtime";
-import { generate } from "@fumari/json-schema-ts";
-import { Schema } from "@fumadocs/api-docs/components/schema";
+import { jsxs } from "react/jsx-runtime";
 //#region src/ui/base.tsx
 /**
 * Create `<OpenAPIPage />` (a client component) without the full Shiki bundle.
 */
-function createOpenAPIPageBase({ shiki, shikiOptions = { themes: {
-	light: "github-light",
-	dark: "github-dark"
-} }, schemaUI: schemaUIOptions, codeUsages = registerDefault(createCodeUsageGeneratorRegistry()), generateTypeScriptDefinitions = (schema, ctx) => {
-	if (typeof schema !== "object") return;
-	try {
-		return generate({
-			...ctx.ctx.schema.bundled,
-			...getRaw(schema)
-		}, {
-			name: ctx.name,
-			readOnly: ctx.readOnly,
-			writeOnly: ctx.writeOnly
-		});
-	} catch (e) {
-		console.warn("Failed to generate typescript schema:", e);
-	}
-}, ...options }) {
-	let processor;
-	function createMarkdownProcessor() {
-		const mdxComponents = {
-			...defaultMdxComponents,
-			img: void 0,
-			pre: MarkdownPre
-		};
-		function rehypeReact() {
-			this.compiler = (tree, file) => {
-				return toJsxRuntime(tree, {
-					development: false,
-					filePath: file.path,
-					...JsxRuntime,
-					components: mdxComponents
-				});
-			};
+function createOpenAPIPageBase(options) {
+	return createOpenAPIRenderer({
+		...options,
+		components: {
+			SchemaUI: Schema,
+			Operation,
+			Layout,
+			...options.components
 		}
-		return remark().use(remarkGfm).use(remarkRehype).use(rehypeReact);
-	}
-	return function OpenAPIPage(props) {
-		let doc;
-		let proxyUrl;
-		if ("preloaded" in props) {
-			doc = props.preloaded.docs[props.document];
-			if (!doc) throw new Error(`[Fumadocs OpenAPI] the document ${props.document} is not preloaded, make sure to pass the "preloaded" prop to <OpenAPIPage />`);
-			proxyUrl = props.preloaded.proxyUrl;
-		} else {
-			doc = props.payload.bundled;
-			proxyUrl = props.payload.proxyUrl;
-		}
-		const processed = useMemo(() => dereferenceBundledDocument(doc), [doc]);
-		const ctx = useMemo(() => {
-			const schemaUIShared = {
-				renderCodeblock(opts) {
-					return /* @__PURE__ */ jsx(ClientCodeBlock, { ...opts });
-				},
-				renderMarkdown(md) {
-					return /* @__PURE__ */ jsx(Markdown, { md });
-				}
-			};
-			return {
-				schema: processed,
-				proxyUrl,
-				shiki,
-				shikiOptions,
-				generateTypeScriptDefinitions,
-				codeUsages,
-				SchemaUI(props) {
-					const merged = {
-						...schemaUIShared,
-						...props,
-						showExample: props.showExample ?? schemaUIOptions?.showExample
-					};
-					if (schemaUIOptions?.render) return schemaUIOptions.render(merged, ctx);
-					return /* @__PURE__ */ jsx(Schema, { ...merged });
-				},
-				...options,
-				_default_processMarkdown(md) {
-					processor ??= createMarkdownProcessor();
-					return processor.processSync(md).result;
-				},
-				mediaAdapters: {
-					...defaultAdapters,
-					...options.mediaAdapters
-				}
-			};
-		}, [proxyUrl, processed]);
-		return /* @__PURE__ */ jsx(RenderContextProvider, {
-			ctx,
-			children: /* @__PURE__ */ jsx(PageContent, { ...props })
-		});
-	};
-}
-function PageContent({ showTitle: hasHead = false, showDescription, operations, webhooks }) {
-	const ctx = useRenderContext();
-	const { dereferenced, resolve } = ctx.schema;
-	let { renderPageLayout } = ctx.content ?? {};
-	renderPageLayout ??= (slots) => /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-24 text-sm @container",
-		children: [slots.operations?.map((op) => op.children), slots.webhooks?.map((op) => op.children)]
-	});
-	let content = renderPageLayout({
-		operations: operations?.map((item) => {
-			const pathItem = resolve(dereferenced.paths?.[item.path]);
-			if (!pathItem) throw new Error(`[Fumadocs OpenAPI] Path not found in OpenAPI schema: ${item.path}`);
-			const operation = pathItem[item.method];
-			if (!operation) throw new Error(`[Fumadocs OpenAPI] Method ${item.method} not found in operation: ${item.path}`);
-			return {
-				item,
-				children: /* @__PURE__ */ jsx(Operation, {
-					method: item.method,
-					pathItem,
-					operation,
-					path: item.path,
-					showTitle: hasHead,
-					showDescription
-				}, `${item.path}:${item.method}`)
-			};
-		}),
-		webhooks: webhooks?.map((item) => {
-			const webhook = resolve(dereferenced.webhooks?.[item.name]);
-			if (!webhook) throw new Error(`[Fumadocs OpenAPI] Webhook not found in OpenAPI schema: ${item.name}`);
-			const hook = webhook[item.method];
-			if (!hook) throw new Error(`[Fumadocs OpenAPI] Method ${item.method} not found in webhook: ${item.name}`);
-			return {
-				item,
-				children: /* @__PURE__ */ jsx(Operation, {
-					type: "webhook",
-					method: item.method,
-					pathItem: webhook,
-					operation: hook,
-					path: `/${item.name}`,
-					showTitle: hasHead,
-					showDescription
-				}, `${item.name}:${item.method}`)
-			};
-		})
-	}, ctx);
-	if (ctx.playground?.enabled !== false) content = ctx.playground?.provider ? ctx.playground.provider({ children: content }) : /* @__PURE__ */ jsx(AuthProvider, { children: content });
-	return /* @__PURE__ */ jsx(ServerProvider, {
-		servers: dereferenced.servers,
-		children: content
 	});
 }
-function MarkdownPre(props) {
-	const codeProps = Children.only(props.children).props;
-	const content = codeProps.children;
-	if (typeof content !== "string") return null;
-	const lang = codeProps.className?.split(" ").find((v) => v.startsWith("language-"))?.slice(9) ?? "text";
-	return /* @__PURE__ */ jsx(ClientCodeBlock, {
-		lang,
-		code: content.trimEnd()
+function Layout({ operations, webhooks }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-24 text-sm @container",
+		children: [operations?.map((item) => item.children), webhooks?.map((item) => item.children)]
 	});
 }
 //#endregion

package/dist/ui/components/codeblock.js

@@ -1,17 +1,10 @@
 "use client";
-import { useRenderContext } from "../contexts/api.js";
+import { useComponents } from "../../utils/create-page.js";
 import { jsx } from "react/jsx-runtime";
-import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock.core";
 //#region src/ui/components/codeblock.tsx
 function ClientCodeBlock(props) {
-	const { shiki, shikiOptions, renderCodeBlock, components: { CodeBlock: Comp } = {} } = useRenderContext();
-	if (renderCodeBlock) return renderCodeBlock(props);
-	if (Comp) return /* @__PURE__ */ jsx(Comp, { ...props });
-	return /* @__PURE__ */ jsx(DynamicCodeBlock, {
-		highlighter: () => shiki.getOrInit(),
-		options: shikiOptions,
-		...props
-	});
+	const { CodeBlock } = useComponents();
+	return /* @__PURE__ */ jsx(CodeBlock, { ...props });
 }
 //#endregion
 export { ClientCodeBlock };

package/dist/ui/components/heading.js

@@ -1,26 +1,17 @@
 "use client";
-import { useRenderContext } from "../contexts/api.js";
+import { useComponents } from "../../utils/create-page.js";
+import { useAnchorId } from "../../packages/shared-api/dist/auto-anchor/client.js";
 import { jsx } from "react/jsx-runtime";
-import { useAnchorId } from "@fumadocs/api-docs/auto-anchor/client";
-import { Heading } from "fumadocs-ui/components/heading";
 //#region src/ui/components/heading.tsx
-function Heading$1({ id: _id, depth, ...props }) {
-	const id = useAnchorId([_id]);
-	const { renderHeading, components: { Heading: Comp } = {} } = useRenderContext();
-	if (renderHeading) return renderHeading({
-		id,
-		...props
-	}, depth);
-	if (Comp) return /* @__PURE__ */ jsx(Comp, {
-		id,
-		depth,
-		...props
-	});
-	return /* @__PURE__ */ jsx(Heading, {
-		id,
-		as: `h${depth}`,
+/**
+* A heading of the page, `id` is resolved against the anchor sections it is under.
+*/
+function Heading({ id, ...props }) {
+	const { Heading: Comp } = useComponents();
+	return /* @__PURE__ */ jsx(Comp, {
+		id: useAnchorId([id]),
 		...props
 	});
 }
 //#endregion
-export { Heading$1 as Heading };
+export { Heading };

package/dist/ui/components/markdown.js

@@ -1,12 +1,10 @@
-import { useRenderContext } from "../contexts/api.js";
-import { useMemo } from "react";
+"use client";
+import { useComponents } from "../../utils/create-page.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/components/markdown.tsx
 function Markdown({ md }) {
-	const { _default_processMarkdown: processMarkdown, renderMarkdown, components: { Markdown: Comp } = {} } = useRenderContext();
-	if (renderMarkdown) return renderMarkdown(md);
-	if (Comp) return /* @__PURE__ */ jsx(Comp, { md });
-	return useMemo(() => processMarkdown(md), [processMarkdown, md]);
+	const { Markdown: Comp } = useComponents();
+	return /* @__PURE__ */ jsx(Comp, { md });
 }
 //#endregion
 export { Markdown };

package/dist/ui/components/method-label.js

@@ -1,14 +1,6 @@
-import { cn } from "../../utils/cn.js";
+import { Badge } from "../../packages/shared-api/dist/components/badge.js";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
 //#region src/ui/components/method-label.tsx
-const badgeVariants = cva("font-mono font-medium", { variants: { color: {
-	green: "text-green-600 dark:text-green-400",
-	yellow: "text-yellow-600 dark:text-yellow-400",
-	red: "text-red-600 dark:text-red-400",
-	blue: "text-blue-600 dark:text-blue-400",
-	orange: "text-orange-600 dark:text-orange-400"
-} } });
 function getMethodColor(method) {
 	switch (method.toUpperCase()) {
 		case "PUT": return "yellow";
@@ -18,13 +10,6 @@ function getMethodColor(method) {
 		default: return "green";
 	}
 }
-function Badge({ className, color, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: cn(badgeVariants({ color }), className),
-		...props,
-		children: props.children
-	});
-}
 function MethodLabel({ children, ...props }) {
 	return /* @__PURE__ */ jsx(Badge, {
 		...props,
@@ -33,4 +18,4 @@ function MethodLabel({ children, ...props }) {
 	});
 }
 //#endregion
-export { Badge, MethodLabel, badgeVariants };
+export { MethodLabel };

package/dist/ui/components/schema.js

@@ -0,0 +1,28 @@
+"use client";
+import { useComponents, useRenderContext } from "../../utils/create-page.js";
+import { useAnchorId } from "../../packages/shared-api/dist/auto-anchor/client.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/components/schema.tsx
+/**
+* The Schema UI of the page, with the anchor ID of the root schema resolved.
+*/
+function SchemaUI({ client, ...props }) {
+	const { SchemaUI: Comp, Markdown, CodeBlock } = useComponents();
+	const { schemaUI } = useRenderContext();
+	const renderers = useMemo(() => ({
+		renderMarkdown: (md) => /* @__PURE__ */ jsx(Markdown, { md }),
+		renderCodeblock: (props) => /* @__PURE__ */ jsx(CodeBlock, { ...props })
+	}), [Markdown, CodeBlock]);
+	return /* @__PURE__ */ jsx(Comp, {
+		...renderers,
+		showExample: schemaUI?.showExample,
+		...props,
+		client: {
+			...client,
+			rootId: useAnchorId([client.name])
+		}
+	});
+}
+//#endregion
+export { SchemaUI };

package/dist/ui/index.d.ts

@@ -1,207 +1,16 @@
-import { MediaAdapter } from "../requests/media/adapter.js";
-import { CodeUsageGeneratorRegistry, InlineCodeUsageGenerator } from "../requests/generators/index.js";
-import { ExampleRequestItem } from "../utils/get-example-requests.js";
-import { RequestTabsRenderOptions } from "./operation/request-tabs.js";
-import { ResponseTabsRenderOptions } from "./operation/response-tabs.js";
-import { ParsedSchema } from "../utils/schema.js";
-import { PlaygroundClientOptions } from "../playground/client.js";
-import { GeneratedPageProps, OperationItem, WebhookItem } from "../utils/pages/builder.js";
-import { useRenderContext, useServerContext } from "./contexts/api.js";
-import { useOperationContext } from "./operation/context.js";
-import { Awaitable, Document, HttpMethods, OperationObject, PathItemObject, RenderContext } from "../types.js";
-import { ComponentProps, FC, HTMLAttributes, ReactNode } from "react";
-import { SchemaUIOptions } from "@fumadocs/api-docs/components/schema";
-import { ShikiFactory } from "fumadocs-core/highlight/shiki";
-import { BundledTheme, CodeOptionsThemes, CodeToHastOptionsCommon } from "shiki";
+import { OpenAPIPageProps, OpenAPIPageProps_Preloaded, OpenAPIPageProps_Spec } from "../utils/pages/builder.js";
+import { CreateOpenAPIRendererOptions, OpenAPIRenderOptions, OpenAPIRuntimeOptions } from "../utils/create-page.js";
+import { FC } from "react";
 //#region src/ui/index.d.ts
-export interface GenerateTypeScriptDefinitionsContext {
-  name: string;
-  readOnly: boolean;
-  writeOnly: boolean;
-  ctx: RenderContext;
-}
-export interface APIPlaygroundProps {
-  path: string;
-  method: HttpMethods;
-  operation: OperationObject;
-  pathItem: PathItemObject;
-  ctx: RenderContext;
-}
-export interface CreateOpenAPIPageOptions {
-  /**
-   * Generate TypeScript definitions from JSON schema.
-   *
-   * Pass `false` to disable it.
-   */
-  generateTypeScriptDefinitions?: ((schema: ParsedSchema, ctx: GenerateTypeScriptDefinitionsContext) => Awaitable<string | undefined>) | false;
-  /**
-   * Generate example code usage for all endpoints.
-   */
-  codeUsages?: CodeUsageGeneratorRegistry;
-  /**
-   * Generate example code usage for each endpoint.
-   */
-  generateCodeSamples?: (options: {
-    path: string;
-    operation: OperationObject;
-    method: HttpMethods;
-    pathItem: PathItemObject;
-  }) => InlineCodeUsageGenerator[];
-  shiki?: ShikiFactory;
-  shikiOptions?: Omit<CodeToHastOptionsCommon, 'lang'> & CodeOptionsThemes<BundledTheme>;
-  /**
-   * Show full response schema instead of only example response & Typescript definitions.
-   *
-   * @default true
-   */
-  showResponseSchema?: boolean;
-  /**
-   * Support other media types.
-   */
-  mediaAdapters?: Record<string, MediaAdapter>;
-  /**
-   * Customize page content.
-   */
-  content?: {
-    renderResponseTabs?: (options: ResponseTabsRenderOptions, ctx: RenderContext) => ReactNode;
-    renderRequestTabs?: (options: RequestTabsRenderOptions, ctx: RenderContext) => ReactNode;
-    renderAPIExampleLayout?: (slots: {
-      selector: ReactNode;
-      usageTabs: ReactNode;
-      responseTabs: ReactNode;
-    }, ctx: RenderContext) => ReactNode;
-    /**
-     * @param generators - codegens for API example usages
-     */
-    renderAPIExampleUsageTabs?: (generators: CodeUsageGeneratorRegistry, ctx: RenderContext) => ReactNode;
-    /**
-     * renderer of the entire page's layout (containing all operations & webhooks UI)
-     */
-    renderPageLayout?: (slots: {
-      operations?: {
-        item: OperationItem;
-        children: ReactNode;
-      }[];
-      webhooks?: {
-        item: WebhookItem;
-        children: ReactNode;
-      }[];
-    }, ctx: RenderContext) => ReactNode;
-    renderOperationLayout?: (slots: {
-      header: ReactNode;
-      description: ReactNode;
-      apiExample: ReactNode;
-      apiPlayground: ReactNode;
-      authSchemes: ReactNode;
-      parameters: ReactNode;
-      body: ReactNode;
-      responses: ReactNode;
-      callbacks: ReactNode;
-    }, context: {
-      path: string;
-      operation: OperationObject;
-      method: HttpMethods;
-      pathItem: PathItemObject;
-      ctx: RenderContext;
-    }) => ReactNode;
-    renderWebhookLayout?: (slots: {
-      header: ReactNode;
-      description: ReactNode;
-      authSchemes: ReactNode;
-      parameters: ReactNode;
-      body: ReactNode;
-      requests: ReactNode;
-      responses: ReactNode;
-      callbacks: ReactNode;
-    }) => ReactNode;
-  };
-  /**
-   * Info UI for JSON schemas.
-   */
-  schemaUI?: {
-    render?: (options: SchemaUIOptions, ctx: RenderContext) => ReactNode;
-    /**
-     * Show examples under the generated content of JSON schemas.
-     *
-     * @defaultValue false
-     */
-    showExample?: boolean;
-  };
-  /**
-   * Customize API playground.
-   */
-  playground?: PlaygroundClientOptions & {
-    /**
-     * @defaultValue true
-     */
-    enabled?: boolean;
-    /**
-     * render a page-level provider (useful for handling auth)
-     */
-    provider?: (props: {
-      children: ReactNode;
-    }) => ReactNode;
-    /**
-     * replace the renderer
-     */
-    render?: (props: APIPlaygroundProps) => ReactNode;
-  };
-  operation?: {
-    APIExampleSelector?: FC<{
-      items: ExampleRequestItem[];
-      value: string | undefined;
-      onValueChange: (id: string) => void;
-    }>;
-  };
-  components?: {
-    Heading?: FC<ComponentProps<'h1'> & {
-      id: string;
-      depth: number;
-    }>;
-    CodeBlock?: FC<{
-      lang: string;
-      code: string;
-    }>;
-    Markdown?: FC<{
-      md: string;
-    }>;
-  };
+export interface CreateOpenAPIPageOptions extends OpenAPIRuntimeOptions, OpenAPIRenderOptions {
   /**
-   * Set a prefix for `localStorage` keys.
-   *
-   * Useful when using multiple OpenAPI instances to prevent state conflicts.
-   *
-   * @defaultValue `fumadocs-openapi-`
+   * Replace parts of the UI, e.g. the ones installed with Fumadocs CLI.
    */
-  storageKeyPrefix?: string;
-  /** @deprecated use `components.Heading` instead */
-  renderHeading?: (props: HTMLAttributes<HTMLHeadingElement>, depth: number) => ReactNode;
-  /** @deprecated use `components.CodeBlock` instead */
-  renderCodeBlock?: (props: {
-    lang: string;
-    code: string;
-  }) => ReactNode;
-  /** @deprecated use `components.Markdown` instead */
-  renderMarkdown?: (md: string) => ReactNode;
+  components?: Partial<CreateOpenAPIRendererOptions['components']>;
 }
-export type OpenAPIPageProps = OpenAPIPageProps_Spec | OpenAPIPageProps_Preloaded;
-export type OpenAPIPageProps_Spec = Omit<GeneratedPageProps, 'document'> & {
-  payload: {
-    bundled: Document;
-    proxyUrl?: string;
-  };
-};
-export type OpenAPIPageProps_Preloaded = GeneratedPageProps & {
-  preloaded: {
-    docs: Record<string, Document>;
-    proxyUrl?: string;
-  };
-};
 /**
  * Create `<OpenAPIPage />` (a client component).
  */
 export declare function createOpenAPIPage(options?: CreateOpenAPIPageOptions): FC<OpenAPIPageProps>;
-/** @deprecated Use `OpenAPIPageProps` instead */
-export type ApiPageProps = OpenAPIPageProps;
 //#endregion
-export { type OperationItem, type WebhookItem, useOperationContext, useRenderContext, useServerContext };
+export type { OpenAPIPageProps, OpenAPIPageProps_Preloaded, OpenAPIPageProps_Spec };

package/dist/ui/index.js

@@ -1,6 +1,4 @@
 "use client";
-import { useRenderContext, useServerContext } from "./contexts/api.js";
-import { useOperationContext } from "./operation/context.js";
 import { createOpenAPIPageBase } from "./base.js";
 import { defaultShikiFactory } from "fumadocs-core/highlight/shiki/full";
 //#region src/ui/index.tsx
@@ -14,4 +12,4 @@ function createOpenAPIPage(options = {}) {
 	});
 }
 //#endregion
-export { createOpenAPIPage, useOperationContext, useRenderContext, useServerContext };
+export { createOpenAPIPage };