[v4] move TOC logic from recma-rewrite-jsx plugin to rehype-extract-toc-content plugin

.changeset/selfish-toys-clap.md

@@ -0,0 +1,7 @@
+---
+'nextra-theme-blog': minor
+'nextra-theme-docs': minor
+'nextra': minor
+---
+
+move TOC logic from `recma-rewrite-jsx` plugin to `rehype-extract-toc-content` plugin

packages/nextra/__test__/compile.test.ts

@@ -335,7 +335,7 @@ import Last from './three.mdx'
             {'\\n'}
             <FromMdx />
             {'\\n'}
-            <_components.h2 id={toc[1].id}>{toc[1].value}</_components.h2>
+            <_components.h2 id={toc[2].id}>{toc[2].value}</_components.h2>
             {'\\n'}
             <FromMarkdown />
             {'\\n'}
@@ -344,15 +344,15 @@ import Last from './three.mdx'
             {'\\n'}
             <IgnoreMe />
             {'\\n'}
-            <_components.h2 id={toc[2].id}>{toc[2].value}</_components.h2>
+            <_components.h2 id={toc[5].id}>{toc[5].value}</_components.h2>
             {'\\n'}
-            <_components.h2 id={toc[3].id}>{toc[3].value}</_components.h2>
+            <_components.h2 id={toc[6].id}>{toc[6].value}</_components.h2>
             {'\\n'}
-            <_components.h2 id={toc[4].id}>{toc[4].value}</_components.h2>
+            <_components.h2 id={toc[7].id}>{toc[7].value}</_components.h2>
             {'\\n'}
-            <_components.h2 id={toc[5].id}>{toc[5].value}</_components.h2>
+            <_components.h2 id={toc[8].id}>{toc[8].value}</_components.h2>
             {'\\n'}
-            <_components.h2 id={toc[6].id}>{toc[6].value}</_components.h2>
+            <_components.h2 id={toc[9].id}>{toc[9].value}</_components.h2>
           </>
         )
       }

packages/nextra/src/server/__tests__/rehype-extract-toc-content.test.ts

@@ -408,16 +408,16 @@ export const myVar = 123
           return _jsxs(_Fragment, {
             children: [
               _jsx(_components.h2, {
-                id: 'bar',
-                children: 'bar'
+                id: toc[0].id,
+                children: toc[0].value
               }),
               '\\n',
               _jsx(Foo, {}),
               '\\n',
               '\\n',
-              _jsxs(_components.h3, {
-                id: '123-myvar',
-                children: ['123 ', myVar]
+              _jsx(_components.h3, {
+                id: toc[1].id,
+                children: toc[1].value
               })
             ]
           })

packages/nextra/src/server/__tests__/remark-remove-imports.test.ts

@@ -42,11 +42,7 @@ export const Test = ({value}) => value
           h2: 'h2',
           ...props.components
         }
-        return (
-          <_components.h2 id="-myvar">
-            <Test value="Hello" /> {myVar}
-          </_components.h2>
-        )
+        return <_components.h2 id={toc[0].id}>{toc[0].value}</_components.h2>
       }
       return {
         metadata,

packages/nextra/src/server/compile.ts

@@ -3,7 +3,6 @@ import type { ProcessorOptions } from '@mdx-js/mdx'
 import { createProcessor } from '@mdx-js/mdx'
 import { remarkMermaid } from '@theguild/remark-mermaid'
 import { remarkNpm2Yarn } from '@theguild/remark-npm2yarn'
-import type { Program } from 'estree'
 import rehypeKatex from 'rehype-katex'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeRaw from 'rehype-raw'
@@ -12,10 +11,11 @@ import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 import remarkReadingTime from 'remark-reading-time'
 import remarkSmartypants from 'remark-smartypants'
-import type { Pluggable, Plugin } from 'unified'
+import type { Pluggable } from 'unified'
 import type { LoaderOptions, NextraConfig } from '../types.js'
 import { CWD, MARKDOWN_URL_EXTENSION_RE } from './constants.js'
 import {
+  recmaRewrite,
   recmaRewriteFunctionBody,
   recmaRewriteJsx
 } from './recma-plugins/index.js'
@@ -206,34 +206,11 @@ export async function compileMdx(
               rehypeTwoslashPopup,
               [rehypeAttachCodeMeta, { search }]
             ]),
