dumi 2.0.0-rc.0 → 2.0.0-rc.1

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

@@ -16,5 +16,5 @@ export var DumiDemo = function DumiDemo(props) {
     asset: asset,
     demoUrl: // allow user override demoUrl by frontmatter
     props.previewerProps.demoUrl || "/".concat(SP_ROUTE_PREFIX, "demos/").concat(props.demo.id)
-  }, props.previewerProps), /*#__PURE__*/createElement(component));
+  }, props.previewerProps), props.previewerProps.iframe ? null : /*#__PURE__*/createElement(component));
 };

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

@@ -14,6 +14,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { useFullSidebarData, useSiteData } from 'dumi';
 import { useState } from 'react';
+import { useSidebarDataCompare } from "./useSidebarData";
 import { useLocaleDocRoutes } from "./utils";
 /**
  * hook for get nav data
@@ -26,6 +27,7 @@ export var useNavData = function useNavData() {
       themeConfig = _useSiteData.themeConfig;
 
   var sidebar = useFullSidebarData();
+  var sidebarDataCompare = useSidebarDataCompare();
 
   var _useState = useState(function () {
     // use user config first
@@ -65,11 +67,7 @@ export var useNavData = function useNavData() {
       };
     }); // TODO: 2-level nav data
 
-    return data.sort(function (a, b) {
-      var _a$title;
-
-      return a.order - b.order || ((_a$title = a.title) === null || _a$title === void 0 ? void 0 : _a$title.localeCompare(b.title));
-    });
+    return data.sort(sidebarDataCompare);
   }),
       _useState2 = _slicedToArray(_useState, 1),
       nav = _useState2[0];

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

@@ -11,11 +11,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { matchRoutes, useAppData, useLocation, useRouteData } from 'dumi';
-import { useCallback, useLayoutEffect, useState } from 'react';
-
+import { useCallback, useState } from 'react';
+import { useIsomorphicLayoutEffect } from "./utils";
 /**
  * hook for get matched route meta
  */
+
 export var useRouteMeta = function useRouteMeta() {
   var _useRouteData = useRouteData(),
       route = _useRouteData.route;
@@ -52,7 +53,7 @@ export var useRouteMeta = function useRouteMeta() {
       meta = _useState2[0],
       setMeta = _useState2[1];
 
-  useLayoutEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     setMeta(getter);
   }, [clientRoutes.length, pathname]);
   return meta;

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

@@ -1,4 +1,5 @@
 import type { ISidebarGroup } from './types';
+export declare const useSidebarDataCompare: () => (a: ISidebarGroup | ISidebarGroup['children'][0], b: ISidebarGroup | ISidebarGroup['children'][0]) => number;
 /**
  * hook for get sidebar data for all nav
  */

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

