fumadocs-openapi 10.6.5 → 10.6.6

package/dist/ui/base.d.ts

@@ -6,6 +6,7 @@ import { SchemaUIOptions } from "./schema/index.js";
 import { OpenAPIServer } from "../server/create.js";
 import { ApiPageProps, OperationItem, WebhookItem } from "./api-page.js";
 import { ResponseTab } from "./operation/response-tabs.js";
+import { RequestTabsRenderContext } from "./operation/request-tabs.js";
 import { ClientCodeBlockProvider } from "./components/codeblock.js";
 import { Awaitable, MethodInformation, RenderContext } from "../types.js";
 import { NoReference } from "../utils/schema/index.js";
@@ -74,10 +75,7 @@ interface CreateAPIPageOptions {
    */
   content?: {
     renderResponseTabs?: (tabs: ResponseTab[], ctx: RenderContext) => ReactNode;
-    renderRequestTabs?: (items: ExampleRequestItem[], ctx: RenderContext & {
-      route: string;
-      operation: NoReference<MethodInformation>;
-    }) => ReactNode;
+    renderRequestTabs?: (items: ExampleRequestItem[], ctx: RequestTabsRenderContext) => ReactNode;
     renderAPIExampleLayout?: (slots: {
       selector: ReactNode;
       usageTabs: ReactNode;
@@ -142,6 +140,12 @@ interface CreateAPIPageOptions {
      * @defaultValue true
      */
     enabled?: boolean;
+    /**
+     * render a page-level provider (useful for handling auth)
+     */
+    provider?: (props: {
+      children: ReactNode;
+    }) => ReactNode;
     /**
      * replace the server-side renderer
      */

package/dist/ui/base.js

@@ -4,6 +4,7 @@ import { encodeInternalRef } from "../utils/schema/ref.js";
 import { ClientCodeBlockProvider } from "./components/codeblock.js";
 import { APIPage } from "./api-page.js";
 import { pickSchema } from "../utils/schema/pick.js";
+import { PlaygroundAuthProvider } from "./client/boundary.lazy.js";
 import Slugger from "github-slugger";
 import * as JsxRuntime from "react/jsx-runtime";
 import { jsx } from "react/jsx-runtime";
@@ -38,6 +39,9 @@ function createAPIPage(server, options) {
 			...options.shikiOptions
 		}).use(rehypeReact);
 	}
+	function renderPlaygroundProviderDefault({ children }) {
+		return /* @__PURE__ */ jsx(PlaygroundAuthProvider, { children });
+	}
 	function renderPlaygroundDefault({ path, method, ctx }) {
 		return /* @__PURE__ */ jsx(ctx.clientBoundary.PlaygroundClient, {
 			route: path,
@@ -77,6 +81,7 @@ function createAPIPage(server, options) {
 			},
 			playground: {
 				...options.playground,
+				provider: options.playground?.provider ?? renderPlaygroundProviderDefault,
 				render: options.playground?.render ?? renderPlaygroundDefault
 			},
 			renderHeading(depth, text, props) {

package/dist/ui/client/boundary.lazy.js

@@ -8,6 +8,7 @@ const UsageTabsSelector = wrapLazy(() => import("../operation/usage-tabs/client.
 const UsageTab = wrapLazy(() => import("../operation/usage-tabs/client.js").then((mod) => ({ default: mod.UsageTab })));
 const SchemaUI = wrapLazy(() => import("../schema/client.js").then((mod) => ({ default: mod.SchemaUI })));
 const PlaygroundClient = wrapLazy(() => import("../../playground/client.js"));
+const PlaygroundAuthProvider = wrapLazy(() => import("../../playground/auth.js").then((mod) => ({ default: mod.AuthProvider })));
 function wrapLazy(load) {
 	const V = lazy(load);
 	return function wrapper(props) {
@@ -15,4 +16,4 @@ function wrapLazy(load) {
 	};
 }
 //#endregion
-export { ApiProvider, PlaygroundClient, SchemaUI, ServerProvider, UsageTab, UsageTabsSelector };
+export { ApiProvider, PlaygroundAuthProvider, PlaygroundClient, SchemaUI, ServerProvider, UsageTab, UsageTabsSelector };

package/dist/ui/client/storage-key.js

@@ -5,7 +5,7 @@ function useStorageKey() {
 	const { storageKeyPrefix } = useApiContext().client;
 	return useMemo(() => ({
 		of: (name) => getStorageKey(storageKeyPrefix, name),
-		AuthField: (field) => getStorageKey(storageKeyPrefix, `auth-${field.original?.id ?? field.fieldName}`)
+		AuthField: (schemeId) => getStorageKey(storageKeyPrefix, `auth-${schemeId}`)
 	}), [storageKeyPrefix]);
 }
 function getStorageKey(prefix = "fumadocs-openapi-", name) {

package/dist/ui/contexts/api.d.ts

@@ -1,5 +1,5 @@
 import { APIPageClientOptions } from "../client/index.js";
-import { RenderContext, ServerObject } from "../../types.js";
+import { RenderContext, SecuritySchemeObject, ServerObject } from "../../types.js";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -7,11 +7,14 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 interface InheritFromContext extends Pick<RenderContext, 'shikiOptions'> {
   client: APIPageClientOptions;
 }
-type ApiProviderProps = InheritFromContext;
+interface ApiProviderProps extends InheritFromContext {
+  schemes: Record<string, SecuritySchemeObject>;
+}
 declare function ApiProvider({
   children,
   shikiOptions,
-  client
+  client,
+  schemes
 }: ApiProviderProps & {
   children: ReactNode;
 }): _$react_jsx_runtime0.JSX.Element;

package/dist/ui/contexts/api.js

@@ -18,7 +18,7 @@ function useServerContext() {
 	if (!ctx) throw new Error("Component must be used under <ApiProvider />");
 	return ctx;
 }
-function ApiProvider({ children, shikiOptions, client }) {
+function ApiProvider({ children, shikiOptions, client, schemes }) {
 	return /* @__PURE__ */ jsx(ApiContext, {
 		value: useMemo(() => {
 			let codeUsages;
@@ -31,12 +31,17 @@ function ApiProvider({ children, shikiOptions, client }) {
 				shikiOptions,
 				client,
 				codeUsages,
+				schemes,
 				mediaAdapters: {
 					...defaultAdapters,
 					...client.mediaAdapters
 				}
 			};
-		}, [client, shikiOptions]),
+		}, [
+			client,
+			schemes,
+			shikiOptions
+		]),
 		children
 	});
 }

package/dist/ui/create-client.js

@@ -1,6 +1,7 @@
 import { parseSecurities } from "../utils/schema/index.js";
 import { defaultAdapters } from "../requests/media/adapter.js";
 import { ClientCodeBlock, ClientCodeBlockProvider } from "./components/codeblock.js";
+import { AuthProvider } from "../playground/auth.js";
 import { dereferenceDocument } from "../utils/document/dereference.js";
 import { APIPage } from "./api-page.js";
 import { boundary_exports } from "./client/boundary.js";
@@ -66,6 +67,9 @@ function createClientAPIPage({ shiki = defaultShikiFactory, shikiOptions = { the
 			readOnly: false
 		});
 	}
+	function renderPlaygroundProviderDefault({ children }) {
+		return /* @__PURE__ */ jsx(AuthProvider, { children });
+	}
 	return function ClientAPIPage({ payload, ...props }) {
 		const processed = useMemo(() => dereferenceDocument(payload.bundled), [payload.bundled]);
 		const ctx = useMemo(() => ({
@@ -82,6 +86,7 @@ function createClientAPIPage({ shiki = defaultShikiFactory, shikiOptions = { the
 			},
 			playground: {
 				...options.playground,
+				provider: options.playground?.provider ?? renderPlaygroundProviderDefault,
 				render: options.playground?.render ?? renderPlaygroundDefault
 			},
 			renderHeading(depth, text, props) {

package/dist/ui/operation/request-tabs.d.ts

@@ -0,0 +1,10 @@
+import { MethodInformation, RenderContext } from "../../types.js";
+import { NoReference } from "../../utils/schema/index.js";
+import { ReactNode } from "react";
+//#region src/ui/operation/request-tabs.d.ts
+interface RequestTabsRenderContext extends RenderContext {
+  route: string;
+  operation: NoReference<MethodInformation>;
+}
+//#endregion
+export { RequestTabsRenderContext };

package/dist/ui/operation/request-tabs.js

@@ -15,41 +15,6 @@ function RequestTabs({ path, operation, examples, ctx }) {
 	});
 }
 function renderRequestTabsDefault(items, ctx) {
-	function renderItem(item) {
-		const requestData = item.data;
-		const displayNames = {
-			body: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(I18nLabel, { label: "titleRequestBody" }), /* @__PURE__ */ jsx("code", {
-				className: "text-xs text-fd-muted-foreground ms-auto",
-				children: requestData.bodyMediaType
-			})] }),
-			cookie: /* @__PURE__ */ jsx(I18nLabel, { label: "cookieParameters" }),
-			header: /* @__PURE__ */ jsx(I18nLabel, { label: "headerParameters" }),
-			query: /* @__PURE__ */ jsx(I18nLabel, { label: "queryParameters" }),
-			path: /* @__PURE__ */ jsx(I18nLabel, { label: "pathParameters" })
-		};
-		return /* @__PURE__ */ jsxs(Fragment, { children: [
-			item.description && ctx.renderMarkdown(item.description),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-row gap-2 items-center justify-between",
-				children: [/* @__PURE__ */ jsx(MethodLabel, { children: requestData.method }), /* @__PURE__ */ jsx("code", { children: resolveRequestData(ctx.route, item.encoded) })]
-			}),
-			/* @__PURE__ */ jsx(Accordions, {
-				type: "multiple",
-				className: "mt-2",
-				children: Object.entries(displayNames).map(([k, v]) => {
-					const data = requestData[k];
-					if (!data || Object.keys(data).length === 0) return;
-					return /* @__PURE__ */ jsxs(AccordionItem, {
-						value: k,
-						children: [/* @__PURE__ */ jsx(AccordionHeader, { children: /* @__PURE__ */ jsx(AccordionTrigger, { children: v }) }), /* @__PURE__ */ jsx(AccordionContent, {
-							className: "prose-no-margin",
-							children: ctx.renderCodeBlock("json", JSON.stringify(data, null, 2))
-						})]
-					}, k);
-				})
-			})
-		] });
-	}
 	let children;
 	if (items.length > 1) children = /* @__PURE__ */ jsxs(Tabs, {
 		defaultValue: items[0].id,
@@ -58,10 +23,16 @@ function renderRequestTabsDefault(items, ctx) {
 			children: item.id === "_default" ? /* @__PURE__ */ jsx(I18nLabel, { label: "requestTabNameDefault" }) : item.name
 		}, item.id)) }), items.map((item) => /* @__PURE__ */ jsx(TabsContent, {
 			value: item.id,
-			children: renderItem(item)
+			children: /* @__PURE__ */ jsx(RequestTabsItem, {
+				item,
+				ctx
+			})
 		}, item.id))]
 	});
-	else if (items.length === 1) children = renderItem(items[0]);
+	else if (items.length === 1) children = /* @__PURE__ */ jsx(RequestTabsItem, {
+		item: items[0],
+		ctx
+	});
 	else children = /* @__PURE__ */ jsx("p", {
 		className: "text-fd-muted-foreground text-xs",
 		children: /* @__PURE__ */ jsx(I18nLabel, { label: "empty" })
@@ -74,5 +45,40 @@ function renderRequestTabsDefault(items, ctx) {
 		}), children]
 	});
 }
+function RequestTabsItem({ item, ctx }) {
+	const requestData = item.data;
+	const displayNames = {
+		body: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(I18nLabel, { label: "titleRequestBody" }), /* @__PURE__ */ jsx("code", {
+			className: "text-xs text-fd-muted-foreground ms-auto",
+			children: requestData.bodyMediaType
+		})] }),
+		cookie: /* @__PURE__ */ jsx(I18nLabel, { label: "cookieParameters" }),
+		header: /* @__PURE__ */ jsx(I18nLabel, { label: "headerParameters" }),
+		query: /* @__PURE__ */ jsx(I18nLabel, { label: "queryParameters" }),
+		path: /* @__PURE__ */ jsx(I18nLabel, { label: "pathParameters" })
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		item.description && ctx.renderMarkdown(item.description),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-row gap-2 items-center justify-between",
+			children: [/* @__PURE__ */ jsx(MethodLabel, { children: requestData.method }), /* @__PURE__ */ jsx("code", { children: resolveRequestData(ctx.route, item.encoded) })]
+		}),
+		/* @__PURE__ */ jsx(Accordions, {
+			type: "multiple",
+			className: "mt-2",
+			children: Object.entries(displayNames).map(([k, v]) => {
+				const data = requestData[k];
+				if (!data || Object.keys(data).length === 0) return;
+				return /* @__PURE__ */ jsxs(AccordionItem, {
+					value: k,
+					children: [/* @__PURE__ */ jsx(AccordionHeader, { children: /* @__PURE__ */ jsx(AccordionTrigger, { children: v }) }), /* @__PURE__ */ jsx(AccordionContent, {
+						className: "prose-no-margin",
+						children: ctx.renderCodeBlock("json", JSON.stringify(data, null, 2))
+					})]
+				}, k);
+			})
+		})
+	] });
+}
 //#endregion
 export { RequestTabs };

