prevent duplicate logging of unused directives in prod build

packages/docusaurus-mdx-loader/src/loader.ts

@@ -11,8 +11,10 @@ import {
   parseFrontMatter,
   escapePath,
   getFileLoaderUtils,
+  getWebpackLoaderCompilerName,
 } from '@docusaurus/utils';
 import stringifyObject from 'stringify-object';
+import './vfile-datamap';
 import preprocessor from './preprocessor';
 import {validateMDXFrontMatter} from './frontMatter';
 import {createProcessorCached} from './processor';
@@ -134,10 +136,12 @@ export async function mdxLoader(
   this: LoaderContext<Options>,
   fileString: string,
 ): Promise<void> {
+  const compilerName = getWebpackLoaderCompilerName(this);
   const callback = this.async();
   const filePath = this.resourcePath;
   const reqOptions: Options = this.getOptions();
   const {query} = this;
+
   ensureMarkdownConfig(reqOptions);
 
   const {frontMatter} = parseFrontMatter(fileString);
@@ -165,6 +169,7 @@ export async function mdxLoader(
       content: preprocessedContent,
       filePath,
       frontMatter,
+      compilerName,
     });
   } catch (errorUnknown) {
     const error = errorUnknown as Error;

packages/docusaurus-mdx-loader/src/processor.ts

@@ -18,6 +18,7 @@ import transformAdmonitions from './remark/admonitions';
 import unusedDirectivesWarning from './remark/unusedDirectives';
 import codeCompatPlugin from './remark/mdx1Compat/codeCompatPlugin';
 import {getFormat} from './format';
+import type {WebpackCompilerName} from '@docusaurus/utils';
 import type {MDXFrontMatter} from './frontMatter';
 import type {Options} from './loader';
 import type {AdmonitionOptions} from './remark/admonitions';
@@ -38,10 +39,12 @@ type SimpleProcessor = {
     content,
     filePath,
     frontMatter,
+    compilerName,
   }: {
     content: string;
     filePath: string;
     frontMatter: {[key: string]: unknown};
+    compilerName: WebpackCompilerName;
   }) => Promise<SimpleProcessorResult>;
 };
 
@@ -169,12 +172,13 @@ async function createProcessorFactory() {
     });
 
     return {
-      process: async ({content, filePath, frontMatter}) => {
+      process: async ({content, filePath, frontMatter, compilerName}) => {
         const vfile = new VFile({
           value: content,
           path: filePath,
           data: {
             frontMatter,
+            compilerName,
           },
         });
         return mdxProcessor.process(vfile).then((result) => ({

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

@@ -35,6 +35,7 @@ const plugin: Plugin = function plugin(
     const {toString} = await import('mdast-util-to-string');
     visit(root, 'heading', (headingNode: Heading, index, parent) => {
       if (headingNode.depth === 1) {
+        vfile.data.compilerName;
         vfile.data.contentTitle = toString(headingNode);
         if (removeContentTitle) {
           parent!.children.splice(index, 1);

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

@@ -26,6 +26,13 @@ const directiveTypes = ['containerDirective', 'leafDirective', 'textDirective'];
 
 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: Array<{
       name: string;
       type: string;

packages/docusaurus-mdx-loader/src/vfile-datamap.mts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {WebpackCompilerName} from '@docusaurus/utils';
+
+declare module 'vfile' {
+  /*
+  This map registers the type of the data key of a VFile (TypeScript type).
+  This type can be augmented to register custom data types.
+  See https://github.com/vfile/vfile#datamap
+   */
+  interface DataMap {
+    frontMatter: {[key: string]: unknown};
+    compilerName: WebpackCompilerName;
+    contentTitle?: string;
+  }
+}

packages/docusaurus-utils/src/index.ts

@@ -98,7 +98,11 @@ export {
   createMatcher,
   createAbsoluteFilePathMatcher,
 } from './globUtils';
-export {getFileLoaderUtils} from './webpackUtils';
+export {
+  getFileLoaderUtils,
+  getWebpackLoaderCompilerName,
+  type WebpackCompilerName,
+} from './webpackUtils';
 export {escapeShellArg} from './shellUtils';
 export {
   getDataFilePath,

packages/docusaurus-utils/src/webpackUtils.ts

@@ -11,7 +11,25 @@ import {
   WEBPACK_URL_LOADER_LIMIT,
   OUTPUT_STATIC_ASSETS_DIR_NAME,
 } from './constants';
-import type {RuleSetRule} from 'webpack';
+import type {RuleSetRule, LoaderContext} from 'webpack';
+
+export type WebpackCompilerName = 'server' | 'client';
+
+export function getWebpackLoaderCompilerName(
+  context: LoaderContext<unknown>,
+): WebpackCompilerName {
+  // eslint-disable-next-line no-underscore-dangle
+  const compilerName = context._compiler?.name;
+  switch (compilerName) {
+    case 'server':
+    case 'client':
+      return compilerName;
+    default:
+      throw new Error(
+        `Cannot get valid Docusaurus webpack compiler name. Found compilerName=${compilerName}`,
+      );
+  }
+}
 
 type AssetFolder = 'images' | 'files' | 'fonts' | 'medias';
 

project-words.txt

@@ -63,6 +63,7 @@ dabit
 dabit
 daishi
 datagit
+datamap
 datas
 dbaeumer
 décembre