dumi 2.0.0-rc.7 → 2.0.0-rc.9

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

@@ -2,8 +2,24 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import { SP_ROUTE_PREFIX } from "../../constants";
 import { useSiteData } from 'dumi';
+import Container from "dumi/theme/builtins/Container";
 import Previewer from "dumi/theme/builtins/Previewer";
 import React, { createElement } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+var DemoErrorBoundary = function DemoErrorBoundary(props) {
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallbackRender: function fallbackRender(_ref) {
+      var error = _ref.error;
+      return /*#__PURE__*/React.createElement(Container, {
+        type: "error"
+      }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("strong", null, error.message || 'This demo has been crashed.')), error.stack && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("details", {
+        open: true
+      }, /*#__PURE__*/React.createElement("summary", null, "Error stack"), /*#__PURE__*/React.createElement("pre", null, error.stack))));
+    }
+  }, props.children);
+};
+
 export var DumiDemo = function DumiDemo(props) {
   var _useSiteData = useSiteData(),
       demos = _useSiteData.demos;
@@ -11,10 +27,14 @@ 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;
-  if (props.demo.inline) return /*#__PURE__*/createElement(component);
+
+  if (props.demo.inline) {
+    return /*#__PURE__*/React.createElement(DemoErrorBoundary, null, /*#__PURE__*/createElement(component));
+  }
+
   return /*#__PURE__*/React.createElement(Previewer, _extends({
     asset: asset,
     demoUrl: // allow user override demoUrl by frontmatter
     props.previewerProps.demoUrl || "/".concat(SP_ROUTE_PREFIX, "demos/").concat(props.demo.id)
-  }, props.previewerProps), props.previewerProps.iframe ? null : /*#__PURE__*/createElement(component));
+  }, props.previewerProps), props.previewerProps.iframe ? null : /*#__PURE__*/React.createElement(DemoErrorBoundary, null, /*#__PURE__*/createElement(component)));
 };

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

@@ -86,6 +86,10 @@ export interface IRouteMeta {
         id: string;
         depth: number;
         title: string;
+        /**
+         * private field, will be removed in the future
+         */
+        _debug_demo?: boolean;
     }[];
     texts: {
         type?: 'content';

package/dist/features/routes.js

@@ -44,10 +44,10 @@ function localizeUmiRoute(route, locales) {
     route.absPath = route.path !== "/" ? `/${route.path}` : route.path;
   }
 }