package/dist/utils/pages/to-text.js

@@ -1,5 +1,6 @@
 import { removeUndefined } from "../remove-undefined.js";
 import { toStaticData } from "./to-static-data.js";
+import { doubleQuote } from "../../requests/string-utils.js";
 import { dump } from "js-yaml";
 //#region src/utils/pages/to-text.ts
 function toText(entry, processed, options = {}) {
@@ -36,7 +37,7 @@ function generateDocument(frontmatter, content, options) {
 		commentContent = commentContent.replaceAll("/", "\\/");
 		out.push(`{/* ${commentContent} */}`);
 	}
-	if (imports) out.push(...imports.map((item) => `import { ${item.names.join(", ")} } from ${JSON.stringify(item.from)};`).join("\n"));
+	if (imports) out.push(...imports.map((item) => `import { ${item.names.join(", ")} } from ${doubleQuote(item.from)};`).join("\n"));
 	out.push(content);
 	return out.join("\n\n");
 }
@@ -70,7 +71,7 @@ function generatePage(schemaId, processed, pageProps, options, context) {
 	}, content.join("\n\n"), options);
 }
 function pageContent({ showTitle, showDescription, document, webhooks, operations }) {
-	const propStrs = [`document={${JSON.stringify(document)}}`];
+	const propStrs = [`document={${doubleQuote(document)}}`];
 	if (webhooks) propStrs.push(`webhooks={${JSON.stringify(webhooks.map((item) => ({
 		name: item.name,
 		method: item.method
@@ -79,8 +80,8 @@ function pageContent({ showTitle, showDescription, document, webhooks, operation
 		path: item.path,
 		method: item.method
 	})))}}`);
-	if (showTitle) propStrs.push(`showTitle={${JSON.stringify(showTitle)}}`);
-	if (showDescription) propStrs.push(`showDescription={${JSON.stringify(showDescription)}}`);
+	if (showTitle) propStrs.push(`showTitle`);
+	if (showDescription) propStrs.push(`showDescription`);
 	return `<APIPage ${propStrs.join(" ")} />`;
 }
 //#endregion

