dumi 2.1.0 → 2.1.2

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

@@ -29,7 +29,9 @@ export var DumiDemo = function DumiDemo(props) {
 
   var _demos$props$demo$id = demos[props.demo.id],
       component = _demos$props$demo$id.component,
-      asset = _demos$props$demo$id.asset;
+      asset = _demos$props$demo$id.asset; // hide debug demo in production
+
+  if (process.env.NODE_ENV === 'production' && props.previewerProps.debug) return null;
 
   if (props.demo.inline) {
     return /*#__PURE__*/React.createElement(DemoErrorBoundary, null, /*#__PURE__*/createElement(component));

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

@@ -18,10 +18,14 @@ export var DumiDemoGrid = function DumiDemoGrid(props) {
   var _useRouteMeta = useRouteMeta(),
       fm = _useRouteMeta.frontmatter;
 
-  var generator = useCallback(function (fm, items) {
+  var generator = useCallback(function (fm, oItems) {
     var _fm$demo;
 
     var cols = [];
+    var items = process.env.NODE_ENV === 'production' ? // hide debug demo in production
+    oItems.filter(function (d) {
+      return !d.previewerProps.debug;
+    }) : oItems;
 
     if ((_fm$demo = fm.demo) !== null && _fm$demo !== void 0 && _fm$demo.cols && fm.demo.cols > 1 && ( // compatible for ssr env
     typeof window === 'undefined' || window.innerWidth > 1024)) {

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

@@ -110,6 +110,8 @@ export interface IRouteMeta {
     }[];
     tabs?: {
         key: string;
+        name?: string;
+        nameIntlId?: string;
         components: {
             default: ComponentType;
             Extra: ComponentType;

package/dist/features/routes.js

@@ -35,16 +35,19 @@ var CTX_LAYOUT_ID = "dumi-context-layout";
 function normalizeDocDir(docDir) {
   return typeof docDir === "object" ? docDir : { dir: docDir };
 }
+function kebabCaseRoutePath(routePath) {
+  return routePath.split("/").map((p) => import_plugin_utils.lodash.kebabCase(p)).join("/");
+}
 function localizeUmiRoute(route, locales) {
   const locale = locales.find((locale2) => route.path.endsWith(`/${locale2.id}`) && import_path.default.parse(route.file).name.endsWith(`.${locale2.id}`));
   if (locale) {
     const base = !("base" in locale) || locale.base === "/" ? "" : locale.base.replace(/^(\/)(.+)$/, "$2$1");
     const suffix = "suffix" in locale ? locale.suffix : "";
-    route.path = `${base}${route.path.replace(new RegExp(`/${locale.id}$`), "").replace(/((^|\/)(index|README))$/, "").toLowerCase()}${suffix}`;
+    route.path = `${base}${kebabCaseRoutePath(route.path.replace(new RegExp(`/${locale.id}$`), "").replace(/((^|\/)(index|README))$/, ""))}${suffix}`;
     route.absPath = route.path !== "/" ? `/${route.path}` : route.path;
   } else {
-    route.path = route.path.toLowerCase();
-    route.absPath = route.absPath.toLowerCase();
+    route.path = kebabCaseRoutePath(route.path);
+    route.absPath = kebabCaseRoutePath(route.absPath);
   }
 }
 function flatRoute(route, docLayoutId) {
@@ -53,10 +56,6 @@ function flatRoute(route, docLayoutId) {
     route.path = route.path === "*" ? route.path : route.absPath.slice(1);
   }
 }
-function kebabCaseRoute(route) {
-  route.path = route.path.split("/").map((p) => import_plugin_utils.lodash.kebabCase(p)).join("/");
-  route.absPath = route.absPath.split("/").map((p) => import_plugin_utils.lodash.kebabCase(p)).join("/");
-}
 function getClientPageFile(file, cwd) {
   try {
     return import_plugin_utils.resolve.sync(`dumi/dist/${file}`, {
@@ -134,7 +133,7 @@ var routes_default = (api) => {
       const base = import_path.default.join(api.cwd, dir);
       const dirRoutes = (0, import_core.getConventionRoutes)({
         base,
-        exclude: [/.*(?<!md)$/, /(\/|^)(\.|_\/)/]
+        exclude: [/.*(?<!md)$/, /(\/|^)(\.|_)/]
       });
       Object.entries(dirRoutes).forEach(([key, route]) => {
         route.id = `${dir}/${key}`;
@@ -168,7 +167,6 @@ var routes_default = (api) => {
         throw new Error(`Invalid route path: ${route.path}, please rename it with only alphanumeric, dash and slash.
     at ${route.file}`);
       } else if (!route.isLayout) {
-        kebabCaseRoute(route);
         flatRoute(route, docLayoutId);
         localizeUmiRoute(route, api.config.locales);
       }

package/dist/features/tabs.d.ts

@@ -3,6 +3,8 @@ export interface IContentTab {
     key: string;
     id?: string;
     test?: RegExp;
+    name?: string;
+    nameIntlId?: string;
     component: string;
 }
 export declare function isTabRouteFile(file: string): boolean;

package/dist/features/tabs.js

@@ -86,6 +86,8 @@ var tabs_default = (api) => {
       index: tabs.length + index,
       key: tab.key,
       id: tab.id,
+      name: tab.name,
+      nameIntlId: tab.nameIntlId,
       file: tab.component
     })));
     return routes;
@@ -118,7 +120,7 @@ import * as tab{{{index}}} from '{{{file}}}';
 
 export const tabs = {
   {{#tabs}}
-  '{{{id}}}': { key: '{{{key}}}', components: tab{{{index}}} },
+  '{{{id}}}': { key: '{{{key}}}', name: '{{{name}}}', nameIntlId: '{{{nameIntlId}}}', components: tab{{{index}}} },
   {{/tabs}}
 }
 `, { tabs })

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

@@ -29,7 +29,10 @@ var import_plugin_utils = require("umi/plugin-utils");
 var raw;
 var visit;
 var COMPONENT_NAME_REGEX = /<[A-Z][a-zA-Z\d]*/g;
+var COMPONENT_PROP_REGEX = /\s[a-z][a-z\d]*[A-Z]+[a-zA-Z\d]*(=|\s|>)/g;
 var COMPONENT_STUB_ATTR = "$tag-name";
+var PROP_STUB_ATTR = "-$u";
+var PROP_STUB_ATTR_REGEX = new RegExp(`${PROP_STUB_ATTR.replace("$", "\\$")}[a-z]`, "g");
 var CODE_META_STUB_ATTR = "$code-meta";
 (async () => {
   ({ visit } = await import("unist-util-visit"));
@@ -44,6 +47,9 @@ function rehypeRaw(opts) {
           const tagName = str.slice(1);
           return `${str} ${COMPONENT_STUB_ATTR}="${tagName}"`;
         });
+        node.value = node.value.replace(COMPONENT_PROP_REGEX, (str) => {
+          return str.replace(/[A-Z]/g, (s) => `${PROP_STUB_ATTR}${s.toLowerCase()}`);
+        });
       } else if (node.type === "element" && ((_a = node.data) == null ? void 0 : _a.meta)) {
         node.properties ?? (node.properties = {});
         node.properties[CODE_META_STUB_ATTR] = node.data.meta;
@@ -63,6 +69,14 @@ File: ${opts.fileAbsPath}`);
         node.data = { meta: node.properties[CODE_META_STUB_ATTR] };
         delete node.properties[CODE_META_STUB_ATTR];
       }
+      Object.keys(node.properties || {}).forEach((p) => {
+        if (PROP_STUB_ATTR_REGEX.test(p)) {
+          const originalName = p.replace(PROP_STUB_ATTR_REGEX, (s) => s.slice(PROP_STUB_ATTR.length).toUpperCase());
+          node.properties[originalName] = node.properties[p];
+          node.properties[originalName.toLowerCase()] = node.properties[p];
+          delete node.properties[p];
+        }
+      });
     });
     return newTree;
   };

package/dist/types.d.ts

@@ -50,6 +50,7 @@ export declare type IDumiUserConfig = Subset<Omit<IDumiConfig, 'locales'>> & {
     }>[] | Omit<Exclude<IDumiConfig['locales'][0], {
         suffix: string;
     }>, 'base'>[];
+    [key: string]: any;
 };
 export declare abstract class IDumiTechStack {
     /**
@@ -82,7 +83,9 @@ export declare abstract class IDumiTechStack {
     }): Promise<IDumiDemoProps['previewerProps']> | IDumiDemoProps['previewerProps'];
 }
 export declare type IApi = IUmiApi & {
-    config: IDumiConfig;
+    config: IDumiConfig & {
+        [key: string]: any;
+    };
     userConfig: IDumiUserConfig;
     service: IUmiApi['service'] & {
         themeData: IThemeLoadResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",

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

@@ -1,5 +1,9 @@
 @import (reference) '../../styles/variables.less';
 
+@{dark-selector} {
+  color-scheme: dark;
+}
+
 body {
   margin: 0;
   padding: 0;

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

@@ -10,7 +10,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import { FormattedMessage, useIntl, usePrefersColor } from 'dumi';
+import { FormattedMessage, useIntl, usePrefersColor, useSiteData } from 'dumi';
 import React from 'react';
 import "./index.less";
 
@@ -45,11 +45,15 @@ var ICON_MAPPING = {
 };
 
 var ColorSwitch = function ColorSwitch() {
+  var _useSiteData = useSiteData(),
+      defaultColor = _useSiteData.themeConfig.prefersColor.default;
+
   var intl = useIntl();
 
   var _usePrefersColor = usePrefersColor(),
       _usePrefersColor2 = _slicedToArray(_usePrefersColor, 3),
-      prefersColor = _usePrefersColor2[1],
+      _usePrefersColor2$ = _usePrefersColor2[1],
+      prefersColor = _usePrefersColor2$ === void 0 ? defaultColor : _usePrefersColor2$,
       setPrefersColor = _usePrefersColor2[2];
 
   var Icon = ICON_MAPPING[prefersColor];

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

@@ -28,7 +28,9 @@ var ContentTabs = function ContentTabs(_ref) {
       "data-active": key === tab.key || undefined
     }, /*#__PURE__*/React.createElement("button", {
       type: "button"
-    }, tab.meta.frontmatter.title));
+    }, tab.nameIntlId ? intl.formatMessage({
+      id: tab.nameIntlId
+    }) : tab.name || tab.meta.frontmatter.title));
   })) : null;
 };
 

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

@@ -20,7 +20,9 @@ function getTargetLocalePath(_ref) {
       current = _ref.current,
       target = _ref.target;
   var clearPath = 'base' in current ? pathname.replace(current.base.replace(/\/$/, ''), '') : pathname.replace(new RegExp("".concat(current.suffix, "$")), '');
-  return 'base' in target ? "".concat(target.base).concat(clearPath).replace(/^\/\//, '/') : "".concat(clearPath).concat(target.suffix);
+  return 'base' in target ? "".concat( // for `/` base, strip duplicated leading slash
+  target.base.replace(/\/$/, '')).concat(clearPath) // for `/` clearPath, strip duplicated ending slash
+  .replace(/([^/])\/$/, '$1') : "".concat(clearPath).concat(target.suffix);
 }
 
 var SingleSwitch = function SingleSwitch(_ref2) {

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

@@ -62,7 +62,7 @@ var PreviewerActions = function PreviewerActions(props) {
       activeKey = _useState2[0],
       setActiveKey = _useState2[1];
 
-  var _useState3 = useState(props === null || props === void 0 ? void 0 : props.forceShowCode),
+  var _useState3 = useState(props.forceShowCode || props.defaultShowCode),
       _useState4 = _slicedToArray(_useState3, 2),
       showCode = _useState4[0],
       setShowCode = _useState4[1];