dumi 2.0.0-alpha.2 → 2.0.0-alpha.4

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

@@ -0,0 +1,105 @@
+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/rehypeSlug.ts
+var rehypeSlug_exports = {};
+__export(rehypeSlug_exports, {
+  default: () => rehypeSlug
+});
+module.exports = __toCommonJS(rehypeSlug_exports);
+var import_utils = require("../../../utils");
+var import_fs = __toESM(require("fs"));
+var import_github_slugger = __toESM(require("github-slugger"));
+var import__ = __toESM(require("."));
+var import_rehypeDemo = require("./rehypeDemo");
+var import_rehypeEmbed = require("./rehypeEmbed");
+var visit;
+var toString;
+var sharedSluggers = /* @__PURE__ */ new Map();
+function getFileSlugger(fileAbsPath, parentAbsPath) {
+  if (parentAbsPath)
+    return sharedSluggers.get(parentAbsPath);
+  const slugger = new import_github_slugger.default();
+  sharedSluggers.set(fileAbsPath, slugger);
+  return slugger;
+}
+(async () => {
+  ({ visit } = await import("unist-util-visit"));
+  ({ toString } = await import("hast-util-to-string"));
+})();
+var HEADING_TAGS = ["h1", "h2", "h3", "h4", "h5", "h6"];
+function rehypeSlug(opts) {
+  return async (tree, vFile) => {
+    const pathWithRandom = `${opts.fileAbsPath}?${Math.random()}`;
+    const slugger = getFileSlugger(pathWithRandom, opts.parentAbsPath);
+    const deferrers = [];
+    vFile.data.toc = [];
+    visit(tree, "element", (node) => {
+      var _a, _b, _c;
+      if (HEADING_TAGS.includes(node.tagName)) {
+        const title = toString(node);
+        const depth = Number(node.tagName.slice(1));
+        deferrers.push(() => {
+          const id = slugger.slug(title);
+          node.properties.id = id;
+          vFile.data.toc.push({ id, depth, title });
+        });
+      } else if (((_a = node.data) == null ? void 0 : _a.tagName) === import_rehypeEmbed.EMBED_TAG) {
+        const { fileAbsPath, query } = node.data;
+        let content = import_fs.default.readFileSync(fileAbsPath, "utf-8");
+        if (query.get("range")) {
+          content = (0, import_utils.getFileRangeLines)(content, query.get("range"));
+        } else if (query.get("regexp")) {
+          content = (0, import_utils.getFileContentByRegExp)(content, query.get("regexp"), fileAbsPath);
+        }
+        deferrers.push(async () => {
+          const {
+            meta: { toc }
+          } = await (0, import__.default)(content, {
+            ...opts,
+            parentAbsPath: opts.parentAbsPath || pathWithRandom
+          });
+          vFile.data.toc.push(...toc);
+        });
+      } else if ([import_rehypeDemo.DUMI_DEMO_TAG, import_rehypeDemo.DUMI_DEMO_GRID_TAG].includes(node.tagName) && ((_b = node.data) == null ? void 0 : _b[import_rehypeDemo.DEMO_PROP_VALUE_KEY])) {
+        const demos = [].concat((_c = node.data) == null ? void 0 : _c[import_rehypeDemo.DEMO_PROP_VALUE_KEY]);
+        deferrers.push(() => {
+          demos.forEach(({ demo, previewerProps }) => {
+            var _a2, _b2;
+            if (!demo.inline && previewerProps.title) {
+              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
+              });
+            }
+          });
+        });
+      }
+    });
+    for (let deferrer of deferrers) {
+      await deferrer();
+    }
+    sharedSluggers.delete(pathWithRandom);
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

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

@@ -1,3 +1,5 @@
-import type { Root } from 'remark-frontmatter';
+import type { Root } from 'mdast';
 import type { Transformer } from 'unified';
-export default function remarkMeta(): Transformer<Root>;
+export default function remarkMeta(opts: {
+    fileAbsPath: string;
+}): Transformer<Root>;

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

@@ -26,18 +26,39 @@ __export(remarkMeta_exports, {
 });
 module.exports = __toCommonJS(remarkMeta_exports);
 var import_js_yaml = __toESM(require("js-yaml"));