@@ -21,18 +21,28 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { useLocale, useLocation, useSiteData } from 'dumi';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useLocaleDocRoutes } from "./utils";
 var DEFAULT_GROUP_STUB_TITLE = '$default-group-title';
 
 var getLocaleClearPath = function getLocaleClearPath(routePath, locale) {
   return 'base' in locale ? routePath.replace(locale.base.slice(1), '').replace(/^\//, '') : routePath;
 };
+
+export var useSidebarDataCompare = function useSidebarDataCompare() {
+  var locale = useLocale();
+  return useCallback(function (a, b) {
+    return (// small before large
+      a.order - b.order || ( // shallower before deeper for sidebar item
+      a.link ? a.link.split('/').length - b.link.split('/').length : 0) || ( // fallback to compare title (put non-title group at the end)
+      a.title ? a.title.localeCompare(b.title || '', locale.id) : -1)
+    );
+  }, []);
+};
 /**
  * hook for get sidebar data for all nav
  */
 
-
 export var useFullSidebarData = function useFullSidebarData() {
   var locale = useLocale();
   var routes = useLocaleDocRoutes();
@@ -40,6 +50,8 @@ export var useFullSidebarData = function useFullSidebarData() {
   var _useSiteData = useSiteData(),
       themeConfig = _useSiteData.themeConfig;
 
+  var sidebarDataCompare = useSidebarDataCompare();
+
   var _useState = useState(function () {
     // auto generate sidebar data from routes
     var data = Object.values(routes).reduce(function (ret, route) {
@@ -85,20 +97,10 @@ export var useFullSidebarData = function useFullSidebarData() {
           navPath = _ref3[0],
           groups = _ref3[1];
 
-      ret[navPath] = Object.values(groups).sort(function (a, b) {
-        var _a$title;
-
-        return (// sort by group order
-          a.order - b.order || (a.title ? // sort by group title
-          (_a$title = a.title) === null || _a$title === void 0 ? void 0 : _a$title.localeCompare(b.title || '') : // put non-title group at the end
-          1)
-        );
-      }); // sort group children by order or title
+      ret[navPath] = Object.values(groups).sort(sidebarDataCompare); // sort group children by order or title
 
       ret[navPath].forEach(function (group) {
-        return group.children.sort(function (a, b) {
-          return a.order - b.order || a.title.localeCompare(b.title);
-        });
+        return group.children.sort(sidebarDataCompare);
       });
       return ret;
     }, {}); // allow user partial override

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

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import type { IRoutesById } from './types';
 export declare const useLocaleDocRoutes: () => IRoutesById;
 /**
@@ -6,3 +7,4 @@ export declare const useLocaleDocRoutes: () => IRoutesById;
  * @returns code string
  */
 export declare const genReactRenderCode: (version: string) => string;
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

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

@@ -11,7 +11,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { useAppData, useIntl, useSiteData } from 'dumi';
-import { useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 export var useLocaleDocRoutes = function useLocaleDocRoutes() {
   var intl = useIntl();
 
@@ -55,5 +55,6 @@ export var genReactRenderCode = function genReactRenderCode(version) {
     return "".concat(annotation, "\n\nimport React from 'react';\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\n\nconst rootElement = document.getElementById(\"root\");\nconst root = createRoot(rootElement);\n\nroot.render(<App />);");
   }
 
-  return "".concat(annotation, "\n    \nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n    \nReactDOM.render(\n  <App />,\n  document.getElementById('root'),\n);");
-};
+  return "".concat(annotation, "\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(\n  <App />,\n  document.getElementById('root'),\n);");
+};
+export var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/features/compile.js

@@ -67,7 +67,7 @@ var compile_default = (api) => {
     memo.module.rule("dumi-page").type("javascript/auto").test(/\.(j|t)sx?$/).resourceQuery(/meta$/).use("page-meta-loader").loader(require.resolve("../loaders/page"));
     memo.module.rule("dumi-demo").type("javascript/auto").test(/\..+$/).enforce("pre").resourceQuery(/techStack/).use("demo-loader").loader(require.resolve("../loaders/demo")).options({ techStacks, cwd: api.cwd });
     memo.module.rule("dumi-raw").resourceQuery(/raw/).use("raw-loader").loader(require.resolve("raw-loader"));
-    if (api.env === "development") {
+    if (api.env === "development" && memo.plugins.has("fastRefresh")) {
       memo.plugin("fastRefresh").tap(([params]) => [
         {
           ...params,

package/dist/features/locales.js

@@ -77,6 +77,7 @@ export const messages = ${JSON.stringify(api.service.themeData.locales, null, 2)
 import { history } from 'dumi';
 import React, { useState, useLayoutEffect, useCallback, type ReactNode } from 'react';
 import { RawIntlProvider, createIntl, createIntlCache } from '${(0, import_plugin_utils.winPath)(import_path.default.dirname(require.resolve("react-intl/package")))}';
+import { useIsomorphicLayoutEffect } from '${(0, import_plugin_utils.winPath)(require.resolve("../client/theme-api/utils"))}'
 import { locales, messages } from './config';
 
 const cache = createIntlCache();
@@ -96,7 +97,7 @@ const LocalesContainer: FC<{ children: ReactNode }> = (props) => {
   }, []);
   const [intl, setIntl] = useState(() => getIntl());
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     return history.listen(() => {
       setIntl(getIntl());
     });

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

@@ -27,6 +27,7 @@ __export(transformer_exports, {
 module.exports = __toCommonJS(transformer_exports);
 var import_enhanced_resolve = __toESM(require("enhanced-resolve"));
 var import_rehypeDemo = __toESM(require("./rehypeDemo"));
+var import_rehypeDesc = __toESM(require("./rehypeDesc"));
 var import_rehypeEnhancedTag = __toESM(require("./rehypeEnhancedTag"));
 var import_rehypeImg = __toESM(require("./rehypeImg"));
 var import_rehypeIsolation = __toESM(require("./rehypeIsolation"));
@@ -73,7 +74,7 @@ var transformer_default = async (raw, opts) => {
     fileAbsPath: opts.fileAbsPath,
     resolve: opts.resolve,
     resolver
-  }).use(import_rehypeSlug.default).use(rehypeAutolinkHeadings).use(import_rehypeIsolation.default).use(import_rehypeEnhancedTag.default).use(import_rehypeText.default);
+  }).use(import_rehypeSlug.default).use(rehypeAutolinkHeadings).use(import_rehypeIsolation.default).use(import_rehypeEnhancedTag.default).use(import_rehypeDesc.default).use(import_rehypeText.default);
   (_b = opts.extraRehypePlugins) == null ? void 0 : _b.forEach((plugin) => applyUnifiedPlugin({
     plugin,
     processor,

package/dist/loaders/markdown/transformer/rehypeDesc.d.ts

@@ -0,0 +1,6 @@
+import type { Root } from 'hast';
+import type { Transformer } from 'unified';
+/**
+ * rehype plugin for extract fallback description from markdown content
+ */
+export default function rehypeDesc(): Transformer<Root>;

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

@@ -0,0 +1,51 @@
+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/loaders/markdown/transformer/rehypeDesc.ts
+var rehypeDesc_exports = {};
+__export(rehypeDesc_exports, {
+  default: () => rehypeDesc
+});
+module.exports = __toCommonJS(rehypeDesc_exports);
+var visit;
+var EXIT;
+var toString;
+(async () => {
+  ({ visit, EXIT } = await import("unist-util-visit"));
+  ({ toString } = await import("hast-util-to-string"));
+})();
+function rehypeDesc() {
+  return async (tree, vFile) => {
+    if (!vFile.data.frontmatter.description) {
+      visit(tree, "element", (node) => {
+        if (node.tagName === "p") {
+          const text = toString(node).trim();
+          if (text) {
+            vFile.data.frontmatter.description = text;
+            return EXIT;
+          }
+        }
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

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

@@ -68,7 +68,7 @@ function remarkEmbed(opts) {
           } else if (hash.startsWith("RE-")) {
             content = (0, import_utils.getFileContentByRegExp)(content, hash.slice(3), absPath);
           }
-          const mdast = unified().use(remarkParse).use(remarkFrontmatter).use(remarkRawAST).processSync(content).result;
+          const mdast = unified().use(remarkParse).use(remarkEmbed, { ...opts, fileAbsPath: absPath }).use(remarkFrontmatter).use(remarkRawAST).processSync(content).result;
           if (!node.value.endsWith(EMBED_CLOSE_TAG)) {
             for (let j = i; j < parent.children.length; j++) {
               const sibling = parent.children[j];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.1",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",
@@ -21,10 +21,11 @@
     "dev": "father dev",
     "docs:build": "node ./bin/dumi.js build",
     "docs:dev": "node ./bin/dumi.js dev",
+    "docs:sync": "node ./scripts/sync-from-umi.js",
     "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",
+    "prepare": "npm run build && node ./bin/dumi.js setup && npm run docs:sync",
     "prepublishOnly": "npm run build",
     "test": "vitest"
   },

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

@@ -24,7 +24,8 @@ var Hero = function Hero() {
     return /^(\w+:)\/\/|^(mailto|tel):/.test(link) ? /*#__PURE__*/React.createElement("a", {
       href: link,
       target: "_blank",
-      rel: "noreferrer"
+      rel: "noreferrer",
+      key: text
     }, text) : /*#__PURE__*/React.createElement(Link, {
       key: text,
       to: link

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

@@ -1,3 +1,5 @@
+var _navigator;
+
 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."); }
@@ -15,7 +17,7 @@ import { useIntl, useSiteSearch } from 'dumi';
 import React, { useEffect, useRef, useState } from 'react';
 import { SearchResult } from "../SearchResult";
 import "./index.less";
-var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(navigator.platform);
+var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(typeof navigator !== 'undefined' ? (_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.platform : '');
 
 var SearchBar = function SearchBar() {
   var intl = useIntl();
@@ -27,7 +29,11 @@ var SearchBar = function SearchBar() {
       setFocusing = _useState2[1];
 
   var input = useRef(null);
-  var symbol = isAppleDevice ? '⌘' : 'Ctrl';
+
+  var _useState3 = useState('⌘'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      symbol = _useState4[0],
+      setSymbol = _useState4[1];
 
   var _useSiteSearch = useSiteSearch(),
       keywords = _useSiteSearch.keywords,
@@ -36,6 +42,12 @@ var SearchBar = function SearchBar() {
       loading = _useSiteSearch.loading;
 
   useEffect(function () {
+    // why put useEffect?
+    // to avoid Text content mismatch between server & client in ssr
+    if (!isAppleDevice) {
+      setSymbol('Ctrl');
+    }
+
     var handler = function handler(ev) {
       if ((isAppleDevice ? ev.metaKey : ev.ctrlKey) && ev.key === 'k') {
         var _input$current;