@docusaurus/mdx-loader 4.0.0-canary-6813 → 4.0.0-canary-6815

package/src/remark/toc/index.ts

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {visit} from 'unist-util-visit';
+import {toString} from 'mdast-util-to-string';
 import {
   addTocSliceImportIfNeeded,
   createTOCExportNodeAST,
@@ -41,18 +43,16 @@ function createTocSliceImportName({
   return `__${tocExportName}${componentName}`;
 }
 
-async function collectImportsExports({
+function collectImportsExports({
   root,
   tocExportName,
 }: {
   root: Root;
   tocExportName: string;
-}): Promise<{
+}): {
   markdownImports: MarkdownImports;
   existingTocExport: ExistingTOCExport;
-}> {
-  const {visit} = await import('unist-util-visit');
-
+} {
   const markdownImports = new Map<string, {declaration: ImportDeclaration}>();
   let existingTocExport: MdxjsEsm | null = null;
 
@@ -81,7 +81,7 @@ async function collectImportsExports({
   return {markdownImports, existingTocExport};
 }
 
-async function collectTOCItems({
+function collectTOCItems({
   root,
   tocExportName,
   markdownImports,
@@ -89,13 +89,10 @@ async function collectTOCItems({
   root: Root;
   tocExportName: string;
   markdownImports: MarkdownImports;
-}): Promise<{
+}): {
   // The toc items we collected in the tree
   tocItems: TOCItems;
-}> {
-  const {toString} = await import('mdast-util-to-string');
-  const {visit} = await import('unist-util-visit');
-
+} {
   const tocItems: TOCItems = [];
 
   visit(root, (child) => {
@@ -155,8 +152,8 @@ const plugin: Plugin<PluginOptions[], Root> = function plugin(
 ): Transformer<Root> {
   const tocExportName = options.name || 'toc';
 
-  return async (root) => {
-    const {markdownImports, existingTocExport} = await collectImportsExports({
+  return (root) => {
+    const {markdownImports, existingTocExport} = collectImportsExports({
       root,
       tocExportName,
     });
@@ -168,14 +165,14 @@ const plugin: Plugin<PluginOptions[], Root> = function plugin(
       return;
     }
 
-    const {tocItems} = await collectTOCItems({
+    const {tocItems} = collectTOCItems({
       root,
       tocExportName,
       markdownImports,
     });
 
     root.children.push(
-      await createTOCExportNodeAST({
+      createTOCExportNodeAST({
         tocExportName,
         tocItems,
       }),

package/src/remark/toc/utils.ts

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {toString} from 'mdast-util-to-string';
+import {valueToEstree} from 'estree-util-value-to-estree';
 import escapeHtml from 'escape-html';
 import type {Node, Parent} from 'unist';
 import type {
@@ -105,13 +107,13 @@ export function isNamedExport(
   return id.name === exportName;
 }
 
-export async function createTOCExportNodeAST({
+export function createTOCExportNodeAST({
   tocExportName,
   tocItems,
 }: {
   tocExportName: string;
   tocItems: TOCItems;
-}): Promise<MdxjsEsm> {
+}): MdxjsEsm {
   function createTOCSliceAST(tocSlice: TOCSlice): SpreadElement {
     return {
       type: 'SpreadElement',
@@ -119,18 +121,16 @@ export async function createTOCExportNodeAST({
     };
   }
 
-  async function createTOCHeadingAST({heading}: TOCHeading) {
-    const {toString} = await import('mdast-util-to-string');
-    const {valueToEstree} = await import('estree-util-value-to-estree');
+  function createTOCHeadingAST({heading}: TOCHeading) {
     const value: TOCItem = {
-      value: toHeadingHTMLValue(heading, toString),
+      value: toHeadingHTMLValue(heading),
       id: heading.data!.id!,
       level: heading.depth,
     };
     return valueToEstree(value);
   }
 
-  async function createTOCItemAST(tocItem: TOCItems[number]) {
+  function createTOCItemAST(tocItem: TOCItems[number]) {
     switch (tocItem.type) {
       case 'slice':
         return createTOCSliceAST(tocItem);
@@ -163,7 +163,7 @@ export async function createTOCExportNodeAST({
                   },
                   init: {
                     type: 'ArrayExpression',
-                    elements: await Promise.all(tocItems.map(createTOCItemAST)),
+                    elements: tocItems.map(createTOCItemAST),
                   },
                 },
               ],
@@ -179,12 +179,9 @@ export async function createTOCExportNodeAST({
   };
 }
 
-function stringifyChildren(
-  node: Parent,
-  toString: (param: unknown) => string, // TODO temporary, due to ESM
-): string {
+function stringifyChildren(node: Parent): string {
   return (node.children as PhrasingContent[])
-    .map((item) => toHeadingHTMLValue(item, toString))
+    .map(toHeadingHTMLValue)
     .join('')
     .trim();
 }
@@ -192,10 +189,7 @@ function stringifyChildren(
 // TODO This is really a workaround, and not super reliable
 // For now we only support serializing tagName, className and content
 // Can we implement the TOC with real JSX nodes instead of html strings later?
-function mdxJsxTextElementToHtml(
-  element: MdxJsxTextElement,
-  toString: (param: unknown) => string, // TODO temporary, due to ESM
-): string {
+function mdxJsxTextElementToHtml(element: MdxJsxTextElement): string {
   const tag = element.name;
 
   // See https://github.com/facebook/docusaurus/issues/11003#issuecomment-2733925363
@@ -217,33 +211,32 @@ function mdxJsxTextElementToHtml(
 
   const allAttributes = classAttributeString ? ` ${classAttributeString}` : '';
 
-  const content = stringifyChildren(element, toString);
+  const content = stringifyChildren(element);
 
   return `<${tag}${allAttributes}>${content}</${tag}>`;
 }
 
 export function toHeadingHTMLValue(
   node: PhrasingContent | Heading | MdxJsxTextElement,
-  toString: (param: unknown) => string, // TODO temporary, due to ESM
 ): string {
   switch (node.type) {
     case 'mdxJsxTextElement': {
-      return mdxJsxTextElementToHtml(node as MdxJsxTextElement, toString);
+      return mdxJsxTextElementToHtml(node as MdxJsxTextElement);
     }
     case 'text':
       return escapeHtml(node.value);
     case 'heading':
-      return stringifyChildren(node, toString);
+      return stringifyChildren(node);
     case 'inlineCode':
       return `<code>${escapeHtml(node.value)}</code>`;
     case 'emphasis':
-      return `<em>${stringifyChildren(node, toString)}</em>`;
+      return `<em>${stringifyChildren(node)}</em>`;
     case 'strong':
-      return `<strong>${stringifyChildren(node, toString)}</strong>`;
+      return `<strong>${stringifyChildren(node)}</strong>`;
     case 'delete':
-      return `<del>${stringifyChildren(node, toString)}</del>`;
+      return `<del>${stringifyChildren(node)}</del>`;
     case 'link':
-      return stringifyChildren(node, toString);
+      return stringifyChildren(node);
     default:
       return toString(node);
   }

package/src/remark/transformImage/index.ts

@@ -7,6 +7,7 @@
 
 import path from 'path';
 import fs from 'fs-extra';
+import {visit} from 'unist-util-visit';
 import {
   toMessageRelativeFilePath,
   posixPath,
@@ -246,8 +247,6 @@ const plugin: Plugin<PluginOptions[], Root> = function plugin(
   const onBrokenMarkdownImages = asFunction(options.onBrokenMarkdownImages);
 
   return async (root, vfile) => {
-    const {visit} = await import('unist-util-visit');
-
     const fileLoaderUtils = getFileLoaderUtils(
       vfile.data.compilerName === 'server',
     );

package/src/remark/transformLinks/index.ts

@@ -7,6 +7,7 @@
 
 import path from 'path';
 import fs from 'fs-extra';
+import {visit} from 'unist-util-visit';
 import {
   toMessageRelativeFilePath,
   posixPath,
@@ -86,7 +87,7 @@ Make sure it references a local Markdown file that exists within the current plu
 /**
  * Transforms the link node to a JSX `<a>` element with a `require()` call.
  */
-async function toAssetRequireNode(
+function toAssetRequireNode(
   [node]: Target,
   assetPath: string,
   context: Context,
@@ -241,7 +242,7 @@ async function processLinkNode(target: Target, context: Context) {
   );
 
   if (localFilePath) {
-    await toAssetRequireNode(target, localFilePath, context);
+    toAssetRequireNode(target, localFilePath, context);
   } else {
     // The @site alias is the only way to believe that the user wants an asset.
     if (hasSiteAlias) {
@@ -265,8 +266,6 @@ const plugin: Plugin<PluginOptions[], Root> = function plugin(
   const onBrokenMarkdownLinks = asFunction(options.onBrokenMarkdownLinks);
 
   return async (root, vfile) => {
-    const {visit} = await import('unist-util-visit');
-
     const fileLoaderUtils = getFileLoaderUtils(
       vfile.data.compilerName === 'server',
     );

package/src/remark/unusedDirectives/index.ts

@@ -6,6 +6,7 @@
  */
 import path from 'path';
 import process from 'process';
+import {visit} from 'unist-util-visit';
 import logger from '@docusaurus/logger';
 import {toMessageRelativeFilePath, posixPath} from '@docusaurus/utils';
 import {formatNodePositionExtraMessage, transformNode} from '../utils';
@@ -138,9 +139,7 @@ const plugin: Plugin<PluginOptions[], Root> = function plugin(
     options.onUnusedMarkdownDirectives,
   );
 
-  return async (tree, file) => {
-    const {visit} = await import('unist-util-visit');
-
+  return (tree, file) => {
     const unusedDirectives: Directives[] = [];
 
     // @ts-expect-error: TODO fix type