fumadocs-openapi 11.4.2 → 12.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/css/generated/shared.css +1 -1
  2. package/css/preset.css +0 -1
  3. package/dist/_virtual/_rolldown/runtime.js +10 -1
  4. package/dist/generate-file.d.ts +2 -2
  5. package/dist/generate-file.js +1 -1
  6. package/dist/i18n.d.ts +6 -8
  7. package/dist/i18n.js +2 -17
  8. package/dist/index.browser.d.ts +13 -0
  9. package/dist/index.browser.js +11 -0
  10. package/dist/index.d.ts +5 -2
  11. package/dist/index.js +3 -1
  12. package/dist/operation.d.ts +133 -0
  13. package/dist/operation.js +296 -0
  14. package/dist/packages/shared-api/dist/.translations/index.d.ts +29 -0
  15. package/dist/packages/shared-api/dist/.translations/keys.js +28 -0
  16. package/dist/packages/shared-api/dist/auto-anchor/client.js +20 -0
  17. package/dist/packages/shared-api/dist/auto-anchor/index.js +17 -0
  18. package/dist/packages/shared-api/dist/codegen.d.ts +42 -0
  19. package/dist/packages/shared-api/dist/codegen.js +35 -0
  20. package/dist/packages/shared-api/dist/components/accordion.js +71 -0
  21. package/dist/packages/shared-api/dist/components/badge.js +21 -0
  22. package/dist/packages/shared-api/dist/components/collapsible.d.ts +7 -0
  23. package/dist/packages/shared-api/dist/components/collapsible.js +16 -0
  24. package/dist/packages/shared-api/dist/components/defaults.d.ts +20 -0
  25. package/dist/packages/shared-api/dist/components/defaults.js +70 -0
  26. package/dist/packages/shared-api/dist/components/dialog.js +55 -0
  27. package/dist/packages/shared-api/dist/components/input.js +14 -0
  28. package/dist/packages/shared-api/dist/components/label.js +11 -0
  29. package/dist/packages/shared-api/dist/components/playground/inputs.js +439 -0
  30. package/dist/packages/shared-api/dist/components/playground/schema.js +112 -0
  31. package/dist/packages/shared-api/dist/components/popover.js +23 -0
  32. package/dist/packages/shared-api/dist/components/schema/client.d.ts +12 -0
  33. package/dist/packages/shared-api/dist/components/schema/client.js +508 -0
  34. package/dist/packages/shared-api/dist/components/schema/index.d.ts +9 -0
  35. package/dist/packages/shared-api/dist/components/schema/index.js +28 -0
  36. package/dist/packages/shared-api/dist/components/select-tab.js +54 -0
  37. package/dist/packages/shared-api/dist/components/select.js +70 -0
  38. package/dist/packages/shared-api/dist/components/spinner.js +14 -0
  39. package/dist/packages/shared-api/dist/i18n.d.ts +3 -0
  40. package/dist/packages/shared-api/dist/i18n.js +7 -0
  41. package/dist/packages/shared-api/dist/utils/cn.js +2 -0
  42. package/dist/packages/shared-api/dist/utils/id-to-title.js +12 -0
  43. package/dist/packages/shared-api/dist/utils/is-plain-object.js +8 -0
  44. package/dist/packages/shared-api/dist/utils/merge-refs.js +11 -0
  45. package/dist/packages/shared-api/dist/utils/url.js +13 -0
  46. package/dist/{utils → packages/shared-api/dist/utils}/use-query.js +2 -1
  47. package/dist/packages/shared-api/dist/utils/use-server-store.js +56 -0
  48. package/dist/playground/auth.d.ts +37 -0
  49. package/dist/playground/auth.js +216 -21
  50. package/dist/playground/fetcher.d.ts +11 -1
  51. package/dist/playground/index.d.ts +3 -0
  52. package/dist/playground/index.js +3 -0
  53. package/dist/requests/generators/csharp.js +0 -1
  54. package/dist/requests/generators/go.js +0 -1
  55. package/dist/requests/generators/index.d.ts +4 -4
  56. package/dist/requests/generators/index.js +2 -2
  57. package/dist/requests/generators/java.js +0 -1
  58. package/dist/requests/generators/javascript.js +0 -1
  59. package/dist/requests/generators/python.js +0 -1
  60. package/dist/requests/generators/rust.js +0 -1
  61. package/dist/requests/index.d.ts +4 -0
  62. package/dist/requests/index.js +3 -0
  63. package/dist/requests/media/adapter.d.ts +1 -0
  64. package/dist/requests/media/encode.d.ts +7 -2
  65. package/dist/requests/media/resolve-adapter.d.ts +20 -0
  66. package/dist/server/index.d.ts +4 -7
  67. package/dist/server/index.js +1 -7
  68. package/dist/types.d.ts +0 -14
  69. package/dist/ui/base.d.ts +3 -2
  70. package/dist/ui/base.js +15 -166
  71. package/dist/ui/components/codeblock.js +3 -10
  72. package/dist/ui/components/heading.js +10 -19
  73. package/dist/ui/components/markdown.js +4 -6
  74. package/dist/ui/components/method-label.js +2 -17
  75. package/dist/ui/components/schema.js +28 -0
  76. package/dist/ui/index.d.ts +7 -198
  77. package/dist/ui/index.js +1 -3
  78. package/dist/ui/operation/index.js +143 -231
  79. package/dist/ui/operation/request-tabs.js +15 -23
  80. package/dist/ui/operation/response-tabs.js +9 -53
  81. package/dist/ui/operation/usage-tabs.js +35 -93
  82. package/dist/{playground → ui/playground}/client.d.ts +10 -21
  83. package/dist/ui/playground/client.js +432 -0
  84. package/dist/{playground → ui/playground}/components/oauth-dialog.js +27 -92
  85. package/dist/{playground → ui/playground}/components/result-display.d.ts +2 -2
  86. package/dist/{playground → ui/playground}/components/result-display.js +7 -7
  87. package/dist/{playground → ui/playground}/components/server-select.js +12 -13
  88. package/dist/{playground → ui/playground}/status-info.js +2 -2
  89. package/dist/{scalar → ui/scalar}/client.js +8 -6
  90. package/dist/{scalar → ui/scalar}/index.d.ts +2 -2
  91. package/dist/{scalar → ui/scalar}/index.js +3 -7
  92. package/dist/utils/create-page.d.ts +216 -0
  93. package/dist/utils/create-page.js +221 -0
  94. package/dist/utils/document/dereference.d.ts +2 -2
  95. package/dist/utils/document/dereference.js +8 -3
  96. package/dist/utils/document/load.js +2 -2
  97. package/dist/utils/get-example-requests.js +11 -13
  98. package/dist/utils/pages/builder.d.ts +15 -2
  99. package/dist/utils/pages/builder.js +6 -6
  100. package/dist/utils/pages/preset-auto.d.ts +1 -1
  101. package/dist/utils/pages/preset-auto.js +3 -3
  102. package/dist/utils/pages/to-static-data.js +4 -4
  103. package/dist/utils/pages/to-text.d.ts +1 -1
  104. package/dist/utils/pages/to-text.js +3 -5
  105. package/dist/utils/schema.js +5 -5
  106. package/dist/utils/use-server.d.ts +24 -0
  107. package/dist/utils/use-server.js +57 -0
  108. package/package.json +31 -20
  109. package/dist/node_modules/.pnpm/@scalar_openapi-upgrader@0.2.15/node_modules/@scalar/openapi-upgrader/dist/2.0-to-3.0/upgrade-from-two-to-three.js +0 -508
  110. package/dist/node_modules/.pnpm/@scalar_openapi-upgrader@0.2.15/node_modules/@scalar/openapi-upgrader/dist/3.0-to-3.1/upgrade-from-three-to-three-one.js +0 -152
  111. package/dist/node_modules/.pnpm/@scalar_openapi-upgrader@0.2.15/node_modules/@scalar/openapi-upgrader/dist/3.1-to-3.2/upgrade-from-three-one-to-three-two.js +0 -61
  112. package/dist/node_modules/.pnpm/@scalar_openapi-upgrader@0.2.15/node_modules/@scalar/openapi-upgrader/dist/helpers/traverse.js +0 -25
  113. package/dist/node_modules/.pnpm/@scalar_openapi-upgrader@0.2.15/node_modules/@scalar/openapi-upgrader/dist/upgrade.js +0 -15
  114. package/dist/playground/client.js +0 -574
  115. package/dist/ui/contexts/api.d.ts +0 -17
  116. package/dist/ui/contexts/api.js +0 -84
  117. package/dist/ui/create-client.d.ts +0 -9
  118. package/dist/ui/create-client.js +0 -7
  119. package/dist/ui/operation/context.d.ts +0 -15
  120. package/dist/ui/operation/context.js +0 -48
  121. package/dist/ui/operation/request-tabs.d.ts +0 -12
  122. package/dist/ui/operation/response-tabs.d.ts +0 -30
  123. package/dist/utils/get-example-requests.d.ts +0 -11
  124. package/dist/utils/schema.d.ts +0 -3
  125. package/dist/utils/storage-key.js +0 -15
