fumadocs-openapi 5.9.0 → 5.10.1

package/dist/index.d.ts

@@ -58,6 +58,7 @@ interface APIPlaygroundProps {
     header?: PrimitiveRequestField[];
     body?: RequestSchema;
     schemas: Record<string, RequestSchema>;
+    proxyUrl?: string;
 }
 
 interface ResponsesProps {
@@ -191,6 +192,10 @@ type Awaitable<T> = T | Promise<T>;
  */
 type DereferenceMap = Map<unknown, string>;
 interface RenderContext {
+    /**
+     * The url of proxy to avoid CORS issues
+     */
+    proxyUrl?: string;
     renderer: Renderer;
     /**
      * dereferenced schema

package/dist/server/index.d.ts

@@ -2,6 +2,7 @@ import { ComponentType, ReactNode, FC } from 'react';
 import { OpenAPIV3_1, OpenAPIV3 } from 'openapi-types';
 import Slugger from 'github-slugger';
 import { CodeToHastOptionsCommon, CodeOptionsThemes, BuiltinTheme } from 'shiki';
+import { NextRequest } from 'next/server';
 import { BuildPageTreeOptions } from 'fumadocs-core/source';
 
 interface BaseRequestField {
@@ -59,6 +60,7 @@ interface APIPlaygroundProps {
     header?: PrimitiveRequestField[];
     body?: RequestSchema;
     schemas: Record<string, RequestSchema>;
+    proxyUrl?: string;
 }
 
 interface ResponsesProps {
@@ -177,6 +179,10 @@ type Awaitable<T> = T | Promise<T>;
  */
 type DereferenceMap = Map<unknown, string>;
 interface RenderContext {
+    /**
+     * The url of proxy to avoid CORS issues
+     */
+    proxyUrl?: string;
     renderer: Renderer;
     /**
      * dereferenced schema
@@ -204,7 +210,8 @@ interface RenderContext {
 
 type DocumentInput = string | OpenAPIV3_1.Document | OpenAPIV3.Document;
 
-interface ApiPageProps extends Pick<RenderContext, 'generateCodeSamples' | 'generateTypeScriptSchema' | 'shikiOptions'> {
+type ApiPageContextProps = Pick<Partial<RenderContext>, 'shikiOptions' | 'generateTypeScriptSchema' | 'generateCodeSamples' | 'proxyUrl'>;
+interface ApiPageProps extends ApiPageContextProps {
     document: DocumentInput;
     hasHead: boolean;
     renderer?: Partial<Renderer>;
@@ -227,6 +234,12 @@ interface OperationItem {
     method: OpenAPIV3_1.HttpMethods;
 }
 
+declare const keys: readonly ["GET", "POST", "PUT", "DELETE", "PATCH", "HEAD"];
+type Proxy = {
+    [K in (typeof keys)[number]]: (req: NextRequest) => Promise<Response>;
+};
+declare function createProxy(allowedUrls?: string[]): Proxy;
+
 interface OpenAPIOptions extends Omit<Partial<ApiPageProps>, 'document'> {
     /**
      * @deprecated Pass document to `APIPage` instead
@@ -235,6 +248,7 @@ interface OpenAPIOptions extends Omit<Partial<ApiPageProps>, 'document'> {
 }
 interface OpenAPIServer {
     APIPage: FC<ApiPageProps>;
+    createProxy: typeof createProxy;
 }
 declare function createOpenAPI(options?: OpenAPIOptions): OpenAPIServer;
 

package/dist/server/index.js

@@ -302,13 +302,14 @@ function Playground({ path, method, ctx }) {
     const mediaType = bodyContent ? getPreferredType(bodyContent) : undefined;
     const context = {
         allowFile: mediaType === 'multipart/form-data',
-        schema: {},
+        references: {},
         nextId () {
             return String(currentId++);
         },
         registered: new WeakMap(),
         render: ctx
     };
+    const bodySchema = bodyContent && mediaType && bodyContent[mediaType].schema ? toSchema(bodyContent[mediaType].schema, true, context) : undefined;
     const props = {
         authorization: getAuthorizationField(method, ctx),
         method: method.method,
@@ -317,8 +318,9 @@ function Playground({ path, method, ctx }) {
         path: method.parameters?.filter((v)=>v.in === 'path').map((v)=>parameterToField(v, context)),
         query: method.parameters?.filter((v)=>v.in === 'query').map((v)=>parameterToField(v, context)),
         header: method.parameters?.filter((v)=>v.in === 'header').map((v)=>parameterToField(v, context)),
-        body: bodyContent && mediaType && bodyContent[mediaType].schema ? toSchema(bodyContent[mediaType].schema, true, context) : undefined,
-        schemas: context.schema
+        body: bodySchema,
+        schemas: context.references,
+        proxyUrl: ctx.proxyUrl
     };
     return /*#__PURE__*/ jsx(ctx.renderer.APIPlayground, {
         ...props
@@ -344,7 +346,7 @@ function getIdFromSchema(schema, required, ctx) {
     if (registered === undefined) {
         const id = ctx.nextId();
         ctx.registered.set(schema, id);
-        ctx.schema[id] = toSchema(schema, required, ctx);
+        ctx.references[id] = toSchema(schema, required, ctx);
         return id;
     }
     return registered;
@@ -553,7 +555,7 @@ function heading(depth, child, ctx) {
     return result;
 }
 
-const keys = {
+const keys$1 = {
     default: 'Default',
     minimum: 'Minimum',
     maximum: 'Maximum',
@@ -617,7 +619,7 @@ function Schema({ name, schema, ctx }) {
         text: schema.description
     }, "description"));
     const fields = [];
-    for (const [key, value] of Object.entries(keys)){
+    for (const [key, value] of Object.entries(keys$1)){
         if (key in schema) {
             fields.push({
                 key: value,
@@ -1262,6 +1264,7 @@ async function getContext({ document, dereferenceMap }, options = {}) {
     return {
         document: document,
         dereferenceMap,
+        proxyUrl: options.proxyUrl,
         renderer: {
             ...createRenders(options.shikiOptions),
             ...options.renderer
@@ -1275,8 +1278,69 @@ async function getContext({ document, dereferenceMap }, options = {}) {
     };
 }
 
+const keys = [
+    'GET',
+    'POST',
+    'PUT',
+    'DELETE',
+    'PATCH',
+    'HEAD'
+];
+function createProxy(allowedUrls) {
+    const handlers = {};
+    async function handler(req) {
+        const url = req.nextUrl.searchParams.get('url');
+        if (!url) {
+            return Response.json('A `url` query parameter is required for proxy url', {
+                status: 400
+            });
+        }
+        if (allowedUrls && allowedUrls.every((allowedUrl)=>!allowedUrl.startsWith(url))) {
+            return Response.json('The given `url` query parameter is not allowed', {
+                status: 400
+            });
+        }
+        const clonedReq = new Request(url, {
+            ...req,
+            cache: 'no-cache',
+            mode: 'cors'
+        });
+        clonedReq.headers.forEach((_value, originalKey)=>{
+            const key = originalKey.toLowerCase();
+            const notAllowed = key === 'origin';
+            if (notAllowed) {
+                clonedReq.headers.delete(originalKey);
+            }
+        });
+        const res = await fetch(clonedReq).catch((e)=>new Error(e.toString()));
+        if (res instanceof Error) {
+            return Response.json(`Failed to proxy request: ${res.message}`, {
+                status: 400
+            });
+        }
+        const headers = new Headers(res.headers);
+        headers.forEach((_value, originalKey)=>{
+            const key = originalKey.toLowerCase();
+            const notAllowed = key.startsWith('access-control-') || key === 'content-encoding';
+            if (notAllowed) {
+                headers.delete(originalKey);
+            }
+        });
+        headers.set('X-Forwarded-Host', res.url);
+        return new Response(res.body, {
+            ...res,
+            headers
+        });
+    }
+    for (const key of keys){
+        handlers[key] = handler;
+    }
+    return handlers;
+}
+
 function createOpenAPI(options = {}) {
     return {
+        createProxy,
         APIPage (props) {
             return /*#__PURE__*/ jsx(APIPage, {
                 ...options,

package/dist/ui/{client-client-DopF7PSu.js → client-client-B9w--AKD.js}

@@ -6,7 +6,7 @@ import dynamic from 'next/dynamic';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
 
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.469.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -16,7 +16,7 @@ const mergeClasses = (...classes)=>classes.filter((className, index, array)=>{
     }).join(" ").trim();
 
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.469.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -253,7 +253,7 @@ function useSchemaContext() {
     return ctx;
 }
 
-const APIPlayground = dynamic(()=>import('./playground-client-HUgWUI95.js').then((mod)=>mod.APIPlayground));
+const APIPlayground = dynamic(()=>import('./index-client-69lE5jtH.js').then(function (n) { return n.i; }).then((mod)=>mod.APIPlayground));
 function Root({ children, baseUrl, className, shikiOptions, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         className: cn('flex flex-col gap-24 text-sm text-fd-muted-foreground', className),
@@ -309,4 +309,4 @@ function BaseUrlSelect({ baseUrls }) {
     });
 }
 
-export { APIPlayground as A, BaseUrlSelect as B, CircleCheck as C, Plus as P, Root as R, SchemaContext as S, Trash2 as T, CircleX as a, ChevronDown as b, ChevronUp as c, Check as d, useApiContext as e, CopyRouteButton as f, useSchemaContext as u };
+export { APIPlayground as A, BaseUrlSelect as B, ChevronDown as C, Plus as P, Root as R, SchemaContext as S, Trash2 as T, ChevronUp as a, Check as b, useApiContext as c, CircleCheck as d, CircleX as e, CopyRouteButton as f, useSchemaContext as u };

package/dist/ui/fetcher-DBWYlEEA.js

@@ -0,0 +1,138 @@
+import { r as resolve } from './index-client-69lE5jtH.js';
+
+/**
+ * @param bodySchema - schema of body
+ * @param references - defined references of schemas, needed for resolve cyclic references
+ */ function createBrowserFetcher(bodySchema, references) {
+    return {
+        async fetch (input) {
+            const headers = new Headers();
+            if (input.type !== 'form-data') headers.append('Content-Type', 'application/json');
+            for (const key of Object.keys(input.header)){
+                const paramValue = input.header[key];
+                if (typeof paramValue === 'string' && paramValue.length > 0) headers.append(key, paramValue.toString());
+            }
+            return fetch(input.url, {
+                method: input.method,
+                cache: 'no-cache',
+                headers,
+                body: bodySchema ? createBodyFromValue(input.type, input.body, bodySchema, references, input.dynamicFields ?? new Map()) : undefined,
+                signal: AbortSignal.timeout(10 * 1000)
+            }).then(async (res)=>{
+                const contentType = res.headers.get('Content-Type') ?? '';
+                let type;
+                let data;
+                if (contentType.startsWith('application/json')) {
+                    type = 'json';
+                    data = await res.json();
+                } else {
+                    type = contentType.startsWith('text/html') ? 'html' : 'text';
+                    data = await res.text();
+                }
+                return {
+                    status: res.status,
+                    type,
+                    data
+                };
+            }).catch((e)=>{
+                const message = e instanceof Error ? `[${e.name}] ${e.message}` : e.toString();
+                return {
+                    status: 400,
+                    type: 'text',
+                    data: `Client side error: ${message}`
+                };
+            });
+        }
+    };
+}
+/**
+ * Create request body from value
+ */ function createBodyFromValue(type, value, schema, references, dynamicFields) {
+    const result = convertValue('body', value, schema, references, dynamicFields);
+    if (type === 'json') {
+        return JSON.stringify(result);
+    }
+    const formData = new FormData();
+    if (typeof result !== 'object' || !result) {
+        throw new Error(`Unsupported body type: ${typeof result}, expected: object`);
+    }
+    for (const key of Object.keys(result)){
+        const prop = result[key];
+        if (typeof prop === 'object' && prop instanceof File) {
+            formData.set(key, prop);
+        }
+        if (Array.isArray(prop) && prop.every((item)=>item instanceof File)) {
+            for (const item of prop){
+                formData.append(key, item);
+            }
+        }
+        if (prop && !(prop instanceof File)) {
+            formData.set(key, JSON.stringify(prop));
+        }
+    }
+    return formData;
+}
+/**
+ * Convert a value (object or string) to the corresponding type of schema
+ *
+ * @param fieldName - field name of value
+ * @param value - the original value
+ * @param schema - the schema of field
+ * @param references - schema references
+ * @param dynamicFields - Dynamic references
+ */ function convertValue(fieldName, value, schema, references, dynamicFields) {
+    const isEmpty = value === '' || value === undefined || value === null;
+    if (isEmpty && schema.isRequired) return schema.type === 'boolean' ? false : '';
+    else if (isEmpty) return undefined;
+    if (Array.isArray(value) && schema.type === 'array') {
+        return value.map((item, index)=>convertValue(`${fieldName}.${String(index)}`, item, resolve(schema.items, references), references, dynamicFields));
+    }
+    if (schema.type === 'switcher') {
+        const schema = resolve(getDynamicFieldSchema(fieldName, dynamicFields), references);
+        return convertValue(fieldName, value, schema, references, dynamicFields);
+    }
+    if (typeof value === 'object' && schema.type === 'object') {
+        const entries = Object.keys(value).map((key)=>{
+            const prop = value[key];
+            const propFieldName = `${fieldName}.${key}`;
+            if (key in schema.properties) {
+                return [
+                    key,
+                    convertValue(propFieldName, prop, resolve(schema.properties[key], references), references, dynamicFields)
+                ];
+            }
+            if (schema.additionalProperties) {
+                const schema = resolve(getDynamicFieldSchema(propFieldName, dynamicFields), references);
+                return [
+                    key,
+                    convertValue(propFieldName, prop, schema, references, dynamicFields)
+                ];
+            }
+            console.warn('Could not resolve field', propFieldName, dynamicFields);
+            return [
+                key,
+                prop
+            ];
+        });
+        return Object.fromEntries(entries);
+    }
+    switch(schema.type){
+        case 'number':
+            return Number(value);
+        case 'boolean':
+            return value === 'null' ? undefined : value === 'true';
+        case 'file':
+            return value; // file
+        default:
+            return String(value);
+    }
+}
+function getDynamicFieldSchema(name, dynamicFields) {
+    const field = dynamicFields.get(name);
+    return field?.type === 'field' ? field.schema : {
+        type: 'null',
+        isRequired: false
+    };
+}
+
+export { createBodyFromValue, createBrowserFetcher };

package/dist/ui/{playground-client-HUgWUI95.js → index-client-69lE5jtH.js}

@@ -5,13 +5,12 @@ import { forwardRef, useId, createContext, useContext, useState, useCallback, us
 import { FormProvider, Controller, useFormContext, useFieldArray, useForm, useWatch } from 'react-hook-form';
 import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';
 import { cn, buttonVariants } from 'fumadocs-ui/components/api';
-import { C as CircleCheck, a as CircleX, b as ChevronDown, c as ChevronUp, d as Check, u as useSchemaContext, T as Trash2, P as Plus, e as useApiContext, S as SchemaContext } from './client-client-DopF7PSu.js';
+import { C as ChevronDown, a as ChevronUp, b as Check, u as useSchemaContext, T as Trash2, P as Plus, c as useApiContext, d as CircleCheck, e as CircleX, S as SchemaContext } from './client-client-B9w--AKD.js';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import * as Base from 'fumadocs-ui/components/codeblock';
-import { useShiki } from 'fumadocs-core/utils/use-shiki';
+import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
 
 const Form = FormProvider;
 const FormFieldContext = /*#__PURE__*/ createContext({
@@ -102,145 +101,6 @@ FormDescription.displayName = 'FormDescription';
     };
 }
 
-/**
- * Create request body from value
- */ function createBodyFromValue(type, value, schema, references, dynamic) {
-    const result = convertValue('body', value, schema, references, dynamic);
-    if (type === 'json') {
-        return JSON.stringify(result);
-    }
-    const formData = new FormData();
-    if (typeof result !== 'object' || !result) {
-        throw new Error(`Unsupported body type: ${typeof result}, expected: object`);
-    }
-    for (const key of Object.keys(result)){
-        const prop = result[key];
-        if (typeof prop === 'object' && prop instanceof File) {
-            formData.set(key, prop);
-        }
-        if (Array.isArray(prop) && prop.every((item)=>item instanceof File)) {
-            for (const item of prop){
-                formData.append(key, item);
-            }
-        }
-        if (prop && !(prop instanceof File)) {
-            formData.set(key, JSON.stringify(prop));
-        }
-    }
-    return formData;
-}
-/**
- * Convert a value (object or string) to the corresponding type of schema
- *
- * @param fieldName - field name of value
- * @param value - the original value
- * @param schema - the schema of field
- * @param references - schema references
- * @param dynamic - Dynamic references
- */ function convertValue(fieldName, value, schema, references, dynamic) {
-    const isEmpty = value === '' || value === undefined || value === null;
-    if (isEmpty && schema.isRequired) return schema.type === 'boolean' ? false : '';
-    else if (isEmpty) return undefined;
-    if (Array.isArray(value) && schema.type === 'array') {
-        return value.map((item, index)=>convertValue(`${fieldName}.${String(index)}`, item, resolve(schema.items, references), references, dynamic));
-    }
-    if (schema.type === 'switcher') {
-        return convertDynamicValue(fieldName, value, references, dynamic);
-    }
-    if (typeof value === 'object' && schema.type === 'object') {
-        const entries = Object.keys(value).map((key)=>{
-            const prop = value[key];
-            const propFieldName = `${fieldName}.${key}`;
-            if (key in schema.properties) {
-                return [
-                    key,
-                    convertValue(propFieldName, prop, resolve(schema.properties[key], references), references, dynamic)
-                ];
-            }
-            if (schema.additionalProperties) {
-                return [
-                    key,
-                    convertDynamicValue(propFieldName, prop, references, dynamic)
-                ];
-            }
-            console.warn('Could not resolve field', propFieldName, dynamic);
-            return [
-                key,
-                prop
-            ];
-        });
-        return Object.fromEntries(entries);
-    }
-    switch(schema.type){
-        case 'number':
-            return Number(value);
-        case 'boolean':
-            return value === 'null' ? undefined : value === 'true';
-        case 'file':
-            return value; // file
-        default:
-            return String(value);
-    }
-}
-function convertDynamicValue(fieldName, value, references, dynamic) {
-    const fieldDynamic = dynamic.get(fieldName);
-    return convertValue(fieldName, value, fieldDynamic?.type === 'field' ? resolve(fieldDynamic.schema, references) : {
-        type: 'null',
-        isRequired: false
-    }, references, dynamic);
-}
-const statusMap = {
-    400: {
-        description: 'Bad Request',
-        color: 'text-red-500',
-        icon: CircleX
-    },
-    401: {
-        description: 'Unauthorized',
-        color: 'text-red-500',
-        icon: CircleX
-    },
-    403: {
-        description: 'Forbidden',
-        color: 'text-red-500',
-        icon: CircleX
-    },
-    404: {
-        description: 'Not Found',
-        color: 'text-fd-muted-foreground',
-        icon: CircleX
-    },
-    500: {
-        description: 'Internal Server Error',
-        color: 'text-red-500',
-        icon: CircleX
-    }
-};
-function getStatusInfo(status) {
-    if (status in statusMap) {
-        return statusMap[status];
-    }
-    if (status >= 200 && status < 300) {
-        return {
-            description: 'Successful',
-            color: 'text-green-500',
-            icon: CircleCheck
-        };
-    }
-    if (status >= 400) {
-        return {
-            description: 'Error',
-            color: 'text-red-500',
-            icon: CircleX
-        };
-    }
-    return {
-        description: 'No Description',
-        color: 'text-fd-muted-foreground',
-        icon: CircleX
-    };
-}
-
 function getDefaultValue(item, references) {
     if (item.type === 'object') return Object.fromEntries(Object.entries(item.properties).map(([key, prop])=>[
             key,
@@ -816,24 +676,66 @@ function ArrayInput({ fieldName, field, ...props }) {
 
 function CodeBlock({ code, lang = 'json' }) {
     const { shikiOptions } = useApiContext();
-    const rendered = useShiki(code, {
-        lang,
-        ...shikiOptions,
-        components: {
-            pre: (props)=>/*#__PURE__*/ jsx(Base.Pre, {
-                    className: "max-h-[288px]",
-                    ...props,
-                    children: props.children
-                })
-        }
-    });
-    return /*#__PURE__*/ jsx(Base.CodeBlock, {
-        className: "my-0",
-        children: rendered
+    return /*#__PURE__*/ jsx(DynamicCodeBlock, {
+        lang: lang,
+        code: code,
+        options: shikiOptions
     });
 }
 
-function APIPlayground({ route, method = 'GET', bodyType, authorization, path = [], header = [], query = [], body, fields = {}, schemas }) {
+const statusMap = {
+    400: {
+        description: 'Bad Request',
+        color: 'text-red-500',
+        icon: CircleX
+    },
+    401: {
+        description: 'Unauthorized',
+        color: 'text-red-500',
+        icon: CircleX
+    },
+    403: {
+        description: 'Forbidden',
+        color: 'text-red-500',
+        icon: CircleX
+    },
+    404: {
+        description: 'Not Found',
+        color: 'text-fd-muted-foreground',
+        icon: CircleX
+    },
+    500: {
+        description: 'Internal Server Error',
+        color: 'text-red-500',
+        icon: CircleX
+    }
+};
+function getStatusInfo(status) {
+    if (status in statusMap) {
+        return statusMap[status];
+    }
+    if (status >= 200 && status < 300) {
+        return {
+            description: 'Successful',
+            color: 'text-green-500',
+            icon: CircleCheck
+        };
+    }
+    if (status >= 400) {
+        return {
+            description: 'Error',
+            color: 'text-red-500',
+            icon: CircleX
+        };
+    }
+    return {
+        description: 'No Description',
+        color: 'text-fd-muted-foreground',
+        icon: CircleX
+    };
+}
+
+function APIPlayground({ route, method = 'GET', bodyType, authorization, path = [], header = [], query = [], body, fields = {}, schemas, proxyUrl }) {
     const { baseUrl } = useApiContext();
     const dynamicRef = useRef(new Map());
     const form = useForm({
@@ -846,27 +748,29 @@ function APIPlayground({ route, method = 'GET', bodyType, authorization, path =
         }
     });
     const testQuery = useQuery(async (input)=>{
-        const url = new URL(`${baseUrl ?? window.location.origin}${createUrlFromInput(route, input.path, input.query)}`);
-        const headers = new Headers();
-        if (bodyType !== 'form-data') headers.append('Content-Type', 'application/json');
+        const fetcher = await import('./fetcher-DBWYlEEA.js').then((mod)=>mod.createBrowserFetcher(body, schemas));
+        const targetUrl = `${baseUrl ?? window.location.origin}${createPathnameFromInput(route, input.path, input.query)}`;
+        let url;
+        if (proxyUrl) {
+            url = new URL(proxyUrl, window.location.origin);
+            url.searchParams.append('url', targetUrl);
+        } else {
+            url = new URL(targetUrl);
+        }
+        const header = {
+            ...input.header
+        };
         if (input.authorization && authorization) {
-            headers.append(authorization.name, input.authorization);
+            header[authorization.name] = input.authorization;
         }
-        Object.keys(input.header).forEach((key)=>{
-            const paramValue = input.header[key];
-            if (typeof paramValue === 'string' && paramValue.length > 0) headers.append(key, paramValue);
-        });
-        const bodyValue = body && input.body && Object.keys(input.body).length > 0 ? createBodyFromValue(bodyType, input.body, body, schemas, dynamicRef.current) : undefined;
-        const response = await fetch(url, {
-            method,
-            headers,
-            body: bodyValue
+        return fetcher.fetch({
+            type: bodyType,
+            url: url.toString(),
+            header,
+            body: input.body,
+            dynamicFields: dynamicRef.current,
+            method
         });
-        const data = await response.json().catch(()=>undefined);
-        return {
-            status: response.status,
-            data
-        };
     });
     useEffect(()=>{
         if (!authorization) return;
@@ -902,6 +806,7 @@ function APIPlayground({ route, method = 'GET', bodyType, authorization, path =
             field: info
         }, key);
     }
+    const isParamEmpty = path.length === 0 && query.length === 0 && header.length === 0 && body === undefined;
     return /*#__PURE__*/ jsx(Form, {
         ...form,
         children: /*#__PURE__*/ jsx(SchemaContext.Provider, {
@@ -932,9 +837,9 @@ function APIPlayground({ route, method = 'GET', bodyType, authorization, path =
                         ]
                     }),
                     authorization ? renderCustomField('authorization', authorization, fields.auth) : null,
-                    /*#__PURE__*/ jsxs(Accordions, {
+                    !isParamEmpty ? /*#__PURE__*/ jsxs(Accordions, {
                         type: "multiple",
-                        className: cn('-m-3 border-0 bg-transparent text-sm', path.length === 0 && query.length === 0 && header.length === 0 && !body && 'hidden'),
+                        className: "-m-3 border-0 bg-transparent text-sm",
                         children: [
                             path.length > 0 ? /*#__PURE__*/ jsx(Accordion, {
                                 title: "Path",
@@ -965,7 +870,7 @@ function APIPlayground({ route, method = 'GET', bodyType, authorization, path =
                                 }) : renderCustomField('body', body, fields.body)
                             }) : null
                         ]
-                    }),
+                    }) : null,
                     testQuery.data ? /*#__PURE__*/ jsx(ResultDisplay, {
                         data: testQuery.data
                     }) : null
@@ -974,17 +879,17 @@ function APIPlayground({ route, method = 'GET', bodyType, authorization, path =
         })
     });
 }
-function createUrlFromInput(route, path, query) {
+function createPathnameFromInput(route, path, query) {
     let pathname = route;
-    Object.keys(path).forEach((key)=>{
+    for (const key of Object.keys(path)){
         const paramValue = path[key];
         if (typeof paramValue === 'string' && paramValue.length > 0) pathname = pathname.replace(`{${key}}`, paramValue);
-    });
+    }
     const searchParams = new URLSearchParams();
-    Object.keys(query).forEach((key)=>{
+    for (const key of Object.keys(query)){
         const paramValue = query[key];
         if (typeof paramValue === 'string' && paramValue.length > 0) searchParams.append(key, paramValue);
-    });
+    }
     return searchParams.size > 0 ? `${pathname}?${searchParams.toString()}` : pathname;
 }
 function RouteDisplay({ route }) {
@@ -994,7 +899,7 @@ function RouteDisplay({ route }) {
             'query'
         ]
     });
-    const pathname = useMemo(()=>createUrlFromInput(route, path, query), [
+    const pathname = useMemo(()=>createPathnameFromInput(route, path, query), [
         route,
         path,
         query
@@ -1025,7 +930,8 @@ function ResultDisplay({ data }) {
                 children: data.status
             }),
             data.data ? /*#__PURE__*/ jsx(CodeBlock, {
-                code: JSON.stringify(data.data, null, 2)
+                lang: typeof data.data === 'string' && data.data.length > 50000 ? 'text' : data.type,
+                code: typeof data.data === 'string' ? data.data : JSON.stringify(data.data, null, 2)
             }) : null
         ]
     });
@@ -1053,4 +959,9 @@ function useQuery(fn) {
     ]);
 }
 
-export { APIPlayground };
+var index = {
+  __proto__: null,
+  APIPlayground: APIPlayground
+};
+
+export { index as i, resolve as r };

package/dist/ui/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ComponentType, ReactElement, MutableRefObject, HTMLAttributes } from 'react';
+import { ReactNode, ComponentType, ReactElement, RefObject, HTMLAttributes } from 'react';
 import { FieldPath, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
 import { OpenAPIV3_1 } from 'openapi-types';
 import Slugger from 'github-slugger';
@@ -54,6 +54,10 @@ type Awaitable<T> = T | Promise<T>;
  */
 type DereferenceMap = Map<unknown, string>;
 interface RenderContext {
+    /**
+     * The url of proxy to avoid CORS issues
+     */
+    proxyUrl?: string;
     renderer: Renderer;
     /**
      * dereferenced schema
@@ -134,6 +138,7 @@ interface APIPlaygroundProps {
     header?: PrimitiveRequestField[];
     body?: RequestSchema;
     schemas: Record<string, RequestSchema>;
+    proxyUrl?: string;
 }
 
 interface ResponsesProps {
@@ -225,7 +230,7 @@ interface CustomField<TName extends FieldPath<FormValues>, Info> {
 
 interface SchemaContextType {
     references: Record<string, RequestSchema>;
-    dynamic: MutableRefObject<Map<string, DynamicField>>;
+    dynamic: RefObject<Map<string, DynamicField>>;
 }
 type DynamicField = {
     type: 'object';

package/dist/ui/index.js

@@ -3,8 +3,8 @@ import { cn } from 'fumadocs-ui/components/api';
 import { Fragment } from 'react';
 import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';
 import { cva } from 'class-variance-authority';
-import { f as CopyRouteButton, B as BaseUrlSelect } from './client-client-DopF7PSu.js';
-export { A as APIPlayground, R as Root, u as useSchemaContext } from './client-client-DopF7PSu.js';
+import { f as CopyRouteButton, B as BaseUrlSelect } from './client-client-B9w--AKD.js';
+export { A as APIPlayground, R as Root, u as useSchemaContext } from './client-client-B9w--AKD.js';
 
 const badgeVariants = cva('rounded-xl border px-1.5 py-1 text-xs font-medium leading-[12px]', {
     variants: {
@@ -95,9 +95,9 @@ function APIInfo({ className, route, badgeClassname, baseUrls, method = 'GET', h
 function API({ children, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         ...props,
-        className: cn('flex flex-col gap-x-6 gap-y-4 max-xl:[--fd-toc-height:46px] max-md:[--fd-toc-height:36px] xl:flex-row xl:items-start', props.className),
+        className: cn('flex flex-col gap-x-6 gap-y-4 xl:flex-row xl:items-start', props.className),
         style: {
-            '--fd-api-info-top': 'calc(var(--fd-nav-height) + var(--fd-banner-height) + var(--fd-toc-height, 0.5rem))',
+            '--fd-api-info-top': 'calc(var(--fd-nav-height) + var(--fd-banner-height) + var(--fd-tocnav-height, 0px))',
             ...props.style
         },
         children: children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "5.9.0",
+  "version": "5.10.1",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "NextJs",
@@ -32,9 +32,9 @@
   ],
   "dependencies": {
     "@fumari/json-schema-to-typescript": "^1.1.2",
-    "@radix-ui/react-select": "^2.1.3",
+    "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
-    "@scalar/openapi-parser": "0.10.0",
+    "@scalar/openapi-parser": "0.10.2",
     "ajv-draft-04": "^1.0.0",
     "class-variance-authority": "^0.7.1",
     "fast-glob": "^3.3.1",
@@ -42,21 +42,21 @@
     "hast-util-to-jsx-runtime": "^2.3.2",
     "js-yaml": "^4.1.0",
     "openapi-sampler": "^1.6.1",
-    "react-hook-form": "^7.54.1",
+    "react-hook-form": "^7.54.2",
     "remark": "^15.0.1",
     "remark-rehype": "^11.1.1",
-    "shiki": "^1.24.2",
-    "fumadocs-ui": "14.6.1",
-    "fumadocs-core": "14.6.1"
+    "shiki": "^1.24.3",
+    "fumadocs-core": "14.6.3",
+    "fumadocs-ui": "14.6.3"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
     "@types/node": "22.10.2",
     "@types/openapi-sampler": "^1.0.3",
-    "@types/react": "^19.0.1",
+    "@types/react": "^19.0.2",
     "bunchee": "^6.0.3",
-    "lucide-react": "^0.468.0",
-    "next": "15.1.0",
+    "lucide-react": "^0.469.0",
+    "next": "15.1.2",
     "openapi-types": "^12.1.3",
     "eslint-config-custom": "0.0.0",
     "tsconfig": "0.0.0"