dumi 2.4.53 → 2.4.55

package/dist/client/pages/Demo/index.js

@@ -1,5 +1,6 @@
 import { useDemo, useLiveDemo, useLocation, useParams } from 'dumi';
 import { createElement, useEffect } from 'react';
+import { isLiveDemoMessage, isLiveDemoSource } from "../../theme-api/liveDemoMessage";
 import { useRenderer } from "../../theme-api/useRenderer";
 import "./index.less";
 var DemoRenderPage = function DemoRenderPage() {
@@ -29,8 +30,13 @@ var DemoRenderPage = function DemoRenderPage() {
 
   // listen message event for setSource
   useEffect(function () {
+    var _demo$asset;
+    var dependencies = (_demo$asset = demo.asset) === null || _demo$asset === void 0 ? void 0 : _demo$asset.dependencies;
+    var entryFileName = dependencies && Object.keys(dependencies).find(function (key) {
+      return dependencies[key].type === 'FILE';
+    });
     var handler = function handler(ev) {
-      if (ev.data.type === 'dumi.liveDemo.setSource') {
+      if (isLiveDemoMessage(ev, window.parent, 'dumi.liveDemo.setSource') && isLiveDemoSource(ev.data.value, entryFileName)) {
         setSource(ev.data.value);
       }
     };
@@ -38,9 +44,9 @@ var DemoRenderPage = function DemoRenderPage() {
     return function () {
       return window.removeEventListener('message', handler);
     };
-  }, [setSource]);
+  }, [demo.asset, setSource]);
 
-  // notify parent window that compile done
+  // The parent listens on this window for compilation completion.
   useEffect(function () {
     if (!loading && (liveDemoError || liveDemoNode)) {
       window.postMessage({
@@ -48,7 +54,7 @@ var DemoRenderPage = function DemoRenderPage() {
         value: {
           err: liveDemoError
         }
-      });
+      }, window.location.origin);
     }
   }, [liveDemoError, liveDemoNode, loading]);
   return finalNode;

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

@@ -0,0 +1,4 @@
+/** Only trust messages from the expected window on this site's origin. */
+export declare function isLiveDemoMessage(event: MessageEvent, source: Window, type: 'dumi.liveDemo.setSource' | 'dumi.liveDemo.compileDone'): boolean;
+export declare function isLiveDemoSource(value: unknown, entryFileName: string | undefined): value is Record<string, string>;
+export declare function isLiveDemoCompileResult(value: unknown): boolean;

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

@@ -0,0 +1,19 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function isRecord(value) {
+  return _typeof(value) === 'object' && value !== null && !Array.isArray(value);
+}
+
+/** Only trust messages from the expected window on this site's origin. */
+export function isLiveDemoMessage(event, source, type) {
+  var origin = window.location.origin;
+  return origin !== 'null' && event.origin === origin && event.source === source && isRecord(event.data) && event.data.type === type;
+}
+export function isLiveDemoSource(value, entryFileName) {
+  return isRecord(value) && entryFileName !== undefined && Object.prototype.hasOwnProperty.call(value, entryFileName) && typeof value[entryFileName] === 'string' && Object.values(value).every(function (source) {
+    return typeof source === 'string';
+  });
+}
+export function isLiveDemoCompileResult(value) {
+  // Preserve arbitrary compiler throw values, including errors from other realms.
+  return isRecord(value) && Object.prototype.hasOwnProperty.call(value, 'err');
+}

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

@@ -13,6 +13,7 @@ import { useDemo } from 'dumi';
 import throttle from 'lodash.throttle';
 import { createElement, useCallback, useRef, useState } from 'react';
 import DemoErrorBoundary from "./DumiDemo/DemoErrorBoundary";
+import { isLiveDemoCompileResult, isLiveDemoMessage } from "./liveDemoMessage";
 import { useRenderer } from "./useRenderer";
 import { getAgnosticComponentModule } from "./utils";
 var THROTTLE_WAIT = 500;
@@ -76,7 +77,7 @@ export var useLiveDemo = function useLiveDemo(id, opts) {
             _context.next = 5;
             return new Promise(function (resolve) {
               var handler = function handler(ev) {
-                if (ev.data.type.startsWith('dumi.liveDemo.compileDone')) {
+                if (isLiveDemoMessage(ev, iframeWindow, 'dumi.liveDemo.compileDone') && isLiveDemoCompileResult(ev.data.value)) {
                   iframeWindow.removeEventListener('message', handler);
                   setError(ev.data.value.err);
                   resolve();
@@ -86,7 +87,7 @@ export var useLiveDemo = function useLiveDemo(id, opts) {
               iframeWindow.postMessage({
                 type: 'dumi.liveDemo.setSource',
                 value: source
-              });
+              }, window.location.origin);
             });
           case 5:
             _context.next = 74;

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

@@ -1,4 +1,9 @@
 import type { Root } from 'hast';
 import type { Transformer } from 'unified';
 export declare const HEADING_TAGS: string[];
+/**
+ * strip the trailing custom anchor marker from plain heading text,
+ * keep text untouched if the marker is invalid
+ */
+export declare function stripCustomAnchorMarker(text: string): string;
 export default function rehypeSlug(): Transformer<Root>;

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

@@ -30,9 +30,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var rehypeSlug_exports = {};
 __export(rehypeSlug_exports, {
   HEADING_TAGS: () => HEADING_TAGS,
-  default: () => rehypeSlug
+  default: () => rehypeSlug,
+  stripCustomAnchorMarker: () => stripCustomAnchorMarker
 });
 module.exports = __toCommonJS(rehypeSlug_exports);
+var import_utils = require("@umijs/utils");
 var import_github_slugger = __toESM(require("github-slugger"));
 var import_rehypeDemo = require("./rehypeDemo");
 var visit;
@@ -42,13 +44,91 @@ var toString;
   ({ toString } = await import("hast-util-to-string"));
 })();
 var HEADING_TAGS = ["h1", "h2", "h3", "h4", "h5", "h6"];
+var CUSTOM_ANCHOR_RE = /\s*\{#([^}]+)\}\s*$/;
+function getCustomAnchorId(text) {
+  var _a;
+  return ((_a = text.match(CUSTOM_ANCHOR_RE)) == null ? void 0 : _a[1].trim()) || void 0;
+}
+function stripCustomAnchorMarker(text) {
+  return getCustomAnchorId(text) ? text.replace(CUSTOM_ANCHOR_RE, "") : text;
+}
+function extractCustomAnchor(node) {
+  const lastChild = node.children[node.children.length - 1];
+  if ((lastChild == null ? void 0 : lastChild.type) !== "text" || !lastChild.value.includes("{#"))
+    return;
+  const rawId = getCustomAnchorId(lastChild.value);
+  if (!rawId)
+    return;
+  lastChild.value = stripCustomAnchorMarker(lastChild.value);
+  if (!lastChild.value)
+    node.children.pop();
+  return rawId;
+}
 function rehypeSlug() {
   return async (tree, vFile) => {
+    var _a;
     const slugger = new import_github_slugger.default();
+    const customAnchors = /* @__PURE__ */ new Map();
+    const reservedIds = /* @__PURE__ */ new Set();
+    const demoIds = /* @__PURE__ */ new Set();
+    const filename = (_a = vFile.data.frontmatter) == null ? void 0 : _a.filename;
+    visit(tree, "element", (node) => {
+      var _a2, _b;
+      if (![import_rehypeDemo.DUMI_DEMO_TAG, import_rehypeDemo.DUMI_DEMO_GRID_TAG].includes(node.tagName) || !((_a2 = node.data) == null ? void 0 : _a2[import_rehypeDemo.DEMO_PROP_VALUE_KEY])) {
+        return;
+      }
+      const demos = [].concat(
+        (_b = node.data) == null ? void 0 : _b[import_rehypeDemo.DEMO_PROP_VALUE_KEY]
+      );
+      demos.forEach(({ demo }) => {
+        if (demo.inline)
+          return;
+        demoIds.add(demo.id);
+        slugger.slug(demo.id);
+      });
+    });
+    const existingIds = /* @__PURE__ */ new Set();
+    const markedHeadings = [];
+    visit(tree, "element", (node) => {
+      var _a2;
+      if (!HEADING_TAGS.includes(node.tagName))
+        return;
+      const existingId = (_a2 = node.properties) == null ? void 0 : _a2.id;
+      const rawId = extractCustomAnchor(node);
+      if (rawId) {
+        markedHeadings.push({ node, rawId, existingId });
+      } else if (existingId) {
+        existingIds.add(existingId);
+        reservedIds.add(existingId);
+      }
+    });
+    markedHeadings.forEach(({ node, rawId, existingId }) => {
+      let id = rawId;
+      let suffix = 1;
+      while (reservedIds.has(id) || demoIds.has(id)) {
+        id = `${rawId}-${suffix++}`;
+      }
+      if (id !== rawId) {
+        const reason = demoIds.has(rawId) ? "conflicts with demo id" : existingIds.has(rawId) ? "conflicts with an existing heading id" : "is duplicated";
+        import_utils.logger.warn(
+          `Custom anchor "${rawId}" ${reason}, fallback to "${id}" instead. at ${filename}`
+        );
+      }
+      if (existingId && existingId !== id) {
+        import_utils.logger.warn(
+          `Custom anchor "${id}" overrides the existing id "${existingId}" of heading "${toString(
+            node
+          )}". at ${filename}`
+        );
+      }
+      reservedIds.add(id);
+      customAnchors.set(node, id);
+    });
     vFile.data.toc = [];
     visit(tree, "element", (node) => {
-      var _a, _b, _c;
+      var _a2, _b;
       if (HEADING_TAGS.includes(node.tagName)) {
+        const customAnchor = customAnchors.get(node);
         const title = toString({
           type: "element",
           tagName: node.tagName,
@@ -59,22 +139,37 @@ function rehypeSlug() {
         }).trim();
         const depth = Number(node.tagName.slice(1));
         node.properties ?? (node.properties = {});
-        (_a = node.properties).id ?? (_a.id = slugger.slug(title));
+        if (customAnchor) {
+          node.properties.id = customAnchor;
+        } else if (!node.properties.id) {
+          let id = slugger.slug(title);
+          const conflictedId = id;
+          while (reservedIds.has(id)) {
+            id = slugger.slug(title);
+          }
+          if (id !== conflictedId) {
+            import_utils.logger.warn(
+              `Heading "${title}" conflicts with the anchor "${conflictedId}", fallback to "${id}" instead. at ${filename}`
+            );
+          }
+          node.properties.id = id;
+        }
         vFile.data.toc.push({
           id: node.properties.id,
           depth,
           title
         });
-      } 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])) {
+      } else if ([import_rehypeDemo.DUMI_DEMO_TAG, import_rehypeDemo.DUMI_DEMO_GRID_TAG].includes(node.tagName) && ((_a2 = node.data) == null ? void 0 : _a2[import_rehypeDemo.DEMO_PROP_VALUE_KEY])) {
         const demos = [].concat(
-          (_c = node.data) == null ? void 0 : _c[import_rehypeDemo.DEMO_PROP_VALUE_KEY]
+          (_b = node.data) == null ? void 0 : _b[import_rehypeDemo.DEMO_PROP_VALUE_KEY]
         );
         demos.forEach(({ demo, previewerProps }) => {
-          var _a2, _b2;
+          var _a3, _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,
+              // must keep the same id as previewer rendered anchor
+              id: demo.id,
+              depth: ((_b2 = (_a3 = vFile.data.frontmatter) == null ? void 0 : _a3.demo) == null ? void 0 : _b2.tocDepth) || 3,
               title: previewerProps.title,
               // put debug flag to control hide/show in toc
               ...previewerProps.debug ? { _debug_demo: true } : {}
@@ -87,5 +182,6 @@ function rehypeSlug() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  HEADING_TAGS
+  HEADING_TAGS,
+  stripCustomAnchorMarker
 });

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

@@ -38,6 +38,7 @@ var import_child_process = require("child_process");
 var import_fs = __toESM(require("fs"));
 var import_js_yaml = __toESM(require("js-yaml"));
 var import_path = __toESM(require("path"));
+var import_rehypeSlug = require("./rehypeSlug");
 var visit;
 var toString;
 (async () => {
@@ -90,7 +91,9 @@ function remarkMeta(opts) {
       () => {
         visit(tree, "heading", (node) => {
           if (node.depth === 1) {
-            vFile.data.frontmatter.title = toString(node.children);
+            vFile.data.frontmatter.title = (0, import_rehypeSlug.stripCustomAnchorMarker)(
+              toString(node.children)
+            );
           }
         });
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.4.53",
+  "version": "2.4.55",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",
@@ -54,11 +54,11 @@
       "prettier --cache --write"
     ],
     "*.{js,jsx}": [
-      "eslint --fix",
+      "utoo-lint --fix",
       "prettier --cache --write"
     ],
     "*.{ts,tsx}": [
-      "eslint --fix",
+      "utoo-lint --fix",
       "prettier --cache --parser=typescript --write"
     ]
   },
@@ -148,15 +148,16 @@
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.2.7",
     "@typescript/native-preview": "7.0.0-dev.20260623.1",
-    "@umijs/lint": "^4.7.4",
+    "@umijs/lint": "^4.7.28",
     "@umijs/plugins": "4.7.4",
-    "eslint": "^8.46.0",
+    "@utoo/lint": "^0.4.12",
     "esno": "^4.7.0",
     "fast-glob": "^3.3.1",
     "father": "^4.6.23",
     "git-repo-info": "^2.1.1",
     "highlight-words-core": "^1.2.2",
     "husky": "^8.0.3",
+    "jsdom": "^26.1.0",
     "lint-staged": "^13.2.3",
     "prettier": "^2.8.8",
     "prettier-plugin-organize-imports": "^3.2.3",
@@ -193,7 +194,7 @@
     "format": "prettier --cache --write .",
     "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}\"",
+    "lint:es": "utoo-lint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
     "release": "esno scripts/release.ts",
     "release:publish": "esno scripts/releasePublish.ts",
     "test": "vitest run",