fumadocs-openapi 10.6.5 → 10.6.6

package/dist/playground/client.js

@@ -17,14 +17,17 @@ import ServerSelect from "./components/server-select.js";
 import { FieldInput, FieldSet, JsonInput, ObjectInput } from "./components/inputs.js";
 import { ClientCodeBlock } from "../ui/components/codeblock.js";
 import { useOperationContext } from "../ui/operation/client.js";
-import { OauthDialog, OauthDialogTrigger } from "./components/oauth-dialog.js";
+import { useAuth } from "./auth.js";
+import { OAuthDialog, OAuthDialogContent, OAuthDialogTrigger } from "./components/oauth-dialog.js";
+import { Spinner } from "./components/spinner.js";
 import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, LoaderCircle } from "lucide-react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "fumadocs-ui/components/ui/collapsible";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
 import { StfProvider, useDataEngine, useFieldValue, useListener, useStf } from "@fumari/stf";
-import { objectGet, objectSet, stringifyFieldKey } from "@fumari/stf/lib/utils";
+import { arrayStartsWith, objectGet, objectSet, stringifyFieldKey } from "@fumari/stf/lib/utils";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
 //#region src/playground/client.tsx
 function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly, readOnly, ...rest }) {
 	const t = useTranslations();
@@ -51,13 +54,7 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 	]);
 	const { example: exampleId, examples, setExampleData } = useOperationContext();
 	const { server } = useServerContext();
-	const storageKeys = useStorageKey();
-	const { mediaAdapters, client: { playground: { components: { ResultDisplay = DefaultResultDisplay, CollapsiblePanel = DefaultCollapsiblePanel } = {}, requestTimeout, fetchOptions = { requestTimeout }, transformAuthInputs, renderBodyField } = {} } } = useApiContext();
-	const [securityId, setSecurityId] = useState(() => {
-		const idx = securities.findIndex((s) => s.every((entry) => !entry.deprecated));
-		return idx === -1 ? 0 : idx;
-	});
-	const { inputs, mapInputs, initAuthValues } = useAuthInputs(securities[securityId], transformAuthInputs);
+	const { mediaAdapters, client: { playground: { components: { ResultDisplay = DefaultResultDisplay, CollapsiblePanel = DefaultCollapsiblePanel } = {}, requestTimeout, fetchOptions = { requestTimeout }, renderBodyField } = {} } } = useApiContext();
 	const defaultValues = useMemo(() => {
 		const requestData = examples.find((example) => example.id === exampleId)?.data;
 		return {
@@ -69,6 +66,7 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 		};
 	}, [examples, exampleId]);
 	const stf = useStf({ defaultValues });
