dumi 2.2.0 → 2.2.1

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

@@ -20,7 +20,7 @@ var DemoErrorBoundary = function DemoErrorBoundary(props) {
   }, props.children);
 };
 
-export var DumiDemo = function DumiDemo(props) {
+export var DumiDemo = /*#__PURE__*/React.memo(function (props) {
   var _useSiteData = useSiteData(),
       demos = _useSiteData.demos,
       historyType = _useSiteData.historyType;
@@ -45,4 +45,7 @@ export var DumiDemo = function DumiDemo(props) {
     props.previewerProps.demoUrl || // when use hash route, browser can automatically handle relative paths starting with #
     "".concat(isHashRoute ? "#" : '').concat(basename).concat(SP_ROUTE_PREFIX, "demos/").concat(props.demo.id)
   }, props.previewerProps), props.previewerProps.iframe ? null : /*#__PURE__*/React.createElement(DemoErrorBoundary, null, /*#__PURE__*/createElement(component)));
-};
+}, function (prev, next) {
+  // compare length for performance
+  return JSON.stringify(prev).length === JSON.stringify(next).length;
+});

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

@@ -14,6 +14,7 @@ interface ISiteContext {
     components: Record<string, AtomComponentAsset>;
     locales: ILocalesConfig;
     themeConfig: IThemeConfig;
+    hostname?: string;
     loading: boolean;
     setLoading: (status: boolean) => void;
     /**

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

@@ -11,7 +11,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { getParameters } from 'codesandbox/lib/api/define';
-import { genReactRenderCode } from "./utils";
+import { ApplyPluginsType } from 'dumi';
+import { genReactRenderCode, pluginManager } from "./utils";
 var CSB_API_ENDPOINT = 'https://codesandbox.io/api/v1/sandboxes/define';
 /**
  * get serialized data that use to submit to codesandbox.io
@@ -78,9 +79,15 @@ function getCSBData(opts) {
     content: genReactRenderCode(deps.react),
     isBinary: false
   };
-  return getParameters({
-    files: files
+  var csbOpts = pluginManager.applyPlugins({
+    type: ApplyPluginsType.modify,
+    key: 'modifyCodeSandboxData',
+    initialValue: {
+      files: files
+    },
+    args: opts
   });
+  return getParameters(csbOpts);
 }
 /**
  * use CodeSandbox.io

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

@@ -11,7 +11,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import sdk from '@stackblitz/sdk';
-import { genReactRenderCode } from "./utils";
+import { ApplyPluginsType } from 'dumi';
+import { genReactRenderCode, pluginManager } from "./utils";
 export var openStackBlitz = function openStackBlitz(data) {
   var _data$asset$dependenc, _react, _deps$_react, _reactDom, _deps$_reactDom;
 
@@ -56,5 +57,11 @@ export var openStackBlitz = function openStackBlitz(data) {
   }, null, 2);
   files[entryFileName] = genReactRenderCode(deps.react);
   config.files = files;
-  sdk.openProject(config);
+  var stbOpts = pluginManager.applyPlugins({
+    type: ApplyPluginsType.modify,
+    key: 'modifyStackBlitzData',
+    initialValue: config,
+    args: data
+  });
+  sdk.openProject(stbOpts);
 };

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

@@ -203,8 +203,8 @@ export interface IThemeConfig {
         switch: boolean;
     };
     nprogress?: boolean;
-    socialLinks: {
-        [key in SocialTypes]: string;
+    socialLinks?: {
+        [key in SocialTypes]?: string;
     };
     [key: string]: any;
 }

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

@@ -1,5 +1,11 @@
+import { PluginManager } from 'dumi';
 import { useLayoutEffect } from 'react';
 import type { ILocale, INav, INavItem, IRouteMeta, IRoutesById, IUserNavValue } from './types';
+/**
+ * private instance, do not use it in your code
+ */
+export declare let pluginManager: PluginManager;
+export declare const setPluginManager: (pm: PluginManager) => void;
 export declare const useLocaleDocRoutes: () => IRoutesById;
 /**
  * 在 react 18 中需要新的 render 方式，这个函数用来处理不同的 jsx 模式。

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

@@ -15,6 +15,14 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useAppData, useIntl, useSiteData } from 'dumi';
 import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { useLocale } from "./useLocale";
+/**
+ * private instance, do not use it in your code
+ */
+
+export var pluginManager;
+export var setPluginManager = function setPluginManager(pm) {
+  pluginManager = pm;
+};
 export var useLocaleDocRoutes = function useLocaleDocRoutes() {
   var intl = useIntl();
 

package/dist/constants.d.ts

@@ -16,3 +16,4 @@ export declare const PICKED_PKG_FIELDS: {
 };
 export declare const USELESS_TMP_FILES: string[];
 export declare const VERSION_2_LEVEL_NAV = "^2.2.0";
+export declare const VERSION_2_DEPRECATE_SOFT_BREAKS = "^2.2.0";

package/dist/constants.js

@@ -28,6 +28,7 @@ __export(constants_exports, {
   SP_ROUTE_PREFIX: () => SP_ROUTE_PREFIX,
   THEME_PREFIX: () => THEME_PREFIX,
   USELESS_TMP_FILES: () => USELESS_TMP_FILES,
+  VERSION_2_DEPRECATE_SOFT_BREAKS: () => VERSION_2_DEPRECATE_SOFT_BREAKS,
   VERSION_2_LEVEL_NAV: () => VERSION_2_LEVEL_NAV
 });
 module.exports = __toCommonJS(constants_exports);
@@ -49,6 +50,7 @@ var PICKED_PKG_FIELDS = {
 };
 var USELESS_TMP_FILES = ["tsconfig.json", "typings.d.ts"];
 var VERSION_2_LEVEL_NAV = "^2.2.0";
+var VERSION_2_DEPRECATE_SOFT_BREAKS = "^2.2.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   LOCAL_DUMI_DIR,
@@ -60,5 +62,6 @@ var VERSION_2_LEVEL_NAV = "^2.2.0";
   SP_ROUTE_PREFIX,
   THEME_PREFIX,
   USELESS_TMP_FILES,
+  VERSION_2_DEPRECATE_SOFT_BREAKS,
   VERSION_2_LEVEL_NAV
 });

