fix: potential duplicate ids warning (#48)

Author: JounQin

.changeset/calm-fishes-count.md

@@ -0,0 +1,5 @@
+---
+"@alauda/doom": patch
+---
+
+fix: potential duplicate ids warning

src/runtime/components/OpenAPIPath.tsx

@@ -4,7 +4,7 @@ import openapisMap from 'doom-@api-openapisMap'
 import virtual from 'doom-@api-virtual'
 import BananaSlug from 'github-slugger'
 import { OpenAPIV3, type OpenAPIV3_1 } from 'openapi-types'
-import { Fragment, useMemo, useState, type ReactNode } from 'react'
+import { Fragment, useId, useMemo, useState, type ReactNode } from 'react'
 
 import { omitRoutePathRefs, resolveRef } from '../utils.js'
 
@@ -177,6 +177,8 @@ export const OpenAPIPath = ({
 
   const pathPrefix = pathPrefix_ ?? (virtual.pathPrefix || '')
 
+  const uid = useId()
+
   const slugger = useMemo(() => new BananaSlug(), [])
 
   const [pathItem, openapi, openapiPath, refs] = useMemo(() => {
@@ -204,14 +206,14 @@ export const OpenAPIPath = ({
 
   return (
     <>
-      <HeadingTitle slugger={slugger} level={2}>
+      <HeadingTitle slugger={slugger} uid={uid} level={2}>
         {pathPrefix}
         {path}
       </HeadingTitle>
 
       {pathItem.parameters && (
         <>
-          <HeadingTitle slugger={slugger} level={3}>
+          <HeadingTitle slugger={slugger} uid={uid} level={3}>
             Common Parameters
           </HeadingTitle>
           <OpenAPIParameters
@@ -245,22 +247,22 @@ export const OpenAPIPath = ({
 
         return (
           <Fragment key={method}>
-            <HeadingTitle slugger={slugger} level={3}>
+            <HeadingTitle slugger={slugger} uid={uid} level={3}>
               <code>{method}</code>
               {summary}
             </HeadingTitle>
             <Markdown>{description}</Markdown>
             {parameters && (
               <>
-                <HeadingTitle slugger={slugger} level={4}>
+                <HeadingTitle slugger={slugger} uid={uid} level={4}>
                   Parameters
                 </HeadingTitle>
                 <OpenAPIParameters parameters={parameters} openapi={openapi} />
               </>
             )}
             {requestBodySchema && (
               <>
-                <HeadingTitle slugger={slugger} level={4}>
+                <HeadingTitle slugger={slugger} uid={uid} level={4}>
                   Request Body
                 </HeadingTitle>
                 <X.p>
@@ -272,7 +274,7 @@ export const OpenAPIPath = ({
             {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
             {responses && (
               <>
-                <HeadingTitle slugger={slugger} level={4}>
+                <HeadingTitle slugger={slugger} uid={uid} level={4}>
                   Response
                 </HeadingTitle>
                 <OpenAPIResponses responses={responses} openapi={openapi} />
@@ -288,6 +290,7 @@ export const OpenAPIPath = ({
             key={ref}
             schema={ref}
             openapiPath={openapiPath}
+            uid={uid}
             collectRefs={false}
           />
         )

src/runtime/components/OpenAPIRef.tsx

@@ -2,7 +2,7 @@ import { usePageData } from '@rspress/core/runtime'
 import { getCustomMDXComponent } from '@rspress/core/theme'
 import openapisMap from 'doom-@api-openapisMap'
 import type { OpenAPIV3_1 } from 'openapi-types'
-import { type ReactNode, useMemo, useState } from 'react'
+import { type ReactNode, useId, useMemo, useState } from 'react'
 
 import { modelName, omitRoutePathRefs, resolveRef } from '../utils.js'
 
@@ -19,6 +19,7 @@ export interface OpenAPIRefProps {
    * The specific path to the OpenAPI schema, otherwise the first matched will be used.
    */
   openapiPath?: string
+  uid?: string
   collectRefs?: boolean
 }
 
@@ -150,10 +151,17 @@ const getRefsForSchema = (
 export const OpenAPIRef = ({
   schema,
   openapiPath: openapiPath_,
+  uid,
   collectRefs = true,
 }: OpenAPIRefProps) => {
   const { page } = usePageData()
 
+  const innerUid = useId()
+
+  if (uid == null) {
+    uid = innerUid
+  }
+
   const [schemaItem, openapi, openapiPath] = useMemo(() => {
     for (const [pathname, openapi] of Object.entries(openapisMap)) {
       if (openapiPath_ && pathname !== openapiPath_) {
@@ -184,7 +192,7 @@ export const OpenAPIRef = ({
 
   return (
     <>
-      <HeadingTitle slug={schema} level={2}>
+      <HeadingTitle uid={uid} slug={schema} level={2}>
         {modelName(schema)}
       </HeadingTitle>
       <Markdown>{schemaItem.description}</Markdown>
@@ -199,6 +207,7 @@ export const OpenAPIRef = ({
           key={schema}
           schema={schema}
           openapiPath={openapiPath}
+          uid={uid}
           collectRefs={false}
         />
       ))}

src/runtime/components/_HeadingTitle.tsx

@@ -5,13 +5,16 @@ import { Children, type ReactNode, useMemo, useState } from 'react'
 export interface HeadingTitleProps {
   slug?: string
   slugger?: BananaSlug
+  uid?: string
   level: 1 | 2 | 3 | 4 | 5 | 6
   children: ReactNode
 }
 
+// TODO: use context to simplify the usage of `slugger` and `uid`
 export const HeadingTitle = ({
   slug,
   slugger,
+  uid,
   level,
   children,
 }: HeadingTitleProps) => {
@@ -22,13 +25,18 @@ export const HeadingTitle = ({
   const HeadingComponent = HeadingComponents[level]
   const id = useMemo(
     () =>
-      slug ||
-      slugger?.slug(
-        Children.toArray(children)
-          .filter((it) => typeof it === 'string')
-          .join(''),
-      ),
-    [slug, children],
+      [
+        uid,
+        slug ||
+          slugger?.slug(
+            Children.toArray(children)
+              .filter((it) => typeof it === 'string')
+              .join(''),
+          ),
+      ]
+        .filter(Boolean)
+        .join('-') || undefined,
+    [slug, uid, children],
   )
   return (
     <HeadingComponent id={id}>