fumadocs-openapi 5.11.7 → 5.12.0

package/dist/index.d.ts

@@ -170,6 +170,13 @@ interface CodeSample {
     source: string | ((endpoint: EndpointSample) => string | undefined) | false;
 }
 
+type DocumentInput = string | OpenAPIV3_1.Document | OpenAPIV3.Document;
+type ProcessedDocument = {
+    document: NoReference<Document>;
+    dereferenceMap: DereferenceMap;
+    downloaded: Document;
+};
+
 type Document = OpenAPIV3_1.Document;
 type OperationObject = OpenAPIV3_1.OperationObject;
 type ParameterObject = OpenAPIV3_1.ParameterObject;
@@ -189,19 +196,22 @@ type Awaitable<T> = T | Promise<T>;
  */
 type DereferenceMap = Map<unknown, string>;
 interface RenderContext {
+    /**
+     * Use Scalar for API Playground
+     */
+    useScalar: boolean;
     /**
      * The url of proxy to avoid CORS issues
      */
     proxyUrl?: string;
     renderer: Renderer;
-    /**
-     * dereferenced schema
-     */
-    document: NoReference<Document>;
     baseUrl: string;
     servers: ServerObject[];
     slugger: Slugger;
-    dereferenceMap: DereferenceMap;
+    /**
+     * dereferenced schema
+     */
+    schema: ProcessedDocument;
     /**
      * Generate TypeScript definitions from response schema.
      *
@@ -222,8 +232,6 @@ interface RenderContext {
     showResponseSchema?: boolean;
 }
 
-type DocumentInput = string | OpenAPIV3_1.Document | OpenAPIV3.Document;
-
 interface WebhookItem {
     name: string;
     method: OpenAPIV3_1.HttpMethods;

package/dist/index.js

@@ -158,7 +158,8 @@ const cache = new Map();
     });
     const processed = {
         document: dereferenced,
-        dereferenceMap
+        dereferenceMap,
+        downloaded: loaded.specification
     };
     if (!disableCache && typeof document === 'string') {
         cache.set(document, processed);
@@ -302,24 +303,28 @@ async function generateFiles(options) {
         }),
         ...urlInputs
     ];
-    function getOutputPaths(name, result) {
+    function getOutputPaths(result) {
+        let file;
+        if (result.pathItem.summary) {
+            file = getFilename(result.pathItem.summary);
+        } else if (result.type === 'operation') {
+            file = result.operation.operationId ? getFilename(result.operation.operationId) : join(getOutputPathFromRoute(result.item.path), result.item.method.toLowerCase());
+        } else {
+            file = getFilename(result.item.name);
+        }
         const outPaths = [];
         if (groupBy === 'tag') {
             const tags = result.operation.tags;
             if (tags && tags.length > 0) {
                 for (const tag of tags){
-                    outPaths.push(join(outputDir, getFilename(tag), `${getFilename(name)}.mdx`));
+                    outPaths.push(join(outputDir, getFilename(tag), `${file}.mdx`));
                 }
             } else {
-                outPaths.push(result.type === 'operation' ? join(outputDir, `${getFilename(name)}.mdx`) : join(outputDir, 'webhooks', `${getFilename(name)}.mdx`));
+                outPaths.push(result.type === 'operation' ? join(outputDir, `${file}.mdx`) : join(outputDir, 'webhooks', `${file}.mdx`));
             }
         }
-        if (groupBy === 'route') {
-            const dir = result.pathItem.summary ? getFilename(result.pathItem.summary) : getFilenameFromRoute(result.type === 'operation' ? result.item.path : result.item.name);
-            outPaths.push(join(outputDir, dir, `${getFilename(name)}.mdx`));
-        }
-        if (groupBy === 'none') {
-            outPaths.push(join(outputDir, `${getFilename(name)}.mdx`));
+        if (groupBy === 'route' || groupBy === 'none') {
+            outPaths.push(join(outputDir, `${file}.mdx`));
         }
         return outPaths;
     }
@@ -336,19 +341,17 @@ async function generateFiles(options) {
             const metaFiles = new Set();
             const results = await generatePages(pathOrUrl, options);
             for (const result of results){
-                let name = result.type === 'operation' ? result.operation.operationId : result.item.name;
-                if (!name) return;
-                name = name.split('.').at(-1) ?? name;
-                for (const outPath of getOutputPaths(name, result)){
+                const meta = JSON.stringify({
+                    title: result.pathItem.summary
+                }, null, 2);
+                for (const outPath of getOutputPaths(result)){
                     await write(outPath, result.content);
                     console.log(`Generated: ${outPath}`);
                     if (groupBy === 'route') {
                         const metaFile = join(dirname(outPath), 'meta.json');
                         if (!result.pathItem.summary || metaFiles.has(metaFile)) continue;
                         metaFiles.add(metaFile);
-                        await write(metaFile, JSON.stringify({
-                            title: result.pathItem.summary
-                        }, null, 2));
+                        await write(metaFile, meta);
                         console.log(`Generated Meta: ${metaFile}`);
                     }
                 }
@@ -370,7 +373,7 @@ async function generateFiles(options) {
 function isUrl(input) {
     return input.startsWith('https://') || input.startsWith('http://');
 }
-function getFilenameFromRoute(path) {
+function getOutputPathFromRoute(path) {
     return path.replaceAll('.', '/').split('/').filter((v)=>!v.startsWith('{') && !v.endsWith('}')).at(-1) ?? '';
 }
 function getFilename(s) {

package/dist/server/index.d.ts

@@ -172,6 +172,13 @@ interface CodeSample {
     source: string | ((endpoint: EndpointSample) => string | undefined) | false;
 }
 
+type DocumentInput = string | OpenAPIV3_1.Document | OpenAPIV3.Document;
+type ProcessedDocument = {
+    document: NoReference<Document>;
+    dereferenceMap: DereferenceMap;
+    downloaded: Document;
+};
+
 type Document = OpenAPIV3_1.Document;
 type ReferenceObject = OpenAPIV3_1.ReferenceObject;
 type ServerObject = NoReference<OpenAPIV3_1.ServerObject>;
@@ -181,19 +188,22 @@ type Awaitable<T> = T | Promise<T>;
  */
 type DereferenceMap = Map<unknown, string>;
 interface RenderContext {
+    /**
+     * Use Scalar for API Playground
+     */
+    useScalar: boolean;
     /**
      * The url of proxy to avoid CORS issues
      */
     proxyUrl?: string;
     renderer: Renderer;
-    /**
-     * dereferenced schema
-     */
-    document: NoReference<Document>;
     baseUrl: string;
     servers: ServerObject[];
     slugger: Slugger;
-    dereferenceMap: DereferenceMap;
+    /**
+     * dereferenced schema
+     */
+    schema: ProcessedDocument;
     /**
      * Generate TypeScript definitions from response schema.
      *
@@ -214,9 +224,7 @@ interface RenderContext {
     showResponseSchema?: boolean;
 }
 
-type DocumentInput = string | OpenAPIV3_1.Document | OpenAPIV3.Document;
-
-type ApiPageContextProps = Pick<Partial<RenderContext>, 'shikiOptions' | 'generateTypeScriptSchema' | 'generateCodeSamples' | 'proxyUrl' | 'showResponseSchema'>;
+type ApiPageContextProps = Pick<Partial<RenderContext>, 'shikiOptions' | 'generateTypeScriptSchema' | 'generateCodeSamples' | 'proxyUrl' | 'showResponseSchema' | 'useScalar'>;
 interface ApiPageProps extends ApiPageContextProps {
     document: DocumentInput;
     hasHead: boolean;

package/dist/server/index.js

@@ -4,6 +4,7 @@ import { Fragment as Fragment$1 } from 'react';
 import { sample } from 'openapi-sampler';
 import { js2xml } from 'xml-js';
 import { compile } from '@fumari/json-schema-to-typescript';
+import { ScalarPlayground, Root, API, APIInfo, APIExample as APIExample$1, Property, ObjectCollapsible, APIPlayground } from '../ui/index.js';
 import { remarkGfm, remarkImage, rehypeCode } from 'fumadocs-core/mdx-plugins';
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 import { remark } from 'remark';
@@ -14,7 +15,6 @@ import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
 import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';
 import * as Base from 'fumadocs-ui/components/codeblock';
 import { highlight } from 'fumadocs-core/server';
-import { Root, API, APIInfo, APIExample as APIExample$1, Property, ObjectCollapsible, APIPlayground } from '../ui/index.js';
 import { load, upgrade, dereference } from '@scalar/openapi-parser';
 import { fetchUrls } from '@scalar/openapi-parser/plugins/fetch-urls';
 import { readFiles } from '@scalar/openapi-parser/plugins/read-files';
@@ -54,7 +54,7 @@ function getSecurityPrefix(security) {
     if (security.type === 'oauth2') return 'Bearer';
 }
 
-function generateSample(path, method, { baseUrl, document }) {
+function generateSample(path, method, { baseUrl, schema: { document } }) {
     const params = [];
     const responses = {};
     for (const param of method.parameters ?? []){
@@ -329,6 +329,13 @@ async function getTypescriptSchema(endpoint, code, dereferenceMap) {
 }
 
 function Playground({ path, method, ctx }) {
+    if (ctx.useScalar) {
+        return /*#__PURE__*/ jsx(ScalarPlayground, {
+            spec: ctx.schema.downloaded,
+            method: method.method,
+            path: path
+        });
+    }
     let currentId = 0;
     const bodyContent = method.requestBody?.content;
     const mediaType = bodyContent ? getPreferredType(bodyContent) : undefined;
@@ -360,12 +367,12 @@ function Playground({ path, method, ctx }) {
         ...props
     });
 }
