dumi 2.2.0 → 2.2.1-alpha.0

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/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,4 +1,4 @@
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
 import type { ILocale, INav, INavItem, IRouteMeta, IRoutesById, IUserNavValue } from './types';
 export declare const useLocaleDocRoutes: () => IRoutesById;
 /**
@@ -7,7 +7,7 @@ export declare const useLocaleDocRoutes: () => IRoutesById;
  * @returns code string
  */
 export declare const genReactRenderCode: (version: string) => string;
-export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
 /**
  * common comparer for sidebar/nav items
  */

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,13 +34,17 @@ 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 themePkg = require(import_path.default.join(process.env.DUMI_THEME, "package.json"));
+    return themePkg.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);
-  return pkgThemeName && import_path.default.dirname(import_plugin_utils.resolve.sync(`${pkgThemeName}/package.json`, {
+  return process.env.DUMI_THEME || pkgThemeName && import_path.default.dirname(import_plugin_utils.resolve.sync(`${process.env.DUMI_THEME || pkgThemeName}/package.json`, {
     basedir: api.cwd,
     preserveSymlinks: true
   }));
@@ -151,7 +155,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 +232,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 +241,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",

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/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-alpha.0",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",

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() {