OpenAPI: Enable group id on tabs by default

.changeset/curvy-stingrays-fly.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-openapi': patch
+---
+
+Enable group id on tabs by default

packages/openapi/package.json

@@ -61,6 +61,7 @@
     "fumadocs-core": "workspace:*",
     "fumadocs-ui": "workspace:*",
     "github-slugger": "^2.0.0",
+    "hast-util-to-jsx-runtime": "^2.3.0",
     "js-yaml": "^4.1.0",
     "json-schema-to-typescript": "15.0.0",
     "lucide-react": "^0.437.0",

packages/openapi/src/render/codeblock.tsx

@@ -1,6 +1,8 @@
-import { type HTMLAttributes, useMemo } from 'react';
+import { type HTMLAttributes } from 'react';
 import * as Base from 'fumadocs-ui/components/codeblock';
-import { createHighlighter, bundledLanguages, bundledThemes } from 'shiki';
+import { codeToHast } from 'shiki';
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { sharedTransformers } from '@/utils/shiki';
 
 export type CodeBlockProps = HTMLAttributes<HTMLPreElement> & {
@@ -8,28 +10,29 @@ export type CodeBlockProps = HTMLAttributes<HTMLPreElement> & {
   lang: string;
 };
 
-const highlighter = await createHighlighter({
-  themes: Object.values(bundledThemes),
-  langs: Object.values(bundledLanguages),
-});
-
-export function CodeBlock({
+export async function CodeBlock({
   code,
   lang,
   ...props
-}: CodeBlockProps): React.ReactElement {
-  const html = useMemo(() => {
-    return highlighter.codeToHtml(code, {
-      lang,
-      defaultColor: false,
-      themes: { light: 'github-light', dark: 'github-dark' },
-      transformers: sharedTransformers,
-    });
-  }, [code, lang]);
+}: CodeBlockProps): Promise<React.ReactElement> {
+  const html = await codeToHast(code, {
+    lang,
+    defaultColor: false,
+    themes: { light: 'github-light', dark: 'github-dark' },
+    transformers: sharedTransformers,
+  });
 
-  return (
-    <Base.CodeBlock className="my-0">
-      <Base.Pre {...props} dangerouslySetInnerHTML={{ __html: html }} />
-    </Base.CodeBlock>
-  );
+  const codeblock = toJsxRuntime(html, {
+    development: false,
+    // @ts-expect-error -- untyped
+    jsx,
+    // @ts-expect-error -- untyped
+    jsxs,
+    components: {
+      // @ts-expect-error -- untyped
+      pre: Base.Pre,
+    },
+  });
+
+  return <Base.CodeBlock className="my-0">{codeblock}</Base.CodeBlock>;
 }

packages/openapi/src/render/renderer.tsx

@@ -92,7 +92,9 @@ export const defaultRenderer: Renderer = {
   API,
   APIInfo,
   APIExample,
-  Responses: Tabs,
+  Responses: (props) => (
+    <Tabs groupId="fumadocs_openapi_responses" {...props} />
+  ),
   Response: Tab,
   ResponseTypes: (props) => (
     <Accordions
@@ -110,7 +112,7 @@ export const defaultRenderer: Renderer = {
   ),
   Property,
   ObjectCollapsible,
-  Requests: Tabs,
+  Requests: (props) => <Tabs groupId="fumadocs_openapi_requests" {...props} />,
   Request: (props) => (
     <Tab value={props.name}>
       <CodeBlock lang={props.language} code={props.code} />

pnpm-lock.yaml

@@ -801,6 +801,9 @@ importers:
       github-slugger:
         specifier: ^2.0.0
         version: 2.0.0
+      hast-util-to-jsx-runtime:
+        specifier: ^2.3.0
+        version: 2.3.0
       js-yaml:
         specifier: ^4.1.0
         version: 4.1.0
@@ -10758,7 +10761,7 @@ snapshots:
   [email protected]:
     dependencies:
       '@types/estree-jsx': 1.0.5
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   [email protected]: {}
 
@@ -11269,7 +11272,7 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.5
       '@types/hast': 3.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       comma-separated-tokens: 2.0.3
       devlop: 1.1.0
       estree-util-is-identifier-name: 3.0.0
@@ -11277,7 +11280,7 @@ snapshots:
       mdast-util-mdx-expression: 2.0.0
       mdast-util-mdx-jsx: 3.0.0
       mdast-util-mdxjs-esm: 2.0.1
-      property-information: 6.3.0
+      property-information: 6.5.0
       space-separated-tokens: 2.0.2
       style-to-object: 1.0.5
       unist-util-position: 5.0.0
@@ -11903,7 +11906,7 @@ snapshots:
       '@types/estree-jsx': 1.0.5
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       ccount: 2.0.1
       devlop: 1.1.0
       mdast-util-from-markdown: 2.0.1
@@ -11957,7 +11960,7 @@ snapshots:
   [email protected]:
     dependencies:
       '@types/mdast': 4.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       longest-streak: 3.1.0
       mdast-util-phrasing: 4.0.0
       mdast-util-to-string: 4.0.0
@@ -12224,7 +12227,7 @@ snapshots:
     dependencies:
       '@types/acorn': 4.0.6
       '@types/estree': 1.0.5
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       devlop: 1.1.0
       estree-util-visit: 2.0.0
       micromark-util-symbol: 2.0.0
@@ -13788,7 +13791,7 @@ snapshots:
 
   [email protected]:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   [email protected]:
     dependencies:
@@ -13796,11 +13799,11 @@ snapshots:
 
   [email protected]:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
 
   [email protected]:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       unist-util-visit: 5.0.0
 
   [email protected]:
@@ -13809,7 +13812,7 @@ snapshots:
 
   [email protected]:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       unist-util-is: 6.0.0
 
   [email protected]:
@@ -13873,7 +13876,7 @@ snapshots:
 
   [email protected]:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       unist-util-stringify-position: 4.0.0
 
   [email protected]:
@@ -13884,7 +13887,7 @@ snapshots:
 
   [email protected]:
     dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
       unist-util-stringify-position: 4.0.0
       vfile-message: 4.0.2