-function getAuthorizationField(method, ctx) {
-    const security = method.security ?? ctx.document.security ?? [];
+function getAuthorizationField(method, { schema: { document } }) {
+    const security = method.security ?? document.security ?? [];
     if (security.length === 0) return;
     const singular = security.find((requirements)=>Object.keys(requirements).length === 1);
     if (!singular) return;
-    const scheme = getSecurities(singular, ctx.document)[0];
+    const scheme = getSecurities(singular, document)[0];
     return {
         type: 'string',
         name: scheme.type === 'apiKey' ? scheme.name : 'Authorization',
@@ -606,17 +613,18 @@ function Schema({ name, schema, ctx }) {
     const parseObject = ctx.parseObject ?? true;
     const stack = ctx.stack ?? [];
     const { renderer } = ctx.render;
-    const child = [];
     // object type
     if (isObject(schema) && parseObject && (schema.additionalProperties || schema.properties)) {
+        let body = null;
+        let footer = null;
         const { additionalProperties, properties } = schema;
         if (additionalProperties === true) {
-            child.push(/*#__PURE__*/ jsx(renderer.Property, {
+            footer = /*#__PURE__*/ jsx(renderer.Property, {
                 name: "[key: string]",
                 type: "any"
-            }, "additionalProperties"));
+            });
         } else if (additionalProperties) {
-            child.push(/*#__PURE__*/ jsx(Schema, {
+            footer = /*#__PURE__*/ jsx(Schema, {
                 name: "[key: string]",
                 schema: additionalProperties,
                 ctx: {
@@ -624,10 +632,10 @@ function Schema({ name, schema, ctx }) {
                     required: false,
                     parseObject: false
                 }
-            }, "additionalProperties"));
+            });
         }
         if (properties) {
-            const rendered = Object.entries(properties).map(([key, value])=>{
+            body = Object.entries(properties).map(([key, value])=>{
                 return /*#__PURE__*/ jsx(Schema, {
                     name: key,
                     schema: value,
@@ -638,9 +646,14 @@ function Schema({ name, schema, ctx }) {
                     }
                 }, key);
             });
-            child.push(...rendered);
         }
-        return child;
+        return /*#__PURE__*/ jsxs("div", {
+            className: "flex flex-col gap-4",
+            children: [
+                body,
+                footer
+            ]
+        });
     }
     if (schema.allOf && parseObject) {
         return /*#__PURE__*/ jsx(Schema, {
@@ -649,9 +662,7 @@ function Schema({ name, schema, ctx }) {
             ctx: ctx
         });
     }
-    if (schema.description) child.push(/*#__PURE__*/ jsx(Markdown, {
-        text: schema.description
-    }, "description"));
+    let footer = null;
     const fields = [];
     for (const [key, value] of Object.entries(keys$1)){
         if (key in schema) {
@@ -667,21 +678,9 @@ function Schema({ name, schema, ctx }) {
             value: schema.enum.map((value)=>JSON.stringify(value)).join(' | ')
         });
     }
-    if (fields.length > 0) child.push(/*#__PURE__*/ jsx("div", {
-        className: "flex flex-col gap-2",
-        children: fields.map((field)=>/*#__PURE__*/ jsxs("span", {
-                children: [
-                    field.key,
-                    ": ",
-                    /*#__PURE__*/ jsx("code", {
-                        children: field.value
-                    })
-                ]
-            }, field.key))
-    }, "fields"));
     if (isObject(schema) && !parseObject && !stack.includes(schema)) {
-        child.push(/*#__PURE__*/ jsx(renderer.ObjectCollapsible, {
-            name: "Attributes",
+        footer = /*#__PURE__*/ jsx(renderer.ObjectCollapsible, {
+            name: "Show Attributes",
             children: /*#__PURE__*/ jsx(Schema, {
                 name: name,
                 schema: schema,
@@ -695,7 +694,7 @@ function Schema({ name, schema, ctx }) {
                     ]
                 }
             })
-        }, "attributes"));
+        });
     } else {
         const mentionedObjectTypes = [
             ...schema.anyOf ?? schema.oneOf ?? [],
@@ -706,9 +705,9 @@ function Schema({ name, schema, ctx }) {
                 schema.items
             ] : []
         ].filter((s)=>isComplexType(s) && !stack.includes(s));
-        const renderedMentionedTypes = mentionedObjectTypes.map((s, idx)=>{
+        footer = mentionedObjectTypes.map((s, idx)=>{
             return /*#__PURE__*/ jsx(renderer.ObjectCollapsible, {
-                name: s.title ?? `Object ${(idx + 1).toString()}`,
+                name: s.title ?? (mentionedObjectTypes.length === 1 ? 'Show Attributes' : `Object ${idx + 1}`),
                 children: /*#__PURE__*/ jsx(Schema, {
                     name: "element",
                     schema: s,
@@ -722,16 +721,32 @@ function Schema({ name, schema, ctx }) {
                         required: false
                     }
                 })
-            }, `mentioned:${idx.toString()}`);
+            }, idx);
         });
-        child.push(...renderedMentionedTypes);
     }
-    return /*#__PURE__*/ jsx(renderer.Property, {
+    return /*#__PURE__*/ jsxs(renderer.Property, {
         name: name,
         type: getSchemaType(schema, ctx),
         required: ctx.required,
         deprecated: schema.deprecated,
-        children: child
+        children: [
+            schema.description ? /*#__PURE__*/ jsx(Markdown, {
+                text: schema.description
+            }) : null,
+            fields.length > 0 ? /*#__PURE__*/ jsx("div", {
+                className: "flex flex-col gap-2",
+                children: fields.map((field)=>/*#__PURE__*/ jsxs("span", {
+                        children: [
+                            field.key,
+                            ": ",
+                            /*#__PURE__*/ jsx("code", {
+                                children: field.value
+                            })
+                        ]
+                    }, field.key))
+            }) : null,
+            footer
+        ]
     });
 }
 /**
@@ -793,7 +808,7 @@ const methodKeys = [
 
 function Operation({ type = 'operation', path, method, ctx, hasHead, headingLevel = 2 }) {
     const body = method.requestBody;
-    const security = method.security ?? ctx.document.security;
+    const security = method.security ?? ctx.schema.document.security;
     let headNode = null;
     let bodyNode = null;
     let responseNode = null;
@@ -1053,7 +1068,7 @@ function WebhookCallback({ callback, ctx, headingLevel }) {
     }
     return out;
 }
-function AuthSection({ ctx: { document, renderer }, requirements }) {
+function AuthSection({ ctx: { schema: { document }, renderer }, requirements }) {
     let id = 0;
     const info = [];
     for (const requirement of requirements){
@@ -1125,7 +1140,7 @@ function AuthSection({ ctx: { document, renderer }, requirements }) {
     }
     return info;
 }
-async function ResponseTabs({ endpoint, operation, ctx: { renderer, generateTypeScriptSchema, dereferenceMap } }) {
+async function ResponseTabs({ endpoint, operation, ctx: { renderer, generateTypeScriptSchema, schema } }) {
     const items = [];
     const children = [];
     if (!operation.responses) return null;
@@ -1144,7 +1159,7 @@ async function ResponseTabs({ endpoint, operation, ctx: { renderer, generateType
         if (generateTypeScriptSchema) {
             ts = await generateTypeScriptSchema(endpoint, code);
         } else if (generateTypeScriptSchema === undefined) {
-            ts = await getTypescriptSchema(endpoint, code, dereferenceMap);
+            ts = await getTypescriptSchema(endpoint, code, schema.dereferenceMap);
         }
         if (ts) {
             types.push({
@@ -1192,7 +1207,7 @@ async function CodeBlock({ code, lang, options, ...rest }) {
     });
 }
 
-function createRenders(shikiOptions) {
+function createRenders(shikiOptions, _useScalar) {
     return {
         Root: (props)=>/*#__PURE__*/ jsx(Root, {
                 shikiOptions: shikiOptions,
@@ -1200,7 +1215,12 @@ function createRenders(shikiOptions) {
                 children: props.children
             }),
         API,
-        APIInfo,
+        APIInfo: ({ children, head })=>/*#__PURE__*/ jsxs(APIInfo, {
+                children: [
+                    head,
+                    children
+                ]
+            }),
         APIExample: APIExample$1,
         Responses: Tabs,
         Response: Tab,
@@ -1258,7 +1278,8 @@ const cache = new Map();
     });
     const processed = {
         document: dereferenced,
-        dereferenceMap
+        dereferenceMap,
+        downloaded: loaded.specification
     };
     if (!disableCache && typeof document === 'string') {
         cache.set(document, processed);
@@ -1316,7 +1337,8 @@ async function APIPage(props) {
         ]
     });
 }
-async function getContext({ document, dereferenceMap }, options = {}) {
+async function getContext(schema, options = {}) {
+    const document = schema.document;
     const servers = document.servers && document.servers.length > 0 ? document.servers : [
         {
             url: 'https://example.com'
@@ -1324,12 +1346,12 @@ async function getContext({ document, dereferenceMap }, options = {}) {
     ];
     const server = servers[0];
     return {
-        document: document,
-        dereferenceMap,
+        useScalar: options.useScalar ?? false,
+        schema,
         proxyUrl: options.proxyUrl,
         showResponseSchema: options.showResponseSchema,
         renderer: {
-            ...createRenders(options.shikiOptions),
+            ...createRenders(options.shikiOptions, options.useScalar ?? false),
             ...options.renderer
         },
         shikiOptions: options.shikiOptions,

package/dist/ui/{client-client-B06fJG48.js → client-client-Die8irpf.js}

@@ -1,7 +1,7 @@
 'use client';
 import { forwardRef, createElement, useContext, createContext, useState, useRef, useEffect, useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';
-import { cn, useCopyButton, buttonVariants } from 'fumadocs-ui/components/api';
+import { cn } from 'fumadocs-ui/components/api';
 import dynamic from 'next/dynamic';
 
 /**
@@ -60,7 +60,7 @@ const createLucideIcon = (iconName, iconNode)=>{
     return Component;
 };
 
-const __iconNode$7 = [
+const __iconNode$6 = [
     [
         "path",
         {
@@ -69,9 +69,9 @@ const __iconNode$7 = [
         }
     ]
 ];
-const Check = createLucideIcon("Check", __iconNode$7);
+const Check = createLucideIcon("Check", __iconNode$6);
 
-const __iconNode$6 = [
+const __iconNode$5 = [
     [
         "path",
         {
@@ -80,9 +80,9 @@ const __iconNode$6 = [
         }
     ]
 ];
-const ChevronDown = createLucideIcon("ChevronDown", __iconNode$6);
+const ChevronDown = createLucideIcon("ChevronDown", __iconNode$5);
 
-const __iconNode$5 = [
+const __iconNode$4 = [
     [
         "path",
         {
@@ -91,9 +91,9 @@ const __iconNode$5 = [
         }
     ]
 ];
-const ChevronUp = createLucideIcon("ChevronUp", __iconNode$5);
+const ChevronUp = createLucideIcon("ChevronUp", __iconNode$4);
 
-const __iconNode$4 = [
+const __iconNode$3 = [
     [
         "circle",
         {
@@ -111,9 +111,9 @@ const __iconNode$4 = [
         }
     ]
 ];
-const CircleCheck = createLucideIcon("CircleCheck", __iconNode$4);
+const CircleCheck = createLucideIcon("CircleCheck", __iconNode$3);
 
-const __iconNode$3 = [
+const __iconNode$2 = [
     [
         "circle",
         {
@@ -138,30 +138,7 @@ const __iconNode$3 = [
         }
     ]
 ];
-const CircleX = createLucideIcon("CircleX", __iconNode$3);
-
-const __iconNode$2 = [
-    [
-        "rect",
-        {
-            width: "14",
-            height: "14",
-            x: "8",
-            y: "8",
-            rx: "2",
-            ry: "2",
-            key: "17jyea"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
-            key: "zix9uf"
-        }
-    ]
-];
-const Copy = createLucideIcon("Copy", __iconNode$2);
+const CircleX = createLucideIcon("CircleX", __iconNode$2);
 
 const __iconNode$1 = [
     [
@@ -320,8 +297,8 @@ function useSchemaContext() {
     return ctx;
 }
 
-const APIPlayground = dynamic(()=>import('./index-client-DPqAL2w9.js').then(function (n) { return n.i; }).then((mod)=>mod.APIPlayground));
-const ServerSelect = dynamic(()=>import('./server-select-client-CtG30byb.js'));
+const APIPlayground = dynamic(()=>import('./index-client-XPLtFTfD.js').then(function (n) { return n.i; }).then((mod)=>mod.APIPlayground));
+const ScalarPlayground = dynamic(()=>import('./index-client-XPLtFTfD.js').then(function (n) { return n.e; }));
 function Root({ children, baseUrl, className, shikiOptions, servers, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         className: cn('flex flex-col gap-24 text-sm text-fd-muted-foreground', className),
@@ -334,26 +311,5 @@ function Root({ children, baseUrl, className, shikiOptions, servers, ...props })
         })
     });
 }
-function CopyRouteButton({ className, route, ...props }) {
-    const { serverRef } = useApiContext();
-    const [checked, onCopy] = useCopyButton(()=>{
-        void navigator.clipboard.writeText(`${serverRef.current ? getUrl(serverRef.current.url, serverRef.current.variables) : ''}${route}`);
-    });
-    return /*#__PURE__*/ jsx("button", {
-        type: "button",
-        className: cn(buttonVariants({
-            color: 'ghost',
-            className
-        })),
-        onClick: onCopy,
-        "aria-label": "Copy route path",
-        ...props,
-        children: checked ? /*#__PURE__*/ jsx(Check, {
-            className: "size-full"
-        }) : /*#__PURE__*/ jsx(Copy, {
-            className: "size-full"
-        })
-    });
-}
 
-export { APIPlayground as A, ChevronDown as C, Plus as P, Root as R, SchemaContext as S, Trash2 as T, Check as a, ChevronUp as b, CircleCheck as c, CircleX as d, useApiContext as e, useServerSelectContext as f, getUrl as g, CopyRouteButton as h, ServerSelect as i, useSchemaContext as u };
+export { APIPlayground as A, ChevronDown as C, Plus as P, Root as R, SchemaContext as S, Trash2 as T, ChevronUp as a, Check as b, CircleCheck as c, CircleX as d, useApiContext as e, useServerSelectContext as f, getUrl as g, ScalarPlayground as h, useSchemaContext as u };

package/dist/ui/{fetcher-Cc3BieIx.js → fetcher-BHk80ZFu.js}

@@ -1,4 +1,4 @@
-import { r as resolve } from './index-client-DPqAL2w9.js';
+import { r as resolve } from './index-client-XPLtFTfD.js';
 
 /**
  * @param bodySchema - schema of body