@@ -4,9 +4,9 @@ import { createAutoPreset } from "../utils/pages/preset-auto.js";
4
4
  import { MethodLabel } from "../ui/components/method-label.js";
5
5
  import { createProxy } from "./proxy.js";
6
6
  import { loadDocument } from "../utils/document/load.js";
7
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
7
8
  import path from "node:path";
8
9
  import { PathUtils } from "fumadocs-core/source";
9
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
10
10
  import fs from "node:fs";
11
11
  //#region src/server/index.tsx
12
12
  function createOpenAPI(options = {}) {
@@ -52,12 +52,6 @@ function createOpenAPI(options = {}) {
52
52
  path: `${baseDir}/${entry.path}`,
53
53
  data: {
54
54
  ...entry.info,
55
- getAPIPageProps() {
56
- return this.getOpenAPIPageProps();
57
- },
58
- getClientAPIPageProps() {
59
- return this.getOpenAPIPageProps();
60
- },
61
55
  getOpenAPIPageProps() {
62
56
  return {
63
57
  payload: {
package/dist/types.d.ts CHANGED
@@ -1,10 +1,5 @@
1
1
  import { OpenAPIV3, OpenAPIV3_2 } from "./types/openapi.js";
2
- import { DereferencedDocument } from "./utils/document/dereference.js";
3
2
  import { InlineCodeUsageGenerator } from "./requests/generators/index.js";
4
- import { CreateOpenAPIPageOptions } from "./ui/index.js";
5
- import { OpenAPIOptions } from "./server/index.js";
6
- import { FC, ReactNode } from "react";
7
- import { SchemaUIOptions } from "@fumadocs/api-docs/components/schema";
8
3
  //#region src/types.d.ts
9
4
  export type Document = OpenAPIV3_2.Document;
10
5
  export type OperationObject = OpenAPIV3_2.OperationObject & {
@@ -26,15 +21,6 @@ export type HttpMethods = OpenAPIV3_2.HttpMethods;
26
21
  export type ExampleObject = OpenAPIV3_2.ExampleObject;
27
22
  export type MediaTypeObject = OpenAPIV3_2.MediaTypeObject;
28
23
  export type RequestBodyObject = OpenAPIV3_2.RequestBodyObject;
29
- type RequireKeys<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
30
- export interface RenderContext extends Pick<OpenAPIOptions, 'proxyUrl'>, Omit<RequireKeys<CreateOpenAPIPageOptions, 'generateTypeScriptDefinitions' | 'mediaAdapters' | 'codeUsages' | 'shikiOptions' | 'shiki'>, 'schemaUI'> {
31
- /**
32
- * dereferenced schema
33
- */
34
- schema: DereferencedDocument;
35
- _default_processMarkdown: (md: string) => ReactNode;
36
- SchemaUI: FC<Omit<SchemaUIOptions, 'renderMarkdown' | 'renderCodeblock'>>;
37
- }
38
24
  export type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
39
25
  export type Awaitable<T> = T | Promise<T>;
40
26
  //#endregion
package/dist/ui/base.d.ts CHANGED
@@ -1,11 +1,12 @@
1
- import { CreateOpenAPIPageOptions, OpenAPIPageProps } from "./index.js";
1
+ import { OpenAPIPageProps } from "../utils/pages/builder.js";
2
+ import { CreateOpenAPIPageOptions } from "./index.js";
2
3
  import { FC } from "react";
3
4
  import { ShikiFactory } from "fumadocs-core/highlight/shiki";
4
5
  //#region src/ui/base.d.ts
5
6
  /**
6
7
  * Create `<OpenAPIPage />` (a client component) without the full Shiki bundle.
7
8
  */
8
- export declare function createOpenAPIPageBase({ shiki, shikiOptions, schemaUI: schemaUIOptions, codeUsages, generateTypeScriptDefinitions, ...options }: CreateOpenAPIPageOptions & {
9
+ export declare function createOpenAPIPageBase(options: CreateOpenAPIPageOptions & {
9
10
  shiki: ShikiFactory;
10
11
  }): FC<OpenAPIPageProps>;
11
12
  //#endregion
package/dist/ui/base.js CHANGED
@@ -1,178 +1,27 @@
1
1
  "use client";
2
- import { RenderContextProvider, ServerProvider, useRenderContext } from "./contexts/api.js";
3
- import { ClientCodeBlock } from "./components/codeblock.js";
4
- import { createCodeUsageGeneratorRegistry } from "../requests/generators/index.js";
5
- import { AuthProvider } from "../playground/auth.js";
6
- import { defaultAdapters } from "../requests/media/adapter.js";
7
- import { Markdown } from "./components/markdown.js";
2
+ import { createOpenAPIRenderer } from "../utils/create-page.js";
3
+ import { Schema } from "../packages/shared-api/dist/components/schema/index.js";
8
4
  import { Operation } from "./operation/index.js";
9
- import { dereferenceBundledDocument } from "../utils/document/dereference.js";
10
- import { registerDefault } from "../requests/generators/all.js";
11
- import { getRaw } from "@scalar/json-magic/magic-proxy";
12
- import { Children, useMemo } from "react";
13
- import * as JsxRuntime from "react/jsx-runtime";
14
- import { jsx, jsxs } from "react/jsx-runtime";
15
- import { remarkGfm } from "fumadocs-core/mdx-plugins/remark-gfm";
16
- import defaultMdxComponents from "fumadocs-ui/mdx";
17
- import { remark } from "remark";
18
- import remarkRehype from "remark-rehype";
19
- import { toJsxRuntime } from "hast-util-to-jsx-runtime";
20
- import { generate } from "@fumari/json-schema-ts";
21
- import { Schema } from "@fumadocs/api-docs/components/schema";
5
+ import { jsxs } from "react/jsx-runtime";
22
6
  //#region src/ui/base.tsx
23
7
  /**
24
8
  * Create `<OpenAPIPage />` (a client component) without the full Shiki bundle.
25
9
  */
26
- function createOpenAPIPageBase({ shiki, shikiOptions = { themes: {
27
- light: "github-light",
28
- dark: "github-dark"
29
- } }, schemaUI: schemaUIOptions, codeUsages = registerDefault(createCodeUsageGeneratorRegistry()), generateTypeScriptDefinitions = (schema, ctx) => {
30
- if (typeof schema !== "object") return;
31
- try {
32
- return generate({
33
- ...ctx.ctx.schema.bundled,
34
- ...getRaw(schema)
35
- }, {
36
- name: ctx.name,
37
- readOnly: ctx.readOnly,
38
- writeOnly: ctx.writeOnly
39
- });
40
- } catch (e) {
41
- console.warn("Failed to generate typescript schema:", e);
42
- }
43
- }, ...options }) {
44
- let processor;
45
- function createMarkdownProcessor() {
46
- const mdxComponents = {
47
- ...defaultMdxComponents,
48
- img: void 0,
49
- pre: MarkdownPre
50
- };
51
- function rehypeReact() {
52
- this.compiler = (tree, file) => {
53
- return toJsxRuntime(tree, {
54
- development: false,
55
- filePath: file.path,
56
- ...JsxRuntime,
57
- components: mdxComponents
58
- });
59
- };
10
+ function createOpenAPIPageBase(options) {
11
+ return createOpenAPIRenderer({
12
+ ...options,
13
+ components: {
14
+ SchemaUI: Schema,
15
+ Operation,
16
+ Layout,
17
+ ...options.components
60
18
  }
61
- return remark().use(remarkGfm).use(remarkRehype).use(rehypeReact);
62
- }
63
- return function OpenAPIPage(props) {
64
- let doc;
65
- let proxyUrl;
66
- if ("preloaded" in props) {
67
- doc = props.preloaded.docs[props.document];
68
- if (!doc) throw new Error(`[Fumadocs OpenAPI] the document ${props.document} is not preloaded, make sure to pass the "preloaded" prop to <OpenAPIPage />`);
69
- proxyUrl = props.preloaded.proxyUrl;
70
- } else {
71
- doc = props.payload.bundled;
72
- proxyUrl = props.payload.proxyUrl;
73
- }
74
- const processed = useMemo(() => dereferenceBundledDocument(doc), [doc]);
75
- const ctx = useMemo(() => {
76
- const schemaUIShared = {
77
- renderCodeblock(opts) {
78
- return /* @__PURE__ */ jsx(ClientCodeBlock, { ...opts });
79
- },
80
- renderMarkdown(md) {
81
- return /* @__PURE__ */ jsx(Markdown, { md });
82
- }
83
- };
84
- return {
85
- schema: processed,
86
- proxyUrl,
87
- shiki,
88
- shikiOptions,
89
- generateTypeScriptDefinitions,
90
- codeUsages,
91
- SchemaUI(props) {
92
- const merged = {
93
- ...schemaUIShared,
94
- ...props,
95
- showExample: props.showExample ?? schemaUIOptions?.showExample
96
- };
97
- if (schemaUIOptions?.render) return schemaUIOptions.render(merged, ctx);
98
- return /* @__PURE__ */ jsx(Schema, { ...merged });
99
- },
100
- ...options,
101
- _default_processMarkdown(md) {
102
- processor ??= createMarkdownProcessor();
103
- return processor.processSync(md).result;
104
- },
105
- mediaAdapters: {
106
- ...defaultAdapters,
107
- ...options.mediaAdapters
108
- }
109
- };
110
- }, [proxyUrl, processed]);
111
- return /* @__PURE__ */ jsx(RenderContextProvider, {
112
- ctx,
113
- children: /* @__PURE__ */ jsx(PageContent, { ...props })
114
- });
115
- };
116
- }
117
- function PageContent({ showTitle: hasHead = false, showDescription, operations, webhooks }) {
118
- const ctx = useRenderContext();
119
- const { dereferenced, resolve } = ctx.schema;
120
- let { renderPageLayout } = ctx.content ?? {};
121
- renderPageLayout ??= (slots) => /* @__PURE__ */ jsxs("div", {
122
- className: "flex flex-col gap-24 text-sm @container",
123
- children: [slots.operations?.map((op) => op.children), slots.webhooks?.map((op) => op.children)]
124
- });
125
- let content = renderPageLayout({
126
- operations: operations?.map((item) => {
127
- const pathItem = resolve(dereferenced.paths?.[item.path]);
128
- if (!pathItem) throw new Error(`[Fumadocs OpenAPI] Path not found in OpenAPI schema: ${item.path}`);
129
- const operation = pathItem[item.method];
130
- if (!operation) throw new Error(`[Fumadocs OpenAPI] Method ${item.method} not found in operation: ${item.path}`);
131
- return {
132
- item,
133
- children: /* @__PURE__ */ jsx(Operation, {
134
- method: item.method,
135
- pathItem,
136
- operation,
137
- path: item.path,
138
- showTitle: hasHead,
139
- showDescription
140
- }, `${item.path}:${item.method}`)
141
- };
142
- }),
143
- webhooks: webhooks?.map((item) => {
144
- const webhook = resolve(dereferenced.webhooks?.[item.name]);
145
- if (!webhook) throw new Error(`[Fumadocs OpenAPI] Webhook not found in OpenAPI schema: ${item.name}`);
146
- const hook = webhook[item.method];
147
- if (!hook) throw new Error(`[Fumadocs OpenAPI] Method ${item.method} not found in webhook: ${item.name}`);
148
- return {
149
- item,
150
- children: /* @__PURE__ */ jsx(Operation, {
151
- type: "webhook",
152
- method: item.method,
153
- pathItem: webhook,
154
- operation: hook,
155
- path: `/${item.name}`,
156
- showTitle: hasHead,
157
- showDescription
158
- }, `${item.name}:${item.method}`)
159
- };
160
- })
161
- }, ctx);
162
- if (ctx.playground?.enabled !== false) content = ctx.playground?.provider ? ctx.playground.provider({ children: content }) : /* @__PURE__ */ jsx(AuthProvider, { children: content });
163
- return /* @__PURE__ */ jsx(ServerProvider, {
164
- servers: dereferenced.servers,
165
- children: content
166
19
  });
167
20
  }
168
- function MarkdownPre(props) {
169
- const codeProps = Children.only(props.children).props;
170
- const content = codeProps.children;
171
- if (typeof content !== "string") return null;
172
- const lang = codeProps.className?.split(" ").find((v) => v.startsWith("language-"))?.slice(9) ?? "text";
173
- return /* @__PURE__ */ jsx(ClientCodeBlock, {
174
- lang,
175
- code: content.trimEnd()
21
+ function Layout({ operations, webhooks }) {
22
+ return /* @__PURE__ */ jsxs("div", {
23
+ className: "flex flex-col gap-24 text-sm @container",
24
+ children: [operations?.map((item) => item.children), webhooks?.map((item) => item.children)]
176
25
  });
177
26
  }
178
27
  //#endregion
@@ -1,17 +1,10 @@
1
1
  "use client";
2
- import { useRenderContext } from "../contexts/api.js";
2
+ import { useComponents } from "../../utils/create-page.js";
3
3
  import { jsx } from "react/jsx-runtime";
4
- import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock.core";
5
4
  //#region src/ui/components/codeblock.tsx
6
5
  function ClientCodeBlock(props) {
7
- const { shiki, shikiOptions, renderCodeBlock, components: { CodeBlock: Comp } = {} } = useRenderContext();
8
- if (renderCodeBlock) return renderCodeBlock(props);
9
- if (Comp) return /* @__PURE__ */ jsx(Comp, { ...props });
10
- return /* @__PURE__ */ jsx(DynamicCodeBlock, {
11
- highlighter: () => shiki.getOrInit(),
12
- options: shikiOptions,
13
- ...props
14
- });
6
+ const { CodeBlock } = useComponents();
7
+ return /* @__PURE__ */ jsx(CodeBlock, { ...props });
15
8
  }
16
9
  //#endregion
17
10
  export { ClientCodeBlock };
@@ -1,26 +1,17 @@
1
1
  "use client";
2
- import { useRenderContext } from "../contexts/api.js";
2
+ import { useComponents } from "../../utils/create-page.js";
3
+ import { useAnchorId } from "../../packages/shared-api/dist/auto-anchor/client.js";
3
4
  import { jsx } from "react/jsx-runtime";
4
- import { useAnchorId } from "@fumadocs/api-docs/auto-anchor/client";
5
- import { Heading } from "fumadocs-ui/components/heading";
6
5
  //#region src/ui/components/heading.tsx
7
- function Heading$1({ id: _id, depth, ...props }) {
8
- const id = useAnchorId([_id]);
9
- const { renderHeading, components: { Heading: Comp } = {} } = useRenderContext();
10
- if (renderHeading) return renderHeading({
11
- id,
12
- ...props
13
- }, depth);
14
- if (Comp) return /* @__PURE__ */ jsx(Comp, {
15
- id,
16
- depth,
17
- ...props
18
- });
19
- return /* @__PURE__ */ jsx(Heading, {
20
- id,
21
- as: `h${depth}`,
6
+ /**
7
+ * A heading of the page, `id` is resolved against the anchor sections it is under.
8
+ */
9
+ function Heading({ id, ...props }) {
10
+ const { Heading: Comp } = useComponents();
11
+ return /* @__PURE__ */ jsx(Comp, {
12
+ id: useAnchorId([id]),
22
13
  ...props
23
14
  });
24
15
  }
25
16
  //#endregion
26
- export { Heading$1 as Heading };
17
+ export { Heading };
@@ -1,12 +1,10 @@
1
- import { useRenderContext } from "../contexts/api.js";
2
- import { useMemo } from "react";
1
+ "use client";
2
+ import { useComponents } from "../../utils/create-page.js";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  //#region src/ui/components/markdown.tsx
5
5
  function Markdown({ md }) {
6
- const { _default_processMarkdown: processMarkdown, renderMarkdown, components: { Markdown: Comp } = {} } = useRenderContext();
7
- if (renderMarkdown) return renderMarkdown(md);
8
- if (Comp) return /* @__PURE__ */ jsx(Comp, { md });
9
- return useMemo(() => processMarkdown(md), [processMarkdown, md]);
6
+ const { Markdown: Comp } = useComponents();
7
+ return /* @__PURE__ */ jsx(Comp, { md });
10
8
  }
11
9
  //#endregion
12
10
  export { Markdown };
@@ -1,14 +1,6 @@
1
- import { cn } from "../../utils/cn.js";
1
+ import { Badge } from "../../packages/shared-api/dist/components/badge.js";
2
2
  import { jsx } from "react/jsx-runtime";
3
- import { cva } from "class-variance-authority";
4
3
  //#region src/ui/components/method-label.tsx
5
- const badgeVariants = cva("font-mono font-medium", { variants: { color: {
6
- green: "text-green-600 dark:text-green-400",
7
- yellow: "text-yellow-600 dark:text-yellow-400",
8
- red: "text-red-600 dark:text-red-400",
9
- blue: "text-blue-600 dark:text-blue-400",
10
- orange: "text-orange-600 dark:text-orange-400"
11
- } } });
12
4
  function getMethodColor(method) {
13
5
  switch (method.toUpperCase()) {
14
6
  case "PUT": return "yellow";
@@ -18,13 +10,6 @@ function getMethodColor(method) {
18
10
  default: return "green";
19
11
  }
20
12
  }
21
- function Badge({ className, color, ...props }) {
22
- return /* @__PURE__ */ jsx("span", {
23
- className: cn(badgeVariants({ color }), className),
24
- ...props,
25
- children: props.children
26
- });
27
- }
28
13
  function MethodLabel({ children, ...props }) {
29
14
  return /* @__PURE__ */ jsx(Badge, {
30
15
  ...props,
@@ -33,4 +18,4 @@ function MethodLabel({ children, ...props }) {
33
18
  });
34
19
  }
35
20
  //#endregion
36
- export { Badge, MethodLabel, badgeVariants };
21
+ export { MethodLabel };
@@ -0,0 +1,28 @@
1
+ "use client";
2
+ import { useComponents, useRenderContext } from "../../utils/create-page.js";
3
+ import { useAnchorId } from "../../packages/shared-api/dist/auto-anchor/client.js";
4
+ import { useMemo } from "react";
5
+ import { jsx } from "react/jsx-runtime";
6
+ //#region src/ui/components/schema.tsx
7
+ /**
8
+ * The Schema UI of the page, with the anchor ID of the root schema resolved.
9
+ */
10
+ function SchemaUI({ client, ...props }) {
11
+ const { SchemaUI: Comp, Markdown, CodeBlock } = useComponents();
12
+ const { schemaUI } = useRenderContext();
13
+ const renderers = useMemo(() => ({
14
+ renderMarkdown: (md) => /* @__PURE__ */ jsx(Markdown, { md }),
15
+ renderCodeblock: (props) => /* @__PURE__ */ jsx(CodeBlock, { ...props })
16
+ }), [Markdown, CodeBlock]);
17
+ return /* @__PURE__ */ jsx(Comp, {
18
+ ...renderers,
19
+ showExample: schemaUI?.showExample,
20
+ ...props,
21
+ client: {
22
+ ...client,
23
+ rootId: useAnchorId([client.name])
24
+ }
25
+ });
26
+ }
27
+ //#endregion
28
+ export { SchemaUI };
@@ -1,207 +1,16 @@
1
- import { MediaAdapter } from "../requests/media/adapter.js";
2
- import { CodeUsageGeneratorRegistry, InlineCodeUsageGenerator } from "../requests/generators/index.js";
3
- import { ExampleRequestItem } from "../utils/get-example-requests.js";
4
- import { RequestTabsRenderOptions } from "./operation/request-tabs.js";
5
- import { ResponseTabsRenderOptions } from "./operation/response-tabs.js";
6
- import { ParsedSchema } from "../utils/schema.js";
7
- import { PlaygroundClientOptions } from "../playground/client.js";
8
- import { GeneratedPageProps, OperationItem, WebhookItem } from "../utils/pages/builder.js";
9
- import { useRenderContext, useServerContext } from "./contexts/api.js";
10
- import { useOperationContext } from "./operation/context.js";
11
- import { Awaitable, Document, HttpMethods, OperationObject, PathItemObject, RenderContext } from "../types.js";
12
- import { ComponentProps, FC, HTMLAttributes, ReactNode } from "react";
13
- import { SchemaUIOptions } from "@fumadocs/api-docs/components/schema";
14
- import { ShikiFactory } from "fumadocs-core/highlight/shiki";
15
- import { BundledTheme, CodeOptionsThemes, CodeToHastOptionsCommon } from "shiki";
1
+ import { OpenAPIPageProps, OpenAPIPageProps_Preloaded, OpenAPIPageProps_Spec } from "../utils/pages/builder.js";
2
+ import { CreateOpenAPIRendererOptions, OpenAPIRenderOptions, OpenAPIRuntimeOptions } from "../utils/create-page.js";
3
+ import { FC } from "react";
16
4
  //#region src/ui/index.d.ts
17
- export interface GenerateTypeScriptDefinitionsContext {
18
- name: string;
19
- readOnly: boolean;
20
- writeOnly: boolean;
21
- ctx: RenderContext;
22
- }
23
- export interface APIPlaygroundProps {
24
- path: string;
25
- method: HttpMethods;
26
- operation: OperationObject;
27
- pathItem: PathItemObject;
28
- ctx: RenderContext;
29
- }
30
- export interface CreateOpenAPIPageOptions {
31
- /**
32
- * Generate TypeScript definitions from JSON schema.
33
- *
34
- * Pass `false` to disable it.
35
- */
36
- generateTypeScriptDefinitions?: ((schema: ParsedSchema, ctx: GenerateTypeScriptDefinitionsContext) => Awaitable<string | undefined>) | false;
37
- /**
38
- * Generate example code usage for all endpoints.
39
- */
40
- codeUsages?: CodeUsageGeneratorRegistry;
41
- /**
42
- * Generate example code usage for each endpoint.
43
- */
44
- generateCodeSamples?: (options: {
45
- path: string;
46
- operation: OperationObject;
47
- method: HttpMethods;
48
- pathItem: PathItemObject;
49
- }) => InlineCodeUsageGenerator[];
50
- shiki?: ShikiFactory;
51
- shikiOptions?: Omit<CodeToHastOptionsCommon, 'lang'> & CodeOptionsThemes<BundledTheme>;
52
- /**
53
- * Show full response schema instead of only example response & Typescript definitions.
54
- *
55
- * @default true
56
- */
57
- showResponseSchema?: boolean;
58
- /**
59
- * Support other media types.
60
- */
61
- mediaAdapters?: Record<string, MediaAdapter>;
62
- /**
63
- * Customize page content.
64
- */
65
- content?: {
66
- renderResponseTabs?: (options: ResponseTabsRenderOptions, ctx: RenderContext) => ReactNode;
67
- renderRequestTabs?: (options: RequestTabsRenderOptions, ctx: RenderContext) => ReactNode;
68
- renderAPIExampleLayout?: (slots: {
69
- selector: ReactNode;
70
- usageTabs: ReactNode;
71
- responseTabs: ReactNode;
72
- }, ctx: RenderContext) => ReactNode;
73
- /**
74
- * @param generators - codegens for API example usages
75
- */
76
- renderAPIExampleUsageTabs?: (generators: CodeUsageGeneratorRegistry, ctx: RenderContext) => ReactNode;
77
- /**
78
- * renderer of the entire page's layout (containing all operations & webhooks UI)
79
- */
80
- renderPageLayout?: (slots: {
81
- operations?: {
82
- item: OperationItem;
83
- children: ReactNode;
84
- }[];
85
- webhooks?: {
86
- item: WebhookItem;
87
- children: ReactNode;
88
- }[];
89
- }, ctx: RenderContext) => ReactNode;
90
- renderOperationLayout?: (slots: {
91
- header: ReactNode;
92
- description: ReactNode;
93
- apiExample: ReactNode;
94
- apiPlayground: ReactNode;
95
- authSchemes: ReactNode;
96
- parameters: ReactNode;
97
- body: ReactNode;
98
- responses: ReactNode;
99
- callbacks: ReactNode;
100
- }, context: {
101
- path: string;
102
- operation: OperationObject;
103
- method: HttpMethods;
104
- pathItem: PathItemObject;
105
- ctx: RenderContext;
106
- }) => ReactNode;
107
- renderWebhookLayout?: (slots: {
108
- header: ReactNode;
109
- description: ReactNode;
110
- authSchemes: ReactNode;
111
- parameters: ReactNode;
112
- body: ReactNode;
113
- requests: ReactNode;
114
- responses: ReactNode;
115
- callbacks: ReactNode;
116
- }) => ReactNode;
117
- };
118
- /**
119
- * Info UI for JSON schemas.
120
- */
121
- schemaUI?: {
122
- render?: (options: SchemaUIOptions, ctx: RenderContext) => ReactNode;
123
- /**
124
- * Show examples under the generated content of JSON schemas.
125
- *
126
- * @defaultValue false
127
- */
128
- showExample?: boolean;
129
- };
130
- /**
131
- * Customize API playground.
132
- */
133
- playground?: PlaygroundClientOptions & {
134
- /**
135
- * @defaultValue true
136
- */
137
- enabled?: boolean;
138
- /**
139
- * render a page-level provider (useful for handling auth)
140
- */
141
- provider?: (props: {
142
- children: ReactNode;
143
- }) => ReactNode;
144
- /**
145
- * replace the renderer
146
- */
147
- render?: (props: APIPlaygroundProps) => ReactNode;
148
- };
149
- operation?: {
150
- APIExampleSelector?: FC<{
151
- items: ExampleRequestItem[];
152
- value: string | undefined;
153
- onValueChange: (id: string) => void;
154
- }>;
155
- };
156
- components?: {
157
- Heading?: FC<ComponentProps<'h1'> & {
158
- id: string;
159
- depth: number;
160
- }>;
161
- CodeBlock?: FC<{
162
- lang: string;
163
- code: string;
164
- }>;
165
- Markdown?: FC<{
166
- md: string;
167
- }>;
168
- };
5
+ export interface CreateOpenAPIPageOptions extends OpenAPIRuntimeOptions, OpenAPIRenderOptions {
169
6
  /**
170
- * Set a prefix for `localStorage` keys.
171
- *
172
- * Useful when using multiple OpenAPI instances to prevent state conflicts.
173
- *
174
- * @defaultValue `fumadocs-openapi-`
7
+ * Replace parts of the UI, e.g. the ones installed with Fumadocs CLI.
175
8
  */
176
- storageKeyPrefix?: string;
177
- /** @deprecated use `components.Heading` instead */
178
- renderHeading?: (props: HTMLAttributes<HTMLHeadingElement>, depth: number) => ReactNode;
179
- /** @deprecated use `components.CodeBlock` instead */
180
- renderCodeBlock?: (props: {
181
- lang: string;
182
- code: string;
183
- }) => ReactNode;
184
- /** @deprecated use `components.Markdown` instead */
185
- renderMarkdown?: (md: string) => ReactNode;
9
+ components?: Partial<CreateOpenAPIRendererOptions['components']>;
186
10
  }
187
- export type OpenAPIPageProps = OpenAPIPageProps_Spec | OpenAPIPageProps_Preloaded;
188
- export type OpenAPIPageProps_Spec = Omit<GeneratedPageProps, 'document'> & {
189
- payload: {
190
- bundled: Document;
191
- proxyUrl?: string;
192
- };
193
- };
194
- export type OpenAPIPageProps_Preloaded = GeneratedPageProps & {
195
- preloaded: {
196
- docs: Record<string, Document>;
197
- proxyUrl?: string;
198
- };
199
- };
200
11
  /**
201
12
  * Create `<OpenAPIPage />` (a client component).
202
13
  */
203
14
  export declare function createOpenAPIPage(options?: CreateOpenAPIPageOptions): FC<OpenAPIPageProps>;
204
- /** @deprecated Use `OpenAPIPageProps` instead */
205
- export type ApiPageProps = OpenAPIPageProps;
206
15
  //#endregion
207
- export { type OperationItem, type WebhookItem, useOperationContext, useRenderContext, useServerContext };
16
+ export type { OpenAPIPageProps, OpenAPIPageProps_Preloaded, OpenAPIPageProps_Spec };
package/dist/ui/index.js CHANGED
@@ -1,6 +1,4 @@
1
1
  "use client";
2
- import { useRenderContext, useServerContext } from "./contexts/api.js";
3
- import { useOperationContext } from "./operation/context.js";
4
2
  import { createOpenAPIPageBase } from "./base.js";
5
3
  import { defaultShikiFactory } from "fumadocs-core/highlight/shiki/full";
6
4
  //#region src/ui/index.tsx
@@ -14,4 +12,4 @@ function createOpenAPIPage(options = {}) {
14
12
  });
15
13
  }
16
14
  //#endregion
17
- export { createOpenAPIPage, useOperationContext, useRenderContext, useServerContext };
15
+ export { createOpenAPIPage };