package/dist/features/compile/index.js

@@ -55,7 +55,8 @@ var compile_default = (api) => {
       resolve: api.config.resolve,
       extraRemarkPlugins: api.config.extraRemarkPlugins,
       extraRehypePlugins: api.config.extraRehypePlugins,
-      routes: api.appData.routes
+      routes: api.appData.routes,
+      pkg: api.pkg
     };
     memo.module.rule("dumi-md").type("javascript/auto").test(/\.md$/).oneOf("md-meta").resourceQuery(/meta$/).use("babel-loader").loader(babelInUmi.loader).options(babelInUmi.options).end().use("md-meta-loader").loader(loaderPath).options({
       ...loaderBaseOpts,

package/dist/features/sitemap.js

@@ -50,7 +50,7 @@ var sitemap_default = (api) => {
     const writeStream = import_fs.default.createWriteStream(import_path.default.join(api.paths.absOutputPath, "sitemap.xml"));
     smis.pipe(writeStream);
     Object.values(api.appData.routes).forEach((route) => {
-      if (!exclude.includes(route.path) && ![":", "*"].some((char) => route.path.includes(char))) {
+      if (!exclude.includes(route.path) && ![":", "*"].some((char) => route.path.includes(char)) && route.path !== "" && !route.isLayout) {
         smis.write({ url: route.path });
       }
     });

package/dist/features/theme/index.js

@@ -34,12 +34,19 @@ var import_derivative = require("../derivative");
 var import_loader = __toESM(require("./loader"));
 var DEFAULT_THEME_PATH = import_path.default.join(__dirname, "../../../theme-default");
 function getPkgThemeName(api) {
+  if (process.env.DUMI_THEME) {
+    const envThemePkgPath = require.resolve(import_path.default.join(process.env.DUMI_THEME, "package.json"), { paths: [api.cwd] });
+    return require(envThemePkgPath).name;
+  }
   const validDeps = Object.assign({}, api.pkg.dependencies, api.pkg.devDependencies);
   const pkgThemeName = Object.keys(validDeps).find((pkg) => pkg.split("/").pop().startsWith(import_constants.THEME_PREFIX));
   return pkgThemeName;
 }
 function getPkgThemePath(api) {
   const pkgThemeName = getPkgThemeName(api);
+  if (process.env.DUMI_THEME) {
+    return import_path.default.resolve(api.cwd, process.env.DUMI_THEME);
+  }
   return pkgThemeName && import_path.default.dirname(import_plugin_utils.resolve.sync(`${pkgThemeName}/package.json`, {
     basedir: api.cwd,
     preserveSymlinks: true
@@ -151,7 +158,7 @@ var theme_default = (api) => {
     return memo;
   });
   api.onGenerateFiles(() => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     themeMapKeys.forEach((key) => {
       Object.values(originalThemeData[key] || {}).forEach((item) => {
         if (item.source === "dumi")
@@ -228,6 +235,7 @@ export default function DumiContextWrapper() {
       locales,
       loading,
       setLoading,
+      hostname: ${JSON.stringify((_b = api.config.sitemap) == null ? void 0 : _b.hostname)},
       themeConfig: ${JSON.stringify(Object.assign(import_plugin_utils.lodash.pick(api.config, "logo", "description", "title"), api.config.themeConfig))},
       _2_level_nav_available: ${api.appData._2LevelNavAvailable},
     }}>
@@ -236,7 +244,7 @@ export default function DumiContextWrapper() {
   );
 }`
     });
-    const primaryColor = typeof ((_b = api.config) == null ? void 0 : _b.theme) === "object" ? (_d = (_c = api.config) == null ? void 0 : _c.theme) == null ? void 0 : _d["@c-primary"] : "#1677ff";
+    const primaryColor = typeof ((_c = api.config) == null ? void 0 : _c.theme) === "object" ? (_e = (_d = api.config) == null ? void 0 : _d.theme) == null ? void 0 : _e["@c-primary"] : "#1677ff";
     api.writeTmpFile({
       noPluginDir: true,
       path: "dumi/theme/nprogress.css",
@@ -321,6 +329,21 @@ export default function DumiContextWrapper() {
   );
 })();`;
   });
+  api.addEntryImportsAhead(() => [
+    {
+      specifier: "{ getPluginManager as getDumiPluginManager }",
+      source: "./core/plugin"
+    },
+    {
+      specifier: "{ setPluginManager as setDumiPluginManager }",
+      source: (0, import_plugin_utils.winPath)(require.resolve("../../client/theme-api/utils"))
+    }
+  ]);
+  api.addEntryCode(() => "setDumiPluginManager(getDumiPluginManager());");
+  api.addRuntimePluginKey(() => [
+    "modifyCodeSandboxData",
+    "modifyStackBlitzData"
+  ]);
   if (require("@umijs/core/package").__npminstall_done && import_fs.default.existsSync(localThemePath) && import_fs.default.lstatSync(localThemePath).isSymbolicLink()) {
     api.chainWebpack((memo) => {
       const devThemeNodeModules = import_path.default.join(api.cwd, "../node_modules");

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

@@ -1,6 +1,6 @@
 import type { IParsedBlockAsset } from "../../../assetParsers/block";
 import type { IRouteMeta } from "../../../client/theme-api/types";
-import type { IDumiConfig, IDumiTechStack } from "../../../types";
+import type { IApi, IDumiConfig, IDumiTechStack } from "../../../types";
 import type { IRoute } from 'umi';
 import type { Data } from 'vfile';
 declare module 'hast' {
@@ -42,6 +42,7 @@ export interface IMdTransformerOptions {
     extraRemarkPlugins?: IDumiConfig['extraRemarkPlugins'];
     extraRehypePlugins?: IDumiConfig['extraRehypePlugins'];
     routes: Record<string, IRoute>;
+    pkg: IApi['pkg'];
 }
 export interface IMdTransformerResult {
     content: string;

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

@@ -25,7 +25,9 @@ __export(transformer_exports, {
   default: () => transformer_default
 });
 module.exports = __toCommonJS(transformer_exports);
+var import_constants = require("../../../constants");
 var import_enhanced_resolve = __toESM(require("enhanced-resolve"));
+var import_plugin_utils = require("umi/plugin-utils");
 var import_rehypeDemo = __toESM(require("./rehypeDemo"));
 var import_rehypeDesc = __toESM(require("./rehypeDesc"));
 var import_rehypeEnhancedTag = __toESM(require("./rehypeEnhancedTag"));
@@ -38,9 +40,17 @@ var import_rehypeRaw = __toESM(require("./rehypeRaw"));
 var import_rehypeSlug = __toESM(require("./rehypeSlug"));
 var import_rehypeStrip = __toESM(require("./rehypeStrip"));
 var import_rehypeText = __toESM(require("./rehypeText"));
+var import_remarkBreaks = __toESM(require("./remarkBreaks"));
 var import_remarkContainer = __toESM(require("./remarkContainer"));
 var import_remarkEmbed = __toESM(require("./remarkEmbed"));
 var import_remarkMeta = __toESM(require("./remarkMeta"));
+function keepSoftBreak(pkg) {
+  var _a, _b, _c;
+  if (((_a = pkg == null ? void 0 : pkg.name) == null ? void 0 : _a.startsWith("@examples/")) || (pkg == null ? void 0 : pkg.name) === "dumi")
+    return false;
+  const ver = ((_b = pkg == null ? void 0 : pkg.devDependencies) == null ? void 0 : _b.dumi) ?? ((_c = pkg == null ? void 0 : pkg.dependencies) == null ? void 0 : _c.dumi) ?? "^2.0.0";
+  return !import_plugin_utils.semver.subset(ver, import_constants.VERSION_2_DEPRECATE_SOFT_BREAKS);
+}
 function applyUnifiedPlugin(opts) {
   const [plugin, options] = Array.isArray(opts.plugin) ? opts.plugin : [opts.plugin];
   const mod = typeof plugin === "function" ? plugin : require(require.resolve(plugin, { paths: [opts.cwd] }));
@@ -53,7 +63,6 @@ var transformer_default = async (raw, opts) => {
   const { default: remarkParse } = await import("remark-parse");
   const { default: remarkFrontmatter } = await import("remark-frontmatter");
   const { default: remarkDirective } = await import("remark-directive");
-  const { default: remarkBreaks } = await import("remark-breaks");
   const { default: remarkGfm } = await import("remark-gfm");
   const { default: remarkRehype } = await import("remark-rehype");
   const { default: rehypeAutolinkHeadings } = await import("rehype-autolink-headings");
@@ -66,7 +75,10 @@ var transformer_default = async (raw, opts) => {
     cwd: opts.cwd,
     fileAbsPath: opts.fileAbsPath,
     resolve: opts.resolve
-  }).use(remarkDirective).use(import_remarkContainer.default).use(remarkBreaks).use(remarkGfm);
+  }).use(remarkDirective).use(import_remarkContainer.default).use(remarkGfm);
+  if (keepSoftBreak(opts.pkg)) {
+    processor.use(import_remarkBreaks.default, { fileAbsPath: opts.fileAbsPath });
+  }
   (_a = opts.extraRemarkPlugins) == null ? void 0 : _a.forEach((plugin) => applyUnifiedPlugin({
     plugin,
     processor,

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

@@ -172,7 +172,7 @@ function rehypeDemo(opts) {
               parseOpts.fileAbsPath = (0, import_plugin_utils.winPath)(codeNode.properties.src);
               let localId = ((_b = codeNode.properties) == null ? void 0 : _b.id) ?? import_path.default.parse(parseOpts.fileAbsPath.replace(/\/index\.(j|t)sx?$/, "")).name;
               parseOpts.id = getCodeId(opts.cwd, opts.fileAbsPath, localId, vFile.data.frontmatter.atomId);
-              component = `React.lazy(() => import( /* webpackChunkName: "${chunkName}" */ '${(0, import_plugin_utils.winPath)(parseOpts.fileAbsPath)}?techStack=${techStack.name}'))`;
+              component = `React.memo(React.lazy(() => import( /* webpackChunkName: "${chunkName}" */ '${(0, import_plugin_utils.winPath)(parseOpts.fileAbsPath)}?techStack=${techStack.name}')))`;
               if (codeValue)
                 codeNode.properties.title = codeValue;
               (_c = codeNode.properties).filename ?? (_c.filename = (0, import_plugin_utils.winPath)(import_path.default.relative(opts.cwd, parseOpts.fileAbsPath)));

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

@@ -0,0 +1,3 @@
+import type { IMdTransformerOptions } from "./index";
+import type { Root } from 'mdast';
+export default function remarkBreaks(opts: Pick<IMdTransformerOptions, 'fileAbsPath'>): (tree: Root) => void;

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

@@ -0,0 +1,54 @@
+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/remarkBreaks.ts
+var remarkBreaks_exports = {};
+__export(remarkBreaks_exports, {
+  default: () => remarkBreaks
+});
+module.exports = __toCommonJS(remarkBreaks_exports);
+var import_plugin_utils = require("umi/plugin-utils");
+var findAndReplace;
+(async () => {
+  ({ findAndReplace } = await import("mdast-util-find-and-replace"));
+})();
+var warningLock = /* @__PURE__ */ new Map();
+function logDeprecationWarning(fileAbsPath) {
+  if (warningLock.get(fileAbsPath))
+    return;
+  warningLock.set(fileAbsPath, true);
+  import_plugin_utils.logger.warn("Detected that you are using soft breaks, dumi will transform them into spaces after the declaration", "version greater than or equal to `2.2.0`, however, they are still being transformed as line breaks now, please", "migrate them to hard breaks before upgrading the declaration version for dumi.\n", import_plugin_utils.chalk.grey(`  at ${fileAbsPath}
+`), import_plugin_utils.chalk.grey("  see also: https://github.com/umijs/dumi/issues/1683\n"));
+}
+function remarkBreaks(opts) {
+  const replace = (_, match) => {
+    if (match.input === "\n" || match.input === "\r" || match.input === "\r\n") {
+      return false;
+    }
+    logDeprecationWarning(opts.fileAbsPath);
+    return { type: "break" };
+  };
+  return (tree) => {
+    findAndReplace(tree, /\r?\n|\r/g, replace);
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/techStacks/react.js

@@ -58,9 +58,9 @@ var ReactTechStack = class {
           type: "es6"
         }
       });
-      return `React.lazy(async () => {
+      return `React.memo(React.lazy(async () => {
 ${code}
-})`;
+}))`;
     }
     return raw;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",
@@ -106,6 +106,7 @@
     "html2sketch": "^1.0.1",
     "js-yaml": "^4.1.0",
     "lodash.throttle": "^4.1.1",
+    "mdast-util-find-and-replace": "^2.2.2",
     "mdast-util-to-string": "^3.1.0",
     "nprogress": "^0.2.0",
     "pluralize": "^8.0.0",
@@ -122,7 +123,6 @@
     "rehype-autolink-headings": "^6.1.1",
     "rehype-remove-comments": "^5.0.0",
     "rehype-stringify": "^9.0.3",
-    "remark-breaks": "^3.0.2",
     "remark-directive": "^2.0.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",

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

@@ -29,10 +29,12 @@ var DocLayout = function DocLayout() {
   var sidebar = useSidebarData();
 
   var _useLocation = useLocation(),
-      hash = _useLocation.hash;
+      hash = _useLocation.hash,
+      pathname = _useLocation.pathname;
 
   var _useSiteData = useSiteData(),
-      loading = _useSiteData.loading;
+      loading = _useSiteData.loading,
+      hostname = _useSiteData.hostname;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -80,9 +82,15 @@ var DocLayout = function DocLayout() {
   }), fm.keywords && /*#__PURE__*/React.createElement("meta", {
     name: "keywords",
     content: fm.keywords.join(',')
-  }), fm.keywords && /*#__PURE__*/React.createElement("meta", {
-    property: "og:keywords",
-    content: fm.keywords.join(',')
+  }), fm.keywords && fm.keywords.map(function (keyword) {
+    return /*#__PURE__*/React.createElement("meta", {
+      key: keyword,
+      property: "article:tag",
+      content: keyword
+    });
+  }), hostname && /*#__PURE__*/React.createElement("link", {
+    rel: "canonical",
+    href: hostname + pathname
   })), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Hero, null), /*#__PURE__*/React.createElement(Features, null), showSidebar && /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-doc-layout-mobile-bar"
   }, /*#__PURE__*/React.createElement("button", {

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

@@ -10,11 +10,11 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import HeaderExtra from "../HeadeExtra";
 import { ReactComponent as IconClose } from '@ant-design/icons-svg/inline-svg/outlined/close.svg';
 import { ReactComponent as IconMenu } from '@ant-design/icons-svg/inline-svg/outlined/menu.svg';
 import { useRouteMeta, useSiteData } from 'dumi';
 import ColorSwitch from 'dumi/theme/slots/ColorSwitch';
+import HeaderExtra from 'dumi/theme/slots/HeaderExtra';
 import LangSwitch from 'dumi/theme/slots/LangSwitch';
 import Logo from 'dumi/theme/slots/Logo';
 import Navbar from 'dumi/theme/slots/Navbar';

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

@@ -36,6 +36,7 @@
     line-height: 1;
     border: 0;
     background-color: transparent;
+    cursor: pointer;
 
     @{dark-selector} & {
       color: @c-text-secondary-dark;

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

@@ -75,7 +75,7 @@ var NavbarContent = function NavbarContent(_ref2) {
   var data = _ref2.data;
   return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(function (item) {
     return /*#__PURE__*/React.createElement("li", {
-      key: item.activePath
+      key: item.activePath || item.link || item.title
     }, item.link && /^(\w+:)\/\/|^(mailto|tel):/.test(item.link) ? /*#__PURE__*/React.createElement("a", {
       href: item.link,
       target: "_blank",

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

@@ -1,11 +1,12 @@
 import { type IPreviewerProps } from 'dumi';
-import { type FC } from 'react';
+import { type FC, type ReactNode } from 'react';
 import './index.less';
 export interface IPreviewerActionsProps extends IPreviewerProps {
     /**
      * disabled actions
      */
     disabledActions?: ('CSB' | 'STACKBLITZ' | 'EXTERNAL' | 'HTML2SKETCH')[];
+    extra?: ReactNode;
     forceShowCode?: boolean;
     demoContainer: HTMLDivElement | HTMLIFrameElement;
 }

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

@@ -159,7 +159,7 @@ var PreviewerActions = function PreviewerActions(props) {
     "data-dumi-tooltip": intl.formatMessage({
       id: 'previewer.actions.separate'
     })
-  }, /*#__PURE__*/React.createElement(IconExternalLink, null)), /*#__PURE__*/React.createElement(PreviewerActionsExtra, props), !props.forceShowCode && /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(IconExternalLink, null)), props.extra, /*#__PURE__*/React.createElement(PreviewerActionsExtra, props), !props.forceShowCode && /*#__PURE__*/React.createElement("button", {
     className: "dumi-default-previewer-action-btn",
     type: "button",
     onClick: function onClick() {