fumadocs-openapi 5.0.0 → 5.0.2

package/dist/server/index.d.ts

@@ -180,7 +180,8 @@ interface RenderContext {
     generateCodeSamples?: (endpoint: EndpointSample) => Awaitable<CodeSample[]>;
 }
 
-interface ApiPageProps {
+interface ApiPageProps extends Pick<RenderContext, 'generateCodeSamples' | 'generateTypeScriptSchema'> {
+    document: OpenAPIV3.Document;
     /**
      * An array of operation
      */
@@ -189,15 +190,14 @@ interface ApiPageProps {
         method: OpenAPIV3.HttpMethods;
     }[];
     hasHead: boolean;
-    ctx: RenderContext;
+    renderer?: Partial<Renderer>;
 }
 
-interface OpenAPIOptions extends Pick<RenderContext, 'generateCodeSamples' | 'generateTypeScriptSchema'> {
+interface OpenAPIOptions extends Omit<Partial<ApiPageProps>, 'document'> {
     documentOrPath: string | OpenAPIV3.Document;
-    renderer?: Partial<Renderer>;
 }
 interface OpenAPIServer {
-    APIPage: FC<Omit<ApiPageProps, 'ctx'>>;
+    APIPage: FC<Omit<ApiPageProps, 'document'>>;
 }
 declare function createOpenAPI(options: OpenAPIOptions): OpenAPIServer;
 

package/dist/server/index.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import Parser from '@apidevtools/json-schema-ref-parser';
 import Slugger from 'github-slugger';
 import { createElement, Fragment, useMemo } from 'react';
@@ -28,7 +28,28 @@ function getPreferredType(body) {
     return typeof value === 'string' ? value : JSON.stringify(value, null, 2);
 }
 
-function generateSample(path, method, baseUrl) {
+function getSecurities(requirement, document) {
+    const results = [];
+    const schemas = document.components?.securitySchemes ?? {};
+    for (const [key, scopes] of Object.entries(requirement)){
+        if (!(key in schemas)) return [];
+        const schema = noRef(schemas[key]);
+        results.push({
+            ...schema,
+            scopes
+        });
+    }
+    return results;
+}
+function getSecurityPrefix(security) {
+    if (security.type === 'http') return ({
+        basic: 'Basic',
+        bearer: 'Bearer'
+    })[security.scheme];
+    if (security.type === 'oauth2') return 'Bearer';
+}
+
+function generateSample(path, method, { baseUrl, document }) {
     const params = [];
     const responses = {};
     for (const param of method.parameters){
@@ -51,6 +72,20 @@ function generateSample(path, method, baseUrl) {
             });
         }
     }
+    const requirements = method.security ?? document.security;
+    if (requirements && requirements.length > 0) {
+        for (const security of getSecurities(requirements[0], document)){
+            const prefix = getSecurityPrefix(security);
+            params.push({
+                name: 'Authorization',
+                schema: {
+                    type: 'string'
+                },
+                sample: prefix ? `${prefix} <token>` : '<token>',
+                in: 'header'
+            });
+        }
+    }
     let bodyOutput;
     if (method.requestBody) {
         const body = noRef(method.requestBody).content;
@@ -199,7 +234,7 @@ func main() {
 ${Array.from(variables.entries()).map(([k, v])=>`  ${k} := ${v}`).join('\n')}
   ${additional.join('\n  ')}
   req, _ := http.NewRequest("${endpoint.method}", url, ${variables.has('payload') ? 'payload' : 'nil'})
-  ${Array.from(headers.entries()).map(([key, value])=>`req.Header.Add("${key}", ${value})`).join('\n')}
+  ${Array.from(headers.entries()).map(([key, value])=>`req.Header.Add("${key}", ${value})`).join('\n  ')}
   res, _ := http.DefaultClient.Do(req)
   defer res.Body.Close()
   body, _ := ioutil.ReadAll(res.Body)
@@ -220,20 +255,6 @@ async function getTypescriptSchema(endpoint, code) {
     }
 }
 
-function getScheme(requirement, document) {
-    const results = [];
-    const schemas = document.components?.securitySchemes ?? {};
-    for (const [key, scopes] of Object.entries(requirement)){
-        if (!(key in schemas)) return [];
-        const schema = noRef(schemas[key]);
-        results.push({
-            ...schema,
-            scopes
-        });
-    }
-    return results;
-}
-
 function Playground({ path, method, ctx }) {
     let currentId = 0;
     const bodyContent = noRef(method.requestBody)?.content;
@@ -266,7 +287,7 @@ function getAuthorizationField(method, ctx) {
     if (security.length === 0) return;
     const singular = security.find((requirements)=>Object.keys(requirements).length === 1);
     if (!singular) return;
-    const scheme = getScheme(singular, ctx.document)[0];
+    const scheme = getSecurities(singular, ctx.document)[0];
     return {
         type: 'string',
         name: 'Authorization',
@@ -436,6 +457,8 @@ function isObject(schema) {
 }
 function Schema({ name, schema, ctx }) {
     if (schema.readOnly === true && !ctx.readOnly || schema.writeOnly === true && !ctx.writeOnly) return null;
+    const parseObject = ctx.parseObject ?? true;
+    const stack = ctx.stack ?? [];
     const { renderer } = ctx.render;
     const child = [];
     function field(key, value) {
@@ -450,7 +473,7 @@ function Schema({ name, schema, ctx }) {
         }, key));
     }
     // object type
-    if (isObject(schema) && ctx.parseObject) {
+    if (isObject(schema) && parseObject) {
         const { additionalProperties, properties } = schema;
         if (additionalProperties === true) {
             child.push(/*#__PURE__*/ jsx(renderer.Property, {
@@ -496,7 +519,7 @@ function Schema({ name, schema, ctx }) {
     if (schema.enum) {
         field('Value in', schema.enum.map((value)=>JSON.stringify(value)).join(' | '));
     }
-    if (isObject(schema) && !ctx.parseObject) {
+    if (isObject(schema) && !parseObject) {
         child.push(/*#__PURE__*/ jsx(renderer.ObjectCollapsible, {
             name: "Attributes",
             children: /*#__PURE__*/ jsx(Schema, {
@@ -531,8 +554,7 @@ function Schema({ name, schema, ctx }) {
             ...schema.type === 'array' ? [
                 schema.items
             ] : []
-        ].map(noRef).filter((s)=>isComplexType(s) && !ctx.stack.includes(s));
-        ctx.stack.push(schema);
+        ].map(noRef).filter((s)=>isComplexType(s) && !stack.includes(s));
         const renderedMentionedTypes = mentionedObjectTypes.map((s, idx)=>{
             return /*#__PURE__*/ jsx(renderer.ObjectCollapsible, {
                 name: s.title ?? `Object ${(idx + 1).toString()}`,
@@ -541,6 +563,10 @@ function Schema({ name, schema, ctx }) {
                     schema: noRef(s),
                     ctx: {
                         ...ctx,
+                        stack: [
+                            schema,
+                            ...stack
+                        ],
                         parseObject: true,
                         required: false
                     }
@@ -548,7 +574,6 @@ function Schema({ name, schema, ctx }) {
             }, `mentioned:${idx.toString()}`);
         });
         child.push(...renderedMentionedTypes);
-        ctx.stack.pop();
     }
     return /*#__PURE__*/ jsx(renderer.Property, {
         name: name,
@@ -605,7 +630,7 @@ function getSchemaType(schema, ctx) {
     if (schema.anyOf) {
         return `Any properties in ${schema.anyOf.map((one)=>getSchemaType(noRef(one), ctx)).join(', ')}`;
     }
-    if (schema.type === 'string' && schema.format === 'binary' && ctx.allowFile) return 'File';
+    if (schema.type === 'string' && schema.format === 'binary' && ctx.allowFile) return 'file';
     if (schema.type) return schema.type;
     if (isObject(schema)) return 'object';
     return 'unknown';
@@ -661,20 +686,18 @@ function Operation({ path, method, ctx, hasHead }) {
                     name: "body",
                     schema: noRef(body.content[type].schema ?? {}),
                     ctx: {
-                        parseObject: true,
                         readOnly: method.method === 'GET',
                         writeOnly: method.method !== 'GET',
                         required: body.required ?? false,
                         render: ctx,
-                        allowFile: type === 'multipart/form-data',
-                        stack: []
+                        allowFile: type === 'multipart/form-data'
                     }
                 })
             ]
         }, "body"));
     }
     const parameterGroups = new Map();
-    const endpoint = generateSample(path, method, ctx.baseUrl);
+    const endpoint = generateSample(path, method, ctx);
     for (const param of method.parameters){
         const pInfo = endpoint.parameters.find((item)=>item.name === param.name && item.in === param.in);
         if (!pInfo) continue;
@@ -698,9 +721,7 @@ function Operation({ path, method, ctx, hasHead }) {
                 readOnly: method.method === 'GET',
                 writeOnly: method.method !== 'GET',
                 required: param.required ?? false,
-                render: ctx,
-                allowFile: false,
-                stack: []
+                render: ctx
             }
         }, param.name));
         parameterGroups.set(groupName, group);
@@ -778,15 +799,12 @@ function AuthSection({ ctx: { document, renderer }, requirements }) {
     let id = 0;
     const info = [];
     for (const requirement of requirements){
-        if (info.length > 0) info.push(`---`);
-        for (const schema of getScheme(requirement, document)){
+        for (const schema of getSecurities(requirement, document)){
+            const prefix = getSecurityPrefix(schema);
             if (schema.type === 'http') {
                 info.push(/*#__PURE__*/ jsxs(renderer.Property, {
                     name: "Authorization",
-                    type: {
-                        basic: 'Basic <token>',
-                        bearer: 'Bearer <token>'
-                    }[schema.scheme] ?? '<token>',
+                    type: prefix ? `${prefix} <token>` : '<token>',
                     required: true,
                     children: [
                         schema.description ? /*#__PURE__*/ jsx(Markdown, {
@@ -806,7 +824,7 @@ function AuthSection({ ctx: { document, renderer }, requirements }) {
             if (schema.type === 'oauth2') {
                 info.push(/*#__PURE__*/ jsxs(renderer.Property, {
                     name: "Authorization",
-                    type: "Bearer <token>",
+                    type: prefix ? `${prefix} <token>` : '<token>',
                     required: true,
                     children: [
                         schema.description ? /*#__PURE__*/ jsx(Markdown, {
@@ -820,15 +838,14 @@ function AuthSection({ ctx: { document, renderer }, requirements }) {
                                 })
                             ]
                         }),
-                        /*#__PURE__*/ jsxs("p", {
+                        schema.scopes.length > 0 ? /*#__PURE__*/ jsxs("p", {
                             children: [
-                                "Scope:",
-                                ' ',
+                                "Scope: ",
                                 /*#__PURE__*/ jsx("code", {
-                                    children: schema.scopes.length > 0 ? schema.scopes.join(', ') : 'none'
+                                    children: schema.scopes.join(', ')
                                 })
                             ]
-                        })
+                        }) : null
                     ]
                 }, id++));
             }
@@ -922,24 +939,6 @@ function createMethod(method, operation) {
     };
 }
 
-function APIPage({ operations, ctx, hasHead = true }) {
-    const schema = ctx.document;
-    return /*#__PURE__*/ jsx(ctx.renderer.Root, {
-        baseUrl: ctx.baseUrl,
-        children: operations.map((item)=>{
-            const operation = schema.paths[item.path]?.[item.method];
-            if (!operation) return null;
-            const method = createMethod(item.method, operation);
-            return /*#__PURE__*/ jsx(Operation, {
-                method: method,
-                path: item.path,
-                ctx: ctx,
-                hasHead: hasHead
-            }, `${item.path}:${item.method}`);
-        })
-    });
-}
-
 const highlighter = await createHighlighter({
     themes: Object.values(bundledThemes),
     langs: Object.values(bundledLanguages)
@@ -1002,17 +1001,23 @@ const defaultRenderer = {
     APIPlayground
 };
 
-function createOpenAPI(options) {
-    const document = Parser.dereference(options.documentOrPath);
-    return {
-        APIPage: async (props)=>{
-            const ctx = getContext(await document, options);
-            return /*#__PURE__*/ jsx(APIPage, {
+function APIPage(props) {
+    const { operations, document, hasHead = true } = props;
+    const ctx = getContext(document, props);
+    return /*#__PURE__*/ jsx(ctx.renderer.Root, {
+        baseUrl: ctx.baseUrl,
+        children: operations.map((item)=>{
+            const operation = document.paths[item.path]?.[item.method];
+            if (!operation) return null;
+            const method = createMethod(item.method, operation);
+            return /*#__PURE__*/ jsx(Operation, {
+                method: method,
+                path: item.path,
                 ctx: ctx,
-                ...props
-            });
-        }
-    };
+                hasHead: hasHead
+            }, `${item.path}:${item.method}`);
+        })
+    });
 }
 function getContext(document, options) {
     return {
@@ -1028,6 +1033,18 @@ function getContext(document, options) {
     };
 }
 
+function createOpenAPI(options) {
+    const document = Parser.dereference(options.documentOrPath);
+    return {
+        APIPage: async (props)=>{
+            return /*#__PURE__*/ jsx(APIPage, {
+                document: await document,
+                ...props
+            });
+        }
+    };
+}
+
 cva('rounded border px-1.5 py-1 text-xs font-medium leading-[12px]', {
     variants: {
         color: {
@@ -1063,18 +1080,19 @@ function getBadgeColor(method) {
     const data = file.data.data;
     if ('method' in data && typeof data.method === 'string') {
         const color = getBadgeColor(data.method);
-        node.name = [
-            node.name,
-            ' ',
-            // eslint-disable-next-line react/jsx-key -- static
-            /*#__PURE__*/ jsx("span", {
-                className: badgeVariants({
-                    className: 'ms-auto text-nowrap',
-                    color
-                }),
-                children: data.method
-            })
-        ];
+        node.name = /*#__PURE__*/ jsxs(Fragment$1, {
+            children: [
+                node.name,
+                ' ',
+                /*#__PURE__*/ jsx("span", {
+                    className: badgeVariants({
+                        className: 'ms-auto text-nowrap',
+                        color
+                    }),
+                    children: data.method
+                })
+            ]
+        });
     }
     return node;
 };

package/dist/ui/{client-client-CbQJObP6.js → client-client-CMzXLiVt.js}

@@ -3,6 +3,7 @@ import { useContext, createContext, useState, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 import { Check, Copy } from 'lucide-react';
 import { cn, useCopyButton, buttonVariants } from 'fumadocs-ui/components/api';
+import dynamic from 'next/dynamic';
 
 const ApiContext = /*#__PURE__*/ createContext({
     baseUrl: undefined,
@@ -57,6 +58,7 @@ function useSchemaContext() {
     return ctx;
 }
 
+const APIPlayground = dynamic(()=>import('./playground-client-Cn3a3hra.js').then((mod)=>mod.APIPlayground));
 function Root({ children, baseUrl, className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         className: cn('flex flex-col gap-24 text-sm text-fd-muted-foreground', className),
@@ -88,4 +90,4 @@ function CopyRouteButton({ className, route, ...props }) {
     });
 }
 
-export { CopyRouteButton as C, Root as R, SchemaContext as S, useApiContext as a, useSchemaContext as u };
+export { APIPlayground as A, CopyRouteButton as C, Root as R, SchemaContext as S, useApiContext as a, useSchemaContext as u };

package/dist/ui/index.d.ts

@@ -2,23 +2,6 @@ import * as react from 'react';
 import { ReactNode, ReactElement, MutableRefObject, HTMLAttributes } from 'react';
 import { FieldPath, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
 
-interface APIInfoProps {
-    method: string;
-    route: string;
-    children: ReactNode;
-}
-interface PropertyProps {
-    name: string;
-    type: string;
-    required?: boolean;
-    deprecated?: boolean;
-    children?: ReactNode;
-}
-interface RootProps {
-    baseUrl?: string;
-    children: ReactNode;
-}
-
 interface BaseRequestField {
     name: string;
     description?: string;
@@ -74,6 +57,23 @@ interface APIPlaygroundProps {
     schemas: Record<string, RequestSchema>;
 }
 
+interface APIInfoProps {
+    method: string;
+    route: string;
+    children: ReactNode;
+}
+interface PropertyProps {
+    name: string;
+    type: string;
+    required?: boolean;
+    deprecated?: boolean;
+    children?: ReactNode;
+}
+interface RootProps {
+    baseUrl?: string;
+    children: ReactNode;
+}
+
 interface FormValues {
     authorization: string;
     path: Record<string, unknown>;
@@ -106,8 +106,6 @@ type DynamicField = {
 };
 declare function useSchemaContext(): SchemaContextType;
 
-declare function Root({ children, baseUrl, className, ...props }: RootProps & HTMLAttributes<HTMLDivElement>): React.ReactElement;
-
 declare const APIPlayground: react.ComponentType<APIPlaygroundProps & {
     fields?: {
         auth?: CustomField<"authorization", PrimitiveRequestField>;
@@ -117,6 +115,8 @@ declare const APIPlayground: react.ComponentType<APIPlaygroundProps & {
         body?: CustomField<"body", RequestSchema>;
     };
 } & HTMLAttributes<HTMLFormElement>>;
+declare function Root({ children, baseUrl, className, ...props }: RootProps & HTMLAttributes<HTMLDivElement>): React.ReactElement;
+
 declare function APIInfo({ children, className, route, badgeClassname, method, ...props }: APIInfoProps & HTMLAttributes<HTMLDivElement> & {
     badgeClassname?: string;
 }): React.ReactElement;

package/dist/ui/index.js

@@ -1,11 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import dynamic from 'next/dynamic';
 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 { C as CopyRouteButton } from './client-client-CbQJObP6.js';
-export { R as Root, u as useSchemaContext } from './client-client-CbQJObP6.js';
+import { C as CopyRouteButton } from './client-client-CMzXLiVt.js';
+export { A as APIPlayground, R as Root, u as useSchemaContext } from './client-client-CMzXLiVt.js';
 
 const badgeVariants = cva('rounded border px-1.5 py-1 text-xs font-medium leading-[12px]', {
     variants: {
@@ -33,7 +32,6 @@ function getBadgeColor(method) {
     }
 }
 
-const APIPlayground = dynamic(()=>import('./playground-client-W7yhm4ZD.js').then((mod)=>mod.APIPlayground));
 function Route({ route }) {
     const segments = route.split('/').filter((part)=>part.length > 0);
     return /*#__PURE__*/ jsx("div", {
@@ -141,4 +139,4 @@ function ObjectCollapsible(props) {
     });
 }
 
-export { API, APIExample, APIInfo, APIPlayground, ObjectCollapsible, Property };
+export { API, APIExample, APIInfo, ObjectCollapsible, Property };

package/dist/ui/{playground-client-W7yhm4ZD.js → playground-client-Cn3a3hra.js}

@@ -6,7 +6,7 @@ import { FormProvider, Controller, useFormContext, useFieldArray, useForm, useWa
 import useSWRImmutable from 'swr/immutable';
 import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';
 import { cn, buttonVariants } from 'fumadocs-ui/components/api';
-import { u as useSchemaContext, a as useApiContext, S as SchemaContext } from './client-client-CbQJObP6.js';
+import { u as useSchemaContext, a as useApiContext, S as SchemaContext } from './client-client-CMzXLiVt.js';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { CircleCheckIcon, CircleXIcon, ChevronDown, ChevronUp, Check, Trash2, Plus } from 'lucide-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "NextJs",