-function flatRoute(route) {
-  if (route.parentId !== "DocLayout") {
-    route.parentId = "DocLayout";
-    route.path = route.path === "*" ? route.path.toLowerCase() : route.absPath.slice(1).toLowerCase();
+function flatRoute(route, docLayoutId) {
+  if (route.parentId !== docLayoutId) {
+    route.parentId = docLayoutId;
+    route.path = route.path === "*" ? route.path : route.absPath.slice(1);
   }
 }
 function getClientPageFile(file, cwd) {
@@ -121,8 +121,6 @@ var routes_default = (api) => {
     }
     Object.entries(pages).forEach(([, route]) => {
       route.file = (0, import_plugin_utils.winPath)(import_path.default.resolve(api.config.conventionRoutes.base, route.file));
-      flatRoute(route);
-      localizeUmiRoute(route, api.config.locales);
       routes[route.id] = route;
     });
     docDirs.map(normalizeDocDir).forEach(({ type, dir }) => {
@@ -133,14 +131,12 @@ var routes_default = (api) => {
       });
       Object.entries(dirRoutes).forEach(([key, route]) => {
         route.id = `${dir}/${key}`;
-        flatRoute(route);
         if (type) {
           const pluralType = (0, import_pluralize.plural)(type);
           route.path = `${pluralType}/${route.path}`.replace(/\/+$/, "/");
           route.absPath = `/${route.path}`;
         }
         route.file = (0, import_plugin_utils.winPath)(import_path.default.resolve(base, route.file));
-        localizeUmiRoute(route, api.config.locales);
         routes[route.id] = route;
       });
     });
@@ -148,8 +144,9 @@ var routes_default = (api) => {
       const base = import_path.default.join(api.cwd, dir);
       const atomFiles = import_plugin_utils.glob.sync("{*,*/index,*/index.*,*/README,*/README.*}.md", { cwd: base });
       atomFiles.forEach((file) => {
-        const routePath = (0, import_plugin_utils.winPath)(import_path.default.join((0, import_pluralize.plural)(type), file)).replace(/(\/index|\/README)?\.md$/, "").replace(/\./g, "/").toLowerCase();
-        const routeId = (0, import_utils.createRouteId)(file);
+        const routeFile = (0, import_plugin_utils.winPath)(import_path.default.join((0, import_pluralize.plural)(type), file));
+        const routePath = routeFile.replace(/(\/index|\/README)?\.md$/, "").replace(/\./g, "/");
+        const routeId = (0, import_utils.createRouteId)(routeFile);
         routes[routeId] = {
           id: routeId,
           path: routePath,
@@ -157,9 +154,19 @@ var routes_default = (api) => {
           parentId: docLayoutId,
           file: (0, import_plugin_utils.winPath)(import_path.default.resolve(base, file))
         };
-        localizeUmiRoute(routes[routeId], api.config.locales);
       });
     });
+    Object.values(routes).forEach((route) => {
+      if (route.path !== encodeURI(route.path)) {
+        throw new Error(`Invalid route path: ${route.path}, please rename it with only alphanumeric, dash and slash.
+    at ${route.file}`);
+      } else if (!route.isLayout) {
+        flatRoute(route, docLayoutId);
+        localizeUmiRoute(route, api.config.locales);
+        route.path = route.path.toLowerCase();
+        route.absPath = route.absPath.toLowerCase();
+      }
+    });
     if (Object.values(pages).every((route) => route.path !== "*")) {
       routes["404"] = {
         id: "404",
@@ -176,12 +183,6 @@ var routes_default = (api) => {
       parentId: demoLayoutId,
       file: getClientPageFile("client/pages/Demo", api.cwd)
     };
-    Object.values(routes).forEach((route) => {
-      if (route.path !== encodeURI(route.path)) {
-        throw new Error(`Invalid route path: ${route.path}, please rename it with only alphanumeric, dash and slash.
-    at ${route.file}`);
-      }
-    });
     return routes;
   });
   api.addLayouts(() => {

package/dist/features/sitemap.d.ts

@@ -0,0 +1,3 @@
+import type { IApi } from "../types";
+declare const _default: (api: IApi) => void;
+export default _default;

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/loaders/markdown/index.js

@@ -121,7 +121,7 @@ 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, {

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.9",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",
@@ -57,8 +57,8 @@
     "@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.0-canary.20221114.1",
+    "@umijs/core": "4.0.0-canary.20221114.1",
     "codesandbox": "^2.2.3",
     "deepmerge": "^4.2.2",
     "dumi-afx-deps": "^1.0.0-alpha.1",
@@ -84,6 +84,7 @@
     "raw-loader": "^4.0.2",
     "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",
@@ -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.0-canary.20221114.1",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.0",
     "unist-util-visit-parents": "^5.1.1",
@@ -116,8 +118,8 @@
     "@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.0-canary.20221114.1",
+    "@umijs/plugins": "4.0.0-canary.20221114.1",
     "eslint": "^8.20.0",
     "father": "^4.1.0",
     "husky": "^8.0.1",

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

@@ -1,10 +1,17 @@
 @import (reference) '../../styles/variables.less';
 
-.@{prefix}-container {
-  margin: 24px 0 32px;
+.@{prefix}-container.markdown {
   padding: 18px 16px 18px 44px;
   border-radius: 4px;
 
+  &:not(:first-child) {
+    margin-top: 24px;
+  }
+
+  &:not(:last-child) {
+    margin-top: 32px;
+  }
+
   > svg {
     float: left;
     fill: currentcolor;
@@ -13,9 +20,10 @@
   }
 
   > h4 {
-    margin: 1px 0 0;
+    clear: none;
+    margin: 0;
     font-size: 15px;
-    line-height: 1;
+    line-height: 17px;
   }
 
   > p {
@@ -27,9 +35,13 @@
   &[data-type='info'] {
     @color: darken(desaturate(@c-primary, 45%), 10%);
 
-    color: @color;
     background: lighten(@c-primary, 42%);
 
+    > h4,
+    > svg {
+      color: @color;
+    }
+
     > p {
       color: desaturate(@color, 20%);
     }
@@ -38,9 +50,13 @@
   &[data-type='warning'] {
     @color: darken(desaturate(@c-warning, 20%), 2%);
 
-    color: @color;
     background: lighten(@c-warning, 51%);
 
+    > h4,
+    > svg {
+      color: @color;
+    }
+
     > p {
       color: desaturate(@color, 24%);
     }
@@ -49,9 +65,13 @@
   &[data-type='success'] {
     @color: darken(desaturate(@c-success, 5%), 1%);
 
-    color: @color;
     background: lighten(@c-success, 59%);
 
+    > h4,
+    > svg {
+      color: @color;
+    }
+
     > p {
       color: desaturate(@color, 22%);
     }
@@ -60,9 +80,13 @@
   &[data-type='error'] {
     @color: darken(desaturate(@c-error, 20%), 1%);
 
-    color: @color;
     background: lighten(@c-error, 51%);
 
+    > h4,
+    > svg {
+      color: @color;
+    }
+
     > p {
       color: desaturate(@color, 25%);
     }