dumi 2.3.0-alpha.0 → 2.3.0-alpha.2

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

@@ -1,7 +1,7 @@
 import type { PICKED_PKG_FIELDS } from "../../../constants";
 import type { AtomComponentAsset } from 'dumi-assets-types';
 import { type ComponentType } from 'react';
-import type { ILocalesConfig, IPreviewerProps, IThemeConfig } from '../types';
+import type { ILocalesConfig, IPreviewerProps, IRouteMeta, IThemeConfig } from '../types';
 export type DemoInfo = {
     component: ComponentType;
     asset: IPreviewerProps['asset'];
@@ -13,6 +13,7 @@ interface ISiteContext {
     entryExports: Record<string, any>;
     demos: Record<string, DemoInfo>;
     components: Record<string, AtomComponentAsset>;
+    tabs: IRouteMeta['tabs'];
     locales: ILocalesConfig;
     themeConfig: IThemeConfig;
     hostname?: string;

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

@@ -31,7 +31,8 @@ export var SiteContext = /*#__PURE__*/createContext({
       return _getDemoById.apply(this, arguments);
     }
     return getDemoById;
-  }()
+  }(),
+  tabs: []
 });
 export var useSiteData = function useSiteData() {
   return useContext(SiteContext);

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

@@ -3,5 +3,8 @@ type ReactPromise<T> = Promise<T> & {
     value?: T;
     reason?: any;
 };
+/**
+ * @private Internal usage. Safe to remove
+ */
 export default function use<T>(promise: ReactPromise<T>): T;
 export {};

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

@@ -1,6 +1,9 @@
 // Copy from React official demo.
 // This will be replace if React release new version of use hooks
 
+/**
+ * @private Internal usage. Safe to remove
+ */
 export default function use(promise) {
   if (promise.status === 'fulfilled') {
     return promise.value;

package/dist/client/theme-api/useSiteSearch/index.js

@@ -10,11 +10,11 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useNavData, useSiteData } from 'dumi';
+import { useNavData } from 'dumi';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useLocaleDocRoutes } from "../utils";
 // @ts-ignore
 import workerCode from '-!../../../../compiled/_internal/searchWorker.min?dumi-raw';
+import useSearchData from "./useSearchData";
 var worker;
 
 // for ssr
@@ -26,9 +26,8 @@ if (typeof window !== 'undefined') {
 }
 export var useSiteSearch = function useSiteSearch() {
   var debounceTimer = useRef();
-  var routes = useLocaleDocRoutes();
-  var _useSiteData = useSiteData(),
-    demos = _useSiteData.demos;
+  // const routes = useLocaleDocRoutes();
+  // const { demos } = useSiteData();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     loading = _useState2[0],
@@ -37,15 +36,27 @@ export var useSiteSearch = function useSiteSearch() {
     _useState4 = _slicedToArray(_useState3, 2),
     keywords = _useState4[0],
     setKeywords = _useState4[1];
-  var navData = useNavData();
-  var _useState5 = useState([]),
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    result = _useState6[0],
-    setResult = _useState6[1];
+    enabled = _useState6[0],
+    setEnabled = _useState6[1];
+  var navData = useNavData();
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    result = _useState8[0],
+    setResult = _useState8[1];
   var setter = useCallback(function (val) {
     setLoading(true);
     setKeywords(val);
+    if (val) {
+      setEnabled(true);
+    }
   }, []);
+  var _useSearchData = useSearchData(enabled),
+    _useSearchData2 = _slicedToArray(_useSearchData, 2),
+    filledRoutes = _useSearchData2[0],
+    demos = _useSearchData2[1];
+  var mergedLoading = loading || !filledRoutes;
   useEffect(function () {
     worker.onmessage = function (e) {
       setResult(e.data);
@@ -53,6 +64,10 @@ export var useSiteSearch = function useSiteSearch() {
     };
   }, []);
   useEffect(function () {
+    if (!filledRoutes || !demos) {
+      return;
+    }
+
     // omit demo component for postmessage
     var demoData = Object.entries(demos).reduce(function (acc, _ref) {
       var _ref2 = _slicedToArray(_ref, 2),
@@ -68,13 +83,16 @@ export var useSiteSearch = function useSiteSearch() {
     worker.postMessage({
       action: 'generate-metadata',
       args: {
-        routes: JSON.parse(JSON.stringify(routes)),
+        routes: JSON.parse(JSON.stringify(filledRoutes)),
         nav: navData,
         demos: demoData
       }
     });
-  }, [routes, demos, navData]);
+  }, [demos, navData, filledRoutes]);
   useEffect(function () {
+    if (!filledRoutes) {
+      return;
+    }
     var str = keywords.trim();
     if (str) {
       clearTimeout(debounceTimer.current);
@@ -89,11 +107,11 @@ export var useSiteSearch = function useSiteSearch() {
     } else {
       setResult([]);
     }
-  }, [keywords]);
+  }, [keywords, filledRoutes]);
   return {
     keywords: keywords,
     setKeywords: setter,
     result: result,
-    loading: loading
+    loading: mergedLoading
   };
 };

package/dist/client/theme-api/useSiteSearch/useSearchData.d.ts

@@ -0,0 +1,9 @@
+import type { DemoInfo } from '../context';
+import { useLocaleDocRoutes } from '../utils';
+type Demos = Record<string, DemoInfo>;
+type ReturnData = [
+    routes: ReturnType<typeof useLocaleDocRoutes> | null,
+    demo: Demos | null
+];
+export default function useSearchData(enabled: boolean): ReturnData;
+export {};

package/dist/client/theme-api/useSiteSearch/useSearchData.js

@@ -0,0 +1,76 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { loadFilesMeta, useSiteData } from 'dumi';
+import React from 'react';
+import { useLocaleDocRoutes } from "../utils";
+export default function useSearchData(enabled) {
+  var routes = useLocaleDocRoutes();
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filesMeta = _React$useState2[0],
+    setFilesMeta = _React$useState2[1];
+  var _useSiteData = useSiteData(),
+    tabs = _useSiteData.tabs;
+  React.useEffect(function () {
+    if (enabled) {
+      loadFilesMeta().then(function (data) {
+        setFilesMeta(data);
+      });
+    }
+  }, [enabled]);
+  return React.useMemo(function () {
+    if (!filesMeta) {
+      return [null, null];
+    }
+
+    // Route Meta
+    var mergedRoutes = {};
+    Object.keys(routes).forEach(function (routeId) {
+      mergedRoutes[routeId] = _objectSpread({}, routes[routeId]);
+
+      // Fill routes meta
+      if (mergedRoutes[routeId].meta) {
+        var _mergedRoutes$routeId;
+        mergedRoutes[routeId].meta = _objectSpread(_objectSpread(_objectSpread({}, mergedRoutes[routeId].meta), filesMeta[routeId]), {}, {
+          tabs: (_mergedRoutes$routeId = mergedRoutes[routeId].tabs) === null || _mergedRoutes$routeId === void 0 ? void 0 : _mergedRoutes$routeId.map(function (id) {
+            var meta = {
+              frontmatter: {
+                title: tabs[id].title
+              },
+              toc: [],
+              texts: []
+            };
+            return _objectSpread(_objectSpread({}, tabs[id]), {}, {
+              meta: filesMeta[id] || meta
+            });
+          })
+        });
+      }
+    });
+
+    // Demos
+    var demos = Object.entries(filesMeta).reduce(function (acc, _ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        id = _ref2[0],
+        meta = _ref2[1];
+      // append route id to demo
+      Object.values(meta.demos).forEach(function (demo) {
+        demo.routeId = id;
+      });
+      // merge demos
+      Object.assign(acc, meta.demos);
+      return acc;
+    }, {});
+    return [mergedRoutes, demos];
+  }, [filesMeta, routes, tabs]);
+}

package/dist/features/exports.js

@@ -45,7 +45,8 @@ var exports_default = (api) => {
       path: "dumi/exports.ts",
       content: `export * from '../exports';
 export * from '${(0, import_plugin_utils.winPath)(require.resolve("../client/theme-api"))}';
-export { getRouteMetaById } from './meta/route-meta';`
+export { getRouteMetaById } from './meta/route-meta';
+export { loadFilesMeta } from './meta/search';`
     });
   });
 };

package/dist/features/meta.js

@@ -71,6 +71,14 @@ var meta_default = (api) => {
       key: "dumi.modifyMetaFiles",
       initialValue: JSON.parse(JSON.stringify(metaFiles))
     });
+    api.writeTmpFile({
+      noPluginDir: true,
+      path: "dumi/meta/search.ts",
+      tplPath: (0, import_plugin_utils.winPath)((0, import_path.join)(import_constants.TEMPLATES_DIR, "meta-search.ts.tpl")),
+      context: {
+        metaFiles: parsedMetaFiles
+      }
+    });
     api.writeTmpFile({
       noPluginDir: true,
       path: "dumi/meta/frontmatter.ts",

package/dist/templates/ContextWrapper.ts.tpl

@@ -3,6 +3,7 @@ import { useOutlet, history } from 'dumi';
 import { warning } from 'rc-util';
 import { SiteContext, type ISiteContext } from '{{{contextPath}}}';
 import { components } from '../meta/atoms';
+import { tabs } from '../meta/tabs';
 import { getDemoById } from '../meta/demos';
 import { locales } from '../locales/config';
 {{{defaultExport}}}
@@ -47,6 +48,7 @@ export default function DumiContextWrapper() {
       entryExports,
       demos: null,
       components,
+      tabs,
       locales,
       loading,
       setLoading,
@@ -70,6 +72,7 @@ export default function DumiContextWrapper() {
     historyType,
     entryExports,
     components,
+    tabs,
     locales,
     loading,
     setLoading,

package/dist/templates/meta-search.ts.tpl

@@ -0,0 +1,43 @@
+// This will bundle all the site demos and meta data into one file
+// which should only async load on search
+const filesMetaTabs = {
+  {{#metaFiles}}
+  {{#tabs}}
+  '{{{id}}}': {{{tabs}}},
+  {{/tabs}}
+  {{/metaFiles}}
+}
+
+// generate demos data in runtime, for reuse route.id to reduce bundle size
+export const demos = {};
+
+/** @private Internal usage. Safe to refactor. */
+export async function loadFilesMeta() {
+  const metaMap: Record<string, any> = {};
+  const idList = [
+    {{#metaFiles}}
+    '{{{id}}}',
+    {{/metaFiles}}
+  ];
+
+  {{#metaFiles}}
+  metaMap['{{{id}}}'] = import('{{{file}}}?type=meta');
+  {{/metaFiles}}
+
+  // Wait for all meta data to be loaded
+  const metaList = await Promise.all(idList.map(id => metaMap[id]));
+
+  // Merge into filesMeta
+  const filesMeta = {};
+
+  idList.forEach((id, index) => {
+    const meta = metaList[index];
+
+    filesMeta[id] = {
+      ...meta,
+      tabs: filesMetaTabs[id],
+    };
+  });
+
+  return filesMeta;
+}

package/index.d.ts

@@ -9,3 +9,6 @@ export * from './dist';
 export { defineConfig } from './dist';
 export * from './dist/client/theme-api';
 export { IApi } from './dist/types';
+export function getRouteMetaById(id: string): Promise<any>;
+/** @private Internal usage. Safe to remove */
+export function loadFilesMeta(): Promise<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.3.0-alpha.0",
+  "version": "2.3.0-alpha.2",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",

package/theme-default/locales/en-US.json

@@ -38,5 +38,6 @@
   "content.footer.actions.previous": "PREV",
   "content.footer.actions.next": "NEXT",
   "search.not.found": "No content was found",
+  "search.loading": "Loading...",
   "layout.sidebar.btn": "Sidebar"
 }

package/theme-default/locales/zh-CN.json

@@ -37,5 +37,6 @@
   "content.footer.actions.previous": "上一篇",
   "content.footer.actions.next": "下一篇",
   "search.not.found": "未找到相关内容",
+  "search.loading": "加载中...",
   "layout.sidebar.btn": "侧边菜单"
 }

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

@@ -9,11 +9,11 @@ import { ReactComponent as IconArrowDown } from '@ant-design/icons-svg/inline-sv
 import { ReactComponent as IconArrowUp } from '@ant-design/icons-svg/inline-svg/outlined/arrow-up.svg';
 import { ReactComponent as IconSearch } from '@ant-design/icons-svg/inline-svg/outlined/search.svg';
 import { useSiteSearch } from 'dumi';
-import React, { useEffect, useRef, useState } from 'react';
 import SearchResult from 'dumi/theme/slots/SearchResult';
-import "./index.less";
+import React, { useEffect, useRef, useState } from 'react';
 import { Input } from "./Input";
 import { Mask } from "./Mask";
+import "./index.less";
 export { Input as SearchInput } from "./Input";
 export { Mask as SearchMask } from "./Mask";
 var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(typeof navigator !== 'undefined' ? (_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.platform : '');
@@ -100,7 +100,7 @@ var SearchBar = function SearchBar() {
     ref: inputRef
   }), /*#__PURE__*/React.createElement("span", {
     className: "dumi-default-search-shortcut"
-  }, symbol, " K"), keywords.trim() && focusing && (result.length || !loading) && !modalVisible && /*#__PURE__*/React.createElement("div", {
+  }, symbol, " K"), keywords.trim() && focusing && !modalVisible && /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-search-popover"
   }, /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(SearchResult, {
     data: result,

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

@@ -123,6 +123,39 @@ var SearchResult = function SearchResult(props) {
       return document.removeEventListener('keydown', handler);
     };
   });
+  var returnNode = null;
+  if (props.loading) {
+    returnNode = /*#__PURE__*/React.createElement("div", {
+      className: "dumi-default-search-empty"
+    }, /*#__PURE__*/React.createElement(IconInbox, null), /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "search.loading"
+    }));
+  } else if (props.data.length) {
+    returnNode = /*#__PURE__*/React.createElement("dl", null, data.map(function (item, i) {
+      return item.type === 'title' ? /*#__PURE__*/React.createElement("dt", {
+        key: String(i)
+      }, item.value.title) : /*#__PURE__*/React.createElement("dd", {
+        key: String(i)
+      }, /*#__PURE__*/React.createElement(Link, {
+        to: item.value.link,
+        "data-active": activeIndex === item.activeIndex || undefined,
+        onClick: function onClick() {
+          var _props$onItemSelect2;
+          return (_props$onItemSelect2 = props.onItemSelect) === null || _props$onItemSelect2 === void 0 ? void 0 : _props$onItemSelect2.call(props, item.value);
+        }
+      }, /*#__PURE__*/React.createElement(ICONS_MAPPING[item.value.type]), /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement(Highlight, {
+        texts: item.value.highlightTitleTexts
+      })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Highlight, {
+        texts: item.value.highlightTexts
+      }))));
+    }));
+  } else {
+    returnNode = /*#__PURE__*/React.createElement("div", {
+      className: "dumi-default-search-empty"
+    }, /*#__PURE__*/React.createElement(IconInbox, null), /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "search.not.found"
+    }));
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-search-result",
     onMouseEnter: function onMouseEnter() {
@@ -136,27 +169,6 @@ var SearchResult = function SearchResult(props) {
     onMouseUpCapture: function onMouseUpCapture() {
       document.activeElement.blur();
     }
-  }, Boolean(props.data.length || props.loading) ? /*#__PURE__*/React.createElement("dl", null, data.map(function (item, i) {
-    return item.type === 'title' ? /*#__PURE__*/React.createElement("dt", {
-      key: String(i)
-    }, item.value.title) : /*#__PURE__*/React.createElement("dd", {
-      key: String(i)
-    }, /*#__PURE__*/React.createElement(Link, {
-      to: item.value.link,
-      "data-active": activeIndex === item.activeIndex || undefined,
-      onClick: function onClick() {
-        var _props$onItemSelect2;
-        return (_props$onItemSelect2 = props.onItemSelect) === null || _props$onItemSelect2 === void 0 ? void 0 : _props$onItemSelect2.call(props, item.value);
-      }
-    }, /*#__PURE__*/React.createElement(ICONS_MAPPING[item.value.type]), /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement(Highlight, {
-      texts: item.value.highlightTitleTexts
-    })), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Highlight, {
-      texts: item.value.highlightTexts
-    }))));
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: "dumi-default-search-empty"
-  }, /*#__PURE__*/React.createElement(IconInbox, null), /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "search.not.found"
-  })));
+  }, returnNode);
 };
 export default SearchResult;

package/dist/templates/meta.ts.tpl

@@ -1,23 +0,0 @@
-{{#metaFiles}}
-import { frontmatter as fm{{{index}}}, toc as toc{{{index}}} } from '{{{file}}}?type=meta';
-{{/metaFiles}}
-
-export { components } from './atoms';
-export { tabs } from './tabs';
-
-export const filesMeta = {
-  {{#metaFiles}}
-  '{{{id}}}': {
-    frontmatter: fm{{{index}}},
-    toc: toc{{{index}}},
-    texts: [],
-    demos: {},
-    {{#tabs}}
-    tabs: {{{tabs}}},
-    {{/tabs}}
-  },
-  {{/metaFiles}}
-}
-
-// generate demos data in runtime, for reuse route.id to reduce bundle size
-export const demos = {};