dumi 2.0.0-rc.4 → 2.0.0-rc.5

package/dist/client/pages/{Demo.d.ts → Demo/index.d.ts}

@@ -1,3 +1,4 @@
 import { type FC } from 'react';
+import './index.less';
 declare const DemoRenderPage: FC;
 export default DemoRenderPage;

package/dist/client/pages/{Demo.js → Demo/index.js}

@@ -1,5 +1,6 @@
 import { useParams, useSiteData } from 'dumi';
 import { createElement } from 'react';
+import "./index.less";
 
 var DemoRenderPage = function DemoRenderPage() {
   var _useParams = useParams(),

package/dist/client/pages/Demo/index.less

@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}

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

@@ -16,8 +16,7 @@ import React, { useEffect, useState } from 'react';
 import { useTabQueryState } from "./useTabMeta";
 export var DumiPage = function DumiPage(props) {
   var _useLocation = useLocation(),
-      hash = _useLocation.hash,
-      pathname = _useLocation.pathname;
+      hash = _useLocation.hash;
 
   var _useRouteMeta = useRouteMeta(),
       tabs = _useRouteMeta.tabs;
@@ -47,13 +46,11 @@ export var DumiPage = function DumiPage(props) {
 
   useEffect(function () {
     var id = hash.replace('#', '');
-    var elm = id && document.getElementById(id);
-    if (elm) elm.scrollIntoView();
-  }, [hash]); // handle pathname change
-
-  useEffect(function () {
-    document.documentElement.scrollTo(0, 0);
-  }, [pathname]);
+    setTimeout(function () {
+      var elm = id && document.getElementById(decodeURIComponent(id));
+      if (elm) document.documentElement.scrollTo(0, elm.offsetTop - 80);
+    }, 1);
+  }, [hash]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContentTabs, {
     tabs: tabs,
     tabKey: tabKey,

package/dist/features/routes.js

@@ -50,6 +50,16 @@ function flatRoute(route) {
     route.path = route.path === "*" ? route.path : route.absPath.slice(1);
   }
 }
+function getClientPageFile(file, cwd) {
+  try {
+    return import_plugin_utils.resolve.sync(`dumi/dist/${file}`, {
+      basedir: cwd,
+      preserveSymlinks: false
+    });
+  } catch {
+    return require.resolve(`../${file}`);
+  }
+}
 var routes_default = (api) => {
   var _a, _b, _c;
   const extraWatchPaths = [
@@ -112,6 +122,7 @@ var routes_default = (api) => {
     Object.entries(pages).forEach(([, route]) => {
       route.file = (0, import_plugin_utils.winPath)(import_path.default.resolve(api.config.conventionRoutes.base, route.file));
       flatRoute(route);
+      localizeUmiRoute(route, api.config.locales);
       routes[route.id] = route;
     });
     docDirs.map(normalizeDocDir).forEach(({ type, dir }) => {
@@ -155,7 +166,7 @@ var routes_default = (api) => {
         path: "*",
         absPath: "/*",
         parentId: docLayoutId,
-        file: require.resolve("../client/pages/404")
+        file: getClientPageFile("client/pages/404", api.cwd)
       };
     }
     routes["demo-render"] = {
@@ -163,7 +174,7 @@ var routes_default = (api) => {
       path: `${import_constants.SP_ROUTE_PREFIX}demos/:id`,
       absPath: `/${import_constants.SP_ROUTE_PREFIX}demos/:id`,
       parentId: demoLayoutId,
-      file: require.resolve("../client/pages/Demo")
+      file: getClientPageFile("client/pages/Demo", api.cwd)
     };
     return routes;
   });

package/dist/features/theme/index.js

@@ -26,6 +26,7 @@ __export(theme_exports, {
 });
 module.exports = __toCommonJS(theme_exports);
 var import_constants = require("../../constants");
+var import_bundler_utils = require("@umijs/bundler-utils");
 var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
@@ -109,18 +110,28 @@ var theme_default = (api) => {
   api.onGenerateFiles(() => {
     themeMapKeys.forEach((key) => {
       Object.values(originalThemeData[key] || {}).forEach((item) => {
+        let contents = [];
+        const [, exports] = (0, import_bundler_utils.parseModuleSync)({
+          path: item.source,
+          content: import_fs.default.readFileSync(item.source, "utf-8")
+        });
+        if (exports.includes("default")) {
+          contents.push(`export { default } from '${item.source}';`);
+        }
+        if (exports.some((exp) => exp !== "default")) {
+          contents.push(`export * from '${item.source}';`);
+        }
         api.writeTmpFile({
           noPluginDir: true,
           path: `dumi/theme/${key}/${item.specifier}.ts`,
-          content: `export * from '${item.source}';
-export { default } from '${item.source}';`
+          content: contents.join("\n")
         });
       });
     });
     api.writeTmpFile({
       noPluginDir: true,
       path: "dumi/theme/ContextWrapper.tsx",
-      content: `import React, { useState, useEffect } from 'react';
+      content: `import React, { useState, useEffect, useRef } from 'react';
 import { useOutlet, history } from 'dumi';
 import { SiteContext } from '${(0, import_plugin_utils.winPath)(require.resolve("../../client/theme-api/context"))}';
 import { demos, components } from '../meta';
@@ -129,10 +140,19 @@ import { locales } from '../locales/config';
 export default function DumiContextWrapper() {
   const outlet = useOutlet();
   const [loading, setLoading] = useState(true);
+  const prev = useRef(history.location.pathname);
 
-  // mark loading when route change, page component will set false when loaded
   useEffect(() => {
-    return history.listen(() => setLoading(true));
+    return history.listen((next) => {
+      // mark loading when route change, page component will set false when loaded
+      setLoading(true);
+
+      // scroll to top when route changed
+      if (next.location.pathname !== prev.current) {
+        prev.current = next.location.pathname;
+        document.documentElement.scrollTo(0, 0);
+      }
+    });
   }, []);
 
   return (

package/dist/loaders/markdown/transformer/remarkEmbed.js

@@ -44,6 +44,9 @@ var visit;
 })();
 function remarkRawAST() {
   this.Compiler = function Compiler(ast) {
+    visit(ast, "yaml", (_node, i, parent) => {
+      parent.children.splice(i, 1);
+    });
     return ast;
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-rc.4",
+  "version": "2.0.0-rc.5",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",

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

@@ -1,3 +1,5 @@
+var _excluded = ["children"];
+
 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."); }
@@ -10,12 +12,18 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 import throttle from 'lodash.throttle';
 import React, { useEffect, useRef, useState } from 'react';
 import "./index.less";
 
 var Table = function Table(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   var container = useRef(null);
 
   var _useState = useState(false),
@@ -53,7 +61,7 @@ var Table = function Table(_ref) {
     ref: container,
     "data-left-folded": leftFolded || undefined,
     "data-right-folded": rightFolded || undefined
-  }, /*#__PURE__*/React.createElement("table", null, children)));
+  }, /*#__PURE__*/React.createElement("table", props, children)));
 };
 
 export default Table;

package/theme-default/builtins/Table/index.less

@@ -1,7 +1,7 @@
 @import (reference) '../../styles/variables.less';
 
 .@{prefix}-table {
-  margin: 16px 0 32px;
+  margin: 24px 0 32px;
   transform: translate(0, 0);
 
   &-content {
@@ -23,15 +23,15 @@
       left: 0;
       background-image: linear-gradient(
         to right,
-        rgba(0, 0, 0, 0.1),
-        rgba(0, 0, 0, 0)
+        rgb(0 0 0 / 10%),
+        rgb(0 0 0 / 0%)
       );
 
       [data-prefers-color='dark'] & {
         background-image: linear-gradient(
           to right,
-          rgba(0, 0, 0, 0.5),
-          rgba(0, 0, 0, 0)
+          rgb(0 0 0 / 50%),
+          rgb(0 0 0 / 0%)
         );
       }
     }
@@ -40,15 +40,15 @@
       right: 0;
       background-image: linear-gradient(
         to left,
-        rgba(0, 0, 0, 0.1),
-        rgba(0, 0, 0, 0)
+        rgb(0 0 0 / 10%),
+        rgb(0 0 0 / 0%)
       );
 
       [data-prefers-color='dark'] & {
         background-image: linear-gradient(
           to left,
-          rgba(0, 0, 0, 0.5),
-          rgba(0, 0, 0, 0)
+          rgb(0 0 0 / 50%),
+          rgb(0 0 0 / 0%)
         );
       }
     }

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

@@ -3,10 +3,11 @@
 body {
   margin: 0;
   padding: 0;
-  background-color: @c-site-bg;
 }
 
 .@{prefix}-doc-layout {
+  background-color: @c-site-bg;
+
   @media @mobile {
     &::before {
       content: '';

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

@@ -41,6 +41,54 @@
     padding-inline-end: 16px;
     border-color: @c-border-light;
   }
+
+  // blockquote
+  blockquote {
+    font-style: italic;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    background-color: tint(@c-site-bg, 50%);
+    border-left: 5px solid @c-border-light;
+  }
+
+  // list
+  ul li {
+    line-height: 1.8;
+  }
+
+  // anchor of headings
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    > a[aria-hidden]:first-child {
+      float: left;
+      width: 20px;
+      padding-right: 4px;
+      margin-left: -24px;
+      color: @c-text;
+      // hide phantom blank node
+      font-size: 0;
+      text-align: right;
+      line-height: inherit;
+
+      &:hover {
+        border: 0;
+      }
+
+      > .icon-link::before {
+        content: '#';
+        color: @c-text-secondary;
+        font-size: 20px;
+      }
+    }
+
+    &:not(:hover) > a[aria-hidden]:first-child > .icon-link {
+      visibility: hidden;
+    }
+  }
 }
 
 .@{prefix}-content {

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

@@ -48,7 +48,7 @@
 
     > h3 {
       margin: 4px 0;
-      color: #2c4262;
+      color: @c-text;
       font-weight: normal;
       font-size: 20px;
 
@@ -59,7 +59,7 @@
 
     > p {
       margin: 12px 0;
-      color: #61728a;
+      color: @c-text-secondary;
       font-size: 16px;
       line-height: 1.475;
 

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

@@ -35,7 +35,7 @@
 
   > p {
     margin: 32px;
-    color: #4e6789;
+    color: @c-text-secondary;
     font-size: 20px;
     line-height: 1.6;
 

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

@@ -15,7 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { ReactComponent as IconSearch } from '@ant-design/icons-svg/inline-svg/outlined/search.svg';
 import { useIntl, useSiteSearch } from 'dumi';
 import React, { useEffect, useRef, useState } from 'react';
-import { SearchResult } from "../SearchResult";
+import SearchResult from "../SearchResult";
 import "./index.less";
 var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(typeof navigator !== 'undefined' ? (_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.platform : '');
 

package/theme-default/slots/SearchResult/index.d.ts

@@ -2,8 +2,8 @@ import { type useSiteSearch } from 'dumi';
 import { type FC } from 'react';
 import './index.less';
 declare type ISearchResult = ReturnType<typeof useSiteSearch>['result'];
-export declare const SearchResult: FC<{
+declare const SearchResult: FC<{
     data: ISearchResult;
     loading: boolean;
 }>;
-export {};
+export default SearchResult;

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

@@ -106,7 +106,7 @@ var useFlatSearchData = function useFlatSearchData(data) {
   return flatData;
 };
 
-export var SearchResult = function SearchResult(props) {
+var SearchResult = function SearchResult(props) {
   var _useFlatSearchData = useFlatSearchData(props.data),
       _useFlatSearchData2 = _slicedToArray(_useFlatSearchData, 2),
       data = _useFlatSearchData2[0],
@@ -165,4 +165,6 @@ export var SearchResult = function SearchResult(props) {
   }, /*#__PURE__*/React.createElement(IconInbox, null), /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "search.not.found"
   })));
-};
+};
+
+export default SearchResult;

package/theme-default/styles/variables.less

@@ -7,9 +7,9 @@
 @s-header-height-m: 52px;
 
 @c-primary: #1677ff;
-@c-text: #333;
-@c-text-secondary: #666;
-@c-text-note: #999;
+@c-text: #30363f;
+@c-text-secondary: #4f5866;
+@c-text-note: #8a9099;
 @c-border: #d0d5d8;
 @c-border-light: #e4e9ec;
 @c-site-bg: #f7f9fb;