<Head />',
- id: 'head-',
- level: 2
- },
- {
- value: '<Head>Test</Head>',
- id: 'headtesthead',
- level: 3
- },
- {
- value: '<div />',
- id: 'div-',
- level: 2
- },
- {
- value: '<div> Test </div>',
- id: 'div-test-div',
- level: 2
- },
- {
- value: '<div><i>Test</i></div>',
- id: 'divitestidiv',
- level: 2
- },
- {
- value: '<div><i>Test</i></div>',
- id: 'divitestidiv-1',
- level: 2
- }
-]
-
-## \`<Head />",
+ "id": "head-",
+ "level": 2
+}, {
+ "value": "<Head>Test</Head>",
+ "id": "headtesthead",
+ "level": 3
+}, {
+ "value": "<div />",
+ "id": "div-",
+ "level": 2
+}, {
+ "value": "<div> Test </div>",
+ "id": "div-test-div",
+ "level": 2
+}, {
+ "value": "<div><i>Test</i></div>",
+ "id": "divitestidiv",
+ "level": 2
+}, {
+ "value": "<div><i>Test</i></div>",
+ "id": "divitestidiv-1",
+ "level": 2
+}];
+function _createMdxContent(props) {
+ const _components = {
+ a: "a",
+ code: "code",
+ h2: "h2",
+ h3: "h3",
+ ...props.components
+ };
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ id: "head-",
+ children: _jsx(_components.code, {
+ children: ""
+ })
+ }), "/n", _jsx(_components.h3, {
+ id: "headtesthead",
+ children: _jsx(_components.code, {
+ children: "Test"
+ })
+ }), "/n", _jsx(_components.h2, {
+ id: "div-",
+ children: _jsx(_components.code, {
+ children: ""
+ })
+ }), "/n", _jsx(_components.h2, {
+ id: "div-test-div",
+ children: _jsx(_components.code, {
+ children: "inline.code()',
- id: 'inlinecode',
- level: 2
- },
- {
- value: 'some styled heading test',
- id: 'some-styled-heading--test',
- level: 2
- }
-]
-
-## *Emphasis*
-
-### **Importance**
-
-## ~~Strikethrough~~
-
-## HTML
-
-## \`inline.code()\`
-
-## some styled heading test
+"import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+export const toc = [{
+ "value": "Emphasis",
+ "id": "emphasis",
+ "level": 2
+}, {
+ "value": "Importance",
+ "id": "importance",
+ "level": 3
+}, {
+ "value": "inline.code()",
+ "id": "inlinecode",
+ "level": 2
+}, {
+ "value": "some styled heading test",
+ "id": "some-styled-heading--test",
+ "level": 2
+}];
+function _createMdxContent(props) {
+ const _components = {
+ code: "code",
+ del: "del",
+ em: "em",
+ h2: "h2",
+ h3: "h3",
+ strong: "strong",
+ ...props.components
+ };
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ id: "emphasis",
+ children: _jsx(_components.em, {
+ children: "Emphasis"
+ })
+ }), "/n", _jsx(_components.h3, {
+ id: "importance",
+ children: _jsx(_components.strong, {
+ children: "Importance"
+ })
+ }), "/n", _jsx(_components.h2, {
+ id: "strikethrough",
+ children: _jsx(_components.del, {
+ children: "Strikethrough"
+ })
+ }), "/n", _jsx(_components.h2, {
+ id: "html",
+ children: _jsx("i", {
+ children: "HTML"
+ })
+ }), "/n", _jsx(_components.h2, {
+ id: "inlinecode",
+ children: _jsx(_components.code, {
+ children: "inline.code()"
+ })
+ }), "/n", _jsxs(_components.h2, {
+ id: "some-styled-heading--test",
+ children: ["some ", _jsx("span", {
+ className: "some-class",
+ style: {
+ border: "solid"
+ },
+ children: "styled"
+ }), " ", _jsx("strong", {
+ children: "heading"
+ }), " ", _jsx("span", {
+ class: "myClass",
+ className: "myClassName <> weird char",
+ "data-random-attr": "456"
+ }), " test"]
+ })]
+ });
+}
+export default function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = props.components || ({});
+ return MDXLayout ? _jsx(MDXLayout, {
+ ...props,
+ children: _jsx(_createMdxContent, {
+ ...props
+ })
+ }) : _createMdxContent(props);
+}
"
`;
exports[`toc remark plugin works on text content 1`] = `
-"export const toc = [
- {
- value: 'Endi',
- id: 'endi',
- level: 3
- },
- {
- value: 'Endi',
- id: 'endi-1',
- level: 2
- },
- {
- value: 'Yangshun',
- id: 'yangshun',
- level: 3
- },
- {
- value: 'I ♥ unicode.',
- id: 'i--unicode',
- level: 2
- }
-]
-
-### Endi
-
-\`\`\`md
-## This is ignored
-\`\`\`
-
-## Endi
-
-Lorem ipsum
-
-### Yangshun
+"import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+export const c = 1;
+export const toc = [{
+ "value": "Endi",
+ "id": "endi",
+ "level": 3
+}, {
+ "value": "Endi",
+ "id": "endi-1",
+ "level": 2
+}, {
+ "value": "Yangshun",
+ "id": "yangshun",
+ "level": 3
+}, {
+ "value": "I ♥ unicode.",
+ "id": "i--unicode",
+ "level": 2
+}];
+function _createMdxContent(props) {
+ const _components = {
+ code: "code",
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ pre: "pre",
+ ...props.components
+ };
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h3, {
+ id: "endi",
+ children: "Endi"
+ }), "/n", _jsx(_components.pre, {
+ children: _jsx(_components.code, {
+ className: "language-md",
+ children: "## This is ignored/n"
+ })
+ }), "/n", _jsx(_components.h2, {
+ id: "endi-1",
+ children: "Endi"
+ }), "/n", _jsx(_components.p, {
+ children: "Lorem ipsum"
+ }), "/n", _jsx(_components.h3, {
+ id: "yangshun",
+ children: "Yangshun"
+ }), "/n", _jsx(_components.p, {
+ children: "Some content here"
+ }), "/n", _jsx(_components.h2, {
+ id: "i--unicode",
+ children: "I ♥ unicode."
+ })]
+ });
+}
+export default function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = props.components || ({});
+ return MDXLayout ? _jsx(MDXLayout, {
+ ...props,
+ children: _jsx(_createMdxContent, {
+ ...props
+ })
+ }) : _createMdxContent(props);
+}
+"
+`;
-Some content here
+exports[`toc remark plugin works with imported markdown 1`] = `
+"import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+import Partial1, {toc as __tocPartial1} from './_partial1.md';
+import SomeComponent from './SomeComponent';
+import Partial2, {toc as __tocPartial2} from './_partial2.md';
+import UnusedPartialImport from './_partial3.md';
+import DoesNotExist, {toc as __tocDoesNotExist} from './_doesNotExist.md';
+export const toc = [{
+ "value": "Index section 1",
+ "id": "index-section-1",
+ "level": 2
+}, ...__tocPartial1, {
+ "value": "Index section 2",
+ "id": "index-section-2",
+ "level": 2
+}, ...__tocPartial2, {
+ "value": "Unused partials",
+ "id": "unused-partials",
+ "level": 2
+}, {
+ "value": "NonExisting Partials",
+ "id": "nonexisting-partials",
+ "level": 2
+}, ...__tocDoesNotExist, {
+ "value": "Duplicate partials",
+ "id": "duplicate-partials",
+ "level": 2
+}, ...__tocPartial1, ...__tocPartial1];
+function _createMdxContent(props) {
+ const _components = {
+ h1: "h1",
+ h2: "h2",
+ p: "p",
+ ...props.components
+ };
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h1, {
+ id: "index",
+ children: "Index"
+ }), "/n", _jsx(_components.p, {
+ children: "Some text"
+ }), "/n", "/n", _jsx(_components.h2, {
+ id: "index-section-1",
+ children: "Index section 1"
+ }), "/n", _jsx(_components.p, {
+ children: "Foo"
+ }), "/n", _jsx(Partial1, {}), "/n", _jsx(_components.p, {
+ children: "Some text"
+ }), "/n", _jsx(SomeComponent, {}), "/n", _jsx(_components.h2, {
+ id: "index-section-2",
+ children: "Index section 2"
+ }), "/n", _jsx(Partial2, {}), "/n", _jsx(_components.h2, {
+ id: "unused-partials",
+ children: "Unused partials"
+ }), "/n", _jsx(_components.p, {
+ children: "Unused partials (that are only imported but not rendered) shouldn't alter the TOC"
+ }), "/n", "/n", _jsx(_components.h2, {
+ id: "nonexisting-partials",
+ children: "NonExisting Partials"
+ }), "/n", _jsx(_components.p, {
+ children: "Partials that do not exist should alter the TOC"
+ }), "/n", _jsx(_components.p, {
+ children: "It's not the responsibility of the Remark plugin to check for their existence"
+ }), "/n", "/n", _jsx(DoesNotExist, {}), "/n", _jsx(_components.h2, {
+ id: "duplicate-partials",
+ children: "Duplicate partials"
+ }), "/n", _jsx(_components.p, {
+ children: "It's fine if we use partials at the end"
+ }), "/n", _jsx(Partial1, {}), "/n", _jsx(_components.p, {
+ children: "And we can use the partial multiple times!"
+ }), "/n", _jsx(Partial1, {})]
+ });
+}
+export default function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = props.components || ({});
+ return MDXLayout ? _jsx(MDXLayout, {
+ ...props,
+ children: _jsx(_createMdxContent, {
+ ...props
+ })
+ }) : _createMdxContent(props);
+}
+"
+`;
-## I ♥ unicode.
+exports[`toc remark plugin works with partial imported after its usage 1`] = `
+"import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+import Partial, {toc as __tocPartial} from './_partial.md';
+export const toc = [...__tocPartial];
+function _createMdxContent(props) {
+ const _components = {
+ h1: "h1",
+ p: "p",
+ ...props.components
+ };
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h1, {
+ id: "partial-used-before-import",
+ children: "Partial used before import"
+ }), "/n", _jsx(_components.p, {
+ children: "While it looks weird to import after usage, this remains valid MDX usage."
+ }), "/n", _jsx(Partial, {})]
+ });
+}
+export default function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = props.components || ({});
+ return MDXLayout ? _jsx(MDXLayout, {
+ ...props,
+ children: _jsx(_createMdxContent, {
+ ...props
+ })
+ }) : _createMdxContent(props);
+}
+"
+`;
-export const c = 1;
+exports[`toc remark plugin works with partials importing other partials 1`] = `
+"import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+import Partial2Nested, {toc as __tocPartial2Nested} from './partial2-nested.md';
+export const toc = [{
+ "value": "Partial 2",
+ "id": "partial-2",
+ "level": 2
+}, {
+ "value": "Partial 2 Sub Heading",
+ "id": "partial-2-sub-heading",
+ "level": 3
+}, ...__tocPartial2Nested];
+function _createMdxContent(props) {
+ const _components = {
+ h2: "h2",
+ h3: "h3",
+ p: "p",
+ ...props.components
+ };
+ return _jsxs(_Fragment, {
+ children: [_jsx(_components.h2, {
+ id: "partial-2",
+ children: "Partial 2"
+ }), "/n", _jsx(_components.p, {
+ children: "Partial 2"
+ }), "/n", _jsx(_components.h3, {
+ id: "partial-2-sub-heading",
+ children: "Partial 2 Sub Heading"
+ }), "/n", _jsx(_components.p, {
+ children: "Content"
+ }), "/n", "/n", _jsx(Partial2Nested, {})]
+ });
+}
+export default function MDXContent(props = {}) {
+ const {wrapper: MDXLayout} = props.components || ({});
+ return MDXLayout ? _jsx(MDXLayout, {
+ ...props,
+ children: _jsx(_createMdxContent, {
+ ...props
+ })
+ }) : _createMdxContent(props);
+}
"
`;
diff --git a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts
index 0468feea1d40..87bc5c6793dd 100644
--- a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts
+++ b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/index.test.ts
@@ -11,18 +11,23 @@ import plugin from '../index';
import headings from '../../headings/index';
const processFixture = async (name: string) => {
- const {remark} = await import('remark');
const {default: gfm} = await import('remark-gfm');
- const {default: mdx} = await import('remark-mdx');
- const filePath = path.join(__dirname, '__fixtures__', `${name}.md`);
+ const {compile} = await import('@mdx-js/mdx');
+
+ const filePath = path.join(
+ __dirname,
+ '__fixtures__',
+ name.endsWith('.mdx') ? name : `${name}.md`,
+ );
+
const file = await vfile.read(filePath);
- const result = await remark()
- .use(headings)
- .use(gfm)
- .use(mdx)
- .use(plugin)
- .process(file);
+
+ const result = await compile(file, {
+ format: 'mdx',
+ remarkPlugins: [headings, gfm, plugin],
+ rehypePlugins: [],
+ });
return result.value;
};
@@ -70,4 +75,21 @@ describe('toc remark plugin', () => {
const result = await processFixture('empty-headings');
expect(result).toMatchSnapshot();
});
+
+ it('works with imported markdown', async () => {
+ const result = await processFixture('partials/index.mdx');
+ expect(result).toMatchSnapshot();
+ });
+
+ it('works with partials importing other partials', async () => {
+ const result = await processFixture('partials/_partial2.mdx');
+ expect(result).toMatchSnapshot();
+ });
+
+ it('works with partial imported after its usage', async () => {
+ const result = await processFixture(
+ 'partials/partial-used-before-import.mdx',
+ );
+ expect(result).toMatchSnapshot();
+ });
});
diff --git a/packages/docusaurus-mdx-loader/src/remark/toc/index.ts b/packages/docusaurus-mdx-loader/src/remark/toc/index.ts
index 31081fb73b4f..e457e61bfb06 100644
--- a/packages/docusaurus-mdx-loader/src/remark/toc/index.ts
+++ b/packages/docusaurus-mdx-loader/src/remark/toc/index.ts
@@ -5,154 +5,183 @@
* LICENSE file in the root directory of this source tree.
*/
-import {parse, type ParserOptions} from '@babel/parser';
-import traverse from '@babel/traverse';
-import stringifyObject from 'stringify-object';
-import {toValue} from '../utils';
-import type {Identifier} from '@babel/types';
-import type {Node, Parent} from 'unist';
-import type {Heading, Literal} from 'mdast';
+import {
+ addTocSliceImportIfNeeded,
+ createTOCExportNodeAST,
+ findDefaultImportName,
+ getImportDeclarations,
+ isMarkdownImport,
+ isNamedExport,
+} from './utils';
+import type {Heading, Root} from 'mdast';
// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
import type {Transformer} from 'unified';
import type {
MdxjsEsm,
+ MdxJsxFlowElement,
// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
} from 'mdast-util-mdx';
-
-// TODO as of April 2023, no way to import/re-export this ESM type easily :/
-// TODO upgrade to TS 5.3
-// See https://github.com/microsoft/TypeScript/issues/49721#issuecomment-1517839391
-// import type {Plugin} from 'unified';
-type Plugin = any; // TODO fix this asap
-
-export type TOCItem = {
- readonly value: string;
- readonly id: string;
- readonly level: number;
-};
-
-const parseOptions: ParserOptions = {
- plugins: ['jsx'],
- sourceType: 'module',
-};
-
-const isImport = (child: any): child is Literal =>
- child.type === 'mdxjsEsm' && child.value.startsWith('import');
-const hasImports = (index: number) => index > -1;
-const isExport = (child: any): child is Literal =>
- child.type === 'mdxjsEsm' && child.value.startsWith('export');
+import type {TOCItems} from './types';
+import type {ImportDeclaration} from 'estree';
interface PluginOptions {
name?: string;
}
-const isTarget = (child: Literal, name: string) => {
- let found = false;
- const ast = parse(child.value, parseOptions);
- traverse(ast, {
- VariableDeclarator: (path) => {
- if ((path.node.id as Identifier).name === name) {
- found = true;
+// ComponentName (default export) => ImportDeclaration mapping
+type MarkdownImports = Map