chore: add eslint-plugin-react-compiler (#10969)

* install ESLint plugin * fix eslint CodeBlockLine error * eslint * eslint * eslint * refactor: apply lint autofix * empty --------- Co-authored-by: slorber <749374+slorber@users.noreply.github.com>
facebook · Mar 7, 2025 · 15b0ef6 · 15b0ef6
1 parent d33004d
commit 15b0ef6
Show file tree

Hide file tree

Showing 12 changed files with 136 additions and 61 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -60,6 +60,7 @@ module.exports = {
   },
   reportUnusedDisableDirectives: true,
   plugins: [
+    'react-compiler',
     'react-hooks',
     'header',
     'jest',
@@ -68,6 +69,7 @@ module.exports = {
     '@docusaurus',
   ],
   rules: {
+    'react-compiler/react-compiler': ERROR,
     'react/jsx-uses-react': OFF, // JSX runtime: automatic
     'react/react-in-jsx-scope': OFF, // JSX runtime: automatic
     'array-callback-return': WARNING,

diff --git a/package.json b/package.json
@@ -98,6 +98,7 @@
     "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-40c6c23-20250301",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-regexp": "^1.15.0",
     "husky": "^8.0.3",

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx
@@ -11,16 +11,29 @@ import type {Props} from '@theme/CodeBlock/Line';
 
 import styles from './styles.module.css';
 
+type Token = Props['line'][number];
+
+// Replaces '\n' by ''
+// Historical code, not sure why we even need this :/
+function fixLineBreak(line: Token[]) {
+  const singleLineBreakToken =
+    line.length === 1 && line[0]!.content === '\n' ? line[0] : undefined;
+
+  if (singleLineBreakToken) {
+    return [{...singleLineBreakToken, content: ''}];
+  }
+
+  return line;
+}
+
 export default function CodeBlockLine({
-  line,
+  line: lineProp,
   classNames,
   showLineNumbers,
   getLineProps,
   getTokenProps,
 }: Props): ReactNode {
-  if (line.length === 1 && line[0]!.content === '\n') {
-    line[0]!.content = '';
-  }
+  const line = fixLineBreak(lineProp);
 
   const lineProps = getLineProps({
     line,

diff --git a/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx b/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx
@@ -123,6 +123,7 @@ function useCollapseAnimation({
       return undefined;
     }
 
+    // eslint-disable-next-line react-compiler/react-compiler
     el.style.willChange = 'height';
 
     function startAnimation() {

diff --git a/packages/docusaurus-theme-common/src/index.ts b/packages/docusaurus-theme-common/src/index.ts
@@ -33,7 +33,7 @@ export function useDocsPreferredVersion(...args: unknown[]): unknown {
 export function useContextualSearchFilters() {
   const {i18n} = useDocusaurusContext();
   const docsTags =
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    // eslint-disable-next-line @typescript-eslint/no-var-requires, react-compiler/react-compiler
     require('@docusaurus/plugin-content-docs/client').useDocsContextualSearchTags();
   const tags = [DEFAULT_SEARCH_TAG, ...docsTags];
   return {locale: i18n.currentLocale, tags};

diff --git a/packages/docusaurus-theme-common/src/utils/reactUtils.tsx b/packages/docusaurus-theme-common/src/utils/reactUtils.tsx
@@ -50,6 +50,9 @@ export function usePrevious<T>(value: T): T | undefined {
     ref.current = value;
   });
 
+  // TODO need to fix this React Compiler lint error
+  //  probably requires changing the API though
+  // eslint-disable-next-line react-compiler/react-compiler
   return ref.current;
 }
 
@@ -81,7 +84,7 @@ export function useShallowMemoObject<O extends object>(obj: O): O {
   const deps = Object.entries(obj);
   // Sort by keys to make it order-insensitive
   deps.sort((a, b) => a[0].localeCompare(b[0]));
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  // eslint-disable-next-line react-compiler/react-compiler,react-hooks/exhaustive-deps
   return useMemo(() => obj, deps.flat());
 }
 

diff --git a/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx b/packages/docusaurus-theme-common/src/utils/scrollUtils.tsx
@@ -124,6 +124,7 @@ export function useScrollPosition(
     window.addEventListener('scroll', handleScroll, opts);
 
     return () => window.removeEventListener('scroll', handleScroll, opts);
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dynamicEffect, scrollEventsEnabledRef, ...deps]);
 }

diff --git a/packages/docusaurus-theme-common/src/utils/storageUtils.ts b/packages/docusaurus-theme-common/src/utils/storageUtils.ts
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useCallback, useRef, useSyncExternalStore} from 'react';
+import {useCallback, useState, useSyncExternalStore} from 'react';
 import SiteStorage from '@generated/site-storage';
 
 export type StorageType = (typeof SiteStorage)['type'] | 'none';
@@ -208,12 +208,12 @@ export function useStorageSlot(
   options?: {persistence?: StorageType},
 ): [string | null, StorageSlot] {
   // Not ideal but good enough: assumes storage slot config is constant
-  const storageSlot = useRef(() => {
+  const [storageSlot] = useState(() => {
     if (key === null) {
       return NoopStorageSlot;
     }
     return createStorageSlot(key, options);
-  }).current();
+  });
 
   const listen: StorageSlot['listen'] = useCallback(
     (onChange) => {

diff --git a/packages/docusaurus-theme-mermaid/src/client/index.ts b/packages/docusaurus-theme-mermaid/src/client/index.ts
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useState, useEffect, useMemo, useRef} from 'react';
+import {useState, useEffect, useMemo} from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
 import mermaid from 'mermaid';
 import type {RenderResult, MermaidConfig} from 'mermaid';
@@ -36,8 +36,12 @@ function useMermaidId(): string {
   Random client-only id, we don't care much but mermaid want an id so...
   Note: Mermaid doesn't like values provided by Rect.useId() and throws
   */
+
+  // TODO 2025-2026: check if useId() now works
+  //  It could work thanks to https://github.com/facebook/react/pull/32001
   // return useId(); // tried that, doesn't work ('#d:re:' is not a valid selector.)
-  return useRef(`mermaid-svg-${Math.round(Math.random() * 10000000)}`).current!;
+
+  return useState(`mermaid-svg-${Math.round(Math.random() * 10000000)}`)[0];
 }
 
 async function renderMermaid({

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.tsx b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.tsx
@@ -269,6 +269,8 @@ function DocSearch({externalUrlRegex, ...props}: DocSearchProps) {
 
       {isOpen &&
         DocSearchModal &&
+        // TODO need to fix this React Compiler lint error
+        // eslint-disable-next-line react-compiler/react-compiler
         searchContainer.current &&
         createPortal(
           <DocSearchModal
@@ -287,6 +289,8 @@ function DocSearch({externalUrlRegex, ...props}: DocSearchProps) {
             translations={props.translations?.modal ?? translations.modal}
             searchParameters={searchParameters}
           />,
+          // TODO need to fix this React Compiler lint error
+          // eslint-disable-next-line react-compiler/react-compiler
           searchContainer.current,
         )}
     </>

diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx
@@ -292,6 +292,8 @@ function SearchPageContent(): ReactNode {
   const observer = useRef(
     ExecutionEnvironment.canUseIntersectionObserver &&
       new IntersectionObserver(
+        // TODO need to fix this React Compiler lint error
+        // eslint-disable-next-line react-compiler/react-compiler
         (entries) => {
           const {
             isIntersecting,