fumadocs-openapi 4.3.0 → 4.4.0

package/dist/index.d.ts

@@ -51,13 +51,20 @@ interface Renderer {
 
 declare const defaultRenderer: Renderer;
 
+/**
+ * Sample info of endpoint
+ */
 interface Endpoint {
     /**
-     * URL, including path and query parameters
+     * Request URL, including path and query parameters
      */
     url: string;
     method: string;
-    body?: unknown;
+    body?: {
+        schema: OpenAPIV3.SchemaObject;
+        mediaType: string;
+        sample: unknown;
+    };
     responses: Record<string, Response>;
     parameters: Parameter[];
 }
@@ -68,6 +75,7 @@ interface Parameter {
     name: string;
     in: string;
     schema: OpenAPIV3.SchemaObject;
+    sample: unknown;
 }
 
 interface CodeSample {

package/dist/index.js

@@ -143,6 +143,9 @@ function idToTitle(id) {
   return result.join("");
 }
 
+// src/endpoint.ts
+import { sample as sample2 } from "openapi-sampler";
+
 // src/utils/schema.ts
 function noRef(v) {
   return v;
@@ -173,18 +176,41 @@ function createEndpoint(path, method, baseUrl) {
   const params = [];
   const responses = {};
   for (const param of method.parameters) {
-    const schema = noRef(
-      param.schema ?? getPreferredMedia(param.content ?? {})?.schema
-    );
-    if (!schema) continue;
-    params.push({
-      name: param.name,
-      in: param.in,
-      schema
-    });
+    if (param.schema) {
+      params.push({
+        name: param.name,
+        in: param.in,
+        schema: noRef(param.schema),
+        sample: param.example ?? sample2(param.schema)
+      });
+    } else if (param.content) {
+      const key = getPreferredType(param.content);
+      const content = key ? param.content[key] : void 0;
+      if (!key || !content?.schema)
+        throw new Error(
+          `Cannot find parameter schema for ${param.name} in ${path} ${method.method}`
+        );
+      params.push({
+        name: param.name,
+        in: param.in,
+        schema: noRef(content.schema),
+        sample: content.example ?? param.example ?? sample2(content.schema)
+      });
+    }
+  }
+  let bodyOutput;
+  if (method.requestBody) {
+    const body = noRef(method.requestBody).content;
+    const type = getPreferredType(body);
+    const schema = type ? noRef(body[type].schema) : void 0;
+    if (!type || !schema)
+      throw new Error(`Cannot find body schema for ${path} ${method.method}`);
+    bodyOutput = {
+      schema,
+      mediaType: type,
+      sample: body[type].example ?? generateInput(method.method, schema)
+    };
   }
-  const body = noRef(method.requestBody)?.content ?? {};
-  const bodySchema = noRef(getPreferredMedia(body)?.schema);
   for (const [code, value] of Object.entries(method.responses)) {
     const mediaTypes = noRef(value).content ?? {};
     const responseSchema = noRef(getPreferredMedia(mediaTypes)?.schema);
@@ -209,7 +235,7 @@ function createEndpoint(path, method, baseUrl) {
     pathWithParameters = `${pathWithParameters}?${queryParams.toString()}`;
   return {
     url: new URL(`${baseUrl}${pathWithParameters}`).toString(),
-    body: bodySchema ? generateInput(method.method, bodySchema) : void 0,
+    body: bodyOutput,
     responses,
     method: method.method,
     parameters: params
@@ -233,15 +259,13 @@ function getSampleRequest(endpoint) {
   s.push(`curl -X ${endpoint.method} "${endpoint.url}"`);
   for (const param of endpoint.parameters) {
     if (param.in === "header") {
-      const value = generateInput(endpoint.method, param.schema);
-      const header = `${param.name}: ${toSampleInput(value)}`;
+      const header = `${param.name}: ${toSampleInput(param.sample)}`;
       s.push(`-H "${header}"`);
     }
-    if (param.in === "formData") {
-      console.log("Request example for form data is not supported");
-    }
   }
-  if (endpoint.body) s.push(`-d '${toSampleInput(endpoint.body)}'`);
+  if (endpoint.body?.mediaType === "multipart/form-data")
+    console.warn("Curl sample with form data body isn't supported.");
+  if (endpoint.body) s.push(`-d '${toSampleInput(endpoint.body.sample)}'`);
   return s.join(" \\\n  ");
 }
 
@@ -250,24 +274,25 @@ function getSampleRequest2(endpoint) {
   const s = [];
   const options = /* @__PURE__ */ new Map();
   const headers = {};
-  const formData = {};
   for (const param of endpoint.parameters) {
     if (param.in === "header") {
       headers[param.name] = generateInput(endpoint.method, param.schema);
     }
-    if (param.in === "formData") {
-      formData[param.name] = generateInput(endpoint.method, param.schema);
-    }
   }
   options.set("method", JSON.stringify(endpoint.method));
   if (Object.keys(headers).length > 0) {
     options.set("headers", JSON.stringify(headers, void 0, 2));
   }
-  if (Object.keys(formData).length > 0) {
+  if (endpoint.body?.mediaType === "multipart/form-data" && typeof endpoint.body.sample === "object" && endpoint.body.sample) {
     s.push(`const formData = new FormData();`);
-    for (const [key, value] of Object.entries(formData))
-      s.push(`formData.set(${key}, ${JSON.stringify(value)}`);
+    for (const [key, value] of Object.entries(endpoint.body.sample))
+      s.push(`formData.set(${key}, ${JSON.stringify(value)})`);
     options.set("body", "formData");
+  } else if (endpoint.body) {
+    options.set(
+      "body",
+      `JSON.stringify(${JSON.stringify(endpoint.body.sample, null, 2).split("\n").map((v, i) => i > 0 ? `  ${v}` : v).join("\n")})`
+    );
   }
   const optionsStr = Array.from(options.entries()).map(([k, v]) => `  ${k}: ${v}`).join(",\n");
   s.push(`fetch(${JSON.stringify(endpoint.url)}, {

package/dist/{playground-5XDMCOXX.js → playground-GIGTWHCL.js}

@@ -15,7 +15,7 @@ import {
   useRef,
   useState as useState3
 } from "react";
-import { Controller as Controller2, useForm } from "react-hook-form";
+import { Controller as Controller2, useForm, useWatch } from "react-hook-form";
 import useSWRImmutable from "swr/immutable";
 import { Accordion, Accordions } from "fumadocs-ui/components/accordion";
 import { cn as cn5, buttonVariants as buttonVariants2 } from "fumadocs-ui/components/api";
@@ -889,16 +889,12 @@ function APIPlayground({
     input ? [baseUrl, route, method, input, bodyType] : null,
     async () => {
       if (!input) return;
-      let pathname = route;
-      Object.keys(input.path).forEach((key) => {
-        const paramValue = input.path[key];
-        if (typeof paramValue === "string")
-          pathname = pathname.replace(`{${key}}`, paramValue);
-      });
-      const url = new URL(`${baseUrl ?? window.location.origin}${pathname}`);
+      const url = new URL(
+        `${baseUrl ?? window.location.origin}${createPathnameFromInput(route, input.path)}`
+      );
       Object.keys(input.query).forEach((key) => {
         const paramValue = input.query[key];
-        if (typeof paramValue === "string")
+        if (typeof paramValue === "string" && paramValue.length > 0)
           url.searchParams.append(key, paramValue);
       });
       const headers = new Headers({
@@ -909,7 +905,8 @@ function APIPlayground({
       }
       Object.keys(input.header).forEach((key) => {
         const paramValue = input.header[key];
-        if (typeof paramValue === "string") headers.append(key, paramValue);
+        if (typeof paramValue === "string" && paramValue.length > 0)
+          headers.append(key, paramValue);
       });
       const bodyValue = body && input.body && Object.keys(input.body).length > 0 ? createBodyFromValue(
         bodyType,
@@ -969,7 +966,7 @@ function APIPlayground({
           onSubmit,
           children: [
             /* @__PURE__ */ jsxs3("div", { className: "flex flex-row gap-2", children: [
-              /* @__PURE__ */ jsx6("code", { className: "flex-1 overflow-auto rounded-lg border bg-fd-secondary px-3 py-1.5 text-sm", children: route }),
+              /* @__PURE__ */ jsx6(RouteDisplay, { route }),
               /* @__PURE__ */ jsx6(
                 "button",
                 {
@@ -1025,6 +1022,25 @@ function APIPlayground({
     }
   ) });
 }
+function createPathnameFromInput(route, input) {
+  let pathname = route;
+  Object.keys(input).forEach((key) => {
+    const paramValue = input[key];
+    if (typeof paramValue === "string" && paramValue.length > 0)
+      pathname = pathname.replace(`{${key}}`, paramValue);
+  });
+  return pathname;
+}
+function RouteDisplay({ route }) {
+  const pathInput = useWatch({
+    name: "path"
+  });
+  const pathname = useMemo(
+    () => createPathnameFromInput(route, pathInput),
+    [route, pathInput]
+  );
+  return /* @__PURE__ */ jsx6("code", { className: "flex-1 overflow-auto text-nowrap rounded-lg border bg-fd-secondary px-3 py-1.5 text-sm", children: pathname });
+}
 function ResultDisplay({
   data
 }) {

package/dist/ui/index.js

@@ -71,12 +71,12 @@ function APIInfo({
   method = "GET",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 flex-1 prose-no-margin", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 flex-1", className), ...props, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
-          "sticky top-24 z-[2] flex flex-row items-center gap-2 rounded-lg border bg-fd-card p-3 md:top-10"
+          "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"
         ),
         children: [
           /* @__PURE__ */ jsx(
@@ -94,7 +94,7 @@ function APIInfo({
         ]
       }
     ),
-    children
+    /* @__PURE__ */ jsx("div", { className: "prose-no-margin", children })
   ] });
 }
 function Property({
@@ -176,7 +176,7 @@ function CopyRouteButton({
 
 // src/ui/index.ts
 var APIPlayground = dynamic(
-  () => import("../playground-5XDMCOXX.js").then((mod) => mod.APIPlayground)
+  () => import("../playground-GIGTWHCL.js").then((mod) => mod.APIPlayground)
 );
 var Responses = Tabs;
 var Response = Tab;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "NextJs",
@@ -56,8 +56,8 @@
     "react-hook-form": "^7.52.1",
     "shiki": "^1.11.1",
     "swr": "^2.2.5",
-    "fumadocs-core": "13.0.4",
-    "fumadocs-ui": "13.0.4"
+    "fumadocs-core": "13.0.5",
+    "fumadocs-ui": "13.0.5"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",