fix bug + add client/server output mismatch tests

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

@@ -77,10 +77,10 @@ exports[`directives remark plugin - server 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/__tests__/index.test.ts

@@ -87,3 +87,25 @@ describe('directives remark plugin - server compiler', () => {
     expect(consoleMock).toHaveBeenCalledTimes(0);
   });
 });
+
+describe('directives remark plugin - client result === server result', () => {
+  // It is important that client/server outputs are exactly the same
+  // otherwise React hydration mismatches can occur
+  async function testSameResult(name: string) {
+    const resultClient = await processFixture(name, {compilerName: 'client'});
+    const resultServer = await processFixture(name, {compilerName: 'server'});
+    expect(resultClient).toEqual(resultServer);
+  }
+
+  it('for containerDirectives', async () => {
+    await testSameResult('containerDirectives');
+  });
+
+  it('for leafDirectives', async () => {
+    await testSameResult('leafDirectives');
+  });
+
+  it('for textDirectives', async () => {
+    await testSameResult('textDirectives');
+  });
+});

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

@@ -83,6 +83,22 @@ ${warningMessages}
 Your content might render in an unexpected way. Visit ${customSupportUrl} to find out why and how to fix it.`;
 }
 
+function logUnusedDirectivesWarning({
+  directives,
+  filePath,
+}: {
+  directives: Directive[];
+  filePath: string;
+}) {
+  if (directives.length > 0) {
+    const message = formatUnusedDirectivesMessage({
+      directives,
+      filePath,
+    });
+    logger.warn(message);
+  }
+}
+
 function isTextDirective(directive: Directive): directive is TextDirective {
   return directive.type === 'textDirective';
 }
@@ -117,13 +133,6 @@ function isUnusedDirective(directive: Directive) {
 
 const plugin: Plugin = function plugin(this: Processor): Transformer {
   return (tree, file) => {
-    // We only enable these warnings for the client compiler
-    // This avoids emitting duplicate warnings in prod mode
-    // Note: the client compiler is used in both dev/prod modes
-    if (file.data.compilerName !== 'client') {
-      return;
-    }
-
     const unusedDirectives: Directive[] = [];
 
     visit<Parent>(tree, directiveTypes, (directive: Directive) => {
@@ -138,12 +147,14 @@ const plugin: Plugin = function plugin(this: Processor): Transformer {
       }
     });
 
-    if (unusedDirectives.length > 0) {
-      const message = formatUnusedDirectivesMessage({
+    // We only enable these warnings for the client compiler
+    // This avoids emitting duplicate warnings in prod mode
+    // Note: the client compiler is used in both dev/prod modes
+    if (file.data.compilerName === 'client') {
+      logUnusedDirectivesWarning({
         directives: unusedDirectives,
         filePath: file.path,
       });
-      logger.warn(message);
     }
   };
 };