dumi 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/assetParsers/atom.d.ts

@@ -0,0 +1,25 @@
+import { SchemaParser, SchemaResolver } from 'dumi-afx-deps/compiled/parser';
+import type { webpack } from 'umi';
+declare class AtomParserWatchWebpackPlugin {
+    resolveDir: string;
+    onWatchRun: (files: string[]) => void;
+    constructor(opts: {
+        resolveDir: string;
+        onWatchRun: typeof AtomParserWatchWebpackPlugin.prototype.onWatchRun;
+    });
+    apply(compiler: webpack.Compiler): void;
+}
+declare class AtomAssetsParser {
+    parser: SchemaParser;
+    resolver: Promise<SchemaResolver> | undefined;
+    resolveDir: string;
+    unresolvedFiles: string[];
+    constructor(opts: {
+        entryFile: string;
+        resolveDir: string;
+    });
+    parse(): Promise<SchemaResolver>;
+    patchUnresolvedFiles(files: string[]): void;
+    getWebpackWatchPlugin(): AtomParserWatchWebpackPlugin;
+}
+export default AtomAssetsParser;

package/dist/assetParsers/atom.js

@@ -0,0 +1,74 @@
+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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/assetParsers/atom.ts
+var atom_exports = {};
+__export(atom_exports, {
+  default: () => atom_default
+});
+module.exports = __toCommonJS(atom_exports);
+var import_parser = require("dumi-afx-deps/compiled/parser");
+var import_path = __toESM(require("path"));
+var import_plugin_utils = require("umi/plugin-utils");
+var AtomParserWatchWebpackPlugin = class {
+  constructor(opts) {
+    this.resolveDir = opts.resolveDir;
+    this.onWatchRun = opts.onWatchRun;
+  }
+  apply(compiler) {
+    compiler.hooks.watchRun.tap(this.constructor.name, (compilation) => {
+      const files = Array.from(compilation.watchFileSystem.watcher.fileWatchers.keys());
+      this.onWatchRun(files.map((file) => (0, import_plugin_utils.winPath)(import_path.default.relative(this.resolveDir, file))).filter((file) => /\.(j|t)sx?$/.test(file) && !file.startsWith("../") && !file.includes(".umi")));
+    });
+  }
+};
+var AtomAssetsParser = class {
+  constructor(opts) {
+    this.unresolvedFiles = [];
+    this.resolveDir = opts.resolveDir;
+    this.parser = new import_parser.SchemaParser({
+      entryPath: opts.entryFile,
+      basePath: opts.resolveDir,
+      unPkgHost: "https://unpkg.com"
+    });
+  }
+  async parse() {
+    if (!this.resolver || this.unresolvedFiles.length) {
+      this.resolver = (async () => {
+        await this.parser.patch(this.unresolvedFiles);
+        return new import_parser.SchemaResolver(await this.parser.parse());
+      })();
+    }
+    return this.resolver;
+  }
+  patchUnresolvedFiles(files) {
+    this.unresolvedFiles.push(...files);
+  }
+  getWebpackWatchPlugin() {
+    return new AtomParserWatchWebpackPlugin({
+      resolveDir: this.resolveDir,
+      onWatchRun: (files) => this.parser.patch(files)
+    });
+  }
+};
+var atom_default = AtomAssetsParser;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",
@@ -21,10 +21,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 +52,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;