dumi 2.1.22 → 2.1.24

package/dist/client/theme-api/DumiDemoGrid.js

@@ -59,10 +59,11 @@ export var DumiDemoGrid = function DumiDemoGrid(props) {
     };
 
     window.addEventListener('resize', handler);
+    handler();
     return function () {
       return window.removeEventListener('resize', handler);
     };
-  }, []);
+  }, [props.items, fm.demo]);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',

package/dist/client/theme-api/DumiPage.js

@@ -12,6 +12,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { useRouteMeta, useSiteData } from 'dumi';
 import ContentTabs from 'dumi/theme/slots/ContentTabs';
+import nprogress from 'nprogress';
 import React, { useEffect, useState } from 'react';
 import { useTabQueryState } from "./useTabMeta";
 export var DumiPage = function DumiPage(props) {
@@ -39,6 +40,7 @@ export var DumiPage = function DumiPage(props) {
 
   useEffect(function () {
     setLoading(false);
+    nprogress.done();
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContentTabs, {
     tabs: tabs,

package/dist/client/theme-api/types.d.ts

@@ -196,6 +196,7 @@ export interface IThemeConfig {
         default: 'light' | 'dark' | 'auto';
         switch: boolean;
     };
+    nprogress?: boolean;
     socialLinks: {
         [key in SocialTypes]: string;
     };

package/dist/client/theme-api/utils.d.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import type { ILocale, INav, INavItem, IRouteMeta, IRoutesById, IUserNavValue } from './types';
 export declare const useLocaleDocRoutes: () => IRoutesById;
 /**
@@ -7,7 +7,7 @@ export declare const useLocaleDocRoutes: () => IRoutesById;
  * @returns code string
  */
 export declare const genReactRenderCode: (version: string) => string;
-export declare const useIsomorphicLayoutEffect: typeof useEffect;
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 /**
  * common comparer for sidebar/nav items
  */

package/dist/features/configPlugins/index.js

@@ -33,7 +33,8 @@ var configPlugins_default = (api) => {
     },
     themeConfig: {
       footer: `Copyright \xA9 ${new Date().getFullYear()} | Powered by <a href="https://d.umijs.org" target="_blank" rel="noreferrer">dumi</a>`,
-      prefersColor: { default: "light", switch: true }
+      prefersColor: { default: "light", switch: true },
+      nprogress: true
     }
   };
   const schemas = (0, import_schema.getSchemas)();

package/dist/features/theme/index.js

@@ -137,7 +137,7 @@ var theme_default = (api) => {
     return memo;
   });
   api.onGenerateFiles(() => {
-    var _a;
+    var _a, _b, _c, _d;
     themeMapKeys.forEach((key) => {
       Object.values(originalThemeData[key] || {}).forEach((item) => {
         if (item.source === "dumi")
@@ -161,11 +161,16 @@ var theme_default = (api) => {
     const entryExports = entryFile ? getModuleExports(entryFile) : [];
     const hasDefaultExport = entryExports.includes("default");
     const hasNamedExport = entryExports.some((exp) => exp !== "default");
+    const enableNProgress = !!api.config.themeConfig.nprogress;
     api.writeTmpFile({
       noPluginDir: true,
       path: "dumi/theme/ContextWrapper.tsx",
       content: `import React, { useState, useEffect, useRef } from 'react';
 import { useOutlet, history } from 'dumi';
+${enableNProgress ? `
+import nprogress from '${(0, import_plugin_utils.winPath)(import_path.default.dirname(require.resolve("nprogress/package")))}';
+import './nprogress.css';
+` : ""}
 import { SiteContext } from '${(0, import_plugin_utils.winPath)(require.resolve("../../client/theme-api/context"))}';
 import { demos, components } from '../meta';
 import { locales } from '../locales/config';${hasDefaultExport ? `
@@ -190,6 +195,9 @@ export default function DumiContextWrapper() {
         // mark loading when route change, page component will set false when loaded
         setLoading(true);
 
+        // start nprogress
+        ${enableNProgress ? `nprogress.start();` : ""}
+
         // scroll to top when route changed
         document.documentElement.scrollTo(0, 0);
       }
@@ -213,6 +221,72 @@ export default function DumiContextWrapper() {
   );
 }`
     });
+    const primaryColor = typeof ((_b = api.config) == null ? void 0 : _b.theme) === "object" ? (_d = (_c = api.config) == null ? void 0 : _c.theme) == null ? void 0 : _d["@c-primary"] : "#1677ff";
+    api.writeTmpFile({
+      noPluginDir: true,
+      path: "dumi/theme/nprogress.css",
+      content: `
+      /* https://unpkg.com/browse/nprogress@0.2.0/nprogress.css */
+      #nprogress {
+        pointer-events: none;
+      }
+
+      #nprogress .bar {
+        background: var;
+        position: fixed;
+        z-index: 1031;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+      }
+
+      #nprogress .peg {
+        display: block;
+        position: absolute;
+        right: 0px;
+        width: 100px;
+        height: 100%;
+        box-shadow: 0 0 10px ${primaryColor}, 0 0 5px ${primaryColor};
+        opacity: 1.0;
+        transform: rotate(3deg) translate(0px, -4px);
+      }
+
+      #nprogress .spinner {
+        display: block;
+        position: fixed;
+        z-index: 1031;
+        top: 15px;
+        right: 15px;
+      }
+
+      #nprogress .spinner-icon {
+        width: 18px;
+        height: 18px;
+        box-sizing: border-box;
+        border: solid 2px transparent;
+        border-top-color: ${primaryColor};
+        border-left-color: ${primaryColor};
+        border-radius: 50%;
+        animation: nprogress-spinner 400ms linear infinite;
+      }
+
+      .nprogress-custom-parent {
+        overflow: hidden;
+        position: relative;
+      }
+
+      .nprogress-custom-parent #nprogress .spinner,
+      .nprogress-custom-parent #nprogress .bar {
+        position: absolute;
+      }
+
+      @keyframes nprogress-spinner {
+        0%   { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      `
+    });
   });
   api.addEntryCodeAhead(() => {
     const { prefersColor } = api.config.themeConfig;

package/dist/types.d.ts

@@ -9,7 +9,7 @@ import type { AssetsPackage, ExampleBlockAsset } from 'dumi-assets-types';
 import type { Element } from 'hast';
 import type { defineConfig as defineUmiConfig, IApi as IUmiApi } from 'umi';
 declare type Subset<K> = {
-    [attr in keyof K]?: K[attr] extends Array<any> ? K[attr] : K[attr] extends object ? Subset<K[attr]> : K[attr] extends object | null ? Subset<K[attr]> | null : K[attr] extends object | null | undefined ? Subset<K[attr]> | null | undefined : K[attr];
+    [attr in keyof K]?: K[attr] extends Array<any> ? K[attr] : K[attr] extends Function | undefined ? K[attr] : K[attr] extends object ? Subset<K[attr]> : K[attr] extends object | null ? Subset<K[attr]> | null : K[attr] extends object | null | undefined ? Subset<K[attr]> | null | undefined : K[attr];
 };
 declare type NoStringIndex<T> = {
     [K in keyof T as string extends K ? never : K]: T[K];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.1.22",
+  "version": "2.1.24",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",
@@ -79,9 +79,10 @@
     "@ant-design/icons-svg": "^4.2.1",
     "@makotot/ghostui": "^2.0.0",
     "@stackblitz/sdk": "^1.8.1",
-    "@swc/core": "1.3.44",
+    "@swc/core": "1.3.57",
     "@types/hast": "^2.3.4",
     "@types/mdast": "^3.0.10",
+    "@types/nprogress": "^0.2.0",
     "@umijs/bundler-utils": "^4.0.64",
     "@umijs/core": "^4.0.64",
     "animated-scroll-to": "^2.3.0",
@@ -104,6 +105,7 @@
     "js-yaml": "^4.1.0",
     "lodash.throttle": "^4.1.1",
     "mdast-util-to-string": "^3.1.0",
+    "nprogress": "^0.2.0",
     "pluralize": "^8.0.0",
     "prism-react-renderer": "^1.3.5",
     "prism-themes": "^1.9.0",
@@ -165,7 +167,7 @@
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
-  "packageManager": "pnpm@7.3.0",
+  "packageManager": "pnpm@8.4.0",
   "publishConfig": {
     "access": "public"
   },

package/theme-default/builtins/API/index.js

@@ -25,7 +25,7 @@ var HANDLERS = {
       return this.getValidClassName(prop) || prop.type;
     } else if ('const' in prop) {
       // const value
-      return prop.const;
+      return "".concat(prop.const);
     } else if ('oneOf' in prop) {
       // oneOf value
       return this.oneOf(prop);

package/theme-default/slots/Toc/index.js

@@ -13,14 +13,15 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { Scrollspy as ScrollSpy } from '@makotot/ghostui/src/Scrollspy';
-import { Link, useLocation, useRouteMeta, useSiteData, useTabMeta } from 'dumi';
+import { history, Link, useLocation, useRouteMeta, useSiteData, useTabMeta } from 'dumi';
 import React, { useEffect, useRef, useState } from 'react';
 import "./index.less";
 
 var Toc = function Toc() {
   var _useLocation = useLocation(),
       pathname = _useLocation.pathname,
-      search = _useLocation.search;
+      search = _useLocation.search,
+      hash = _useLocation.hash;
 
   var meta = useRouteMeta();
   var tabMeta = useTabMeta();
@@ -80,6 +81,11 @@ var Toc = function Toc() {
         "data-depth": item.depth
       }, /*#__PURE__*/React.createElement(Link, _extends({
         to: link,
+        onClickCapture: function onClickCapture() {
+          if (decodeURIComponent(hash).slice(1) === item.id) {
+            history.replace(search);
+          }
+        },
         title: item.title
       }, activeIndex === i ? {
         className: 'active'