+var import_path = __toESM(require("path"));
+var import_plugin_utils = require("umi/plugin-utils");
 var visit;
+var toString;
 (async () => {
   ({ visit } = await import("unist-util-visit"));
+  ({ toString } = await import("mdast-util-to-string"));
 })();
-function remarkMeta() {
-  return (tree, file) => {
+function remarkMeta(opts) {
+  return (tree, vFile) => {
+    vFile.data.frontmatter = { title: "" };
     visit(tree, "yaml", (node) => {
       try {
-        file.data.frontmatter = import_js_yaml.default.load(node.value);
+        vFile.data.frontmatter = import_js_yaml.default.load(node.value);
       } catch {
       }
     });
+    const titleReaders = [
+      () => {
+        visit(tree, "heading", (node) => {
+          if (node.depth === 1) {
+            vFile.data.frontmatter.title = toString(node.children);
+          }
+        });
+      },
+      () => {
+        const pathWithoutIndex = opts.fileAbsPath.replace(/(\/index([^/]+)?)?\.md$/, "");
+        vFile.data.frontmatter.title = import_plugin_utils.lodash.startCase(import_path.default.basename(pathWithoutIndex));
+      }
+    ];
+    while (!vFile.data.frontmatter.title && titleReaders.length) {
+      titleReaders.shift()();
+    }
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/preset.js

@@ -32,6 +32,7 @@ var preset_default = (api) => {
       require.resolve("./registerMethods"),
       require.resolve("./features/configPlugins"),
       require.resolve("./features/sideEffects"),
+      require.resolve("./features/exports"),
       require.resolve("./features/compile"),
       require.resolve("./features/routes"),
       require.resolve("./features/meta"),

package/dist/types.d.ts

@@ -1,4 +1,5 @@
-import type { IDumiDemoProps, ILocalesConfig } from "./client/theme-api";
+import type { IDumiDemoProps } from "./client/theme-api/DumiDemo";
+import type { ILocalesConfig, IThemeConfig } from "./client/theme-api/types";
 import type { IThemeLoadResult } from "./features/theme/loader";
 import type { IModify } from '@umijs/core';
 import type { ExampleBlockAsset } from 'dumi-assets-types';
@@ -15,12 +16,17 @@ export interface IDumiConfig extends IUmiConfig {
         codeBlockMode: 'active' | 'passive';
     };
     locales: ILocalesConfig;
+    themeConfig: IThemeConfig;
     /**
      * extra unified plugins
      */
     extraRemarkPlugins?: (string | Function | [string | Function, object])[];
     extraRehypePlugins?: (string | Function | [string | Function, object])[];
 }
+export interface IDumiUserConfig extends Partial<Omit<IDumiConfig, 'resolve' | 'locales'>> {
+    resolve?: Partial<IDumiConfig['resolve']>;
+    locales?: (IDumiConfig['locales'][0] | Omit<IDumiConfig['locales'][0], 'base'>)[];
+}
 export declare abstract class IDumiTechStack {
     /**
      * tech stack name, such as 'react'
@@ -53,7 +59,7 @@ export declare abstract class IDumiTechStack {
 }
 export declare type IApi = IUmiApi & {
     config: IDumiConfig;
-    userConfig: IDumiConfig;
+    userConfig: IDumiUserConfig;
     service: IUmiApi['service'] & {
         themeData: IThemeLoadResult;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.4",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",
@@ -48,28 +48,40 @@
     ]
   },
   "dependencies": {
+    "@ant-design/icons-svg": "^4.2.1",
     "@swc/core": "^1.2.224",
     "@types/hast": "^2.3.4",
+    "@types/mdast": "^3.0.10",
     "@umijs/bundler-utils": "^4.0.22",
     "@umijs/core": "^4.0.22",
     "dumi-assets-types": "2.0.0-alpha.0",
     "estree-util-to-js": "^1.1.0",
     "estree-util-visit": "^1.2.0",
+    "github-slugger": "^1.4.0",
     "hast-util-is-element": "^2.1.2",
     "hast-util-raw": "^7.2.2",
     "hast-util-to-estree": "^2.1.0",
+    "hast-util-to-string": "^2.0.0",
+    "heti": "^0.9.2",
     "html-to-text": "^8.2.1",
     "js-yaml": "^4.1.0",
     "mdast-util-to-string": "^3.1.0",
     "pluralize": "^8.0.0",
+    "prism-react-renderer": "^1.3.5",
+    "prismjs": "^1.29.0",
     "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-intl": "^6.1.1",
+    "rehype-autolink-headings": "^6.1.1",
     "rehype-stringify": "^9.0.3",
     "remark-breaks": "^3.0.2",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
+    "sass": "^1.55.0",
     "umi": "^4.0.22",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.0",
@@ -81,11 +93,14 @@
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
     "@jest/types": "^27.0.0",
+    "@types/github-slugger": "^1.3.0",
     "@types/jest": "^27.0.0",
     "@types/js-yaml": "^4.0.5",
     "@types/node": "^18.6.3",
     "@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.22",
     "@umijs/test": "^4.0.22",
     "cross-env": "^7.0.3",

package/theme-default/builtins/{Previewer.d.ts → Previewer/index.d.ts}

@@ -1,4 +1,5 @@
-import type { IPreviewerProps } from 'dumi/theme';
+import { IPreviewerProps } from 'dumi';
 import { type FC } from 'react';
+import './index.less';
 declare const Previewer: FC<IPreviewerProps>;
 export default Previewer;

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

@@ -0,0 +1,162 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+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 { useIntl, useLocation } from 'dumi';
+import SourceCode from 'dumi/theme/builtins/SourceCode';
+import Tabs from 'rc-tabs';
+import React, { useState } from 'react';
+import "./index.less";
+
+var IconCode = function IconCode() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 200 117"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M59.688 2.578c-3.438-3.437-8.438-3.437-11.563 0L3.75 48.516c-5 5.937-5 14.062 0 19.062l44.063 45.938c1.562 1.562 4.062 2.5 5.937 2.5s4.063-.938 5.938-2.5c3.437-3.438 3.437-8.438 0-11.563l-42.5-43.437 42.5-44.063c3.437-3.437 3.437-8.437 0-11.875Zm135.937 45.938L151.25 2.578c-3.438-3.437-8.438-3.437-11.563 0-3.125 3.438-3.437 8.438 0 11.563l42.5 44.375-42.5 44.062c-3.437 3.438-3.437 8.438 0 11.563 1.563 1.562 3.438 2.5 5.938 2.5 2.5 0 4.063-.938 5.938-2.5l44.062-45.938c5.625-5.625 5.625-13.75 0-19.687Zm-75.938-45c-4.062-1.563-9.062.937-10.937 5l-34.063 95c-1.562 4.062.938 9.062 5 10.937.938 0 1.563.938 2.5.938 3.438 0 6.563-2.5 7.5-5.938l35-95.937c1.563-4.063-.937-9.063-5-10Z"
+  }));
+};
+
+var IconCodeExpand = function IconCodeExpand() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 200 117"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M59.688 2.578c-3.438-3.437-8.438-3.437-11.563 0L3.75 48.516c-5 5.937-5 14.062 0 19.062l44.063 45.938c1.562 1.562 4.062 2.5 5.937 2.5s4.063-.938 5.938-2.5c3.437-3.438 3.437-8.438 0-11.563l-42.5-43.437 42.5-44.063c3.437-3.437 3.437-8.437 0-11.875Zm135.937 45.938L151.25 2.578c-3.438-3.437-8.438-3.437-11.563 0-3.125 3.438-3.437 8.438 0 11.563l42.5 44.375-42.5 44.062c-3.437 3.438-3.437 8.438 0 11.563 1.563 1.562 3.438 2.5 5.938 2.5 2.5 0 4.063-.938 5.938-2.5l44.062-45.938c5.625-5.625 5.625-13.75 0-19.687Z"
+  }));
+};
+
+var IconExternalLink = function IconExternalLink() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 1024 1024"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z"
+  }));
+};
+
+var Previewer = function Previewer(props) {
+  var _files$activeKey$0$ma;
+
+  var intl = useIntl();
+
+  var _useLocation = useLocation(),
+      hash = _useLocation.hash;
+
+  var files = Object.entries(props.asset.dependencies).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        type = _ref2[1].type;
+
+    return type === 'FILE';
+  });
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeKey = _useState2[0],
+      setActiveKey = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showCode = _useState4[0],
+      setShowCode = _useState4[1];
+
+  var isSingleFile = files.length === 1;
+  var lang = ((_files$activeKey$0$ma = files[activeKey][0].match(/\.([^.]+)$/)) === null || _files$activeKey$0$ma === void 0 ? void 0 : _files$activeKey$0$ma[1]) || 'text';
+  var link = "#".concat(props.asset.id);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer",
+    "data-debug": props.debug,
+    "data-active": hash === link || undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer-demo",
+    style: {
+      background: props.background
+    },
+    "data-compact": props.compact || undefined,
+    "data-transform": props.transform || undefined,
+    "data-iframe": props.iframe || undefined
+  }, props.iframe ? /*#__PURE__*/React.createElement("iframe", {
+    style: ['string', 'number'].includes(_typeof(props.iframe)) ? {
+      height: Number(props.iframe)
+    } : {},
+    src: "/~demos/".concat(props.asset.id)
+  }) : props.children), /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer-meta"
+  }, (props.title || props.debug) && /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer-desc"
+  }, /*#__PURE__*/React.createElement("h5", null, /*#__PURE__*/React.createElement("a", {
+    href: link
+  }, props.debug && /*#__PURE__*/React.createElement("strong", null, "DEV ONLY"), props.title)), props.description && /*#__PURE__*/React.createElement("div", {
+    className: "markdown",
+    dangerouslySetInnerHTML: {
+      __html: props.description
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer-actions"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "dumi-default-previewer-action-btn",
+    type: "button",
+    "data-dumi-tooltip": intl.formatMessage({
+      id: 'previewer.actions.codesandbox'
+    })
+  }, /*#__PURE__*/React.createElement(IconCodeSandbox, null)), /*#__PURE__*/React.createElement("button", {
+    className: "dumi-default-previewer-action-btn",
+    type: "button",
+    "data-dumi-tooltip": intl.formatMessage({
+      id: 'previewer.actions.codepen'
+    })
+  }, /*#__PURE__*/React.createElement(IconCodePen, null)), /*#__PURE__*/React.createElement("a", {
+    target: "_blank",
+    rel: "noreferrer",
+    href: props.demoUrl,
+    className: "dumi-default-previewer-action-btn",
+    "data-dumi-tooltip": intl.formatMessage({
+      id: 'previewer.actions.separate'
+    })
+  }, /*#__PURE__*/React.createElement(IconExternalLink, null)), /*#__PURE__*/React.createElement("button", {
+    className: "dumi-default-previewer-action-btn",
+    type: "button",
+    onClick: function onClick() {
+      return setShowCode(function (prev) {
+        return !prev;
+      });
+    },
+    "data-dumi-tooltip": intl.formatMessage({
+      id: "previewer.actions.code.".concat(showCode ? 'shrink' : 'expand')
+    })
+  }, showCode ? /*#__PURE__*/React.createElement(IconCodeExpand, null) : /*#__PURE__*/React.createElement(IconCode, null))), showCode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer-sources"
+  }, !isSingleFile && /*#__PURE__*/React.createElement(Tabs, {
+    className: "dumi-default-previewer-tabs",
+    prefixCls: "dumi-default-tabs",
+    moreIcon: "\xB7\xB7\xB7",
+    defaultActiveKey: String(activeKey),
+    onChange: function onChange(key) {
+      return setActiveKey(Number(key));
+    },
+    items: files.map(function (_ref3, i) {
+      var _ref4 = _slicedToArray(_ref3, 1),
+          filename = _ref4[0];
+
+      return {
+        key: String(i),
+        label: filename
+      };
+    })
+  })), /*#__PURE__*/React.createElement(SourceCode, {
+    lang: lang
+  }, files[activeKey][1].value))));
+};
+
+export default Previewer;