refactor with iso behavior

Author: slorber

packages/docusaurus-mdx-loader/src/remark/toc/utils.ts

@@ -5,16 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {toValue} from '../utils';
-import type {Node} from 'unist';
-import type {MdxjsEsm} from 'mdast-util-mdx';
+import escapeHtml from 'escape-html';
+import type {Node, Parent} from 'unist';
+import type {
+  MdxjsEsm,
+  MdxJsxAttribute,
+  MdxJsxTextElement,
+} from 'mdast-util-mdx';
 import type {TOCHeading, TOCItem, TOCItems, TOCSlice} from './types';
 import type {
   Program,
   SpreadElement,
   ImportDeclaration,
   ImportSpecifier,
 } from 'estree';
+import type {Heading, PhrasingContent} from 'mdast';
 
 export function getImportDeclarations(program: Program): ImportDeclaration[] {
   return program.body.filter(
@@ -118,7 +123,7 @@ export async function createTOCExportNodeAST({
     const {toString} = await import('mdast-util-to-string');
     const {valueToEstree} = await import('estree-util-value-to-estree');
     const value: TOCItem = {
-      value: toValue(heading, toString),
+      value: toHeadingHTMLValue(heading, toString),
       id: heading.data!.id!,
       level: heading.depth,
     };
@@ -172,3 +177,67 @@ export async function createTOCExportNodeAST({
     },
   };
 }
+
+function stringifyChildren(
+  node: Parent,
+  toString: (param: unknown) => string, // TODO weird but works
+): string {
+  return (node.children as PhrasingContent[])
+    .map((item) => toHeadingHTMLValue(item, toString))
+    .join('');
+}
+
+// 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 weird but works
+): string {
+  const tag = element.name;
+
+  const attributes = element.attributes.filter(
+    (child): child is MdxJsxAttribute => child.type === 'mdxJsxAttribute',
+  );
+
+  const classAttribute =
+    attributes.find((attr) => attr.name === 'className') ??
+    attributes.find((attr) => attr.name === 'class');
+
+  const classAttributeString = classAttribute
+    ? `class="${escapeHtml(String(classAttribute.value))}"`
+    : ``;
+
+  const allAttributes = classAttributeString ? ` ${classAttributeString}` : '';
+
+  const content = stringifyChildren(element, toString);
+
+  return `<${tag}${allAttributes}>${content}</${tag}>`;
+}
+
+export function toHeadingHTMLValue(
+  node: PhrasingContent | Heading | MdxJsxTextElement,
+  toString: (param: unknown) => string, // TODO weird but works
+): string {
+  switch (node.type) {
+    case 'mdxJsxTextElement': {
+      return mdxJsxTextElementToHtml(node as MdxJsxTextElement, toString);
+    }
+    case 'text':
+      return escapeHtml(node.value);
+    case 'heading':
+      return stringifyChildren(node, toString);
+    case 'inlineCode':
+      return `<code>${escapeHtml(node.value)}</code>`;
+    case 'emphasis':
+      return `<em>${stringifyChildren(node, toString)}</em>`;
+    case 'strong':
+      return `<strong>${stringifyChildren(node, toString)}</strong>`;
+    case 'delete':
+      return `<del>${stringifyChildren(node, toString)}</del>`;
+    case 'link':
+      return stringifyChildren(node, toString);
+    default:
+      return toString(node);
+  }
+}

packages/docusaurus-mdx-loader/src/remark/utils/index.ts

@@ -5,14 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import escapeHtml from 'escape-html';
-import type {Parent, Node} from 'unist';
-import type {PhrasingContent, Heading} from 'mdast';
-import type {
-  MdxJsxAttribute,
-  MdxJsxAttributeValueExpression,
-  MdxJsxTextElement,
-} from 'mdast-util-mdx';
+import type {Node} from 'unist';
+import type {MdxJsxAttributeValueExpression} from 'mdast-util-mdx';
 
 /**
  * Util to transform one node type to another node type
@@ -35,70 +29,6 @@ export function transformNode<NewNode extends Node>(
   return node as NewNode;
 }
 
-export function stringifyContent(
-  node: Parent,
-  toString: (param: unknown) => string, // TODO weird but works
-): string {
-  return (node.children as PhrasingContent[])
-    .map((item) => toValue(item, toString))
-    .join('');
-}
-
-// 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 weird but works
-): string {
-  const tag = element.name;
-
-  const attributes = element.attributes.filter(
-    (child): child is MdxJsxAttribute => child.type === 'mdxJsxAttribute',
-  );
-
-  const classAttribute =
-    attributes.find((attr) => attr.name === 'className') ??
-    attributes.find((attr) => attr.name === 'class');
-
-  const classAttributeString = classAttribute
-    ? `class="${escapeHtml(String(classAttribute.value))}"`
-    : ``;
-
-  const allAttributes = classAttributeString ? ` ${classAttributeString}` : '';
-
-  const content = stringifyContent(element, toString);
-
-  return `<${tag}${allAttributes}>${content}</${tag}>`;
-}
-
-export function toValue(
-  node: PhrasingContent | Heading | MdxJsxTextElement,
-  toString: (param: unknown) => string, // TODO weird but works
-): string {
-  switch (node.type) {
-    case 'mdxJsxTextElement': {
-      return mdxJsxTextElementToHtml(node as MdxJsxTextElement, toString);
-    }
-    case 'text':
-      return escapeHtml(node.value);
-    case 'heading':
-      return stringifyContent(node, toString);
-    case 'inlineCode':
-      return `<code>${escapeHtml(node.value)}</code>`;
-    case 'emphasis':
-      return `<em>${stringifyContent(node, toString)}</em>`;
-    case 'strong':
-      return `<strong>${stringifyContent(node, toString)}</strong>`;
-    case 'delete':
-      return `<del>${stringifyContent(node, toString)}</del>`;
-    case 'link':
-      return stringifyContent(node, toString);
-    default:
-      return toString(node);
-  }
-}
-
 export function assetRequireAttributeValue(
   requireString: string,
   hash: string,