dumi 2.0.0-alpha.4 → 2.0.0-beta.0

package/bin/dumi.js

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
 
-require('v8-compile-cache');
+// disable for TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified.
+// require('v8-compile-cache');
 require('../dist/cli');

package/dist/features/meta.js

@@ -26,6 +26,7 @@ var import_plugin_utils = require("umi/plugin-utils");
 var meta_default = (api) => {
   const mdRouteFiles = [];
   api.modifyRoutes((routes) => {
+    mdRouteFiles.length = 0;
     Object.values(routes).forEach((route) => {
       if (route.file.endsWith(".md")) {
         mdRouteFiles.push({

package/dist/features/routes.js

@@ -42,7 +42,13 @@ function localizeUmiRoute(route, locales) {
   }
 }
 var routes_default = (api) => {
+  var _a, _b, _c;
+  const extraWatchPaths = [
+    ...((_b = (_a = api.userConfig.resolve) == null ? void 0 : _a.entityDirs) == null ? void 0 : _b.map(({ dir }) => dir)) || ["docs"],
+    ...((_c = api.userConfig.resolve) == null ? void 0 : _c.docDirs) || []
+  ].map((dir) => import_path.default.join(api.cwd, dir, "**/*.md"));
   api.describe({ key: "dumi:routes" });
+  api.addTmpGenerateWatcherPaths(() => extraWatchPaths);
   api.modifyConfig((memo) => {
     memo.conventionRoutes = {
       base: import_path.default.join(__dirname, "dumi-disable-default-routes")
@@ -53,8 +59,8 @@ var routes_default = (api) => {
     if (api.userConfig.resolve) {
       const keys = ["docDirs", "entityDirs"];
       keys.forEach((key) => {
-        var _a;
-        if (((_a = api.userConfig.resolve[key]) == null ? void 0 : _a.length) === 0)
+        var _a2;
+        if (((_a2 = api.userConfig.resolve[key]) == null ? void 0 : _a2.length) === 0)
           memo.resolve[key] = [];
       });
     }

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

@@ -27,6 +27,7 @@ __export(transformer_exports, {
 module.exports = __toCommonJS(transformer_exports);
 var import_rehypeDemo = __toESM(require("./rehypeDemo"));
 var import_rehypeEmbed = __toESM(require("./rehypeEmbed"));
+var import_rehypeEnhancedTag = __toESM(require("./rehypeEnhancedTag"));
 var import_rehypeIsolation = __toESM(require("./rehypeIsolation"));
 var import_rehypeJsxify = __toESM(require("./rehypeJsxify"));
 var import_rehypeRaw = __toESM(require("./rehypeRaw"));
@@ -61,7 +62,7 @@ var transformer_default = async (raw, opts) => {
     cwd: opts.cwd,
     fileAbsPath: opts.fileAbsPath,
     codeBlockMode: opts.codeBlockMode
-  }).use(import_rehypeSlug.default, opts).use(rehypeAutolinkHeadings).use(import_rehypeIsolation.default);
+  }).use(import_rehypeSlug.default, opts).use(rehypeAutolinkHeadings).use(import_rehypeIsolation.default).use(import_rehypeEnhancedTag.default);
   (_b = opts.extraRehypePlugins) == null ? void 0 : _b.forEach((plugin) => applyUnifiedPlugin({
     plugin,
     processor,

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

@@ -0,0 +1,3 @@
+import type { Root } from 'hast';
+import type { Transformer } from 'unified';
+export default function rehypeEnhancedTag(): Transformer<Root>;

package/dist/loaders/markdown/transformer/rehypeEnhancedTag.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/rehypeEnhancedTag.ts
+var rehypeEnhancedTag_exports = {};
+__export(rehypeEnhancedTag_exports, {
+  default: () => rehypeEnhancedTag
+});
+module.exports = __toCommonJS(rehypeEnhancedTag_exports);
+var visit;
+var isElement;
+var toString;
+(async () => {
+  ({ visit } = await import("unist-util-visit"));
+  ({ isElement } = await import("hast-util-is-element"));
+  ({ toString } = await import("hast-util-to-string"));
+})();
+function rehypeEnhancedTag() {
+  return async (tree) => {
+    visit(tree, "element", (node, i, parent) => {
+      var _a, _b, _c;
+      if (node.tagName === "pre" && isElement((_a = node.children) == null ? void 0 : _a[0]) && node.children[0].tagName === "code") {
+        const className = ((_b = node.children[0].properties) == null ? void 0 : _b.className) || [];
+        const lang = (_c = className.join("").match(/language-(\w+)(?:$| )/)) == null ? void 0 : _c[1];
+        parent.children.splice(i, 1, {
+          type: "element",
+          tagName: "SourceCode",
+          properties: { lang },
+          children: [{ type: "text", value: toString(node.children[0]) }]
+        });
+      }
+    });
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

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

@@ -32,19 +32,25 @@ var visit;
 function isDemoNode(node) {
   return ["DumiDemo", "DumiDemoGrid"].includes(node.tagName);
 }
+function isReactComponent(node) {
+  return /^[A-Z].+/.test(node.tagName);
+}
 function rehypeIsolation() {
   return (tree) => {
     visit(tree, "root", (node) => {
       node.children = node.children.reduce((nextChildren, current) => {
+        var _a, _b;
         let prevSibling = nextChildren[nextChildren.length - 1];
         if (isDemoNode(current)) {
           nextChildren.push(current);
+        } else if (current.tagName === "p" && ((_a = current.children) == null ? void 0 : _a.length) === 1 && isReactComponent(current.children[0]) || isReactComponent(current)) {
+          nextChildren.push(current.tagName === "p" ? (_b = current.children) == null ? void 0 : _b[0] : current);
         } else {
-          if (!prevSibling || isDemoNode(prevSibling)) {
+          if (!prevSibling || isDemoNode(prevSibling) || isReactComponent(prevSibling)) {
             prevSibling = {
               type: "element",
               tagName: "div",
-              properties: { className: "markdown" },
+              properties: { className: ["markdown"] },
               children: []
             };
             nextChildren.push(prevSibling);

package/dist/techStacks/react.js

@@ -63,7 +63,6 @@ var ReactTechStack = class {
         },
         module: {
           type: "commonjs",
-          importInterop: "none",
           strictMode: false
         },
         plugin: (m) => new ReactDemoVisitor().visitProgram(m)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-beta.0",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",
@@ -17,8 +17,11 @@
   "scripts": {
     "build": "father build",
     "build:deps": "father prebundle",
+    "custom-install": "pnpm i",
     "dev": "father dev",
-    "postinstall": "umi setup",
+    "docs:build": "node ./bin/dumi.js build",
+    "docs:dev": "node ./bin/dumi.js dev",
+    "postinstall": "npm run build && node ./bin/dumi.js setup",
     "lint": "npm run lint:es && npm run lint:css",
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",

package/theme-default/slots/Content/heti.scss

@@ -1,3 +1,4 @@
 // override .heti root-selector
 $root-selector: '.markdown';
+$line-length: 100%;
 @import 'heti/lib/heti.scss';

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

@@ -15,6 +15,14 @@
     background: darken(@c-site-bg, 2%);
     border-radius: 2px;
   }
+
+  // pre tag
+  pre {
+    font-size: 14px;
+    padding-left: 24px;
+    padding-right: 24px;
+    background-color: tint(@c-site-bg, 50%);
+  }
 }
 
 .@{prefix}-content {

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

@@ -23,12 +23,15 @@ var SearchBar = function SearchBar() {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: "dumi-default-search-bar"
+    className: "dumi-default-search-bar",
+    "data-dumi-tooltip": "\u6682\u4E0D\u53EF\u7528",
+    "data-dumi-tooltip-bottom": true
   }, /*#__PURE__*/React.createElement(IconSearch, null), /*#__PURE__*/React.createElement("input", {
     placeholder: intl.formatMessage({
       id: 'header.search.placeholder'
     }),
-    ref: input
+    ref: input,
+    disabled: true
   }), /*#__PURE__*/React.createElement("span", {
     className: "dumi-default-search-shortcut"
   }, symbol, " K"));

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

@@ -2,6 +2,7 @@
 
 .@{prefix}-search-bar {
   position: relative;
+  cursor: not-allowed;
 
   &:not(:last-child) {
     margin-right: 28px;
@@ -29,6 +30,7 @@
     outline: none;
     transition: all 0.3s;
     background-color: transparent;
+    pointer-events: none;
 
     &:focus {
       border-color: fade(@c-primary, 50%);

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

@@ -13,8 +13,11 @@ var Toc = function Toc() {
 
   return /*#__PURE__*/React.createElement("ul", {
     className: "dumi-default-toc"
-  }, toc.map(function (item) {
-    var link = "#".concat(item.id);
+  }, toc.filter(function (_ref) {
+    var depth = _ref.depth;
+    return depth > 1 && depth < 4;
+  }).map(function (item) {
+    var link = "#".concat(encodeURIComponent(item.id));
     return /*#__PURE__*/React.createElement("li", {
       key: item.id,
       "data-depth": item.depth

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

@@ -10,22 +10,28 @@
     display: none;
   }
 
-  > li > a {
-    display: block;
-    margin: 6px 0;
-    padding: 2px 12px;
-    color: @c-text-secondary;
-    font-size: 13px;
-    line-height: 1;
-    text-decoration: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  > li {
+    > a {
+      display: block;
+      margin: 6px 0;
+      padding: 3px 12px;
+      color: @c-text-secondary;
+      font-size: 13px;
+      line-height: 1;
+      text-decoration: none;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
-    &.active {
-      margin-left: -1px;
-      color: @c-text;
-      border-left: 1px solid @c-primary;
+      &.active {
+        margin-left: -1px;
+        color: @c-text;
+        border-left: 1px solid @c-primary;
+      }
+    }
+
+    &[data-depth='3'] > a {
+      padding-left: 20px;
     }
   }
 }

package/theme-default/styles/utils.less

@@ -43,4 +43,22 @@
       opacity: 0;
     }
   }
+
+  &[data-dumi-tooltip-bottom] {
+    &::before,
+    &::after {
+      bottom: auto;
+      top: 100%;
+    }
+
+    &::before {
+      margin-top: 8px;
+      margin-bottom: 0;
+    }
+
+    &::after {
+      border-top-color: transparent;
+      border-bottom-color: #000;
+    }
+  }
 }