perf: remove react-transition-group dependency (#1591)

web-infra-dev · Nov 17, 2024 · da46362 · da46362
1 parent 2d6d341
commit da46362
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 31 deletions.
diff --git a/e2e/fixtures/custom-plugin/package.json b/e2e/fixtures/custom-plugin/package.json
@@ -13,7 +13,6 @@
     "@rspress/shared": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-transition-group": "4.4.5",
     "rspress": "workspace:*",
     "solid-js": "^1.9.3"
   },

diff --git a/e2e/fixtures/plugin-preview/package.json b/e2e/fixtures/plugin-preview/package.json
@@ -13,7 +13,6 @@
     "@rspress/shared": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-transition-group": "4.4.5",
     "rspress": "workspace:*",
     "solid-js": "^1.9.3"
   },

diff --git a/packages/theme-default/package.json b/packages/theme-default/package.json
@@ -48,8 +48,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^1.3.0",
-    "react-syntax-highlighter": "^15.6.1",
-    "react-transition-group": "4.4.5"
+    "react-syntax-highlighter": "^15.6.1"
   },
   "devDependencies": {
     "@modern-js/plugin-tailwindcss": "2.62.0",

diff --git a/packages/theme-default/src/components/LocalSideBar/index.scss b/packages/theme-default/src/components/LocalSideBar/index.scss
@@ -54,6 +54,16 @@
   overflow: scroll;
   box-shadow: var(--rp-shadow-1);
   border: 1px solid var(--rp-c-divider-light);
+  opacity: 0;
+  transform: translateY(-20px);
+  visibility: hidden;
+  transition: all 0.3s ease-out;
+
+  &-show {
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  }
 }
 
 .fly-in-enter {

diff --git a/packages/theme-default/src/components/LocalSideBar/index.tsx b/packages/theme-default/src/components/LocalSideBar/index.tsx
@@ -6,7 +6,6 @@ import { Sidebar, Toc } from '@theme';
 import './index.scss';
 import type { UISwitchResult } from '../../logic/useUISwitch';
 import { SvgWrapper } from '../SvgWrapper';
-import { CSSTransition } from 'react-transition-group';
 
 export function SideMenu({
   outlineTitle,
@@ -93,24 +92,15 @@ export function SideMenu({
               </div>
             </button>
 
-            <CSSTransition
-              in={isTocOpen}
-              timeout={300}
-              unmountOnExit
-              classNames="fly-in"
-              nodeRef={tocContainerRef}
+            <div
+              className={`rspress-local-toc-container ${isTocOpen ? 'rspress-local-toc-container-show' : ''}`}
             >
-              <div
-                className="rspress-local-toc-container"
-                ref={tocContainerRef}
-              >
-                <Toc
-                  onItemClick={() => {
-                    setIsTocOpen(false);
-                  }}
-                />
-              </div>
-            </CSSTransition>
+              <Toc
+                onItemClick={() => {
+                  setIsTocOpen(false);
+                }}
+              />
+            </div>
           </Fragment>
         ) : null}
       </div>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml