dumi 2.0.0-rc.9 → 2.0.0

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/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/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.9",
+  "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.0-canary.20221114.1",
-    "@umijs/core": "4.0.0-canary.20221114.1",
+    "@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",
@@ -85,7 +86,6 @@
     "rc-tabs": "12.1.0-alpha.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-error-boundary": "^3.1.4",
-    "react-helmet": "^6.1.0",
     "react-intl": "^6.1.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-remove-comments": "^5.0.0",
@@ -98,7 +98,7 @@
     "remark-rehype": "^10.1.0",
     "sass": "^1.55.0",
     "sitemap": "^7.1.1",
-    "umi": "4.0.0-canary.20221114.1",
+    "umi": "^4.0.32",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.0",
     "unist-util-visit-parents": "^5.1.1",
@@ -117,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.0-canary.20221114.1",
-    "@umijs/plugins": "4.0.0-canary.20221114.1",
+    "@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,11 +1,13 @@
 @import (reference) '../../styles/variables.less';
 
 .@{prefix}-container.markdown {
-  padding: 18px 16px 18px 44px;
+  padding: 18px 0;
+  padding-inline-start: 44px;
+  padding-inline-end: 16px;
   border-radius: 4px;
 
   &:not(:first-child) {
-    margin-top: 24px;
+    margin-bottom: 24px;
   }
 
   &:not(:last-child) {
@@ -15,21 +17,23 @@
   > svg {
     float: left;
     fill: currentcolor;
-    margin-left: -26px;
+    margin-inline-start: -26px;
     width: 18px;
+
+    [data-direction='rtl'] & {
+      float: right;
+    }
   }
 
   > h4 {
     clear: none;
-    margin: 0;
+    margin: 0 0 12px;
     font-size: 15px;
     line-height: 17px;
   }
 
-  > p {
-    margin: 8px 0 0;
+  > section {
     font-size: 15px;
-    line-height: 1.2;
   }
 
   &[data-type='info'] {
@@ -42,7 +46,7 @@
       color: @color;
     }
 
-    > p {
+    > section {
       color: desaturate(@color, 20%);
     }
   }
@@ -57,7 +61,7 @@
       color: @color;
     }
 
-    > p {
+    > section {
       color: desaturate(@color, 24%);
     }
   }
@@ -72,7 +76,7 @@
       color: @color;
     }
 
-    > p {
+    > section {
       color: desaturate(@color, 22%);
     }
   }
@@ -87,7 +91,7 @@
       color: @color;
     }
 
-    > p {
+    > 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) {

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

@@ -72,7 +72,7 @@
       }
 
       &:not(:first-child) {
-        margin-left: 48px;
+        margin-inline-start: 48px;
         color: @c-primary;
         border: 1px solid @c-primary;
       }

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

@@ -6,6 +6,7 @@
   line-height: 1;
   text-decoration: none;
   transition: all 0.3s;
+  cursor: pointer;
 
   &:hover {
     color: @c-primary;
@@ -18,7 +19,9 @@
 
   > select {
     appearance: none;
-    padding: 6px 18px 6px 10px;
+    padding: 6px 0;
+    padding-inline-start: 10px;
+    padding-inline-end: 18px;
     color: @c-text-secondary;
     text-align: right;
     font-size: 14px;
@@ -28,7 +31,7 @@
   }
 
   > svg {
-    margin-left: -16px;
+    margin-inline-start: -16px;
     width: 12px;
     fill: darken(@c-border, 10%);
     pointer-events: none;

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

@@ -18,7 +18,7 @@
   }
 
   img {
-    margin-right: 10px;
+    margin-inline-end: 10px;
     height: 40px;
 
     @media @mobile {

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

@@ -37,10 +37,10 @@
     }
 
     &:not(:last-child) {
-      margin-right: 48px;
+      margin-inline-end: 48px;
 
       @media @mobile {
-        margin-right: 0;
+        margin-inline-end: 0;
       }
     }
   }

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

@@ -5,7 +5,7 @@ export interface IPreviewerActionsProps extends IPreviewerProps {
     /**
      * disabled actions
      */
-    disabledActions?: ('CSB' | 'CODEPEN' | 'EXTERNAL')[];
+    disabledActions?: ('CSB' | 'CODEPEN' | 'STACKBLITZ' | 'EXTERNAL')[];
 }
 declare const PreviewerActions: FC<IPreviewerActionsProps>;
 export default PreviewerActions;

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

@@ -12,7 +12,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { ReactComponent as IconCodeSandbox } from '@ant-design/icons-svg/inline-svg/outlined/code-sandbox.svg'; // import { ReactComponent as IconCodePen } from '@ant-design/icons-svg/inline-svg/outlined/codepen.svg';
 
-import { openCodeSandbox, useIntl } from 'dumi';
+import { ReactComponent as IconStackBlitz } from '@ant-design/icons-svg/inline-svg/outlined/thunderbolt.svg';
+import { openCodeSandbox, openStackBlitz, useIntl } from 'dumi';
 import SourceCode from "dumi/theme/builtins/SourceCode";
 import PreviewerActionsExtra from "dumi/theme/slots/PreviewerActionsExtra";
 import Tabs from 'rc-tabs';
@@ -46,7 +47,7 @@ var IconExternalLink = function IconExternalLink() {
 };
 
 var PreviewerActions = function PreviewerActions(props) {
-  var _files$activeKey$0$ma, _props$disabledAction, _props$disabledAction2;
+  var _files$activeKey$0$ma, _props$disabledAction, _props$disabledAction2, _props$disabledAction3;
 
   var intl = useIntl();
   var files = Object.entries(props.asset.dependencies).filter(function (_ref) {
@@ -79,7 +80,16 @@ var PreviewerActions = function PreviewerActions(props) {
     onClick: function onClick() {
       return openCodeSandbox(props);
     }
-  }, /*#__PURE__*/React.createElement(IconCodeSandbox, null)), !((_props$disabledAction2 = props.disabledActions) !== null && _props$disabledAction2 !== void 0 && _props$disabledAction2.includes('EXTERNAL')) && /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement(IconCodeSandbox, null)), !((_props$disabledAction2 = props.disabledActions) !== null && _props$disabledAction2 !== void 0 && _props$disabledAction2.includes('STACKBLITZ')) && /*#__PURE__*/React.createElement("button", {
+    className: "dumi-default-previewer-action-btn",
+    type: "button",
+    "data-dumi-tooltip": intl.formatMessage({
+      id: 'previewer.actions.stackblitz'
+    }),
+    onClick: function onClick() {
+      return openStackBlitz(props);
+    }
+  }, /*#__PURE__*/React.createElement(IconStackBlitz, null)), !((_props$disabledAction3 = props.disabledActions) !== null && _props$disabledAction3 !== void 0 && _props$disabledAction3.includes('EXTERNAL')) && /*#__PURE__*/React.createElement("a", {
     target: "_blank",
     rel: "noreferrer",
     href: props.demoUrl,