@antv/dumi-theme-antv 0.6.4-beta.2 → 0.6.4-beta.4

package/dist/builtins/Playground/index.js

@@ -9,7 +9,7 @@ import { get } from 'lodash-es';
 import React, { useContext } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ThemeAntVContext } from "../../context";
-import { CodeRunner } from "dumi/theme/slots/CodeRunner";
+import CodeRunner from "dumi/theme/slots/CodeRunner";
 import styles from "./index.module.less";
 /**
  * Markdown 标签插件 Playground

package/dist/common/ClientOnly.js

@@ -0,0 +1,21 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useLayoutEffect, useState } from 'react';
+var ClientOnly = function ClientOnly(_ref) {
+  var children = _ref.children,
+    _ref$fallback = _ref.fallback,
+    fallback = _ref$fallback === void 0 ? null : _ref$fallback;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    clientReady = _useState2[0],
+    setClientReady = _useState2[1];
+  useLayoutEffect(function () {
+    setClientReady(true);
+  }, []);
+  return clientReady ? children : fallback;
+};
+export default ClientOnly;

package/dist/common/CommonHelmet.js

@@ -0,0 +1,85 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+import { Helmet, useLocale, useSiteData } from 'dumi';
+import { isEqual } from 'lodash-es';
+import React, { useEffect } from 'react';
+import { icWithLocale } from "../slots/hooks";
+var CommonHelmet = function CommonHelmet(_ref) {
+  var titleSuffix = _ref.titleSuffix,
+    propTitle = _ref.title,
+    propDescription = _ref.description,
+    propMeta = _ref.meta;
+  var locale = useLocale();
+  var lang = locale.id;
+  var _useSiteData = useSiteData(),
+    metas = _useSiteData.themeConfig.metas;
+  var defaultTitle = icWithLocale(metas.title, lang);
+  var defaultDescription = icWithLocale(metas.description, lang);
+  var helmetData = React.useMemo(function () {
+    var title = propTitle || '';
+    var fullTitle = "".concat(title, " | ").concat(titleSuffix || defaultTitle);
+    var description = propDescription || defaultDescription;
+    var defaultMeta = [{
+      name: "description",
+      content: description
+    },
+    // Open Graph 标签，指定页面在社交媒体上的展示效果
+    {
+      property: "og:title",
+      content: title
+    }, {
+      property: "og:description",
+      content: description
+    }, {
+      property: "og:image",
+      content: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png'
+    }, {
+      property: "og:type",
+      content: "website"
+    },
+    // Twitter 卡片
+    {
+      name: "twitter:card",
+      content: "summary"
+    }, {
+      name: "twitter:title",
+      content: title
+    }, {
+      name: "twitter:description",
+      content: description
+    }, {
+      property: "twitter:image",
+      content: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png'
+    }];
+    return {
+      title: title,
+      description: description,
+      fullTitle: fullTitle,
+      defaultMeta: defaultMeta,
+      meta: [].concat(defaultMeta, _toConsumableArray(propMeta || []))
+    };
+  }, [propTitle, propDescription, titleSuffix, propMeta]);
+  useEffect(function () {
+    // 延迟 document.title 设置标题作为备份机制
+    var timer = setTimeout(function () {
+      document.title = helmetData.fullTitle;
+    }, 100);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [helmetData.fullTitle]);
+  return /*#__PURE__*/React.createElement(Helmet, {
+    htmlAttributes: {
+      lang: lang
+    },
+    title: helmetData.fullTitle,
+    meta: helmetData.meta
+  });
+};
+export default /*#__PURE__*/React.memo(CommonHelmet, function (prevProps, nextProps) {
+  return prevProps.title === nextProps.title && prevProps.description === nextProps.description && prevProps.titleSuffix === nextProps.titleSuffix && isEqual(prevProps.meta, nextProps.meta);
+});

package/dist/common/InViewSuspense.js