package/dist/utils/schema/index.d.ts

@@ -1,4 +1,4 @@
-import { ReferenceObject, SecuritySchemeObject } from "../../types.js";
+import { ReferenceObject } from "../../types.js";
 import { JSONSchema } from "json-schema-typed/draft-2020-12";
 
 //#region src/utils/schema/index.d.ts
@@ -6,10 +6,9 @@ type NoReference<T> = T extends (infer I)[] ? NoReference<I>[] : T extends Refer
 type ParsedSchema = (JSONSchema & {
   'x-playground-lazy'?: boolean;
 }) | boolean;
-/** parsed security scheme objects */
-type SecurityEntry = SecuritySchemeObject & {
+interface SecurityEntry {
   scopes: string[];
   id: string;
-};
+}
 //#endregion
 export { NoReference, ParsedSchema, SecurityEntry };

package/dist/utils/schema/index.js

@@ -51,15 +51,10 @@ function parseSecurities(method, dereferenced) {
 	if (security.length === 0) return result;
 	for (const map of security) {
 		const list = [];
-		for (const [key, scopes] of Object.entries(map)) {
-			const scheme = dereferenced.components?.securitySchemes?.[key];
-			if (!scheme) continue;
-			list.push({
-				...scheme,
-				scopes,
-				id: key
-			});
-		}
+		for (const [key, scopes] of Object.entries(map)) list.push({
+			id: key,
+			scopes
+		});
 		if (list.length > 0) result.push(list);
 	}
 	return result;

package/dist/utils/use-query.js

@@ -12,9 +12,10 @@ function useQuery(fn) {
 		error,
 		start(...input) {
 			setLoading(true);
-			fnRef.current(...input).then((res) => {
+			return fnRef.current(...input).then((res) => {
 				setData(res);
 				setError(void 0);
+				return res;
 			}).catch((err) => {
 				setData(void 0);
 				setError(err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-openapi",
-  "version": "10.6.5",
+  "version": "10.6.6",
   "description": "Generate MDX docs for your OpenAPI spec",
   "keywords": [
     "Docs",
@@ -65,7 +65,7 @@
     "remark-rehype": "^11.1.2",
     "tailwind-merge": "^3.5.0",
     "xml-js": "^1.6.11",
-    "@fumari/stf": "1.0.3"
+    "@fumari/stf": "1.0.4"
   },
   "devDependencies": {
     "@scalar/api-client-react": "^1.4.15",