+	const { inputs, requirementId, setRequirementId, mapInputs, initAuthInputs } = useAuthInputs(stf.dataEngine, securities);
 	const testQuery = useQuery(async (input) => {
 		const fetcher = await import("./fetcher.js").then((mod) => mod.createBrowserFetcher(mediaAdapters, {
 			proxyUrl,
@@ -82,23 +80,21 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 		return fetcher.fetch(joinURL(withBase(server ? resolveServerUrl(server.url, server.variables) : "/", window.location.origin), resolveRequestData(route, encoded)), encoded);
 	});
 	const timerRef = useRef(null);
+	const stfSync = useRef(false);
+	function triggerExampleUpdate() {
+		const data = {
+			...mapInputs(stf.dataEngine.getData()),
+			method,
+			bodyMediaType: body?.mediaType
+		};
+		setExampleData(data, encodeRequestData(data, mediaAdapters, parameters));
+	}
 	useListener({
 		stf,
 		onUpdate() {
+			if (!stfSync.current) return;
 			if (timerRef.current) window.clearTimeout(timerRef.current);
-			timerRef.current = window.setTimeout(() => {
-				const values = stf.dataEngine.getData();
-				for (const item of inputs) {
-					const value = stf.dataEngine.get(item.fieldName);
-					if (value) localStorage.setItem(storageKeys.AuthField(item), JSON.stringify(value));
-				}
-				const data = {
-					...mapInputs(values),
-					method,
-					bodyMediaType: body?.mediaType
-				};
-				setExampleData(data, encodeRequestData(data, mediaAdapters, parameters));
-			}, timerRef.current ? 400 : 0);
+			timerRef.current = window.setTimeout(triggerExampleUpdate, 400);
 		}
 	});
 	useEffect(() => {
@@ -106,7 +102,13 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 		stf.dataEngine.reset(defaultValues);
 	}, [defaultValues]);
 	useEffect(() => {
-		return initAuthValues(stf);
+		const reset = initAuthInputs();
+		triggerExampleUpdate();
+		stfSync.current = true;
+		return () => {
+			stfSync.current = false;
+			reset();
+		};
 	}, [defaultValues, inputs]);
 	return /* @__PURE__ */ jsx(StfProvider, {
 		value: stf,
@@ -118,7 +120,7 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 				...rest,
 				className: cn("not-prose flex flex-col rounded-xl border shadow-md overflow-hidden bg-fd-card text-fd-card-foreground", rest.className),
 				onSubmit: (e) => {
-					testQuery.start(mapInputs(stf.dataEngine.getData()));
+					testQuery.start(stf.dataEngine.getData());
 					e.preventDefault();
 				},
 				children: [
@@ -146,10 +148,10 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 						data: testQuery.data,
 						reset: testQuery.reset
 					}) : null,
-					securities.length > 0 && /* @__PURE__ */ jsx(SecurityTabs, {
+					securities.length > 0 && /* @__PURE__ */ jsx(SecurityRequirements, {
 						securities,
-						securityId,
-						setSecurityId,
+						securityId: requirementId,
+						setSecurityId: setRequirementId,
 						children: inputs.map((input) => /* @__PURE__ */ jsx(Fragment, { children: input.children }, stringifyFieldKey(input.fieldName)))
 					}),
 					/* @__PURE__ */ jsx(ParametersForm, { parameters }),
@@ -163,50 +165,62 @@ function PlaygroundClient({ route, method, securities, doc, proxyUrl, writeOnly,
 		})
 	});
 }
-function SecurityTabsSelectItem({ security }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "flex flex-col gap-2 max-w-[600px]",
-		children: security.map((item) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-			className: cn("font-mono font-medium", item.deprecated && "text-fd-muted-foreground line-through"),
-			children: item.id
-		}), /* @__PURE__ */ jsx("p", {
-			className: "text-fd-muted-foreground whitespace-pre-wrap",
-			children: item.description
-		})] }, item.id))
-	});
-}
-function SecurityTabs({ securities, setSecurityId, securityId, children }) {
-	const [open, setOpen] = useState(false);
-	const engine = useDataEngine();
+function SecurityRequirements({ securities, setSecurityId, securityId, children }) {
 	const t = useTranslations();
+	const { isLoading, error } = useAuth();
+	const defaultOpen = isLoading || error != null;
+	const [open, setOpen] = useState(defaultOpen);
 	const { CollapsiblePanel = DefaultCollapsiblePanel } = useApiContext().client.playground?.components ?? {};
-	const result = /* @__PURE__ */ jsxs(CollapsiblePanel, {
-		title: t.authorization,
+	useOnChange(defaultOpen, () => {
+		if (defaultOpen) setOpen(true);
+	});
+	return /* @__PURE__ */ jsxs(CollapsiblePanel, {
+		title: /* @__PURE__ */ jsxs(Fragment$1, { children: [t.authorization, isLoading && /* @__PURE__ */ jsxs("span", {
+			className: "border-s ps-2 inline-flex items-center gap-1.5 text-fd-muted-foreground text-xs font-mono",
+			children: [
+				/* @__PURE__ */ jsx(Spinner, {}),
+				" ",
+				t.fetchingToken
+			]
+		})] }),
 		"data-type": "authorization",
-		children: [/* @__PURE__ */ jsxs(Select, {
-			value: securityId.toString(),
-			onValueChange: (v) => setSecurityId(Number(v)),
-			children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { children: /* @__PURE__ */ jsx(SecurityTabsSelectItem, { security: securities[securityId] }) }) }), /* @__PURE__ */ jsx(SelectContent, { children: securities.map((security, i) => /* @__PURE__ */ jsx(SelectItem, {
-				value: i.toString(),
-				children: /* @__PURE__ */ jsx(SecurityTabsSelectItem, { security })
-			}, i)) })]
-		}), children]
+		open,
+		onOpenChange: setOpen,
+		children: [
+			error != null && /* @__PURE__ */ jsxs("div", {
+				className: "p-2 border rounded-lg bg-fd-secondary",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-fd-muted-foreground font-medium mb-1",
+					children: t.fetchTokenError
+				}), /* @__PURE__ */ jsx("p", { children: String(error) })]
+			}),
+			/* @__PURE__ */ jsxs(Select, {
+				value: securityId.toString(),
+				onValueChange: (v) => setSecurityId(Number(v)),
+				children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { children: /* @__PURE__ */ jsx(SecurityRequirement, { requirement: securities[securityId] }) }) }), /* @__PURE__ */ jsx(SelectContent, { children: securities.map((security, i) => /* @__PURE__ */ jsx(SelectItem, {
+					value: i.toString(),
+					children: /* @__PURE__ */ jsx(SecurityRequirement, { requirement: security })
+				}, i)) })]
+			}),
+			children
+		]
+	});
+}
+function SecurityRequirement({ requirement }) {
+	const { schemes } = useApiContext();
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-2 max-w-[600px]",
+		children: requirement.map((item) => {
+			const scheme = schemes[item.id];
+			return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: cn("font-mono font-medium", scheme.deprecated && "text-fd-muted-foreground line-through"),
+				children: item.id
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-fd-muted-foreground whitespace-pre-wrap",
+				children: scheme.description
+			})] }, item.id);
+		})
 	});