@@ -0,0 +1,29 @@
+/**
+ * 只在组件进入视口（可见区域）时才会加载和渲染被包裹的懒加载组件
+ */
+import { Skeleton } from 'antd';
+import React, { Suspense } from 'react';
+import { InView } from 'react-intersection-observer';
+var InViewSuspense = function InViewSuspense(_ref) {
+  var children = _ref.children,
+    _ref$fallback = _ref.fallback,
+    fallback = _ref$fallback === void 0 ? /*#__PURE__*/React.createElement(Skeleton.Input, {
+      active: true,
+      size: "small"
+    }) : _ref$fallback,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 200 : _ref$delay;
+  return /*#__PURE__*/React.createElement(InView, {
+    triggerOnce: true,
+    delay: delay
+  }, function (_ref2) {
+    var inView = _ref2.inView,
+      ref = _ref2.ref;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, /*#__PURE__*/React.createElement(Suspense, {
+      fallback: fallback
+    }, inView ? children : /*#__PURE__*/React.createElement("span", null)));
+  });
+};
+export default InViewSuspense;

package/dist/hooks/useLocale.js

@@ -0,0 +1,11 @@
+import { useLocale as useDumiLocale } from 'dumi';
+/**
+ * 获取国际化
+ */
+var useLocale = function useLocale(localeMap) {
+  var _useDumiLocale = useDumiLocale(),
+    id = _useDumiLocale.id;
+  var localeType = id === 'zh' ? 'zh' : 'en';
+  return [localeMap === null || localeMap === void 0 ? void 0 : localeMap[localeType], localeType];
+};
+export default useLocale;

package/dist/hooks/useMenu.js

@@ -7,27 +7,20 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { useFullSidebarData, useLocale, useLocation, useNavigate, useSiteData } from 'dumi';
+import { useFullSidebarData, useLocale, useLocation, useSiteData } from 'dumi';
 import { get } from 'lodash-es';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import Link from "../common/Link";
+import { icWithLocale } from "../slots/hooks";
 import styles from "../slots/ManualContent/index.module.less";
 import { getBaseRoute } from "../slots/ManualContent/utils";
 import { flattenMenu } from "../utils/menu";
