site: enable prefetch for dumi Link (#51921)

* docs: enable prefetch for dumi Link

* simplify link implementation

* fix lint

* remove nprogress dep

---------

Co-authored-by: lijianan <574980606@qq.com>

.dumi/theme/builtins/ComponentOverview/index.tsx

@@ -243,7 +243,7 @@ const Overview: React.FC = () => {
                         {cardContent}
                       </a>
                     ) : (
-                      <Link to={url} prefetch key={component.title}>
+                      <Link to={url} key={component.title}>
                         {cardContent}
                       </Link>
                     );

.dumi/theme/builtins/DemoWrapper/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { Suspense, useContext } from 'react';
 import { BugOutlined, CodeOutlined, ExperimentOutlined } from '@ant-design/icons';
 import { ConfigProvider, Tooltip, Button } from 'antd';
 import classNames from 'classnames';
@@ -113,7 +113,9 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
         </Tooltip>
       </span>
       <ConfigProvider theme={{ cssVar: enableCssVar, hashed: !enableCssVar }}>
+        <Suspense>
           <DumiDemoGrid items={demos} />
+        </Suspense>
       </ConfigProvider>
     </div>
   );

.dumi/theme/common/Link.tsx

@@ -1,7 +1,6 @@
-import type { MouseEvent, MouseEventHandler } from 'react';
-import React, { forwardRef, useLayoutEffect, useTransition } from 'react';
-import { Link as DumiLink, useLocation, useNavigate } from 'dumi';
-import nprogress from 'nprogress';
+import type { MouseEventHandler } from 'react';
+import React from 'react';
+import { Link as DumiLink } from 'dumi';
 
 export interface LinkProps {
   to: string | { pathname?: string; search?: string; hash?: string };
@@ -9,64 +8,9 @@ export interface LinkProps {
   className?: string;
   onClick?: MouseEventHandler;
   component?: React.ComponentType<any>;
+  children?: React.ReactNode;
 }
 
-nprogress.configure({ showSpinner: false });
-
-const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>((props, ref) => {
-  const { to, children, component, ...rest } = props;
-  const [isPending, startTransition] = useTransition();
-  const navigate = useNavigate();
-  const { pathname } = useLocation();
-
-  const href = React.useMemo<string>(() => {
-    if (typeof to === 'object') {
-      return `${to.pathname || pathname}${to.search || ''}${to.hash || ''}`;
-    }
-    return to;
-  }, [to]);
-
-  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
-    props.onClick?.(e);
-    if (!href?.startsWith('http')) {
-      // Should support open in new tab
-      if (!e.metaKey && !e.ctrlKey && !e.shiftKey) {
-        e.preventDefault();
-        startTransition(() => {
-          if (href) {
-            navigate(href);
-          }
-        });
-      }
-    }
-  };
-
-  useLayoutEffect(() => {
-    if (isPending) {
-      nprogress.start();
-    } else {
-      nprogress.done();
-    }
-  }, [isPending]);
-
-  if (component) {
-    return React.createElement(
-      component,
-      {
-        ...rest,
-        ref,
-        onClick: handleClick,
-        href,
-      },
-      children,
-    );
-  }
-
-  return (
-    <DumiLink ref={ref} onClick={handleClick} {...rest} to={href} prefetch>
-      {children}
-    </DumiLink>
-  );
-});
+const Link: React.FC<LinkProps> = (props) => <DumiLink {...props} prefetch />;
 
 export default Link;

.dumirc.ts

@@ -9,7 +9,11 @@ import { version } from './package.json';
 
 export default defineConfig({
   plugins: ['dumi-plugin-color-chunk'],
+
+  // For <Link prefetch />
+  routePrefetch: {},
   manifest: {},
+
   conventionRoutes: {
     // to avoid generate routes for .dumi/pages/index/components/xx
     exclude: [/index\/components\//],

package.json

@@ -201,7 +201,6 @@
     "@types/lodash": "^4.17.12",
     "@types/minimist": "^1.2.5",
     "@types/node": "^22.7.7",
-    "@types/nprogress": "^0.2.3",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
     "@types/prismjs": "^1.26.4",
@@ -270,7 +269,6 @@
     "mockdate": "^3.0.5",
     "node-fetch": "^3.3.2",
     "node-notifier": "^10.0.1",
-    "nprogress": "^0.2.0",
     "open": "^10.1.0",
     "ora": "^8.1.0",
     "p-all": "^5.0.0",