fumadocs-openapi 5.0.1 → 5.0.3

package/dist/index.js

@@ -202,16 +202,19 @@ function pageContent(doc, props) {
             heading: structuredData.headings.at(-1)?.id
         });
     }
+    // modify toc and structured data if possible
+    // it may not be compatible with other content sources except Fumadocs MDX
+    // TODO: Maybe add to frontmatter and let developers to handle them?
     return `<APIPage operations={${JSON.stringify(props.operations)}} hasHead={${JSON.stringify(props.hasHead)}} />
 
 export function startup() {
-    if (toc) {
+    if (typeof toc !== 'undefined') {
         // toc might be immutable
         while (toc.length > 0) toc.pop()
         toc.push(...${JSON.stringify(toc)})
     }
     
-    if (structuredData) {
+    if (typeof structuredData !== 'undefined') {
         structuredData.headings = ${JSON.stringify(structuredData.headings)}
         structuredData.contents = ${JSON.stringify(structuredData.contents)}
     }

package/dist/server/index.js

@@ -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',
@@ -676,7 +697,7 @@ function Operation({ path, method, ctx, hasHead }) {
         }, "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;
@@ -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++));
             }

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

@@ -27,14 +27,20 @@ async function initHighlighter() {
         loadWasm: getWasm
     });
 }
+let highlighterInstance;
 function ApiProvider({ defaultBaseUrl, children }) {
     const [highlighter, setHighlighter] = useState(null);
     const [baseUrl, setBaseUrl] = useState(defaultBaseUrl);
     useEffect(()=>{
         setBaseUrl((prev)=>localStorage.getItem('apiBaseUrl') ?? prev);
-        void initHighlighter().then((res)=>{
-            setHighlighter(res);
-        });
+        if (highlighterInstance) {
+            setHighlighter(highlighterInstance);
+        } else {
+            void initHighlighter().then((res)=>{
+                highlighterInstance = res;
+                setHighlighter(res);
+            });
+        }
     }, []);
     useEffect(()=>{
         if (baseUrl) localStorage.setItem('apiBaseUrl', baseUrl);
@@ -58,7 +64,7 @@ function useSchemaContext() {
     return ctx;
 }
 
-const APIPlayground = dynamic(()=>import('./playground-client-Cn3a3hra.js').then((mod)=>mod.APIPlayground));
+const APIPlayground = dynamic(()=>import('./playground-client-CjCikhf6.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),

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 { C as CopyRouteButton } from './client-client-CMzXLiVt.js';
-export { A as APIPlayground, R as Root, u as useSchemaContext } from './client-client-CMzXLiVt.js';
+import { C as CopyRouteButton } from './client-client-BIwAR59x.js';
+export { A as APIPlayground, R as Root, u as useSchemaContext } from './client-client-BIwAR59x.js';
 
 const badgeVariants = cva('rounded border px-1.5 py-1 text-xs font-medium leading-[12px]', {
     variants: {
@@ -59,7 +59,7 @@ function APIInfo({ children, className, route, badgeClassname, method = 'GET', .
         ...props,
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: cn('sticky top-24 z-[2] mb-4 flex flex-row items-center gap-2 rounded-lg border bg-fd-card p-3 md:top-10'),
+                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'),
                 children: [
                     /*#__PURE__*/ jsx("span", {
                         className: cn(badgeVariants({
@@ -85,7 +85,7 @@ function APIInfo({ children, className, route, badgeClassname, method = 'GET', .
 }
 function API({ className, children, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex flex-col gap-x-6 gap-y-2 xl:flex-row xl:items-start', className),
+        className: cn('flex flex-col gap-x-6 gap-y-4 xl:flex-row xl:items-start', className),
         ...props,
         children: children
     });
@@ -124,7 +124,7 @@ function Property({ name, type, required, deprecated, children }) {
 }
 function APIExample({ children, className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('sticky top-10 prose-no-margin xl:w-[400px]', className),
+        className: cn('prose-no-margin md:sticky md:top-12 lg:top-1 xl:w-[400px]', className),
         ...props,
         children: children
     });

package/dist/ui/{playground-client-Cn3a3hra.js → playground-client-CjCikhf6.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-CMzXLiVt.js';
+import { u as useSchemaContext, a as useApiContext, S as SchemaContext } from './client-client-BIwAR59x.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';
@@ -343,7 +343,7 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 const Input = /*#__PURE__*/ React.forwardRef(({ className, type, ...props }, ref)=>{
     return /*#__PURE__*/ jsx("input", {
         type: type,
-        className: cn('flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm text-fd-foreground transition-colors placeholder:text-fd-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50', className),
+        className: cn('flex h-9 w-full rounded-md border bg-transparent px-2 py-1.5 text-sm text-fd-foreground transition-colors placeholder:text-fd-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50', className),
         ref: ref,
         ...props
     });
@@ -919,7 +919,7 @@ function APIPlayground({ route, method = 'GET', bodyType, authorization, path =
                 schemas
             ]),
             children: /*#__PURE__*/ jsxs("form", {
-                className: "not-prose flex flex-col gap-5 rounded-lg border bg-fd-card p-4",
+                className: "not-prose flex flex-col gap-5 rounded-lg border bg-fd-card p-3",
                 onSubmit: onSubmit,
                 children: [
                     /*#__PURE__*/ jsxs("div", {
@@ -941,7 +941,7 @@ function APIPlayground({ route, method = 'GET', bodyType, authorization, path =
                     authorization ? renderCustomField('authorization', authorization, fields.auth) : null,
                     /*#__PURE__*/ jsxs(Accordions, {
                         type: "multiple",
-                        className: cn('-m-4 border-0 text-sm', path.length === 0 && query.length === 0 && header.length === 0 && !body && 'hidden'),
+                        className: cn('-m-3 border-0 text-sm', path.length === 0 && query.length === 0 && header.length === 0 && !body && 'hidden'),
                         children: [
                             path.length > 0 ? /*#__PURE__*/ jsx(Accordion, {
                                 title: "Path",
@@ -998,7 +998,7 @@ function RouteDisplay({ route }) {
         pathInput
     ]);
     return /*#__PURE__*/ jsx("code", {
-        className: "flex-1 overflow-auto text-nowrap rounded-lg border bg-fd-muted px-3 py-1.5 text-sm text-fd-muted-foreground",
+        className: "flex-1 overflow-auto text-nowrap rounded-lg border bg-fd-muted px-2 py-1.5 text-sm text-fd-muted-foreground",
         children: pathname
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "NextJs",
@@ -60,8 +60,8 @@
     "remark": "^15.0.0",
     "shiki": "^1.11.1",
     "swr": "^2.2.5",
-    "fumadocs-core": "13.1.0",
-    "fumadocs-ui": "13.1.0"
+    "fumadocs-core": "13.2.0",
+    "fumadocs-ui": "13.2.0"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",