dumi 2.4.48 → 2.4.49-alpha.1

package/dist/client/theme-api/DumiDemo/areDumiDemoPropsEqual.d.ts

@@ -0,0 +1 @@
+export declare function areDumiDemoPropsEqual<T>(prev: T, next: T): boolean;

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

@@ -0,0 +1,4 @@
+export function areDumiDemoPropsEqual(prev, next) {
+  // Ignore loader function identity while still detecting serializable demo updates.
+  return JSON.stringify(prev) === JSON.stringify(next);
+}

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

@@ -5,6 +5,7 @@ import React, { createElement } from 'react';
 import Previewer from 'dumi/theme/builtins/Previewer';
 import { useRenderer } from "../useRenderer";
 import DemoErrorBoundary from "./DemoErrorBoundary";
+import { areDumiDemoPropsEqual } from "./areDumiDemoPropsEqual";
 var InternalDumiDemo = function InternalDumiDemo(props) {
   var _useSiteData = useSiteData(),
     historyType = _useSiteData.historyType;
@@ -43,10 +44,7 @@ var InternalDumiDemo = function InternalDumiDemo(props) {
     "".concat(isHashRoute ? "#" : '').concat(basename).concat(SP_ROUTE_PREFIX, "demos/").concat(props.demo.id).concat(routeQuery)
   }, props.previewerProps), props.previewerProps.iframe ? null : demoNode);
 };
-export var DumiDemo = /*#__PURE__*/React.memo(InternalDumiDemo, function (prev, next) {
-  // compare length for performance
-  return JSON.stringify(prev).length === JSON.stringify(next).length;
-});
+export var DumiDemo = /*#__PURE__*/React.memo(InternalDumiDemo, areDumiDemoPropsEqual);
 if (process.env.NODE_ENV !== 'production') {
   InternalDumiDemo.displayName = 'DumiDemo';
 }

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

@@ -0,0 +1,5 @@
+type RouteMetaHMRListener = () => void;
+export declare function getRouteMetaHMRRevision(routeId: string): number;
+export declare function subscribeRouteMetaHMR(routeId: string, listener: RouteMetaHMRListener): () => void;
+export declare function notifyRouteMetaHMR(routeId: string): void;
+export {};

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

@@ -0,0 +1,23 @@
+var revisions = new Map();
+var listeners = new Map();
+export function getRouteMetaHMRRevision(routeId) {
+  var _revisions$get;
+  return (_revisions$get = revisions.get(routeId)) !== null && _revisions$get !== void 0 ? _revisions$get : 0;
+}
+export function subscribeRouteMetaHMR(routeId, listener) {
+  var _listeners$get;
+  var routeListeners = (_listeners$get = listeners.get(routeId)) !== null && _listeners$get !== void 0 ? _listeners$get : new Set();
+  routeListeners.add(listener);
+  listeners.set(routeId, routeListeners);
+  return function () {
+    routeListeners.delete(listener);
+    if (!routeListeners.size) listeners.delete(routeId);
+  };
+}
+export function notifyRouteMetaHMR(routeId) {
+  var _listeners$get2;
+  revisions.set(routeId, getRouteMetaHMRRevision(routeId) + 1);
+  (_listeners$get2 = listeners.get(routeId)) === null || _listeners$get2 === void 0 || _listeners$get2.forEach(function (listener) {
+    return listener();
+  });
+}

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