-        [rehypeExtractTocContent, { isRemoteContent }]
+        rehypeExtractTocContent
       ].filter(v => !!v),
       recmaPlugins: [
         ...(recmaPlugins || []),
-        (() => (ast: Program, file) => {
-          const mdxContentIndex = ast.body.findIndex(node => {
-            if (node.type === 'ExportDefaultDeclaration') {
-              return (node.declaration as any).id.name === 'MDXContent'
-            }
-            if (node.type === 'FunctionDeclaration') {
-              return node.id.name === 'MDXContent'
-            }
-          })
-
-          // Remove `MDXContent` since we use custom HOC_MDXContent
-          let [mdxContent] = ast.body.splice(mdxContentIndex, 1) as any
-
-          // In MDX3 MDXContent is directly exported as export default when `outputFormat: 'program'` is specified
-          if (mdxContent.type === 'ExportDefaultDeclaration') {
-            mdxContent = mdxContent.declaration
-          }
-
-          const mdxContentArgument = mdxContent.body.body[0].argument
-
-          file.data.hasMdxLayout =
-            !!mdxContentArgument &&
-            mdxContentArgument.openingElement.name.name === 'MDXLayout'
-        }) satisfies Plugin<[], Program>,
+        recmaRewrite,
         isRemoteContent ? recmaRewriteFunctionBody : recmaRewriteJsx
       ].filter(v => !!v)
     })

packages/nextra/src/server/constants.ts

@@ -22,6 +22,4 @@ export const DEFAULT_PROPERTY_PROPS = {
   computed: false
 } satisfies Omit<Property, 'key' | 'value'>
 
-export const TOC_HEADING_RE = /^h[2-6]$/
-
 export const METADATA_ONLY_RQ = '?metadata'

packages/nextra/src/server/index.ts

@@ -15,9 +15,7 @@ const DEFAULT_EXTENSIONS = ['js', 'jsx', 'ts', 'tsx'] as const
 
 const FILENAME = fileURLToPath(import.meta.url)
 
-const DIRNAME = path.dirname(FILENAME)
-
-const LOADER_PATH = path.join(DIRNAME, '..', '..', 'loader.cjs')
+const LOADER_PATH = path.join(FILENAME, '..', '..', '..', 'loader.cjs')
 
 const SEP = path.sep === '/' ? '/' : '\\\\'
 
@@ -143,8 +141,10 @@ const nextra: Nextra = nextraConfig => {
             )
           }
         }
