dumi 2.0.0-rc.8 → 2.0.0

package/dist/features/sitemap.js

@@ -0,0 +1,64 @@
+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/features/sitemap.ts
+var sitemap_exports = {};
+__export(sitemap_exports, {
+  default: () => sitemap_default
+});
+module.exports = __toCommonJS(sitemap_exports);
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
+var import_sitemap = require("sitemap");
+var sitemap_default = (api) => {
+  api.describe({
+    key: "sitemap",
+    config: {
+      schema(joi) {
+        return joi.object({
+          hostname: joi.string().required(),
+          exclude: joi.array().items(joi.string())
+        });
+      }
+    },
+    enableBy: ({ userConfig, env }) => userConfig.sitemap && env === "production"
+  });
+  api.onBuildComplete(async () => {
+    const smis = new import_sitemap.SitemapStream({
+      hostname: api.config.sitemap.hostname,
+      xmlns: { video: false, image: false, news: false, xhtml: false }
+    });
+    const exclude = ["/404"].concat(api.config.sitemap.exclude);
+    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))) {
+        smis.write({ url: route.path });
+      }
+    });
+    smis.end();
+    await new Promise((resolve) => {
+      writeStream.on("close", resolve);
+    });
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/features/tabs.js

@@ -55,6 +55,7 @@ var tabs_default = (api) => {
   api.modifyRoutes((routes) => {
     tabs.length = 0;
     Object.values(routes).forEach((route) => {
+      var _a;
       if (route.file && isTabRouteFile(route.file)) {
         delete routes[route.id];
         const rtlFile = (0, import_plugin_utils.winPath)(import_path.default.relative(api.cwd, route.file));
@@ -67,12 +68,14 @@ var tabs_default = (api) => {
           id: routeId,
           file: route.file
         });
-        routesTabMapping[parentFile] ?? (routesTabMapping[parentFile] = []);
-        routesTabMapping[parentFile].push(routeId);
+        if (!((_a = routesTabMapping[parentFile]) == null ? void 0 : _a.includes(routeId))) {
+          routesTabMapping[parentFile] ?? (routesTabMapping[parentFile] = []);
+          routesTabMapping[parentFile].push(routeId);
+        }
       } else {
         tabsFromPlugins.forEach((tab) => {
-          var _a, _b;
-          if ((!tab.test || route.absPath.match(tab.test)) && !((_a = routesTabMapping[route.file]) == null ? void 0 : _a.includes(tab.id))) {
+          var _a2, _b;
+          if ((!tab.test || route.absPath.match(tab.test)) && !((_a2 = routesTabMapping[route.file]) == null ? void 0 : _a2.includes(tab.id))) {
             routesTabMapping[_b = route.file] ?? (routesTabMapping[_b] = []);
             routesTabMapping[route.file].push(tab.id);
           }

package/dist/features/theme/loader.js

@@ -29,7 +29,7 @@ var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
 function getComponentMapFromDir(globExp, dir) {
   return import_plugin_utils.glob.sync(globExp, { cwd: dir }).reduce((ret, file) => {
-    const specifier = import_path.default.basename(file.replace(/(\/index)?\.[a-z]+$/, ""));
+    const specifier = import_path.default.basename((0, import_plugin_utils.winPath)(file).replace(/(\/index)?\.[a-z]+$/, ""));
     if (/^[A-Z\d]/.test(specifier)) {
       ret[specifier] = {
         specifier,

package/dist/loaders/markdown/index.js

@@ -40,10 +40,11 @@ function getDemoSourceFiles(demos = []) {
   }, []);
 }
 function emit(opts, ret) {
+  const { demos, embeds } = ret.meta;
+  embeds.forEach((file) => this.addDependency(file));
+  getDemoSourceFiles(demos).forEach((file) => this.addDependency(file));
   if (opts.mode === "meta") {
-    const { demos, frontmatter, toc, texts, embeds = [] } = ret.meta;
-    embeds.forEach((file) => this.addDependency(file));
-    getDemoSourceFiles(demos).forEach((file) => this.addDependency(file));
+    const { frontmatter, toc, texts } = ret.meta;
     if (demos && opts.onResolveDemos) {
       opts.onResolveDemos(demos);
     }
@@ -121,15 +122,15 @@ function mdLoader(content) {
   } else if (cacheKey in deferrer) {
     deferrer[cacheKey].then((res) => {
       cb(null, emit.call(this, opts, res));
-    });
+    }).catch(cb);
     return;
   }
   deferrer[cacheKey] = (0, import_transformer.default)(content, {
     ...import_plugin_utils.lodash.omit(opts, ["mode", "builtins", "onResolveDemos"]),
-    fileAbsPath: this.resourcePath
+    fileAbsPath: (0, import_plugin_utils.winPath)(this.resourcePath)
   });
   deferrer[cacheKey].then((ret) => {
-    depsMapping[this.resourcePath] = (ret.meta.embeds || []).concat(getDemoSourceFiles(ret.meta.demos));
+    depsMapping[this.resourcePath] = ret.meta.embeds.concat(getDemoSourceFiles(ret.meta.demos));
     const finalCacheKey = [
       baseCacheKey,
       getDepsCacheKey(depsMapping[this.resourcePath])

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

@@ -29,7 +29,7 @@ declare module 'vfile' {
         texts: IRouteMeta['texts'];
         frontmatter: IRouteMeta['frontmatter'];
         toc: IRouteMeta['toc'];
-        embeds?: string[];
+        embeds: string[];
     }
 }
 export interface IMdTransformerOptions {

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

@@ -139,9 +139,10 @@ function rehypeDemo(opts) {
             const previewerProps = {};
             let component = "";
             if (codeType === "external") {
+              const chunkName = [vFile.data.frontmatter.atomId, "demos"].filter(Boolean).join("__");
               parseOpts.fileAbsPath = codeNode.properties.src;
               parseOpts.id = getCodeId(opts.cwd, opts.fileAbsPath, import_path.default.parse(parseOpts.fileAbsPath).name, vFile.data.frontmatter.atomId);
-              component = `React.lazy(() => import('${(0, import_plugin_utils.winPath)(parseOpts.fileAbsPath)}?techStack=${techStack.name}'))`;
+              component = `React.lazy(() => import( /* webpackChunkName: "${chunkName}" */ '${(0, import_plugin_utils.winPath)(parseOpts.fileAbsPath)}?techStack=${techStack.name}'))`;
               codeNode.properties.title = codeValue || void 0;
               (_a2 = codeNode.properties).filename ?? (_a2.filename = (0, import_plugin_utils.winPath)(import_path.default.relative(opts.cwd, parseOpts.fileAbsPath)));
             } else {

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

@@ -51,9 +51,19 @@ function rehypeEnhancedTag() {
             }
           ]
         });
-      }
-      if (node.tagName === "table") {
+      } else if (node.tagName === "table") {
         node.tagName = "Table";
+      } else if (node.tagName === "style") {
+        node.JSXAttributes = [
+          {
+            type: "JSXAttribute",
+            name: "dangerouslySetInnerHTML",
+            value: JSON.stringify({
+              __html: toString(node)
+            })
+          }
+        ];
+        node.children = [];
       }
     });
   };

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

@@ -59,7 +59,8 @@ function rehypeSlug() {
             vFile.data.toc.push({
               id: slugger.slug(demo.id),
               depth: ((_b2 = (_a2 = vFile.data.frontmatter) == null ? void 0 : _a2.demo) == null ? void 0 : _b2.tocDepth) || 3,
-              title: previewerProps.title
+              title: previewerProps.title,
+              ...previewerProps.debug ? { _debug_demo: true } : {}
             });
           }
         });

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

@@ -37,15 +37,16 @@ var remarkParse;
 var remarkFrontmatter;
 var visit;
 (async () => {
-  ({ visit } = await import("unist-util-visit"));
+  ({ visitParents: visit } = await import("unist-util-visit-parents"));
   ({ unified } = await import("unified"));
   ({ default: remarkParse } = await import("remark-parse"));
   ({ default: remarkFrontmatter } = await import("remark-frontmatter"));
 })();
 function remarkRawAST() {
   this.Compiler = function Compiler(ast) {
-    visit(ast, "yaml", (_node, i, parent) => {
-      parent.children.splice(i, 1);
+    visit(ast, "yaml", (node, ancestors) => {
+      const parent = ancestors[ancestors.length - 1];
+      ancestors[ancestors.length - 1].children.splice(parent.children.indexOf(node), 1);
     });
     return ast;
   };
@@ -56,10 +57,14 @@ function remarkEmbed(opts) {
     alias: opts.alias
   });
   return (tree, vFile) => {
-    visit(tree, "html", (node, i, parent) => {
-      var _a, _b;
+    vFile.data.embeds = [];
+    visit(tree, "html", (node, ancestors) => {
+      var _a;
       if (node.value.startsWith(EMBED_OPEN_TAG)) {
         let relatedNodeCount = 1;
+        const parent = ancestors[ancestors.length - 1];
+        const grandParent = ancestors[ancestors.length - 2];
+        const i = parent.children.indexOf(node);
         const src = (_a = node.value.match(/src=("|')([^"']+)\1/)) == null ? void 0 : _a[2];
         if (src) {
           const parsed = import_url.default.parse(src);
@@ -71,7 +76,10 @@ function remarkEmbed(opts) {
           } else if (hash.startsWith("RE-")) {
             content = (0, import_utils.getFileContentByRegExp)(content, hash.slice(3), absPath);
           }
-          const mdast = unified().use(remarkParse).use(remarkEmbed, { ...opts, fileAbsPath: absPath }).use(remarkFrontmatter).use(remarkRawAST).processSync(content).result;
+          const {
+            result: mdast,
+            data: { embeds }
+          } = unified().use(remarkParse).use(remarkEmbed, { ...opts, fileAbsPath: absPath }).use(remarkFrontmatter).use(remarkRawAST).processSync(content);
           if (!node.value.endsWith(EMBED_CLOSE_TAG)) {
             for (let j = i; j < parent.children.length; j++) {
               const sibling = parent.children[j];
@@ -84,9 +92,25 @@ function remarkEmbed(opts) {
               }
             }
           }
-          parent.children.splice(i, relatedNodeCount, ...mdast.children);
-          (_b = vFile.data).embeds ?? (_b.embeds = []);
-          vFile.data.embeds.push(absPath);
+          const newParentNodes = [
+            ...mdast.children
+          ];
+          const before = parent.children.slice(0, i);
+          const after = parent.children.slice(i + relatedNodeCount);
+          if (before.length) {
+            newParentNodes.unshift({
+              type: "paragraph",
+              children: before
+            });
+          }
+          if (after.length) {
+            newParentNodes.push({
+              type: "paragraph",
+              children: after
+            });
+          }
+          grandParent.children.splice(grandParent.children.indexOf(parent), 1, ...newParentNodes);
+          vFile.data.embeds.push(...[absPath].concat(embeds));
         }
       }
     });

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

@@ -43,7 +43,7 @@ function getGuessAtomId(opts) {
   if (atomFile) {
     const atomAbsDir = opts.resolve.atomDirs.map(({ dir }) => import_path.default.resolve(opts.cwd, dir)).sort((a, b) => b.split("/").length - a.split("/").length).find((dir) => atomFile.startsWith(dir));
     if (atomAbsDir) {
-      return import_path.default.relative(atomAbsDir, atomFile).replace(/((^|\/)index)?\.\w+$/, "");
+      return (0, import_plugin_utils.winPath)(import_path.default.relative(atomAbsDir, atomFile)).replace(/((^|\/)index)?\.\w+$/, "");
     }
   }
 }

package/dist/loaders/page/index.js

@@ -29,7 +29,7 @@ var import_utils = require("../../utils");
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
 function pageMetaLoader(raw) {
-  const pathWithoutIndex = this.resourcePath.replace(/(\/index([^/]+)?)?\.(j|t)sx?$/, "");
+  const pathWithoutIndex = (0, import_plugin_utils.winPath)(this.resourcePath).replace(/(\/index([^/]+)?)?\.(j|t)sx?$/, "");
   let { frontmatter } = (0, import_utils.parseCodeFrontmatter)(raw);
   frontmatter || (frontmatter = {});
   frontmatter.title ?? (frontmatter.title = import_plugin_utils.lodash.startCase(import_path.default.basename(pathWithoutIndex)));

package/dist/preset.js

@@ -56,7 +56,8 @@ var preset_default = (api) => {
       require.resolve("./features/locales"),
       require.resolve("./features/parser"),
       require.resolve("./features/assets"),
-      require.resolve("./features/exportStatic")
+      require.resolve("./features/exportStatic"),
+      require.resolve("./features/sitemap")
     ]
   };
 };

package/dist/service/cli.js

@@ -48,6 +48,7 @@ async function run(opts) {
   if (opts == null ? void 0 : opts.presets) {
     process.env.DUMI_PRESETS = opts.presets.join(",");
   }
+  process.env.DID_YOU_KNOW = "none";
   if (command === import_constants.DEV_COMMAND) {
     (0, import_dev.dev)();
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-rc.8",
+  "version": "2.0.0",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",
@@ -54,11 +54,12 @@
   "dependencies": {
     "@ant-design/icons-svg": "^4.2.1",
     "@makotot/ghostui": "^2.0.0",
+    "@stackblitz/sdk": "^1.8.1",
     "@swc/core": "^1.2.224",
     "@types/hast": "^2.3.4",
     "@types/mdast": "^3.0.10",
-    "@umijs/bundler-utils": "^4.0.30",
-    "@umijs/core": "^4.0.30",
+    "@umijs/bundler-utils": "^4.0.32",
+    "@umijs/core": "^4.0.32",
     "codesandbox": "^2.2.3",
     "deepmerge": "^4.2.2",
     "dumi-afx-deps": "^1.0.0-alpha.1",
@@ -84,7 +85,7 @@
     "raw-loader": "^4.0.2",
     "rc-tabs": "12.1.0-alpha.1",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-helmet": "^6.1.0",
+    "react-error-boundary": "^3.1.4",
     "react-intl": "^6.1.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-remove-comments": "^5.0.0",
@@ -96,7 +97,8 @@
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
     "sass": "^1.55.0",
-    "umi": "^4.0.30",
+    "sitemap": "^7.1.1",
+    "umi": "^4.0.32",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.0",
     "unist-util-visit-parents": "^5.1.1",
@@ -115,9 +117,8 @@
     "@types/pluralize": "^0.0.29",
     "@types/react": "^18.0.16",
     "@types/react-copy-to-clipboard": "^5.0.4",
-    "@types/react-helmet": "^6.1.5",
-    "@umijs/lint": "^4.0.30",
-    "@umijs/plugins": "^4.0.30",
+    "@umijs/lint": "^4.0.32",
+    "@umijs/plugins": "^4.0.32",
     "eslint": "^8.20.0",
     "father": "^4.1.0",
     "husky": "^8.0.1",

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

@@ -2,7 +2,7 @@
 
 .@{prefix}-badge {
   display: inline-block;
-  margin-left: 2px;
+  margin-inline-start: 2px;
   padding: 1px 8px;
   font-size: 12px;
   font-weight: 400;

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

@@ -33,7 +33,7 @@ var Container = function Container(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-container markdown",
     "data-type": props.type
-  }, /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("h4", null, props.title || props.type.toUpperCase()), props.children);
+  }, /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("h4", null, props.title || props.type.toUpperCase()), /*#__PURE__*/React.createElement("section", null, props.children));
 };
 
 export default Container;

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

@@ -1,36 +1,52 @@
 @import (reference) '../../styles/variables.less';
 
-.@{prefix}-container {
-  margin: 24px 0 32px;
-  padding: 18px 16px 18px 44px;
+.@{prefix}-container.markdown {
+  padding: 18px 0;
+  padding-inline-start: 44px;
+  padding-inline-end: 16px;
   border-radius: 4px;
 
+  &:not(:first-child) {
+    margin-bottom: 24px;
+  }
+
+  &:not(:last-child) {
+    margin-top: 32px;
+  }
+
   > svg {
     float: left;
     fill: currentcolor;
-    margin-left: -26px;
+    margin-inline-start: -26px;
     width: 18px;
+
+    [data-direction='rtl'] & {
+      float: right;
+    }
   }
 
   > h4 {
-    margin: 1px 0 0;
+    clear: none;
+    margin: 0 0 12px;
     font-size: 15px;
-    line-height: 1;
+    line-height: 17px;
   }
 
-  > p {
-    margin: 8px 0 0;
+  > section {
     font-size: 15px;
-    line-height: 1.2;
   }
 
   &[data-type='info'] {
     @color: darken(desaturate(@c-primary, 45%), 10%);
 
-    color: @color;
     background: lighten(@c-primary, 42%);
 
-    > p {
+    > h4,
+    > svg {
+      color: @color;
+    }
+
+    > section {
       color: desaturate(@color, 20%);
     }
   }
@@ -38,10 +54,14 @@
   &[data-type='warning'] {
     @color: darken(desaturate(@c-warning, 20%), 2%);
 
-    color: @color;
     background: lighten(@c-warning, 51%);
 
-    > p {
+    > h4,
+    > svg {
+      color: @color;
+    }
+
+    > section {
       color: desaturate(@color, 24%);
     }
   }
@@ -49,10 +69,14 @@
   &[data-type='success'] {
     @color: darken(desaturate(@c-success, 5%), 1%);
 
-    color: @color;
     background: lighten(@c-success, 59%);
 
-    > p {
+    > h4,
+    > svg {
+      color: @color;
+    }
+
+    > section {
       color: desaturate(@color, 22%);
     }
   }
@@ -60,10 +84,14 @@
   &[data-type='error'] {
     @color: darken(desaturate(@c-error, 20%), 1%);
 
-    color: @color;
     background: lighten(@c-error, 51%);
 
-    > p {
+    > h4,
+    > svg {
+      color: @color;
+    }
+
+    > section {
       color: desaturate(@color, 25%);
     }
   }

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

@@ -108,7 +108,7 @@
         }
 
         > strong {
-          padding-right: 8px;
+          padding-inline-end: 8px;
           color: @c-warning;
           font-size: 12px;
         }

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

@@ -13,6 +13,7 @@
     margin: 0;
     padding-left: 24px;
     padding-right: 24px;
+    direction: ltr;
     background: transparent;
   }
 

package/theme-default/layouts/DocLayout/index.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 { ReactComponent as IconSidebar } from '@ant-design/icons-svg/inline-svg/outlined/align-left.svg';
-import { useIntl, useOutlet, useRouteMeta, useSidebarData } from 'dumi';
+import { Helmet, useIntl, useOutlet, useRouteMeta, useSidebarData } from 'dumi';
 import Content from "dumi/theme/slots/Content";
 import Features from "dumi/theme/slots/Features";
 import Footer from "dumi/theme/slots/Footer";
@@ -20,7 +20,6 @@ import Hero from "dumi/theme/slots/Hero";
 import Sidebar from "dumi/theme/slots/Sidebar";
 import Toc from "dumi/theme/slots/Toc";
 import React, { useState } from 'react';
-import Helmet from 'react-helmet';
 import "./index.less";
 
 var DocLayout = function DocLayout() {

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

@@ -6,6 +6,7 @@ body {
 }
 
 .@{prefix}-doc-layout {
+  font-family: sans-serif;
   background-color: @c-site-bg;
 
   @media @mobile {
@@ -79,7 +80,7 @@ body {
       position: sticky;
       top: @s-header-height + 30px;
       width: @s-sidebar-width;
-      margin-left: 24px;
+      margin-inline-start: 24px;
       max-height: 80vh;
       overflow: auto;
       overscroll-behavior: contain;

package/theme-default/locales/en-US.json

@@ -5,6 +5,7 @@
   "previewer.actions.code.shrink": "Hide Code",
   "previewer.actions.codesandbox": "Open in CodeSandbox",
   "previewer.actions.codepen": "Open in CodePen (Not implemented)",
+  "previewer.actions.stackblitz": "Open in StackBlitz",
   "previewer.actions.separate": "Open in separate page",
   "404.title": "PAGE NOT FOUND",
   "404.back": "Back to homepage",

package/theme-default/locales/zh-CN.json

@@ -5,6 +5,7 @@
   "previewer.actions.code.shrink": "收起代码",
   "previewer.actions.codesandbox": "在 CodeSandbox 中打开",
   "previewer.actions.codepen": "在 CodePen 中打开（未实现）",
+  "previewer.actions.stackblitz": "在 StackBlitz 中打开",
   "previewer.actions.separate": "在独立页面中打开",
   "404.title": "页面未找到",
   "404.back": "返回首页",

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

@@ -66,14 +66,18 @@
     > a[aria-hidden]:first-child {
       float: left;
       width: 20px;
-      padding-right: 4px;
-      margin-left: -24px;
+      padding-inline-end: 4px;
+      margin-inline-start: -24px;
       color: @c-text;
       // hide phantom blank node
       font-size: 0;
       text-align: right;
       line-height: inherit;
 
+      [data-direction='rtl'] & {
+        float: right;
+      }
+
       &:hover {
         border: 0;
       }

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

@@ -43,10 +43,10 @@
     }
 
     &:not(last-child) {
-      margin-right: 42px;
+      margin-inline-end: 42px;
 
       @media @mobile {
-        margin-right: 20px;
+        margin-inline-end: 20px;
       }
     }
 

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

@@ -11,12 +11,12 @@
     width: 46%;
 
     &:nth-child(odd) {
-      margin-right: 8%;
+      margin-inline-end: 8%;
     }
 
     @media @mobile {
       width: 100%;
-      margin-right: 0;
+      margin-inline-end: 0;
     }
   }
 
@@ -24,12 +24,12 @@
     width: 31.4%;
 
     &:not(:nth-child(3n)) {
-      margin-right: 2.9%;
+      margin-inline-end: 2.9%;
     }
 
     @media @mobile {
       width: 100%;
-      margin-right: 0;
+      margin-inline-end: 0;
     }
   }
 

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

@@ -16,6 +16,7 @@ import { useRouteMeta } from 'dumi';
 import LangSwitch from "dumi/theme/slots/LangSwitch";
 import Logo from "dumi/theme/slots/Logo";
 import Navbar from "dumi/theme/slots/Navbar";
+import RtlSwitch from "dumi/theme/slots/RtlSwitch";
 import SearchBar from "dumi/theme/slots/SearchBar";
 import React, { useState } from 'react';
 import "./index.less";
@@ -44,7 +45,7 @@ var Header = function Header() {
     className: "dumi-default-header-right"
   }, /*#__PURE__*/React.createElement(Navbar, null), /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-header-right-aside"
-  }, /*#__PURE__*/React.createElement(SearchBar, null), /*#__PURE__*/React.createElement(LangSwitch, null))), /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(SearchBar, null), /*#__PURE__*/React.createElement(LangSwitch, null), /*#__PURE__*/React.createElement(RtlSwitch, null))), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "dumi-default-header-menu-btn",
     onClick: function onClick(ev) {