@@ -1,4 +1,5 @@
-import type { IRouteMeta } from './types';
+import type { IRouteMeta, IRoutesById } from './types';
+export declare function getCachedRouteMeta(route: IRoutesById[string], revision: number): IRouteMeta;
 /**
  * hook for get matched route
  * @internal internal use. Do not use in your production code.

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

@@ -7,27 +7,35 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import deepmerge from 'deepmerge';
 import { getRouteMetaById, matchRoutes, useAppData, useLocation, useRouteData } from 'dumi';
 import { useCallback, useState } from 'react';
+import { getRouteMetaHMRRevision, subscribeRouteMetaHMR } from "./routeMetaHMR";
 import { useIsomorphicLayoutEffect } from "./utils";
 var cache = new Map();
 var asyncCache = new Map();
+var cacheRevisions = new Map();
 var EMPTY_META = {
   frontmatter: {},
   toc: [],
   texts: []
 };
 var ASYNC_META_PROPS = ['texts'];
-function getCachedRouteMeta(route) {
+export function getCachedRouteMeta(route, revision) {
   var cacheKey = route.id;
+  if (cacheRevisions.get(cacheKey) !== revision) {
+    cache.delete(cacheKey);
+    asyncCache.delete(cacheKey);
+    cacheRevisions.set(cacheKey, revision);
+  }
   if (!cache.get(cacheKey)) {
     var _meta$tabs;
     var merge = function merge() {
       var meta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : EMPTY_META;
       if (route.meta) {
+        var _ref2, _ref3;
         Object.keys(route.meta).forEach(function (key) {
           var _ref, _ref$key;
           (_ref$key = (_ref = meta)[key]) !== null && _ref$key !== void 0 ? _ref$key : _ref[key] = route.meta[key];
         });
-        meta.frontmatter = deepmerge(meta.frontmatter, route.meta.frontmatter, {
+        meta.frontmatter = deepmerge((_ref2 = revision ? route.meta.frontmatter : meta.frontmatter) !== null && _ref2 !== void 0 ? _ref2 : {}, (_ref3 = revision ? meta.frontmatter : route.meta.frontmatter) !== null && _ref3 !== void 0 ? _ref3 : {}, {
           arrayMerge: function arrayMerge(_destinationArray, sourceArray) {
             return sourceArray;
           }
@@ -45,6 +53,10 @@ function getCachedRouteMeta(route) {
           // load async meta then replace cache
           if (routeMetaPromise) {
             asyncCache.set(cacheKey, routeMetaPromise.then(function (full) {
+              if (cacheRevisions.get(cacheKey) !== revision) {
+                var _cacheRevisions$get;
+                return getCachedRouteMeta(route, (_cacheRevisions$get = cacheRevisions.get(cacheKey)) !== null && _cacheRevisions$get !== void 0 ? _cacheRevisions$get : 0);
+              }
               return cache.set(cacheKey, merge(full)).get(cacheKey);
             }));
           }
@@ -111,5 +123,25 @@ export var useMatchedRoute = function useMatchedRoute() {
  */
 export var useRouteMeta = function useRouteMeta() {
   var route = useMatchedRoute();
-  return getCachedRouteMeta(route);
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    forceUpdate = _useState4[1];
+  var revision = process.env.NODE_ENV === 'production' ? 0 : getRouteMetaHMRRevision(route.id);
+  useIsomorphicLayoutEffect(function () {
+    if (process.env.NODE_ENV === 'production') return;
+    var unsubscribe = subscribeRouteMetaHMR(route.id, function () {
+      forceUpdate(function (count) {
+        return count + 1;
+      });
+    });
+
+    // Do not miss an update dispatched between render and subscription.
+    if (getRouteMetaHMRRevision(route.id) !== revision) {
+      forceUpdate(function (count) {
+        return count + 1;
+      });
+    }
+    return unsubscribe;
+  }, [route.id, revision]);
+  return getCachedRouteMeta(route, revision);
 };

package/dist/features/compile/index.d.ts

@@ -1,5 +1,6 @@
 import type { IApi, IDumiTechStack } from '../../types';
 export declare const techStacks: IDumiTechStack[];
