dumi 2.0.0-beta.0 → 2.0.0-beta.2

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

@@ -7,6 +7,8 @@ interface ISiteContext {
     }>;
     locales: NonNullable<ILocalesConfig>;
     themeConfig: IThemeConfig;
+    loading: boolean;
+    setLoading: (status: boolean) => void;
 }
 export declare const SiteContext: import("react").Context<ISiteContext>;
 export declare const useSiteData: () => ISiteContext;

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

@@ -2,7 +2,9 @@ import { createContext, useContext } from 'react';
 export var SiteContext = /*#__PURE__*/createContext({
   demos: {},
   locales: [],
-  themeConfig: {}
+  themeConfig: {},
+  loading: false,
+  setLoading: function setLoading() {}
 });
 export var useSiteData = function useSiteData() {
   return useContext(SiteContext);

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

@@ -37,11 +37,11 @@ export var useNavData = function useNavData() {
           groups = _ref2[1];
 
       var meta = Object.values(routes).reduce(function (ret, route) {
-        var _frontmatter$nav$orde;
+        var _route$meta, _frontmatter$nav$orde;
 
         // find routes which within the nav path
         if (route.path.startsWith(link.slice(1))) {
-          switch (_typeof(route.meta.frontmatter.nav)) {
+          switch (_typeof((_route$meta = route.meta) === null || _route$meta === void 0 ? void 0 : _route$meta.frontmatter.nav)) {
             case 'object':
               ret.title = route.meta.frontmatter.nav.title || ret.title;
               ret.order = (_frontmatter$nav$orde = route.meta.frontmatter.nav.order) !== null && _frontmatter$nav$orde !== void 0 ? _frontmatter$nav$orde : ret.order;

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

@@ -1,8 +1,9 @@
+import type { ISidebarGroup } from './types';
 /**
  * hook for get sidebar data for all nav
  */
-export declare const useFullSidebarData: () => any;
+export declare const useFullSidebarData: () => Record<string, ISidebarGroup[]>;
 /**
  * hook for get sidebar data for current nav
  */
-export declare const useSidebarData: () => any;
+export declare const useSidebarData: () => ISidebarGroup[];

package/dist/client/tsconfig.json

@@ -4,7 +4,7 @@
     "paths": {
       "@/*": ["src/*"],
       "@@/*": ["src/.umi/*"],
-      "dumi": ["src"],
+      "dumi": ["."],
       "dumi/theme": ["src/client/theme-api"],
       "dumi/theme/*": ["src/client/theme-default/*"]
     },

package/dist/features/locales.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/features/locales.ts
@@ -22,6 +25,8 @@ __export(locales_exports, {
   default: () => locales_default
 });
 module.exports = __toCommonJS(locales_exports);
+var import_path = __toESM(require("path"));
+var import_plugin_utils = require("umi/plugin-utils");
 var locales_default = (api) => {
   var _a;
   api.describe({
@@ -71,7 +76,7 @@ export const messages = ${JSON.stringify(api.service.themeData.locales, null, 2)
       content: `
 import { history } from 'dumi';
 import React, { useState, type ReactNode } from 'react';
-import { RawIntlProvider, createIntl, createIntlCache } from 'react-intl';
+import { RawIntlProvider, createIntl, createIntlCache } from '${(0, import_plugin_utils.winPath)(import_path.default.dirname(require.resolve("react-intl/package")))}';
 import { locales, messages } from './config';
 
 const cache = createIntlCache();

package/dist/features/routes.js

@@ -47,11 +47,12 @@ var routes_default = (api) => {
     ...((_b = (_a = api.userConfig.resolve) == null ? void 0 : _a.entityDirs) == null ? void 0 : _b.map(({ dir }) => dir)) || ["docs"],
     ...((_c = api.userConfig.resolve) == null ? void 0 : _c.docDirs) || []
   ].map((dir) => import_path.default.join(api.cwd, dir, "**/*.md"));
+  const pagesDir = import_path.default.join(api.cwd, ".dumi/pages");
   api.describe({ key: "dumi:routes" });
   api.addTmpGenerateWatcherPaths(() => extraWatchPaths);
   api.modifyConfig((memo) => {
     memo.conventionRoutes = {
-      base: import_path.default.join(__dirname, "dumi-disable-default-routes")
+      base: pagesDir
     };
     return memo;
   });
@@ -67,9 +68,12 @@ var routes_default = (api) => {
     return memo;
   });
   api.modifyRoutes((oRoutes) => {
+    const pages = {};
     const routes = Object.values(oRoutes).reduce((ret, route) => {
       if (route.isLayout) {
         ret[route.id] = route;
+      } else {
+        pages[route.id] = route;
       }
       return ret;
     }, {});
@@ -101,6 +105,11 @@ var routes_default = (api) => {
         isLayout: true
       };
     }
+    Object.entries(pages).forEach(([, route]) => {
+      route.parentId = docLayoutId;
+      route.file = import_path.default.resolve(pagesDir, route.file);
+      routes[route.id] = route;
+    });
     docDirs.forEach((dir) => {
       const base = import_path.default.join(api.cwd, dir);
       const dirRoutes = (0, import_core.getConventionRoutes)({
@@ -131,13 +140,15 @@ var routes_default = (api) => {
         localizeUmiRoute(routes[routeId], api.config.locales);
       });
     });
-    routes["404"] = {
-      id: "404",
-      path: "*",
-      absPath: "/*",
-      parentId: docLayoutId,
-      file: require.resolve("../client/pages/404")
-    };
+    if (Object.values(pages).every((route) => route.path !== "*")) {
+      routes["404"] = {
+        id: "404",
+        path: "*",
+        absPath: "/*",
+        parentId: docLayoutId,
+        file: require.resolve("../client/pages/404")
+      };
+    }
     routes["demo-render"] = {
       id: "demo-render",
       path: `${import_constants.SP_ROUTE_PREFIX}demos/:id`,

package/dist/features/theme/index.js

@@ -106,16 +106,31 @@ export { default } from '${item.source}';`
     api.writeTmpFile({
       noPluginDir: true,
       path: "dumi/theme/ContextWrapper.tsx",
-      content: `import { useOutlet } from 'dumi';
+      content: `import React, { useState, useEffect } from 'react';
+import { useOutlet, history } from 'dumi';
 import { SiteContext } from '${(0, import_plugin_utils.winPath)(require.resolve("../../client/theme-api/context"))}';
 import { demos } from '../meta';
 import { locales } from '../locales/config';
 
 export default function DumiContextWrapper() {
   const outlet = useOutlet();
+  const [loading, setLoading] = useState(true);
+
+  // mark loading when route change, page component will set false when loaded
+  useEffect(() => {
+    return history.listen(() => setLoading(true));
+  }, []);
 
   return (
-    <SiteContext.Provider value={{ demos, locales, themeConfig: ${JSON.stringify(api.config.themeConfig)} }}>{outlet}</SiteContext.Provider>
+    <SiteContext.Provider value={{
+      demos,
+      locales,
+      loading,
+      setLoading,
+      themeConfig: ${JSON.stringify(api.config.themeConfig)},
+    }}>
+      {outlet}
+    </SiteContext.Provider>
   );
 }`
     });

package/dist/index.d.ts

@@ -1,9 +1,5 @@
 import type { IDumiUserConfig } from "./types";
 declare let unistUtilVisit: typeof import('unist-util-visit');
 export * from 'umi';
-export * from './client/theme-api';
-export { IApi } from "./types";
-export type { Root as HastRoot } from 'hast';
-export type { Plugin as UnifiedPlugin, Transformer as UnifiedTransformer, } from 'unified';
 export { unistUtilVisit };
 export declare const defineConfig: (config: IDumiUserConfig) => IDumiUserConfig;

package/dist/index.js

@@ -28,7 +28,6 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("umi"), module.exports);
-__reExport(src_exports, require("./client/theme-api"), module.exports);
 var unistUtilVisit;
 (async () => {
   unistUtilVisit = await import("unist-util-visit");

package/dist/loaders/markdown/index.js

@@ -72,11 +72,18 @@ export const toc = {{{toc}}}
       }));
     } else {
       cb(null, `${Object.values(opts.builtins).map((item) => `import ${item.specifier} from '${item.source}';`).join("\n")}
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useSiteData } from 'dumi';
 
 // export named function for fastRefresh
 // ref: https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#edits-always-lead-to-full-reload
 function DumiMarkdownContent() {
+  const { setLoading } = useSiteData();
+
+  useEffect(() => {
+    setLoading(false);
+  }, []);
+
   return ${ret.content};
 }
 

package/index.d.ts

@@ -0,0 +1,11 @@
+export { Root as HastRoot } from 'hast';
+export * from 'umi';
+export {
+  Plugin as UnifiedPlugin,
+  Transformer as UnifiedTransformer,
+} from 'unified';
+export * from './dist';
+// override umi exported defineConfig
+export { defineConfig } from './dist';
+export * from './dist/client/theme-api';
+export { IApi } from './dist/types';

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "dumi",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.2",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "index.d.ts",
   "bin": "./bin/dumi.js",
   "files": [
     "bin",
     "dist",
     "compiled",
     "theme-default",
-    "theme.d.ts"
+    "theme.d.ts",
+    "index.d.ts"
   ],
   "scripts": {
     "build": "father build",
@@ -21,10 +22,10 @@
     "dev": "father dev",
     "docs:build": "node ./bin/dumi.js build",
     "docs:dev": "node ./bin/dumi.js dev",
-    "postinstall": "npm run build && node ./bin/dumi.js setup",
     "lint": "npm run lint:es && npm run lint:css",
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
+    "prepare": "npm run build && node ./bin/dumi.js setup",
     "prepublishOnly": "npm run build",
     "test": "cross-env NODE_OPTIONS=--experimental-vm-modules pnpm jest"
   },
@@ -52,6 +53,7 @@
   },
   "dependencies": {
     "@ant-design/icons-svg": "^4.2.1",
+    "@makotot/ghostui": "^2.0.0",
     "@swc/core": "^1.2.224",
     "@types/hast": "^2.3.4",
     "@types/mdast": "^3.0.10",

package/theme-default/layouts/DocLayout/index.less

@@ -13,5 +13,6 @@ body {
 
   > main {
     display: flex;
+    align-items: flex-start;
   }
 }

package/theme-default/slots/Content/index.less

@@ -34,6 +34,6 @@
     background-color: #fff;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
-    box-shadow: 0 4px 24px 0 rgb(0 0 0 / 5%);
+    box-shadow: 0 8px 24px 0 rgb(0 0 0 / 5%);
   }
 }

package/theme-default/slots/Header/index.less

@@ -1,9 +1,17 @@
 @import (reference) '../../styles/variables.less';
 
 .@{prefix}-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
   display: flex;
+  margin: 0 -24px;
+  padding: 0 24px;
   align-items: center;
-  height: 86px;
+  height: @s-header-height;
+  background-color: fadeout(@c-site-bg, 10%);
+  backdrop-filter: blur(6px);
+  box-sizing: border-box;
 
   &-left {
     width: @s-sidebar-width;

package/theme-default/slots/Logo/index.less

@@ -1,7 +1,7 @@
 @import (reference) '../../styles/variables.less';
 
 .@{prefix}-logo {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   color: @c-text;
   font-size: 22px;

package/theme-default/slots/Sidebar/index.less

@@ -1,10 +1,13 @@
 @import (reference) '../../styles/variables.less';
 
 .@{prefix}-sidebar {
+  position: sticky;
+  top: @s-header-height;
   width: @s-sidebar-width;
-  min-height: 100vh;
+  max-height: calc(100vh - @s-header-height);
   padding: 20px 32px 24px 8px;
   box-sizing: border-box;
+  overflow: auto;
 
   > dl {
     margin: 0;

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

@@ -1,33 +1,81 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import { useLocation, useRouteMeta } from 'dumi';
-import React from 'react';
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { Scrollspy as ScrollSpy } from '@makotot/ghostui/src/Scrollspy';
+import { useLocation, useRouteMeta, useSiteData } from 'dumi';
+import React, { useEffect, useRef, useState } from 'react';
 import "./index.less";
 
 var Toc = function Toc() {
   var _useLocation = useLocation(),
-      hash = _useLocation.hash;
+      pathname = _useLocation.pathname;
+
+  var meta = useRouteMeta();
+
+  var _useSiteData = useSiteData(),
+      loading = _useSiteData.loading;
+
+  var prevIndexRef = useRef(0);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      sectionRefs = _useState2[0],
+      setSectionRefs = _useState2[1]; // only render h2 ~ h4
 
-  var _useRouteMeta = useRouteMeta(),
-      toc = _useRouteMeta.toc;
 
-  return /*#__PURE__*/React.createElement("ul", {
-    className: "dumi-default-toc"
-  }, toc.filter(function (_ref) {
+  var toc = meta.toc.filter(function (_ref) {
     var depth = _ref.depth;
     return depth > 1 && depth < 4;
-  }).map(function (item) {
-    var link = "#".concat(encodeURIComponent(item.id));
-    return /*#__PURE__*/React.createElement("li", {
-      key: item.id,
-      "data-depth": item.depth
-    }, /*#__PURE__*/React.createElement("a", _extends({
-      href: link,
-      title: item.title
-    }, link === hash ? {
-      className: 'active'
-    } : {}), item.title));
-  }));
+  });
+  useEffect(function () {
+    // wait for page component ready (DOM ready)
+    if (!loading) {
+      // find all valid headings as ref elements
+      var refs = toc.map(function (_ref2) {
+        var id = _ref2.id;
+        return {
+          current: document.getElementById(id)
+        };
+      });
+      setSectionRefs(refs);
+    }
+  }, [pathname, loading]);
+  return sectionRefs.length ? /*#__PURE__*/React.createElement(ScrollSpy, {
+    sectionRefs: sectionRefs
+  }, function (_ref3) {
+    var currentElementIndexInViewport = _ref3.currentElementIndexInViewport;
+    // for keep prev item active when no item in viewport
+    if (currentElementIndexInViewport > -1) prevIndexRef.current = currentElementIndexInViewport;
+    return /*#__PURE__*/React.createElement("ul", {
+      className: "dumi-default-toc"
+    }, toc.filter(function (_ref4) {
+      var depth = _ref4.depth;
+      return depth > 1 && depth < 4;
+    }).map(function (item, i) {
+      var link = "#".concat(encodeURIComponent(item.id));
+      var activeIndex = currentElementIndexInViewport > -1 ? currentElementIndexInViewport : prevIndexRef.current;
+      return /*#__PURE__*/React.createElement("li", {
+        key: item.id,
+        "data-depth": item.depth
+      }, /*#__PURE__*/React.createElement("a", _extends({
+        href: link,
+        title: item.title
+      }, activeIndex === i ? {
+        className: 'active'
+      } : {}), item.title));
+    }));
+  }) : null;
 };
 
 export default Toc;

package/theme-default/styles/variables.less

@@ -2,6 +2,7 @@
 
 @s-content-width: 1392px;
 @s-sidebar-width: 184px;
+@s-header-height: 76px;
 
 @c-primary: #1677ff;
 @c-text: #333;