OpenAPI: Support disableCache prop

.changeset/twelve-apples-peel.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-openapi': minor
+---
+
+Support `disableCache` prop on APIPage

packages/core/src/mdx-plugins/rehype-code.ts

@@ -209,4 +209,4 @@ function transformerTab(): ShikiTransformer {
   };
 }
 
-export { type CodeBlockIcon, transformerIcon };
+export { type CodeBlockIcon, transformerIcon, transformerTab };

packages/openapi/src/render/codeblock.tsx

@@ -1,7 +1,7 @@
 import { Fragment, type HTMLAttributes } from 'react';
 import * as Base from 'fumadocs-ui/components/codeblock';
 import { codeToHast } from 'shiki';
-import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import { type Jsx, toJsxRuntime } from 'hast-util-to-jsx-runtime';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { sharedTransformers } from '@/utils/shiki';
 
@@ -24,15 +24,13 @@ export async function CodeBlock({
 
   const codeblock = toJsxRuntime(html, {
     development: false,
-    // @ts-expect-error -- untyped
-    jsx,
-    // @ts-expect-error -- untyped
-    jsxs,
+    jsx: jsx as Jsx,
+    jsxs: jsxs as Jsx,
+    Fragment,
     components: {
       // eslint-disable-next-line react/no-unstable-nested-components -- server component
       pre: (props) => <Base.Pre {...props} {...options} />,
     },
-    Fragment,
   });
 
   return <Base.CodeBlock className="my-0">{codeblock}</Base.CodeBlock>;

packages/openapi/src/render/markdown.tsx

@@ -1,16 +1,26 @@
 import { type ReactElement } from 'react';
-import { rehypeCode, remarkGfm, remarkImage } from 'fumadocs-core/mdx-plugins';
+import {
+  rehypeCode,
+  remarkGfm,
+  remarkImage,
+  type RehypeCodeOptions,
+} from 'fumadocs-core/mdx-plugins';
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 import { remark } from 'remark';
 import remarkRehype from 'remark-rehype';
 import { toJsxRuntime, type Jsx } from 'hast-util-to-jsx-runtime';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { sharedTransformers } from '@/utils/shiki';
 
 const processor = remark()
   .use(remarkGfm)
   .use(remarkImage, { useImport: false })
   .use(remarkRehype)
-  .use(rehypeCode);
+  .use(rehypeCode, {
+    langs: [],
+    lazy: true,
+    transformers: sharedTransformers,
+  } satisfies Partial<RehypeCodeOptions>);
 
 export async function Markdown({
   text,

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

@@ -20,6 +20,8 @@ export interface ApiPageProps
   operations: Operation[];
   hasHead: boolean;
   renderer?: Partial<Renderer>;
+
+  disableCache?: boolean;
 }
 
 const cache = new Map<string, OpenAPI.Document>();
@@ -33,7 +35,7 @@ export async function APIPage(props: ApiPageProps): Promise<ReactElement> {
   const { operations, hasHead = true } = props;
   let document: OpenAPI.Document;
 
-  if (typeof props.document === 'string') {
+  if (typeof props.document === 'string' && !props.disableCache) {
     const cached = cache.get(props.document);
     document =
       cached ?? (await Parser.dereference<OpenAPI.Document>(props.document));

packages/openapi/src/ui/index.tsx

@@ -41,8 +41,14 @@ export function APIInfo({
     <div className={cn('min-w-0 flex-1', className)} {...props}>
       <div
         className={cn(
-          'sticky top-24 z-20 mb-4 flex flex-row items-center gap-2 rounded-lg border bg-fd-card px-3 py-2 md:top-12 lg:top-1',
+          'sticky top-[var(--fd-api-info-top)] z-20 mb-4 flex flex-row items-center gap-2 rounded-lg border bg-fd-card px-3 py-2',
         )}
+        style={
+          {
+            '--fd-api-info-top':
+              'calc(var(--fd-nav-height) + var(--fd-banner-height) + 4px)',
+          } as object
+        }
       >
         <span
           className={cn(
@@ -108,20 +114,25 @@ export function Property({
   );
 }
 
-export function APIExample({
-  children,
-  className,
-  ...props
-}: HTMLAttributes<HTMLDivElement>): React.ReactElement {
+export function APIExample(
+  props: HTMLAttributes<HTMLDivElement>,
+): React.ReactElement {
   return (
     <div
-      className={cn(
-        'prose-no-margin md:sticky md:top-12 lg:top-1 xl:w-[400px]',
-        className,
-      )}
       {...props}
+      className={cn(
+        'prose-no-margin md:sticky md:top-[var(--fd-api-info-top)] xl:w-[400px]',
+        props.className,
+      )}
+      style={
+        {
+          '--fd-api-info-top':
+            'calc(var(--fd-nav-height) + var(--fd-banner-height) + 4px)',
+          ...props.style,
+        } as object
+      }
     >
-      {children}
+      {props.children}
     </div>
   );
 }