-        config.resolve.alias['private-next-content-dir'] =
-          `private-next-root-dir/${contentDir}`
+        config.resolve.alias['private-next-content-dir'] = [
+          'private-next-root-dir/content',
+          'private-next-root-dir/src/content'
+        ]
         config.resolve.alias['next-mdx-import-source-file'] = [
           'private-next-root-dir/mdx-components',
           'private-next-root-dir/src/mdx-components'

packages/nextra/src/server/loader.ts

@@ -197,16 +197,16 @@ ${locales
 async function getLastCommitTime(
   filePath: string
 ): Promise<number | undefined> {
+  const relativePath = path.relative(GIT_ROOT, filePath)
   try {
     if (!repository) {
       throw new Error('Init git repository failed')
     }
-    const relativePath = path.relative(GIT_ROOT, filePath)
     return await repository.getFileLatestModifiedDateAsync(relativePath)
   } catch {
     logger.warn(
       'Failed to get the last modified timestamp from Git for the file',
-      filePath
+      relativePath
     )
   }
 }

packages/nextra/src/server/recma-plugins/index.ts

@@ -1,2 +1,3 @@
 export { recmaRewriteJsx } from './recma-rewrite-jsx.js'
 export { recmaRewriteFunctionBody } from './recma-rewrite-function-body.js'
+export { recmaRewrite } from './recma-rewrite.js'

packages/nextra/src/server/recma-plugins/recma-rewrite-jsx.ts

@@ -1,8 +1,5 @@
 import type { FunctionDeclaration, Program } from 'estree'
-import type { JsxAttribute } from 'estree-util-to-js/lib/jsx'
 import type { Plugin } from 'unified'
-import { visit } from 'unist-util-visit'
-import { TOC_HEADING_RE } from '../constants.js'
 
 export const recmaRewriteJsx: Plugin<[], Program> =
   () => (ast: Program, file) => {
@@ -29,67 +26,4 @@ export const recmaRewriteJsx: Plugin<[], Program> =
     }
 
     createMdxContent.id.name = 'MDXLayout'
-
-    const tocProperties = file.data.toc as (
-      | { properties: { id: string } }
-      | string
-    )[]
-
-    // Do not add `const toc = [`
-    if (!tocProperties.length) return
-
-    const returnStatement = createMdxContent.body.body.find(
-      o => o.type === 'ReturnStatement'
-    )!
-
-    const { argument } = returnStatement as any
-
-    // if return statements doesn't wrap in fragment children will be []
-    const returnBody = argument.children.length ? argument.children : [argument]
-
-    visit({ children: returnBody }, 'JSXElement', (heading: any) => {
-      const { openingElement } = heading
-      const name = openingElement?.name.property?.name
-      const isHeading = name && TOC_HEADING_RE.test(name)
-      if (!isHeading) return
-
-      const idNode = openingElement.attributes.find(
-        (attr: JsxAttribute) => attr.name.name === 'id'
-      )
-      if (!idNode) return
-
-      const id = idNode.value.value
-
-      const foundIndex = tocProperties.findIndex(node => {
-        if (typeof node === 'string') return
-        return node.properties.id === id
-      })
-
-      if (foundIndex === -1) return
-      idNode.value = {
-        type: 'JSXExpressionContainer',
-        expression: {
-          type: 'Identifier',
-          name: `toc[${foundIndex}].id`
-        }
-      }
-
-      delete openingElement.selfClosing
-      heading.children = [
-        {
-          type: 'JSXExpressionContainer',
-          expression: {
-            type: 'Identifier',
-            name: `toc[${foundIndex}].value`
-          }
-        }
-      ]
-      heading.closingElement = {
-        ...openingElement,
-        type: 'JSXClosingElement',
-        attributes: []
-      }
-    })
-
-    createMdxContent.params = [{ type: 'Identifier', name: 'props' }]
   }

packages/nextra/src/server/recma-plugins/recma-rewrite.ts

@@ -0,0 +1,27 @@
+import type { Program } from 'estree'
+import type { Plugin } from 'unified'
+
+export const recmaRewrite: Plugin<[], Program> = () => (ast: Program, file) => {
+  const mdxContentIndex = ast.body.findIndex(node => {
+    if (node.type === 'ExportDefaultDeclaration') {
+      return (node.declaration as any).id.name === 'MDXContent'
+    }
+    if (node.type === 'FunctionDeclaration') {
+      return node.id.name === 'MDXContent'
+    }
+  })
+
+  // Remove `MDXContent` since we use custom HOC_MDXContent
+  let [mdxContent] = ast.body.splice(mdxContentIndex, 1) as any
+
+  // In MDX3 MDXContent is directly exported as export default when `outputFormat: 'program'` is specified
+  if (mdxContent.type === 'ExportDefaultDeclaration') {
+    mdxContent = mdxContent.declaration
+  }
+
+  const mdxContentArgument = mdxContent.body.body[0].argument
+
+  file.data.hasMdxLayout =
+    !!mdxContentArgument &&
+    mdxContentArgument.openingElement.name.name === 'MDXLayout'
+}