Implement unused simple text directive re-serialization

packages/docusaurus-mdx-loader/src/remark/unusedDirectives/__tests__/__snapshots__/index.test.ts.snap

@@ -38,11 +38,9 @@ exports[`directives remark plugin - client compiler default behavior for leaf di
 exports[`directives remark plugin - client compiler default behavior for text directives: console 1`] = `
 [
   [
-    "[WARNING] Docusaurus found 4 unused Markdown directives in file "packages/docusaurus-mdx-loader/src/remark/unusedDirectives/__tests__/__fixtures__/textDirectives.md"
-- :textDirective2 (7:7)
+    "[WARNING] Docusaurus found 2 unused Markdown directives in file "packages/docusaurus-mdx-loader/src/remark/unusedDirectives/__tests__/__fixtures__/textDirectives.md"
 - :textDirective3 (9:7)
 - :textDirective4 (11:7)
-- :textDirective5 (13:7)
 Your content might render in an unexpected way. Visit https://github.com/facebook/docusaurus/pull/9394 to find out why and how to fix it.",
   ],
 ]
@@ -52,10 +50,10 @@ exports[`directives remark plugin - client compiler default behavior for text di
 "<p>Simple: textDirective1</p>
 <pre><code class="language-sh">Simple: textDirectiveCode
 </code></pre>
-<p>Simple<div></div></p>
+<p>Simple:textDirective2</p>
 <p>Simple<div>label</div></p>
 <p>Simple<div></div></p>
-<p>Simple<div></div></p>
+<p>Simple:textDirective5</p>
 <pre><code class="language-sh">Simple:textDirectiveCode
 </code></pre>"
 `;

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

@@ -9,6 +9,8 @@ import process from 'process';
 import visit from 'unist-util-visit';
 import logger from '@docusaurus/logger';
 import {posixPath} from '@docusaurus/utils';
+import {transformNode} from '../utils';
+
 // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import type {Transformer, Processor, Parent} from 'unified';
 import type {
@@ -94,11 +96,24 @@ function isSimpleTextDirective(
     const hasAttributes = Object.keys(directive.attributes ?? {}).length > 0;
     // Children in MDAST = Directive label
     const hasChildren = directive.children.length > 0;
-    return hasAttributes || hasChildren;
+    return !hasAttributes && !hasChildren;
   }
   return false;
 }
 
+function transformSimpleTextDirectiveToString(textDirective: Directive) {
+  transformNode(textDirective, {
+    type: 'text',
+    value: `:${textDirective.name}`, // We ignore label/props on purpose here
+  });
+}
+
+function isUnusedDirective(directive: Directive) {
+  // If directive data is set (notably hName/hProperties set by admonitions)
+  // this usually means the directive has been handled by another plugin
+  return !directive.data;
+}
+
 const plugin: Plugin = function plugin(this: Processor): Transformer {
   return (tree, file) => {
     // We only enable these warnings for the client compiler
@@ -113,10 +128,9 @@ const plugin: Plugin = function plugin(this: Processor): Transformer {
     visit<Parent>(tree, directiveTypes, (directive: Directive) => {
       // If directive data is set (notably hName/hProperties set by admonitions)
       // this usually means the directive has been handled by another plugin
-      if (!directive.data) {
+      if (isUnusedDirective(directive)) {
         if (isSimpleTextDirective(directive)) {
-          // TODO !
-          unusedDirectives.push(directive);
+          transformSimpleTextDirectiveToString(directive);
         } else {
           unusedDirectives.push(directive);
         }

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

@@ -6,7 +6,7 @@
  */
 
 import escapeHtml from 'escape-html';
-import type {Parent} from 'unist';
+import type {Parent, Node} from 'unist';
 import type {PhrasingContent, Heading} from 'mdast';
 import type {
   MdxJsxAttribute,
@@ -15,6 +15,27 @@ import type {
   // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 } from 'mdast-util-mdx';
 
+/**
+ * Util to transform one node type to another node type
+ * The input node is mutated in place
+ * @param node the node to mutate
+ * @param newNode what the original node should become become
+ */
+export function transformNode<NewNode extends Node>(
+  node: Node,
+  newNode: NewNode,
+): NewNode {
+  Object.keys(node).forEach((key) => {
+    // @ts-expect-error: unsafe but ok
+    delete node[key];
+  });
+  Object.keys(newNode).forEach((key) => {
+    // @ts-expect-error: unsafe but ok
+    node[key] = newNode[key];
+  });
+  return node as NewNode;
+}
+
 export function stringifyContent(
   node: Parent,
   toString: (param: unknown) => string, // TODO weird but works