+export declare function replaceTechStacks(nextTechStacks: IDumiTechStack[]): void;
 export declare function getUtoopackDemoAssetsFile(api: {
     env: string;
     paths: {

package/dist/features/compile/index.js

@@ -31,6 +31,7 @@ var compile_exports = {};
 __export(compile_exports, {
   default: () => compile_default,
   getUtoopackDemoAssetsFile: () => getUtoopackDemoAssetsFile,
+  replaceTechStacks: () => replaceTechStacks,
   techStacks: () => techStacks
 });
 module.exports = __toCommonJS(compile_exports);
@@ -44,6 +45,9 @@ var import_makoHooks = require("./makoHooks");
 var import_utils2 = require("./utils");
 var import_utoopackLoaders = require("./utoopackLoaders");
 var techStacks = [];
+function replaceTechStacks(nextTechStacks) {
+  techStacks.splice(0, techStacks.length, ...nextTechStacks);
+}
 function getUtoopackDemoAssetsFile(api) {
   if (api.env !== "production" || !api.isPluginEnable("exportStatic")) {
     return void 0;
@@ -113,8 +117,8 @@ var compile_default = (api) => {
     // and `before` only insert before the last one
     stage: -Infinity,
     async fn() {
-      techStacks.push(
-        ...await api.applyPlugins({
+      replaceTechStacks(
+        await api.applyPlugins({
           key: "registerTechStack",
           type: api.ApplyPluginsType.add
         })
@@ -256,5 +260,6 @@ var compile_default = (api) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getUtoopackDemoAssetsFile,
+  replaceTechStacks,
   techStacks
 });

package/dist/features/compile/utoopackLoaders.js

@@ -328,6 +328,18 @@ var getUtoopackRules = (api, config = api.config) => {
         ],
         as: "*.js"
       },
+      // Keep page rendering on a separate module identity from lazy route
+      // metadata so React Refresh can accept text changes locally.
+      {
+        condition: { query: /^\?type=text-render$/ },
+        loaders: [
+          {
+            loader: mdLoaderPath,
+            options: { ...serializableBaseOpts, mode: "text-render" }
+          }
+        ],
+        as: "*.js"
+      },
       // extract demo index metadata from markdown
       {
         condition: { query: /^\?type=demo-index$/ },

package/dist/features/meta.js

@@ -84,7 +84,9 @@ var meta_default = (api) => {
       path: "dumi/meta/index.ts",
       tplPath: require.resolve("../templates/meta/index.ts.tpl"),
       context: {
+        enableUtoopackHMR: useUtoopackDemoHMR,
         metaFiles: parsedMetaFiles,
+        metaStructureHash: (0, import_utils.getContentHash)(JSON.stringify(parsedMetaFiles)),
         chunkName: function chunkName() {
           var _a;
           if (!("file" in this)) {

package/dist/features/routes.js

@@ -39,6 +39,7 @@ var import_path = __toESM(require("path"));
 var import_pluralize = require("pluralize");
 var import_plugin_utils = require("umi/plugin-utils");
 var CTX_LAYOUT_ID = "dumi-context-layout";
+var ATOM_ROUTE_MARKDOWN_GLOB = "{*,*/index,*/index.*,*/README,*/README.*}.md";
 function normalizeDocDir(docDir) {
   return typeof docDir === "object" ? docDir : { dir: docDir };
 }
@@ -79,12 +80,23 @@ function flatRoute(route, docLayoutId) {
 }
 var routes_default = (api) => {
   api.describe({ key: "dumi:routes" });
-  api.addTmpGenerateWatcherPaths(
-    () => [
-      ...api.config.resolve.atomDirs,
-      ...api.config.resolve.docDirs.map(normalizeDocDir)
-    ].map(({ dir }) => import_path.default.join(api.cwd, dir, "**/*.md"))
-  );
+  api.addTmpGenerateWatcherPaths(() => {
+    const watcherPaths = [
+      ...api.config.resolve.atomDirs.map(
+        ({ dir }) => import_path.default.join(api.cwd, dir, ATOM_ROUTE_MARKDOWN_GLOB)
+      ),
+      ...api.config.resolve.docDirs.map(normalizeDocDir).map(({ dir }) => import_path.default.join(api.cwd, dir, "**/*.md"))
+    ].map(import_plugin_utils.winPath);
+    if (api.env === "development" && api.config.utoopack) {
+      return watcherPaths.map((watcherPath) => ({
+        path: watcherPath,
+        // Existing Markdown files are already watched by the bundler. Only
+        // route topology changes need to regenerate Umi's temporary files.
+        events: ["add", "unlink"]
+      }));
+    }
+    return watcherPaths;
+  });
   api.modifyDefaultConfig((memo) => {
     if (api.userConfig.resolve) {
       const keys = ["docDirs", "atomDirs"];

package/dist/loaders/markdown/index.d.ts

@@ -23,11 +23,18 @@ interface IMdLoaderFrontmatterModeOptions extends Omit<IMdLoaderDefaultModeOptio
 interface IMdLoaderTextModeOptions extends Omit<IMdLoaderDefaultModeOptions, 'builtins' | 'mode'> {
     mode: 'text';
 }
-export type IMdLoaderOptions = IMdLoaderDefaultModeOptions | IMdLoaderDemosModeOptions | IMdLoaderDemoModeOptions | IMdLoaderFrontmatterModeOptions | IMdLoaderTextModeOptions | IMdLoaderDemoIndexModeOptions;
+interface IMdLoaderRenderTextModeOptions extends Omit<IMdLoaderDefaultModeOptions, 'builtins' | 'mode'> {
+    mode: 'text-render';
+}
+export type IMdLoaderOptions = IMdLoaderDefaultModeOptions | IMdLoaderDemosModeOptions | IMdLoaderDemoModeOptions | IMdLoaderFrontmatterModeOptions | IMdLoaderTextModeOptions | IMdLoaderRenderTextModeOptions | IMdLoaderDemoIndexModeOptions;
 type MdLoaderCache = {
     getSync: (key: string, defaultValue: any) => any;
 };
 export declare function getMdLoaderCacheSync<T>(cache: MdLoaderCache, key: string, defaultValue: T): T;
 export declare function getDemoSourceFiles(demos?: IMdTransformerResult['meta']['demos']): string[];
+export declare function emitDefault(this: any, opts: IMdLoaderDefaultModeOptions, ret: IMdTransformerResult): string;
+export declare function emitFrontmatter(this: any, opts: IMdLoaderFrontmatterModeOptions, ret: IMdTransformerResult): string;
+export declare function emitText(this: any, opts: IMdLoaderTextModeOptions, ret: IMdTransformerResult): string;
+export declare function emitRenderText(this: any, _opts: IMdLoaderRenderTextModeOptions, ret: IMdTransformerResult): string;
 export default function mdLoader(this: any, content: string): void;
 export {};

package/dist/loaders/markdown/index.js

@@ -30,6 +30,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var markdown_exports = {};
 __export(markdown_exports, {
   default: () => mdLoader,
+  emitDefault: () => emitDefault,
+  emitFrontmatter: () => emitFrontmatter,
+  emitRenderText: () => emitRenderText,
+  emitText: () => emitText,
   getDemoSourceFiles: () => getDemoSourceFiles,
   getMdLoaderCacheSync: () => getMdLoaderCacheSync
 });
@@ -91,8 +95,10 @@ function getRouteId(opts, fileAbsPath) {
 }
 function emitDefault(opts, ret) {
   const { frontmatter, demos } = ret.meta;
+  const sharedDemoProps = ret.meta.demoSharedProps ?? [];
   const isTabContent = (0, import_tabs.isTabRouteFile)(this.resourcePath);
   const wrapper = isTabContent ? "" : "DumiPage";
+  const textMode = import_utoopackLoaders.UTOOPACK_LOADER_CTX_KEY in opts && process.env.NODE_ENV !== "production" ? "text-render" : "text";
   if (demos && opts.onResolveDemos) {
     opts.onResolveDemos(demos);
   }
@@ -125,7 +131,8 @@ import React, { Suspense } from 'react';
 import { DumiPage } from 'dumi';
 import { texts as ${import_rehypeText.CONTENT_TEXTS_OBJ_NAME} } from '${(0, import_plugin_utils.winPath)(
     this.resourcePath
-  )}?type=text';
+  )}?type=${textMode}';
+${sharedDemoProps.length ? `const __dumi_demo_shared_props__ = ${JSON.stringify(sharedDemoProps)};` : ""}
 
 // export named function for fastRefresh
 // ref: https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#edits-always-lead-to-full-reload
@@ -295,24 +302,81 @@ function emitDemoIndex(opts, ret) {
 ${renderDemoIndex(this.resourcePath, opts, demos)}`;
 }
 function emitFrontmatter(opts, ret) {
-  const { frontmatter, toc, demos } = ret.meta;
+  const { demos } = ret.meta;
+  const frontmatter = ret.meta.frontmatter;
+  const toc = ret.meta.toc ?? [];
   const resourcePath = (0, import_plugin_utils.winPath)(this.resourcePath);
   const isUtoopack = import_utoopackLoaders.UTOOPACK_LOADER_CTX_KEY in opts;
+  const enableUtoopackHMR = isUtoopack && process.env.NODE_ENV !== "production";
+  const routeMetaHMRPath = enableUtoopackHMR ? (0, import_plugin_utils.winPath)(require.resolve("../../client/theme-api/routeMetaHMR")) : void 0;
+  const routeId = getRouteId(opts, this.resourcePath);
   const demoIndex = renderDemoIndex(this.resourcePath, opts, demos);
   if (isUtoopack) {
+    const routeStructureHash = (0, import_utils.getContentHash)(
+      JSON.stringify({
+        atomId: frontmatter.atomId,
+        demoIds: demos == null ? void 0 : demos.map(({ id }) => id),
+        filename: frontmatter.filename,
+        group: frontmatter.group,
+        nav: frontmatter.nav,
+        order: frontmatter.order,
+        title: frontmatter.title
+      })
+    );
     const rendered = import_plugin_utils.Mustache.render(
-      `import '${resourcePath}?watch=parent';
+      `{{#enableUtoopackHMR}}
+import { notifyRouteMetaHMR } from {{{routeMetaHMRSpecifier}}};
+{{/enableUtoopackHMR}}
+import '${resourcePath}?watch=parent';
 globalThis.__DUMI_FM__ = globalThis.__DUMI_FM__ || {};
 globalThis.__DUMI_TOC__ = globalThis.__DUMI_TOC__ || {};
+{{#enableUtoopackHMR}}
+const hadPreviousMeta = Object.prototype.hasOwnProperty.call(globalThis.__DUMI_FM__, '${resourcePath}');
+globalThis.__DUMI_META_STRUCTURE_HASH__ = globalThis.__DUMI_META_STRUCTURE_HASH__ || {};
+const previousRouteStructureHash = globalThis.__DUMI_META_STRUCTURE_HASH__['${resourcePath}'];
+const didRouteStructureChange = previousRouteStructureHash !== undefined && previousRouteStructureHash !== '{{{routeStructureHash}}}';
+globalThis.__DUMI_META_STRUCTURE_HASH__['${resourcePath}'] = '{{{routeStructureHash}}}';
+const nextFrontmatter = {{{frontmatter}}};
+const nextToc = {{{toc}}};
+const frontmatter = globalThis.__DUMI_FM__['${resourcePath}'] || {};
+const toc = globalThis.__DUMI_TOC__['${resourcePath}'] || [];
+Object.keys(frontmatter).forEach((key) => delete frontmatter[key]);
+Object.assign(frontmatter, nextFrontmatter);
+toc.splice(0, toc.length, ...nextToc);
+globalThis.__DUMI_FM__['${resourcePath}'] = frontmatter;
+globalThis.__DUMI_TOC__['${resourcePath}'] = toc;
+{{/enableUtoopackHMR}}
+{{^enableUtoopackHMR}}
 globalThis.__DUMI_FM__['${resourcePath}'] = {{{frontmatter}}};
 globalThis.__DUMI_TOC__['${resourcePath}'] = {{{toc}}};
-export const frontmatter = globalThis.__DUMI_FM__['${resourcePath}'];
-export const toc = globalThis.__DUMI_TOC__['${resourcePath}'];
-{{{demoIndex}}}`,
+const frontmatter = globalThis.__DUMI_FM__['${resourcePath}'];
+const toc = globalThis.__DUMI_TOC__['${resourcePath}'];
+{{/enableUtoopackHMR}}
+export { frontmatter, toc };
+{{#enableUtoopackHMR}}
+export const routeStructureHash = '{{{routeStructureHash}}}';
+{{/enableUtoopackHMR}}
+{{{demoIndex}}}
+{{#enableUtoopackHMR}}
+if (module.hot) {
+  module.hot.accept();
+  if (didRouteStructureChange) {
+    module.hot.invalidate();
+  }{{#routeId}} else if (hadPreviousMeta) {
+    notifyRouteMetaHMR({{{routeId}}});
+  }{{/routeId}}{{^routeId}} else if (hadPreviousMeta) {
+    module.hot.invalidate();
+  }{{/routeId}}
+}
+{{/enableUtoopackHMR}}`,
       {
         toc: JSON.stringify(toc),
         frontmatter: JSON.stringify(frontmatter),
-        demoIndex
+        demoIndex,
+        enableUtoopackHMR,
+        routeId: routeId ? JSON.stringify(routeId) : void 0,
+        routeMetaHMRSpecifier: routeMetaHMRPath ? JSON.stringify(routeMetaHMRPath) : void 0,
+        routeStructureHash
       }
     );
     return rendered;
@@ -330,10 +394,45 @@ export const frontmatter = new Proxy({{{frontmatter}}}, {});
   );
 }
 function emitText(opts, ret) {
-  const { texts } = ret.meta;
+  const texts = ret.meta.texts ?? [];
+  const resourcePath = (0, import_plugin_utils.winPath)(this.resourcePath);
+  const enableUtoopackHMR = import_utoopackLoaders.UTOOPACK_LOADER_CTX_KEY in opts && process.env.NODE_ENV !== "production";
+  if (enableUtoopackHMR) {
+    const routeId = getRouteId(opts, this.resourcePath);
+    const routeMetaHMRSpecifier = JSON.stringify(
+      (0, import_plugin_utils.winPath)(require.resolve("../../client/theme-api/routeMetaHMR"))
+    );
+    return import_plugin_utils.Mustache.render(
+      `import { notifyRouteMetaHMR } from {{{routeMetaHMRSpecifier}}};
+import {{{watchSpecifier}}};
+globalThis.__DUMI_TEXTS__ = globalThis.__DUMI_TEXTS__ || {};
+const hadPreviousTexts = Object.prototype.hasOwnProperty.call(globalThis.__DUMI_TEXTS__, {{{resourceSpecifier}}});
+const nextTexts = {{{texts}}};
+const texts = globalThis.__DUMI_TEXTS__[{{{resourceSpecifier}}}] || [];
+texts.splice(0, texts.length, ...nextTexts);
+globalThis.__DUMI_TEXTS__[{{{resourceSpecifier}}}] = texts;
+export { texts };
+
+if (module.hot) {
+  module.hot.accept();
+  {{#routeId}}if (hadPreviousTexts) {
+    notifyRouteMetaHMR({{{routeId}}});
+  }{{/routeId}}{{^routeId}}if (hadPreviousTexts) {
+    module.hot.invalidate();
+  }{{/routeId}}
+}`,
+      {
+        resourceSpecifier: JSON.stringify(resourcePath),
+        routeId: routeId ? JSON.stringify(routeId) : void 0,
+        routeMetaHMRSpecifier,
+        texts: JSON.stringify(texts),
+        watchSpecifier: JSON.stringify(`${resourcePath}?watch=parent`)
+      }
+    );
+  }
   return import_plugin_utils.Mustache.render(
     `
-  import '${(0, import_plugin_utils.winPath)(this.resourcePath)}?watch=parent';
+  import '${resourcePath}?watch=parent';
   export const texts = {{{texts}}};
   `,
     {
@@ -341,6 +440,20 @@ function emitText(opts, ret) {
     }
   );
 }
+function emitRenderText(_opts, ret) {
+  return import_plugin_utils.Mustache.render(
+    `
+  import {{{watchSpecifier}}};
+  export const texts = {{{texts}}};
+  `,
+    {
+      texts: JSON.stringify(ret.meta.texts ?? []),
+      watchSpecifier: JSON.stringify(
+        `${(0, import_plugin_utils.winPath)(this.resourcePath)}?watch=parent`
+      )
+    }
+  );
+}
 function emit(opts, ret) {
   const { demos, embeds } = ret.meta;
   embeds.forEach((file) => this.addDependency(file));
@@ -358,6 +471,8 @@ function emit(opts, ret) {
       return emitFrontmatter.call(this, opts, ret);
     case "text":
       return emitText.call(this, opts, ret);
+    case "text-render":
+      return emitRenderText.call(this, opts, ret);
     default:
       return emitDefault.call(this, opts, ret);
   }
@@ -444,6 +559,10 @@ function mdLoader(content) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  emitDefault,
+  emitFrontmatter,
+  emitRenderText,
+  emitText,
   getDemoSourceFiles,
   getMdLoaderCacheSync
 });

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

@@ -43,6 +43,7 @@ declare module 'vfile' {
         frontmatter: IRouteMeta['frontmatter'];
         toc: IRouteMeta['toc'];
         embeds: string[];
+        demoSharedProps?: unknown[];
     }
 }
 export interface IMdTransformerOptions {

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

@@ -49,6 +49,8 @@ var DEMO_NODE_CONTAINER = "$demo-container";
 var DEMO_PROP_VALUE_KEY = "$demo-prop-value-key";
 var DEMO_LOADER_PLACEHOLDER = "__DUMI_DEMO_LOADER__";
 var DEMO_LOADER_PLACEHOLDER_VALUE = DEMO_LOADER_PLACEHOLDER;
+var DEMO_SHARED_PROP_PLACEHOLDER_PREFIX = "__DUMI_DEMO_SHARED_PROP_";
+var MIN_SHARED_PREVIEWER_PROP_SIZE = 1024;
 var DUMI_DEMO_TAG = "DumiDemo";
 var DUMI_DEMO_GRID_TAG = "DumiDemoGrid";
 var SKIP_DEMO_PARSE = "pure";
@@ -66,6 +68,55 @@ var alwaysDemoRE = new RegExp(
   ({ toString } = await import("hast-util-to-string"));
   ({ isElement } = await import("hast-util-is-element"));
 })();
+function getDemoPropsFromNode(node) {
+  var _a;
+  return [].concat(
+    (_a = node.data) == null ? void 0 : _a[DEMO_PROP_VALUE_KEY]
+  );
+}
+function hoistSharedPreviewerProps(nodes) {
+  const candidates = /* @__PURE__ */ new Map();
+  nodes.forEach((node) => {
+    getDemoPropsFromNode(node).forEach(({ previewerProps }) => {
+      Object.values(previewerProps).forEach((value) => {
+        if (!value || typeof value !== "object")
+          return;
+        const serialized = JSON.stringify(value);
+        if (serialized.length < MIN_SHARED_PREVIEWER_PROP_SIZE)
+          return;
+        const candidate = candidates.get(serialized);
+        if (candidate) {
+          candidate.count += 1;
+        } else {
+          candidates.set(serialized, { count: 1, value });
+        }
+      });
+    });
+  });
+  const sharedValues = [];
+  const sharedIndexes = /* @__PURE__ */ new Map();
+  candidates.forEach(({ count, value }, serialized) => {
+    if (count > 1) {
+      sharedIndexes.set(serialized, sharedValues.length);
+      sharedValues.push(value);
+    }
+  });
+  if (!sharedValues.length)
+    return sharedValues;
+  nodes.forEach((node) => {
+    getDemoPropsFromNode(node).forEach(({ previewerProps }) => {
+      Object.entries(previewerProps).forEach(([key, value]) => {
+        if (!value || typeof value !== "object")
+          return;
+        const index = sharedIndexes.get(JSON.stringify(value));
+        if (index !== void 0) {
+          previewerProps[key] = `${DEMO_SHARED_PROP_PLACEHOLDER_PREFIX}${index}__`;
+        }
+      });
+    });
+  });
+  return sharedValues;
+}
 function getCodeLang(node, opts) {
   var _a, _b, _c, _d;
   let lang = "";
@@ -380,6 +431,10 @@ function rehypeDemo(opts) {
     });
     await Promise.all(deferrers).then((demos) => {
       vFile.data.demos = demos;
+      const sharedPreviewerProps = opts.useUtoopackDemoHMR ? hoistSharedPreviewerProps(replaceNodes) : [];
+      if (sharedPreviewerProps.length) {
+        vFile.data.demoSharedProps = sharedPreviewerProps;
+      }
       replaceNodes.forEach((node) => {
         const demoLoader = `() => import('${(0, import_plugin_utils.winPath)(
           opts.fileAbsPath
@@ -390,6 +445,9 @@ function rehypeDemo(opts) {
             new RegExp(`"${DEMO_LOADER_PLACEHOLDER}"`, "g"),
             demoLoader
           );
+          sharedPreviewerProps.forEach((_, index2) => {
+            value = value.split(`"${DEMO_SHARED_PROP_PLACEHOLDER_PREFIX}${index2}__"`).join(`__dumi_demo_shared_props__[${index2}]`);
+          });
         }
         if (node.JSXAttributes[0].type === "JSXAttribute") {
           node.JSXAttributes[0].value = value;

package/dist/templates/meta/index.ts.tpl

@@ -3,11 +3,16 @@
 import { frontmatter as fm{{{index}}}, toc as t{{{index}}}, demoIndex as dmi{{{index}}} } from '{{{file}}}?type=frontmatter';
 {{/loadDemoIndex}}
 {{^loadDemoIndex}}
-import { frontmatter as fm{{{index}}}, toc as t{{{index}}} } from '{{{file}}}?type=frontmatter';
+import { frontmatter as fm{{{index}}}, toc as t{{{index}}}{{#enableUtoopackHMR}}{{#isMarkdown}}, routeStructureHash as rsh{{{index}}}{{/isMarkdown}}{{/enableUtoopackHMR}} } from '{{{file}}}?type=frontmatter';
 {{/loadDemoIndex}}
 {{/metaFiles}}
 
+{{#enableUtoopackHMR}}
+const nextFilesMeta = {
+{{/enableUtoopackHMR}}
+{{^enableUtoopackHMR}}
 export const filesMeta = {
+{{/enableUtoopackHMR}}
   {{#metaFiles}}
   '{{{id}}}': {
     frontmatter: fm{{{index}}},
@@ -25,4 +30,34 @@ export const filesMeta = {
   {{/metaFiles}}
 }
 
+{{#enableUtoopackHMR}}
+const dumiGlobal = globalThis as any;
+dumiGlobal.__DUMI_FILES_META__ = dumiGlobal.__DUMI_FILES_META__ || {};
+const filesMeta = dumiGlobal.__DUMI_FILES_META__;
+Object.keys(filesMeta).forEach((id) => delete filesMeta[id]);
+Object.assign(filesMeta, nextFilesMeta);
+export { filesMeta };
+
+const nextMetaStructureHash = JSON.stringify([
+  '{{{metaStructureHash}}}',
+  {{#metaFiles}}
+  {{#isMarkdown}}rsh{{{index}}},{{/isMarkdown}}
+  {{^isMarkdown}}JSON.stringify([fm{{{index}}}, t{{{index}}}]),{{/isMarkdown}}
+  {{/metaFiles}}
+]);
+const previousMetaStructureHash = dumiGlobal.__DUMI_META_INDEX_STRUCTURE_HASH__;
+const didMetaStructureChange = previousMetaStructureHash !== undefined && previousMetaStructureHash !== nextMetaStructureHash;
+dumiGlobal.__DUMI_META_INDEX_STRUCTURE_HASH__ = nextMetaStructureHash;
+
+if (module.hot) {
+  // Dynamic imports have an async-loader wrapper module. Accept at this
+  // stable metadata boundary as well as inside the loaded text module so an
+  // already-loaded search chunk cannot invalidate the global runtime graph.
+  module.hot.accept();
+  if (didMetaStructureChange) {
+    module.hot.invalidate();
+  }
+}
+{{/enableUtoopackHMR}}
+
 export { tabs as tabsMeta } from './tabs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.4.48",
+  "version": "2.4.49-alpha.1",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",
@@ -69,9 +69,9 @@
     "@swc/core": "1.9.2",
     "@types/hast": "^2.3.5",
     "@types/mdast": "^3.0.12",
-    "@umijs/bundler-utils": "^4.6.82",
-    "@umijs/core": "^4.6.82",
-    "@umijs/utils": "^4.6.82",
+    "@umijs/bundler-utils": "^4.7.3",
+    "@umijs/core": "^4.7.3",
+    "@umijs/utils": "^4.7.3",
     "animated-scroll-to": "^2.3.0",
     "classnames": "2.3.2",
     "codesandbox-import-utils": "^2.2.3",
@@ -123,7 +123,7 @@
     "sass": "^1.64.1",
     "sitemap": "^7.1.1",
     "sucrase": "^3.34.0",
-    "umi": "^4.6.82",
+    "umi": "^4.7.3",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.2",
     "unist-util-visit-parents": "^5.1.3",
@@ -147,8 +147,8 @@
     "@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.6.82",
-    "@umijs/plugins": "4.6.82",
+    "@umijs/lint": "^4.7.3",
+    "@umijs/plugins": "4.7.3",
     "eslint": "^8.46.0",
     "esno": "^4.7.0",
     "fast-glob": "^3.3.1",