-	for (let i = 0; i < securities.length; i++) {
-		const security = securities[i];
-		for (const item of security) if (item.type === "oauth2") return /* @__PURE__ */ jsx(OauthDialog, {
-			scheme: item,
-			scopes: item.scopes,
-			open,
-			setOpen: (v) => {
-				setOpen(v);
-				if (v) setSecurityId(i);
-			},
-			setToken: (token) => engine.update(["header", "Authorization"], token),
-			children: result
-		});
-	}
-	return result;
 }
 const ParamTypes = [
 	"path",
@@ -287,98 +301,97 @@ function BodyInput({ field: _field }) {
 		})
 	});
 }
-function useAuthInputs(securities, transform) {
+function useAuthInputs(engine, requirements) {
+	const authCtx = useAuth();
 	const storageKeys = useStorageKey();
 	const t = useTranslations();
-	const inputs = useMemo(() => {
-		const result = [];
-		if (!securities) return result;
-		for (const security of securities) if (security.type === "http" && security.scheme === "basic") {
-			const fieldName = ["header", "Authorization"];
-			result.push({
-				fieldName,
-				original: security,
-				defaultValue: {
-					username: "",
-					password: ""
-				},
-				mapOutput(out) {
-					if (out && typeof out === "object") {
-						const obj = out;
-						return `Basic ${btoa(`${obj.username ?? ""}:${obj.password ?? ""}`)}`;
-					}
-					return out;
-				},
-				children: /* @__PURE__ */ jsx(ObjectInput, {
-					field: {
-						type: "object",
-						properties: {
-							username: { type: "string" },
-							password: { type: "string" }
+	const { schemes, client: { playground: { transformAuthInputs } = {} } } = useApiContext();
+	const [requirementId, setRequirementId] = useState(() => {
+		if (requirements.length === 0) return -1;
+		const idx = requirements.findIndex((s) => s.every((item) => !schemes[item.id].deprecated));
+		return idx !== -1 ? idx : 0;
+	});
+	const requirement = requirementId === -1 ? null : requirements[requirementId];
+	let inputs = useMemo(() => {
+		if (!requirement) return [];
+		return requirement.map((item) => {
+			const scheme = schemes[item.id];
+			if (scheme.type === "http" && scheme.scheme === "basic") {
+				const fieldName = ["header", "Authorization"];
+				return {
+					fieldName,
+					schemeId: item.id,
+					storageKey: storageKeys.AuthField(item.id),
+					defaultValue: {
+						username: "",
+						password: ""
+					},
+					mapOutput(out) {
+						if (out && typeof out === "object") {
+							const obj = out;
+							return `Basic ${btoa(`${obj.username ?? ""}:${obj.password ?? ""}`)}`;
 						}
+						return out;
 					},
-					fieldName
-				})
-			});
-		} else if (security.type === "oauth2") {
-			const fieldName = ["header", "Authorization"];
-			result.push({
-				fieldName,
-				original: security,
-				defaultValue: "Bearer ",
-				children: /* @__PURE__ */ jsxs("fieldset", {
-					className: "flex flex-col gap-2",
-					children: [/* @__PURE__ */ jsx("label", {
-						htmlFor: stringifyFieldKey(fieldName),
-						className: cn(labelVariants()),
-						children: t.accessToken
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "flex gap-2",
-						children: [/* @__PURE__ */ jsx(FieldInput, {
-							fieldName,
-							field: { type: "string" },
-							className: "flex-1"
-						}), /* @__PURE__ */ jsx(OauthDialogTrigger, {
-							type: "button",
-							className: cn(buttonVariants({
-								size: "sm",
-								color: "secondary"
-							})),
-							children: t.authorize
-						})]
-					})]
-				})
-			});
-		} else if (security.type === "http") {
-			const fieldName = ["header", "Authorization"];
-			result.push({
-				fieldName,
-				original: security,
-				defaultValue: "Bearer ",
-				children: /* @__PURE__ */ jsx(FieldSet, {
-					name: `${t.authorization} (${t.header})`,
+					children: /* @__PURE__ */ jsx(ObjectInput, {
+						field: {
+							type: "object",
+							properties: {
+								username: { type: "string" },
+								password: { type: "string" }
+							}
+						},
+						fieldName
+					})
+				};
+			}
+			if (scheme.type === "oauth2") {
+				const fieldName = ["header", "Authorization"];
+				return {
 					fieldName,
-					field: { type: "string" }
-				})
-			});
-		} else if (security.type === "apiKey") {
-			const fieldName = [security.in, security.name];
-			result.push({
-				fieldName,
-				defaultValue: "",
-				original: security,
-				children: /* @__PURE__ */ jsx(FieldSet, {
+					schemeId: item.id,
+					storageKey: storageKeys.AuthField(item.id),
+					defaultValue: "Bearer ",
+					children: /* @__PURE__ */ jsx(OAuth2Input, {
+						fieldName,
+						security: item
+					})
+				};
+			}
+			if (scheme.type === "http") {
+				const fieldName = ["header", "Authorization"];
+				return {
 					fieldName,
-					name: `${security.name} (${security.in})`,
-					field: { type: "string" }
-				})
-			});
-		} else {
+					schemeId: item.id,
+					storageKey: storageKeys.AuthField(item.id),
+					defaultValue: "Bearer ",
+					children: /* @__PURE__ */ jsx(FieldSet, {
+						name: `${t.authorization} (${t.header})`,
+						fieldName,
+						field: { type: "string" }
+					})
+				};
+			}
+			if (scheme.type === "apiKey") {
+				const fieldName = [scheme.in, scheme.name];
+				return {
+					fieldName,
+					schemeId: item.id,
+					defaultValue: "",
+					storageKey: storageKeys.AuthField(item.id),
+					children: /* @__PURE__ */ jsx(FieldSet, {
+						fieldName,
+						name: `${scheme.name} (${scheme.in})`,
+						field: { type: "string" }
+					})
+				};
+			}
 			const fieldName = ["header", "Authorization"];
-			result.push({
+			return {
 				fieldName,
+				schemeId: item.id,
 				defaultValue: "",
-				original: security,
+				storageKey: storageKeys.AuthField(item.id),
 				children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldSet, {
 					name: `${t.authorization} (${t.header})`,
 					fieldName,
@@ -387,45 +400,106 @@ function useAuthInputs(securities, transform) {
 					className: "text-fd-muted-foreground text-xs",
 					children: t.openIdUnsupported
 				})] })
-			});
-		}
-		return transform ? transform(result) : result;
+			};
+		});
 	}, [
-		securities,
-		transform,
+		requirement,
+		storageKeys,
+		schemes,
 		t
 	]);
-	const mapInputs = (values) => {
-		const cloned = structuredClone(values);
-		for (const item of inputs) {
-			if (!item.mapOutput) continue;
-			objectSet(cloned, item.fieldName, item.mapOutput(objectGet(cloned, item.fieldName)));
-		}
-		return cloned;
-	};
-	const initAuthValues = (stf) => {
-		const { dataEngine } = stf;
-		for (const item of inputs) {
-			const stored = localStorage.getItem(storageKeys.AuthField(item));
-			if (stored) {
-				const parsed = JSON.parse(stored);
-				if (typeof parsed === typeof item.defaultValue) {
-					dataEngine.init(item.fieldName, parsed);
-					continue;
-				}
+	if (transformAuthInputs) inputs = transformAuthInputs(inputs);
+	useListener({
+		stf: engine,
+		onUpdate(key) {
+			for (const item of inputs) {
+				if (!arrayStartsWith(item.fieldName, key)) continue;
+				const value = engine.get(item.fieldName);
+				if (value != null) localStorage.setItem(item.storageKey, JSON.stringify(value));
 			}
-			dataEngine.init(item.fieldName, item.defaultValue);
 		}
-		return () => {
-			for (const item of inputs) stf.dataEngine.delete(item.fieldName);
-		};
-	};
+	});
+	useOnChange(authCtx.updatedSchemeId, () => {
+		const { updatedSchemeId } = authCtx;
+		if (!updatedSchemeId) return;
+		const { token } = authCtx.store[updatedSchemeId];
+		const input = inputs.find((input) => input.schemeId === updatedSchemeId);
+		if (input) {
+			engine.update(input.fieldName, token);
+			return;
+		}
+		const idx = requirements.findIndex((requirement) => requirement.some((item) => item.id === updatedSchemeId));
+		if (idx !== -1) {
+			localStorage.setItem(storageKeys.AuthField(updatedSchemeId), JSON.stringify(token));
+			setRequirementId(idx);
+		}
+	});
 	return {
 		inputs,
-		mapInputs,
-		initAuthValues
+		requirementId,
+		setRequirementId,
+		mapInputs(values) {
+			const cloned = structuredClone(values);
+			for (const item of inputs) {
+				if (!item.mapOutput) continue;
+				objectSet(cloned, item.fieldName, item.mapOutput(objectGet(cloned, item.fieldName)));
+			}
+			return cloned;
+		},
+		initAuthInputs() {
+			for (const item of inputs) {
+				const stored = localStorage.getItem(item.storageKey);
+				if (stored) {
+					const parsed = JSON.parse(stored);
+					if (typeof parsed === typeof item.defaultValue) {
+						engine.init(item.fieldName, parsed);
+						continue;
+					}
+				}
+				engine.init(item.fieldName, item.defaultValue);
+			}
+			return () => {
+				for (const item of inputs) engine.delete(item.fieldName);
+			};
+		}
 	};
 }
+function OAuth2Input({ fieldName, security }) {
+	const [open, setOpen] = useState(false);
+	const engine = useDataEngine();
+	const t = useTranslations();
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx("label", {
+			htmlFor: stringifyFieldKey(fieldName),
+			className: cn(labelVariants()),
+			children: t.accessToken
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx(FieldInput, {
+				fieldName,
+				field: { type: "string" },
+				className: "flex-1"
+			}), /* @__PURE__ */ jsxs(OAuthDialog, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ jsx(OAuthDialogTrigger, {
+					type: "button",
+					className: cn(buttonVariants({
+						size: "sm",
+						color: "secondary"
+					})),
+					children: t.authorize
+				}), /* @__PURE__ */ jsx(OAuthDialogContent, {
+					setOpen,
+					schemeId: security.id,
+					scopes: security.scopes,
+					setToken: (token) => engine.update(["header", "Authorization"], token)
+				})]
+			})]
+		})]
+	});
+}
 function Route({ route, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,