-export var useMenu = function useMenu() {
-  var _navOf;
-  var fullData = useFullSidebarData();
-  var _useLocation = useLocation(),
-    pathname = _useLocation.pathname;
-  var _useSiteData = useSiteData(),
-    _useSiteData$themeCon = _useSiteData.themeConfig,
-    docs = _useSiteData$themeCon.docs,
-    navs = _useSiteData$themeCon.navs;
-  var baseRoute = getBaseRoute();
-  var navigate = useNavigate();
-  var locale = useLocale();
-  var currentLocale = locale.id;
-  var getMenuData = function getMenuData(fullData, rootList, hrefId) {
+
+/**
+ * 根据 baseRoute 获取特定的菜单数据（纯函数）
+ */
+export var getMenuData = function getMenuData(fullData, rootList, baseRoute, locale) {
+  var getMenuDataInternal = function getMenuDataInternal(fullData, rootList, hrefId) {
     var fullSidebarDataToMenuData = function fullSidebarDataToMenuData(rootList, hrefId, list) {
       // 递归
       rootList.forEach(function (item) {
@@ -37,7 +30,7 @@ export var useMenu = function useMenu() {
           if (id === hrefId) {
             list.push(_objectSpread(_objectSpread({}, item), {}, {
               key: href,
-              label: item.title[currentLocale]
+              label: icWithLocale(item.title, locale)
             }));
           }
         }
@@ -46,32 +39,34 @@ export var useMenu = function useMenu() {
         _step;
       try {
         var _loop = function _loop() {
-          var _fullData$item$key$0$;
           var item = _step.value;
           item.children = [];
           fullSidebarDataToMenuData(rootList, item.key, item.children);
-          fullData[item.key] && ((_fullData$item$key$0$ = fullData[item.key][0].children) === null || _fullData$item$key$0$ === void 0 ? void 0 : _fullData$item$key$0$.forEach(function (itemChild) {
-            var label = itemChild.title;
-            var key = itemChild.link;
-            var tag = get(itemChild, ['frontmatter', 'tag']);
-            item.children.push(_objectSpread(_objectSpread({}, itemChild), {}, {
-              label: tag ? /*#__PURE__*/React.createElement(Link, {
-                to: key
-              }, /*#__PURE__*/React.createElement("div", {
-                className: styles.memuLabel
-              }, label, /*#__PURE__*/React.createElement("div", {
-                className: styles.tag
-              }, tag))) : /*#__PURE__*/React.createElement(Link, {
-                to: key
-              }, label),
-              key: key
-            }));
-          }));
+          if (fullData[item.key]) {
+            var _fullData$item$key$0$;
+            (_fullData$item$key$0$ = fullData[item.key][0].children) === null || _fullData$item$key$0$ === void 0 || _fullData$item$key$0$.forEach(function (itemChild) {
+              var label = itemChild.title;
+              var key = itemChild.link;
+              var tag = get(itemChild, ['frontmatter', 'tag']);
+              item.children.push(_objectSpread(_objectSpread({}, itemChild), {}, {
+                label: tag ? /*#__PURE__*/React.createElement(Link, {
+                  to: key
+                }, /*#__PURE__*/React.createElement("div", {
+                  className: styles.memuLabel
+                }, label, /*#__PURE__*/React.createElement("div", {
+                  className: styles.tag
+                }, tag))) : /*#__PURE__*/React.createElement(Link, {
+                  to: key
+                }, label),
+                key: key
+              }));
+            });
+          }
           // children 的 order 排序
           item.children.sort(function (a, b) {
             return a.order - b.order;
           });
-          if (item.children.length == 0) delete item.children;
+          if (item.children.length === 0) delete item.children;
         };
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           _loop();
@@ -82,17 +77,19 @@ export var useMenu = function useMenu() {
         _iterator.f();
       }
       if (hrefId === baseRoute) {
-        var _fullData$baseRoute$;
-        fullData[baseRoute] && ((_fullData$baseRoute$ = fullData[baseRoute][0].children) === null || _fullData$baseRoute$ === void 0 ? void 0 : _fullData$baseRoute$.forEach(function (itemChild) {
-          var key = itemChild.link;
-          var label = itemChild.title;
-          list.push(_objectSpread(_objectSpread({}, itemChild), {}, {
-            label: /*#__PURE__*/React.createElement(Link, {
-              to: key
-            }, label),
-            key: key
-          }));
-        }));
+        if (fullData[baseRoute]) {
+          var _fullData$baseRoute$;
+          (_fullData$baseRoute$ = fullData[baseRoute][0].children) === null || _fullData$baseRoute$ === void 0 || _fullData$baseRoute$.forEach(function (itemChild) {
+            var key = itemChild.link;
+            var label = itemChild.title;
+            list.push(_objectSpread(_objectSpread({}, itemChild), {}, {
+              label: /*#__PURE__*/React.createElement(Link, {
+                to: key
+              }, label),
+              key: key
+            }));
+          });
+        }
         list.sort(function (a, b) {
           return a.order - b.order;
         });
@@ -101,36 +98,34 @@ export var useMenu = function useMenu() {
     };
     return fullSidebarDataToMenuData(rootList, hrefId, []);
   };
+  return getMenuDataInternal(fullData, rootList, baseRoute);
+};
+
+/**
+ * 通过 hooks 包装的 getMenuData
+ */
+export var useMenuData = function useMenuData() {
+  var fullData = useFullSidebarData();
+  var _useSiteData = useSiteData(),
+    docs = _useSiteData.themeConfig.docs;
+  var locale = useLocale();
+  var getter = useCallback(function (baseRoute) {
+    return getMenuData(fullData, docs, baseRoute, locale.id);
+  }, [fullData, docs, locale.id]);
+  return getter;
+};
+export var useMenu = function useMenu() {
+  var _useLocation = useLocation(),
+    pathname = _useLocation.pathname;
+  var baseRoute = getBaseRoute(pathname);
+  var getMenuDataFn = useMenuData();
   var menuData = useMemo(function () {
-    return getMenuData(fullData, docs, baseRoute);
-  }, [docs, baseRoute, fullData]);
+    return getMenuDataFn(baseRoute);
+  }, [getMenuDataFn, baseRoute]);
 
   // 将菜单数据扁平化
   var flattedMenuData = useMemo(function () {
     return flattenMenu(menuData);
   }, [menuData]);
-  var selectedKey = pathname;
-
-  // Nav 跳转但不在菜单中，则选中第一个菜单项
-  var navOf = function navOf(navs) {
-    return navs.some(function (nav) {
-      var _nav$slug;
-      return (nav === null || nav === void 0 || (_nav$slug = nav.slug) === null || _nav$slug === void 0 ? void 0 : _nav$slug.replace('docs/', '/')) === pathname;
-    });
-  };
-  var isNavLink = !!navOf(navs);
-  var isExactLink = (_navOf = navOf(navs)) === null || _navOf === void 0 ? void 0 : _navOf.exact;
-  var isLinkInMenu = flattedMenuData.some(function (item) {
-    return item.link === pathname;
-  });
-  if (isNavLink && !isExactLink && !isLinkInMenu) {
-    var firstValidMenuItem = flattedMenuData.find(function (item) {
-      return item.link;
-    });
-    if (firstValidMenuItem) {
-      navigate(firstValidMenuItem.link);
-      selectedKey = firstValidMenuItem.link;
-    }
-  }
-  return [menuData, selectedKey, flattedMenuData];
+  return [menuData, pathname, flattedMenuData];
 };

package/dist/layouts/DocLayout.js

@@ -1,15 +1,15 @@
-import { useLocation, useOutlet, useSiteData } from 'dumi';
+import { Helmet, useLocation, useOutlet, useSiteData } from 'dumi';
 import React, { useEffect } from 'react';
-import { getCurrentPathname } from "../slots/utils";
-import { Index } from "./entry/Index";
-import { Manual } from "./entry/Manual";
+import { getPurePathname } from "../utils/location";
+import IndexLayout from "./IndexLayout";
+import ManualLayout from "./ManualLayout";
 
 // 用户手动添加自己的
 import "../slots/_.less";
 import "../slots/global";
 
 /**
- * DocuLayout 是 dumi2 的内置 layout 入口，在这里使用页面路径进行区分成自己不同的 Layout。
+ * DocLayout 是 dumi2 的内置 layout 入口，在这里使用页面路径进行区分成自己不同的 Layout。
  */
 export default (function () {
   var _useSiteData = useSiteData(),
@@ -22,8 +22,10 @@ export default (function () {
     console.log('%cAntV 让数据栩栩如生', 'color:#5B7102; font-size: 20px;'), console.log('%c新一代数据可视化解决方案', 'color:#5B7102;'), console.log('--------------------------'), console.log('%c关注我们的微信公众号 %c“数据可视化 AntV”%c，获取我们团队最新的进展、动态、分享，也欢迎加入我们！', 'color: red', 'color: pink', 'color: red');
   }, []);
   var outlet = useOutlet();
-  var _useLocation = useLocation(),
-    hash = _useLocation.hash;
+  var location = useLocation();
+  var pathname = location.pathname,
+    hash = location.hash;
+  var purePathname = getPurePathname(pathname);
 
   // 监听 hash 变更，跳转到锚点位置
   // 同时监听页面 loading 状态，因为路由按需加载时需要等待页面渲染完毕才能找到锚点位置
@@ -34,22 +36,29 @@ export default (function () {
       if (elm) document.documentElement.scrollTo(0, elm.offsetTop - 80);
     }
   }, [loading, hash]);
-  var p = getCurrentPathname();
-  // 首页
-  if (p === '/' || p === '/zh' || p === '/en' || p === '/en/') return /*#__PURE__*/React.createElement(Index, null);
+  var content = React.useMemo(function () {
+    // 首页
+    if (['/', ''].includes(purePathname)) {
+      return /*#__PURE__*/React.createElement(IndexLayout, null, outlet);
+    }
 
-  // 匹配 navs 中的 docs 路由
-  var docsRoutes = navs.filter(function (nav) {
-    return nav.slug && nav.slug.startsWith('docs/');
-  }).map(function (nav) {
-    return nav.slug && nav.slug.split('/').find(function (item) {
-      return item !== 'docs';
+    // 匹配 navs 中的 docs 路由
+    var docsRoutes = navs.filter(function (nav) {
+      return nav.slug && nav.slug.startsWith('docs/');
+    }).map(function (nav) {
+      return nav.slug && nav.slug.split('/').find(function (item) {
+        return item !== 'docs';
+      });
     });
-  });
-  if (docsRoutes.some(function (route) {
-    return p.startsWith("/".concat(route)) || p.startsWith("/docs/".concat(route));
-  })) {
-    return /*#__PURE__*/React.createElement(Manual, null, outlet);
-  }
-  return outlet;
+    if (docsRoutes.some(function (slug) {
+      return purePathname.startsWith("/".concat(slug)) || purePathname.startsWith("/docs/".concat(slug));
+    })) {
+      return /*#__PURE__*/React.createElement(ManualLayout, null, outlet);
+    }
+    return outlet;
+  }, [purePathname]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("link", {
+    rel: "shortcut icon",
+    href: "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original"
+  })), content);
 });

package/dist/layouts/IndexLayout/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Footer from "dumi/theme/slots/Footer";
+import Header from "dumi/theme/slots/Header";
+
+/**
+ * 首页布局
+ */
+var IndexLayout = function IndexLayout(props) {
+  var children = props.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement("div", {
+    style: {
+      minHeight: '100vh'
+    }
+  }, children), /*#__PURE__*/React.createElement(Footer, null));
+};
+export default IndexLayout;

package/dist/layouts/{entry/Manual.js → ManualLayout/index.js}

@@ -1,17 +1,17 @@
 import React from 'react';
-import SEO from "../../common/SEO";
-import { Footer } from "dumi/theme/slots/Footer";
-import { Header } from "dumi/theme/slots/Header";
+import Footer from "dumi/theme/slots/Footer";
+import Header from "dumi/theme/slots/Header";
 import { ManualContent } from "dumi/theme/slots/ManualContent";
 
 /**
  * Manual 路由下的入口
  */
-export var Manual = function Manual(_ref) {
+var ManualLayout = function ManualLayout(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, null), /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(ManualContent, null, children), /*#__PURE__*/React.createElement(Footer, {
     isDynamicFooter: true
   }));
-};
+};
+export default ManualLayout;

package/dist/pages/404.js

@@ -1,13 +1,14 @@
 import React from 'react';
-import SEO from "../common/SEO";
+import CommonHelmet from "../common/CommonHelmet";
 import { NotFound as NotFoundPage } from "dumi/theme/slots/404";
-import { Footer } from "dumi/theme/slots/Footer";
-import { Header } from "dumi/theme/slots/Header";
+import Footer from "dumi/theme/slots/Footer";
+import Header from "dumi/theme/slots/Header";
+
 /**
  * 404 页面
  */
 var NotFound = function NotFound() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonHelmet, {
     title: "404: Not found"
   }), /*#__PURE__*/React.createElement(Header, {
     isHomePage: false