fixes heading issues (#2199)

.changeset/modern-snakes-taste.md

@@ -0,0 +1,8 @@
+---
+'nextra': minor
+'nextra-theme-docs': minor
+---
+
+- show headings for partial md/mdx in toc 
+
+- hide headings in toc when parent `<Tab />` or `<Tabs.Tab />`

.gitignore

@@ -16,3 +16,5 @@ packages/nextra-theme-*/style.css
 .idea/
 .eslintcache
 .env
+
+tsup.config.bundled*

examples/blog/package.json

@@ -10,7 +10,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^13.4.8",
+    "next": "^13.4.19",
     "nextra": "workspace:*",
     "nextra-theme-blog": "workspace:*",
     "react": "^18.2.0",

examples/docs/package.json

@@ -9,7 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^13.4.8",
+    "next": "^13.4.19",
     "nextra": "workspace:*",
     "nextra-theme-docs": "workspace:*",
     "react": "*",

examples/swr-site/package.json

@@ -16,7 +16,7 @@
     "intersection-observer": "^0.10.0",
     "isomorphic-git": "1.21.0",
     "markdown-to-jsx": "^6.11.4",
-    "next": "^13.4.8",
+    "next": "^13.4.19",
     "nextra": "workspace:*",
     "nextra-theme-docs": "workspace:*",
     "react": "^18.2.0",

examples/swr-site/pages/foo.en-US.md

@@ -7,18 +7,6 @@
 
 ## after
 
-<div onmouseover="alert('alpha')">
-  <a href="jAva script:alert('bravo')">delta</a>
-  <img src="x" onerror="alert('charlie')">
-  <iframe src="javascript:alert('delta')"></iframe>
-  <math>
-    <mi xlink:href="data:x,<script>alert('echo')</script>"></mi>
-  </math>
-</div>
-<script>
-require('child_process').spawn('echo', ['hack!']);
-</script>
-
 ```sh npm2yarn
 npm i @graphql-eslint/eslint-plugin
 ```

package.json

@@ -45,7 +45,7 @@
   },
   "pnpm": {
     "overrides": {
-      "vitest": "^0.27.1",
+      "vitest": "^0.29.8",
       "react": "^18.2.0",
       "react-dom": "^18.2.0",
       "@mdx-js/react": "^2.3.0",

packages/nextra-theme-blog/package.json

@@ -69,7 +69,7 @@
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "concurrently": "^8.0.0",
-    "next": "^13.4.8",
+    "next": "^13.4.19",
     "nextra": "workspace:*",
     "postcss": "^8.4.28",
     "postcss-cli": "^10.1.0",

packages/nextra-theme-docs/package.json

@@ -61,7 +61,7 @@
     "@vitejs/plugin-react": "^3.0.1",
     "concurrently": "^8.0.0",
     "jsdom": "^22.0.0",
-    "next": "^13.4.8",
+    "next": "^13.4.19",
     "nextra": "workspace:*",
     "postcss": "^8.4.28",
     "postcss-cli": "^10.1.0",

packages/nextra/__test__/__snapshots__/compile.test.ts.snap

@@ -1,17 +1,15 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Process heading > code-h1 1`] = `
 {
   "frontMatter": {},
-  "headings": [
-    {
-      "depth": 1,
-      "id": "codegenyml",
-      "value": "codegen.yml",
-    },
-  ],
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+export const __headings = [{
+  depth: 1,
+  value: \\"codegen.yml\\",
+  id: \\"codegenyml\\"
+}];
 function _createMdxContent(props) {
   const _components = Object.assign({
     h1: \\"h1\\",
@@ -25,23 +23,20 @@ function MDXContent(props = {}) {
 }
 export default MDXContent;
 ",
-  "searchIndexKey": null,
   "title": "codegen.yml",
 }
 `;
 
 exports[`Process heading > code-with-text-h1 1`] = `
 {
   "frontMatter": {},
-  "headings": [
-    {
-      "depth": 1,
-      "id": "codegenyml-file",
-      "value": "codegen.yml file",
-    },
-  ],
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+export const __headings = [{
+  depth: 1,
+  value: \\"codegen.yml file\\",
+  id: \\"codegenyml-file\\"
+}];
 function _createMdxContent(props) {
   const _components = Object.assign({
     h1: \\"h1\\",
@@ -55,7 +50,6 @@ function MDXContent(props = {}) {
 }
 export default MDXContent;
 ",
-  "searchIndexKey": null,
   "title": "codegen.yml file",
 }
 `;
@@ -64,20 +58,18 @@ exports[`Process heading > dynamic-h1 1`] = `
 {
   "frontMatter": {},
   "hasJsxInH1": true,
-  "headings": [
-    {
-      "depth": 1,
-      "id": "posts-tagged-with-",
-      "value": "Posts Tagged with “”",
-    },
-  ],
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
 import {useRouter} from 'next/router';
 export const TagName = () => {
   const {tag} = useRouter().query;
   return tag || null;
 };
+export const __headings = [{
+  depth: 1,
+  value: \\"Posts Tagged with “”\\",
+  id: \\"posts-tagged-with-\\"
+}];
 function _createMdxContent(props) {
   const _components = Object.assign({
     h1: \\"h1\\"
@@ -90,23 +82,20 @@ function MDXContent(props = {}) {
 }
 export default MDXContent;
 ",
-  "searchIndexKey": null,
   "title": "Posts Tagged with “”",
 }
 `;
 
 exports[`Process heading > no-h1 1`] = `
 {
   "frontMatter": {},
-  "headings": [
-    {
-      "depth": 2,
-      "id": "h2",
-      "value": "H2",
-    },
-  ],
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+export const __headings = [{
+  depth: 2,
+  value: \\"H2\\",
+  id: \\"h2\\"
+}];
 function _createMdxContent(props) {
   const _components = Object.assign({
     h2: \\"h2\\"
@@ -119,22 +108,19 @@ function MDXContent(props = {}) {
 }
 export default MDXContent;
 ",
-  "searchIndexKey": null,
 }
 `;
 
 exports[`Process heading > static-h1 1`] = `
 {
   "frontMatter": {},
-  "headings": [
-    {
-      "depth": 1,
-      "id": "hello-world",
-      "value": "Hello World",
-    },
-  ],
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+export const __headings = [{
+  depth: 1,
+  value: \\"Hello World\\",
+  id: \\"hello-world\\"
+}];
 function _createMdxContent(props) {
   const _components = Object.assign({
     h1: \\"h1\\"
@@ -147,7 +133,6 @@ function MDXContent(props = {}) {
 }
 export default MDXContent;
 ",
-  "searchIndexKey": null,
   "title": "Hello World",
 }
 `;

packages/nextra/__test__/__snapshots__/context.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`context > getAllPages() > should work 1`] = `
 [

packages/nextra/__test__/__snapshots__/normalize-page.spec.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`normalize-page > /404 page 1`] = `
 {

packages/nextra/__test__/__snapshots__/page-map.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Page Process > pageMap en-US 1`] = `
 [

packages/nextra/__test__/collect-catch-all.test.ts

@@ -1,4 +1,3 @@
-import { describe, expect, it } from 'vitest'
 import { createCatchAllMeta } from '../src/catch-all'
 import { collectCatchAllRoutes } from '../src/setup-page'
 

packages/nextra/__test__/compile.test.ts

@@ -1,6 +1,5 @@
 import fs from 'node:fs/promises'
 import path from 'node:path'
-import { describe, expect, it } from 'vitest'
 import { compileMdx } from '../src/compile'
 import { CWD } from '../src/constants'
 
@@ -77,6 +76,80 @@ describe('Process heading', () => {
     const { result } = await compileMdx(`### My Header`, { mdxOptions })
     expect(result).toMatch(`<_components.h3 id="my-header">{"My Header"}`)
   })
+
+  it('should merge headings from partial components', async () => {
+    const { result } = await compileMdx(
+      `
+import FromMdx from './one.mdx'
+import FromMarkdown from './two.md'
+import IgnoreMe from './foo'
+
+## ❤️
+
+<FromMdx />
+
+## ✅
+
+<FromMarkdown />
+
+import Last from './three.mdx'
+
+<Last />
+
+<IgnoreMe />
+
+## 👋`,
+      { mdxOptions }
+    )
+    expect(result).toMatchInlineSnapshot(`
+      "/*@jsxRuntime automatic @jsxImportSource react*/
+      import {useMDXComponents as _provideComponents} from \\"nextra/mdx\\";
+      import FromMdx, {__headings as __headings0} from './one.mdx';
+      import FromMarkdown, {__headings as __headings1} from './two.md';
+      import IgnoreMe from './foo';
+      import Last, {__headings as __headings2} from './three.mdx';
+      export const __headings = [{
+        depth: 2,
+        value: \\"❤️\\",
+        id: \\"️\\"
+      }, ...__headings0, {
+        depth: 2,
+        value: \\"✅\\",
+        id: \\"\\"
+      }, ...__headings1, ...__headings2, {
+        depth: 2,
+        value: \\"👋\\",
+        id: \\"-1\\"
+      }];
+      function _createMdxContent(props) {
+        const _components = Object.assign({
+          h2: \\"h2\\"
+        }, _provideComponents(), props.components);
+        return <><_components.h2 id=\\"️\\">{\\"❤️\\"}</_components.h2>{\\"\\\\n\\"}<FromMdx />{\\"\\\\n\\"}<_components.h2 id=\\"\\">{\\"✅\\"}</_components.h2>{\\"\\\\n\\"}<FromMarkdown />{\\"\\\\n\\"}{\\"\\\\n\\"}<Last />{\\"\\\\n\\"}<IgnoreMe />{\\"\\\\n\\"}<_components.h2 id=\\"-1\\">{\\"👋\\"}</_components.h2></>;
+      }
+      function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
+        return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
+      }
+      export default MDXContent;
+      "
+    `)
+  })
+  it('should not attach headings with parent Tab or Tabs.Tab', async () => {
+    const { result } = await compileMdx(
+      `
+<Tab>
+ ## hello
+</Tab>
+
+<Tabs.Tab>
+  ## World
+</Tabs.Tab>
+`,
+      { mdxOptions }
+    )
+    expect(result).toMatch('export const __headings = [];')
+  })
 })
 
 describe('Link', () => {

packages/nextra/__test__/context.test.ts

@@ -1,5 +1,4 @@
 import path from 'node:path'
-import { beforeAll, describe, expect, it } from 'vitest'
 import { CWD, NEXTRA_INTERNAL } from '../src/constants'
 import {
   getAllPages,

packages/nextra/__test__/loader.test.ts

@@ -1,6 +1,5 @@
 import fs from 'node:fs/promises'
 import path from 'node:path'
-import { describe, expect, it } from 'vitest'
 import { CWD } from '../src/constants'
 
 describe('tree shaking', async () => {

packages/nextra/__test__/locale-with-base-path.test.ts

@@ -5,7 +5,6 @@ process.env.__NEXT_ROUTER_BASEPATH = '/testBasePath'
 
 import { NextRequest } from 'next/server'
 import type NextServer from 'next/server'
-import { describe, expect, it, vi } from 'vitest'
 import { locales as originalLocales } from '../src/locales'
 
 vi.mock('next/server', async () => {

packages/nextra/__test__/locale.test.ts

@@ -1,6 +1,5 @@
 import { NextRequest } from 'next/server'
 import type NextServer from 'next/server'
-import { describe, expect, it, vi } from 'vitest'
 import { locales as originalLocales } from '../src/locales'
 
 vi.mock('next/server', async () => {

packages/nextra/__test__/normalize-page.spec.ts

@@ -1,4 +1,3 @@
-import { describe, expect, it } from 'vitest'
 import { normalizePages } from '../src/normalize-pages'
 import { cnPageMap, usPageMap } from './fixture/page-maps/pageMap'
 

packages/nextra/__test__/page-map.test.ts

@@ -1,5 +1,4 @@
 import path from 'node:path'
-import { beforeAll, describe, expect, it } from 'vitest'
 import { CWD } from '../src/constants'
 import { getDynamicMeta, resolvePageMap } from '../src/page-map'
 import { collectFiles } from '../src/plugin'

packages/nextra/__test__/sort-pages.test.ts

@@ -1,4 +1,3 @@
-import { describe, expect, it } from 'vitest'
 import { sortPages } from '../src/utils'
 
 const kind = 'MdxPage'