🐛 fix sidebar item cache fault and use ReactNode from import

Author: StarHeartHunt

.eslintrc.js

@@ -36,8 +36,15 @@ module.exports = {
     },
   },
   reportUnusedDisableDirectives: true,
-  plugins: ["react-hooks", "@typescript-eslint", "regexp", "@docusaurus"],
+  plugins: [
+    "react-compiler",
+    "react-hooks",
+    "@typescript-eslint",
+    "regexp",
+    "@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,
@@ -213,7 +220,6 @@ module.exports = {
           ["parent", "sibling", "index"],
           "type",
         ],
-        "newlines-between": "always",
         pathGroups: [
           // always put css import to the last, ref:
           // https://github.com/import-js/eslint-plugin-import/issues/1239

package.json

@@ -59,6 +59,7 @@
     "eslint-plugin-import": "^2.27.5",
     "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",
     "lerna": "^6.6.2",

packages/theme-nonepress/src/contexts/SidebarContent.tsx

@@ -17,7 +17,7 @@ export function SidebarContentProvider({
   children,
 }: {
   children: ReactNode;
-}): React.ReactNode {
+}): ReactNode {
   const value = useState<Content>(null);
 
   return <Context.Provider value={value}>{children}</Context.Provider>;

packages/theme-nonepress/src/contexts/SidebarDisplay.tsx

@@ -40,7 +40,7 @@ export function SidebarDisplayProvider({
   children,
 }: {
   children: ReactNode;
-}): React.ReactNode {
+}): ReactNode {
   const value = useContextValue();
   return <Context.Provider value={value}>{children}</Context.Provider>;
 }

packages/theme-nonepress/src/contexts/TOCContent.tsx

@@ -22,7 +22,7 @@ export function TOCContentProvider({
   children,
 }: {
   children: ReactNode;
-}): React.ReactNode {
+}): ReactNode {
   const value = useState<Content>(null);
 
   return <Context.Provider value={value}>{children}</Context.Provider>;

packages/theme-nonepress/src/contexts/TOCDisplay.tsx

@@ -40,7 +40,7 @@ export function TOCDisplayProvider({
   children,
 }: {
   children: ReactNode;
-}): React.ReactNode {
+}): ReactNode {
   const value = useContextValue();
   return <Context.Provider value={value}>{children}</Context.Provider>;
 }

packages/theme-nonepress/src/theme/Admonition/index.tsx

@@ -217,7 +217,7 @@ function processAdmonitionProps(props: Props): Props {
   };
 }
 
-export default function Admonition(props: Props): React.ReactNode {
+export default function Admonition(props: Props): ReactNode {
   const {
     children,
     type,

packages/theme-nonepress/src/theme/AnnouncementBar/CloseButton/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 
 import clsx from "clsx";
 
@@ -9,7 +9,7 @@ import IconClose from "@theme/Icon/Close";
 
 export default function AnnouncementBarCloseButton(
   props: Props,
-): React.ReactNode | null {
+): ReactNode | null {
   return (
     <div className={clsx(props.className, "announcement-button")}>
       <button

packages/theme-nonepress/src/theme/AnnouncementBar/Content/index.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 
 import clsx from "clsx";
 
 import { useNonepressThemeConfig } from "@nullbot/docusaurus-theme-nonepress/client";
 
 import type { Props } from "@theme/AnnouncementBar/Content";
 
-export default function AnnouncementBarContent(props: Props): React.ReactNode {
+export default function AnnouncementBarContent(props: Props): ReactNode {
   const { announcementBar } = useNonepressThemeConfig();
   const { content } = announcementBar!;
   return (

packages/theme-nonepress/src/theme/AnnouncementBar/index.tsx

@@ -1,15 +1,15 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 
 import { useAnnouncementBar } from "@docusaurus/theme-common/internal";
 
-import "./styles.css";
-
 import { useNonepressThemeConfig } from "@nullbot/docusaurus-theme-nonepress/client";
 
 import AnnouncementBarCloseButton from "@theme/AnnouncementBar/CloseButton";
 import AnnouncementBarContent from "@theme/AnnouncementBar/Content";
 
-export default function AnnouncementBar(): React.ReactNode | null {
+import "./styles.css";
+
+export default function AnnouncementBar(): ReactNode | null {
   const { announcementBar } = useNonepressThemeConfig();
   const { isActive, close } = useAnnouncementBar();
   if (!announcementBar || !isActive) {