dumi 2.4.46 → 2.4.48-alpha.0

package/dist/assetParsers/block.js

@@ -60,6 +60,13 @@ function getDepsKey(deps) {
     Array.from(new Set(deps)).sort().map((file) => `${(0, import_plugin_utils.winPath)(file)}:${getContentHashFromFile(file)}`)
   );
 }
+function getDepsKeyFromSnapshot(deps, snapshot) {
+  return JSON.stringify(
+    Array.from(new Set(deps)).sort().map(
+      (file) => `${(0, import_plugin_utils.winPath)(file)}:${snapshot.get(file) ?? getContentHashFromFile(file)}`
+    )
+  );
+}
 function getParseCacheKey(opts) {
   const entryContent = opts.entryPointCode ?? import_fs.default.readFileSync(opts.fileAbsPath, "utf-8");
   return JSON.stringify({
@@ -75,10 +82,8 @@ function getParseCacheKey(opts) {
     hasGenerateSources: Boolean(opts.techStack.generateSources)
   });
 }
-function getParseDeps(ret, entryFile) {
-  return Object.values(ret.resolveMap).filter(
-    (file) => import_path.default.isAbsolute(file) && file !== entryFile
-  );
+function getParseDeps(ret) {
+  return Object.values(ret.resolveMap).filter((file) => import_path.default.isAbsolute(file));
 }
 function getCachedBlockAsset(cacheKey) {
   const cached = blockAssetCache.get(cacheKey);
@@ -86,7 +91,7 @@ function getCachedBlockAsset(cacheKey) {
     return cloneParsedBlockAsset(cached.result);
   }
 }
-function setCachedBlockAsset(cacheKey, ret, deps) {
+function setCachedBlockAsset(cacheKey, ret, deps, depsKey) {
   if (blockAssetCache.size >= MAX_BLOCK_ASSET_CACHE_SIZE) {
     const firstKey = blockAssetCache.keys().next().value;
     if (firstKey)
@@ -94,7 +99,7 @@ function setCachedBlockAsset(cacheKey, ret, deps) {
   }
   blockAssetCache.set(cacheKey, {
     deps,
-    depsKey: getDepsKey(deps),
+    depsKey,
     result: cloneParsedBlockAsset(ret)
   });
 }
@@ -116,6 +121,7 @@ async function parseBlockAsset(opts) {
     resolveMap: {},
     frontmatter: null
   };
+  const loadedFileSnapshot = /* @__PURE__ */ new Map();
   const deferrer = (0, import_esbuild.build)({
     // do not emit file
     write: false,
@@ -165,6 +171,8 @@ async function parseBlockAsset(opts) {
             let ext = import_path.default.extname(args.path);
             const techStack = opts.techStack;
             const isEntryPoint = args.pluginData.kind === "entry-point";
+            let sourceContent;
+            const getSourceContent = () => sourceContent ?? (sourceContent = isEntryPoint && opts.entryPointCode !== void 0 ? opts.entryPointCode : import_fs.default.readFileSync(args.path, "utf-8"));
             const filename = `${isEntryPoint ? "index" : (0, import_plugin_utils.winPath)(
               import_path.default.format({
                 ...import_path.default.parse(args.pluginData.source),
@@ -172,15 +180,12 @@ async function parseBlockAsset(opts) {
                 ext: ""
               })
             )}${ext}`;
-            let entryPointCode = opts.entryPointCode;
+            let entryPointCode = isEntryPoint ? opts.entryPointCode : void 0;
             let contents = void 0;
             if (techStack.onBlockLoad) {
               const result2 = techStack.onBlockLoad({
                 filename,
-                entryPointCode: entryPointCode ?? (entryPointCode = import_fs.default.readFileSync(
-                  args.path,
-                  "utf-8"
-                )),
+                entryPointCode: entryPointCode ?? (entryPointCode = getSourceContent()),
                 ...args
               });
               if (result2) {
@@ -191,9 +196,11 @@ async function parseBlockAsset(opts) {
             let isModule = import_constants.DEFAULT_DEMO_MODULE_EXTENSIONS.includes(ext);
             let isPlainText = import_constants.DEFAULT_DEMO_PLAIN_TEXT_EXTENSIONS.includes(ext);
             if (isModule || isPlainText) {
+              const assetValue = getSourceContent();
+              loadedFileSnapshot.set(args.path, (0, import_utils.getContentHash)(assetValue));
               asset.dependencies[filename] = {
                 type: "FILE",
-                value: opts.entryPointCode ?? import_fs.default.readFileSync(args.path, "utf-8")
+                value: assetValue
               };
               const file = asset.dependencies[filename];
               if (isEntryPoint) {
@@ -213,7 +220,7 @@ async function parseBlockAsset(opts) {
                   result.frontmatter = frontmatter;
                 }
               }
-              if (opts.techStack.runtimeOpts && (!isEntryPoint || !opts.entryPointCode)) {
+              if (opts.techStack.runtimeOpts && (!isEntryPoint || opts.entryPointCode === void 0)) {
                 result.resolveMap[filename] = args.path;
               }
               return {
@@ -234,10 +241,12 @@ async function parseBlockAsset(opts) {
     hasError = true;
   }
   if (!hasError && cacheKey) {
+    const deps = getParseDeps(result);
     setCachedBlockAsset(
       cacheKey,
       result,
-      getParseDeps(result, opts.fileAbsPath)
+      deps,
+      getDepsKeyFromSnapshot(deps, loadedFileSnapshot)
     );
   }
   return result;

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

@@ -1,14 +1,61 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useDemo, useLiveDemo, useLocation, useParams } from 'dumi';
-import { createElement, useEffect } from 'react';
+import { createElement, useEffect, useState } from 'react';
+import { getDemoHMRRevision, subscribeDemoHMR } from "../../theme-api/DumiDemo/hmr";
 import { useRenderer } from "../../theme-api/useRenderer";
 import "./index.less";
+function useDemoHMRRevision(moduleId, id) {
+  var hmr = process.env.NODE_ENV === 'production' ? undefined : moduleId;
+  var revision = hmr ? getDemoHMRRevision(hmr, id) : 0;
+  var _useState = useState(function () {
+      return {
+        id: id,
+        moduleId: hmr,
+        revision: revision
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    setHMRState = _useState2[1];
+  useEffect(function () {
+    if (!hmr) return;
+    var observedRevision = revision;
+    var syncRevision = function syncRevision() {
+      var nextRevision = getDemoHMRRevision(hmr, id);
+      if (nextRevision === observedRevision) return;
+      observedRevision = nextRevision;
+      setHMRState(function (current) {
+        if (current.id === id && current.moduleId === hmr && current.revision === nextRevision) return current;
+        return {
+          id: id,
+          moduleId: hmr,
+          revision: nextRevision
+        };
+      });
+    };
+    var unsubscribe = subscribeDemoHMR(hmr, id, syncRevision);
+
+    // Re-read after subscribing so a change between render and effect is not lost.
+    syncRevision();
+    return unsubscribe;
+  }, [hmr, id, revision]);
+  return revision;
+}
 var DemoRenderPage = function DemoRenderPage() {
   var params = useParams();
   var _useLocation = useLocation(),
     search = _useLocation.search;
   var id = params.id;
-  var routeId = new URLSearchParams(search).get('routeId') || undefined;
-  var demo = useDemo(id, undefined, undefined, routeId);
+  var routeParams = new URLSearchParams(search);
+  var routeId = routeParams.get('routeId') || undefined;
+  var hmrModuleId = routeParams.get('dumi-hmr') || undefined;
+  var hmrRevision = useDemoHMRRevision(hmrModuleId, id);
+  var cacheVersion = hmrRevision ? "dumi-hmr:".concat(hmrRevision, ":route=").concat(routeId !== null && routeId !== void 0 ? routeId : '') : undefined;
+  var demo = useDemo(id, undefined, cacheVersion, routeId);
   var _useRenderer = useRenderer({
       id: id,
       component: demo.component,

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

@@ -0,0 +1,5 @@
+export type DemoHMRListener = () => void;
+export declare function registerDemoHMRModule(moduleId: string, semanticVersions: Record<string, string>): void;
+export declare function getDemoHMRRevision(moduleId: string, demoId: string): number;
+export declare function subscribeDemoHMR(moduleId: string, demoId: string, listener: DemoHMRListener): () => void;
+export declare function resetDemoHMRStoreForTest(): void;

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

@@ -0,0 +1,67 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var DEMO_HMR_STORE_KEY = Symbol.for('dumi.demo-hmr-store');
+function getDemoHMRKey(moduleId, demoId) {
+  return JSON.stringify([moduleId, demoId]);
+}
+function getDemoHMRStore() {
+  var _globalStore$DEMO_HMR;
+  var globalStore = globalThis;
+  return (_globalStore$DEMO_HMR = globalStore[DEMO_HMR_STORE_KEY]) !== null && _globalStore$DEMO_HMR !== void 0 ? _globalStore$DEMO_HMR : globalStore[DEMO_HMR_STORE_KEY] = {
+    moduleVersions: new Map(),
+    revisions: new Map(),
+    listeners: new Map()
+  };
+}
+export function registerDemoHMRModule(moduleId, semanticVersions) {
+  var store = getDemoHMRStore();
+  var previousVersions = store.moduleVersions.get(moduleId);
+  if (!previousVersions) {
+    store.moduleVersions.set(moduleId, new Map(Object.entries(semanticVersions)));
+    return;
+  }
+  for (var _i = 0, _Object$entries = Object.entries(semanticVersions); _i < _Object$entries.length; _i++) {
+    var _store$revisions$get, _store$listeners$get;
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      demoId = _Object$entries$_i[0],
+      nextVersion = _Object$entries$_i[1];
+    if (!previousVersions.has(demoId)) {
+      previousVersions.set(demoId, nextVersion);
+      continue;
+    }
+    if (previousVersions.get(demoId) === nextVersion) continue;
+    previousVersions.set(demoId, nextVersion);
+    var key = getDemoHMRKey(moduleId, demoId);
+    store.revisions.set(key, ((_store$revisions$get = store.revisions.get(key)) !== null && _store$revisions$get !== void 0 ? _store$revisions$get : 0) + 1);
+    (_store$listeners$get = store.listeners.get(key)) === null || _store$listeners$get === void 0 || _store$listeners$get.forEach(function (listener) {
+      return listener();
+    });
+  }
+}
+export function getDemoHMRRevision(moduleId, demoId) {
+  var _getDemoHMRStore$revi;
+  return (_getDemoHMRStore$revi = getDemoHMRStore().revisions.get(getDemoHMRKey(moduleId, demoId))) !== null && _getDemoHMRStore$revi !== void 0 ? _getDemoHMRStore$revi : 0;
+}
+export function subscribeDemoHMR(moduleId, demoId, listener) {
+  var store = getDemoHMRStore();
+  var key = getDemoHMRKey(moduleId, demoId);
+  var listeners = store.listeners.get(key);
+  if (!listeners) {
+    listeners = new Set();
+    store.listeners.set(key, listeners);
+  }
+  var currentListeners = listeners;
+  currentListeners.add(listener);
+  return function () {
+    currentListeners.delete(listener);
+    if (currentListeners.size === 0) store.listeners.delete(key);
+  };
+}
+export function resetDemoHMRStoreForTest() {
+  var globalStore = globalThis;
+  delete globalStore[DEMO_HMR_STORE_KEY];
+}

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

@@ -5,6 +5,7 @@ type DemoGetter = () => Promise<{
 }>;
 export interface IDumiDemoProps {
     demo: {
+        __dumiUtoopackHMR?: string;
         id: string;
         inline?: boolean;
         loader?: DemoGetter;
@@ -12,5 +13,6 @@ export interface IDumiDemoProps {
     };
     previewerProps: Omit<IPreviewerProps, 'asset' | 'children'>;
 }
+export declare function areDumiDemoPropsEqual(prev: IDumiDemoProps, next: IDumiDemoProps): boolean;
 export declare const DumiDemo: FC<IDumiDemoProps>;
 export {};

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

@@ -1,23 +1,75 @@
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { SP_ROUTE_PREFIX } from "../../../constants";
 import { useAppData, useDemo, useSiteData } from 'dumi';
-import React, { createElement } from 'react';
+import React, { createElement, useEffect, useState } from 'react';
 import Previewer from 'dumi/theme/builtins/Previewer';
 import { useRenderer } from "../useRenderer";
 import DemoErrorBoundary from "./DemoErrorBoundary";
+import { getDemoHMRRevision, subscribeDemoHMR } from "./hmr";
+function useDemoCacheVersion(id, metadataVersion, hmrModuleId) {
+  var hmr = process.env.NODE_ENV === 'production' ? undefined : hmrModuleId;
+  var _useState = useState(function () {
+      return {
+        id: id,
+        moduleId: hmr,
+        revision: hmr ? getDemoHMRRevision(hmr, id) : 0
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    hmrState = _useState2[0],
+    setHMRState = _useState2[1];
+  useEffect(function () {
+    if (!hmr) return;
+    var syncRevision = function syncRevision() {
+      var revision = getDemoHMRRevision(hmr, id);
+      setHMRState(function (current) {
+        if (current.id === id && current.moduleId === hmr && current.revision === revision) return current;
+        return {
+          id: id,
+          moduleId: hmr,
+          revision: revision
+        };
+      });
+    };
+    var unsubscribe = subscribeDemoHMR(hmr, id, syncRevision);
+
+    // Re-read after subscribing so a change between render and effect is not lost.
+    syncRevision();
+    return unsubscribe;
+  }, [hmr, id]);
+  if (!hmr) return metadataVersion;
+  var storedRevision = getDemoHMRRevision(hmr, id);
+  var revision = hmrState.id === id && hmrState.moduleId === hmr ? Math.max(hmrState.revision, storedRevision) : storedRevision;
+  return "".concat(metadataVersion, ":").concat(revision);
+}
 var InternalDumiDemo = function InternalDumiDemo(props) {
   var _useSiteData = useSiteData(),
     historyType = _useSiteData.historyType;
   var _useAppData = useAppData(),
     basename = _useAppData.basename;
   var _props$demo = props.demo,
+    hmrModuleId = _props$demo.__dumiUtoopackHMR,
     id = _props$demo.id,
     loader = _props$demo.loader,
     version = _props$demo.version;
-  var demo = useDemo(id, loader, version);
+  var cacheVersion = useDemoCacheVersion(id, version, hmrModuleId);
+  var demo = useDemo(id, loader, cacheVersion);
   var component = demo.component,
     asset = demo.asset,
     renderOpts = demo.renderOpts;
+  var previewerProps = hmrModuleId ? _objectSpread(_objectSpread({}, demo.previewerProps), props.previewerProps) : props.previewerProps;
   var _useRenderer = useRenderer({
       id: id,
       renderOpts: demo.renderOpts,
@@ -26,7 +78,7 @@ var InternalDumiDemo = function InternalDumiDemo(props) {
     canvasRef = _useRenderer.canvasRef;
 
   // hide debug demo in production
-  if (process.env.NODE_ENV === 'production' && props.previewerProps.debug) return null;
+  if (process.env.NODE_ENV === 'production' && previewerProps.debug) return null;
   var demoNode = /*#__PURE__*/React.createElement(DemoErrorBoundary, null, renderOpts !== null && renderOpts !== void 0 && renderOpts.renderer ? /*#__PURE__*/React.createElement("div", {
     ref: canvasRef
   }) : ( /*#__PURE__*/createElement(component)));
@@ -34,19 +86,25 @@ var InternalDumiDemo = function InternalDumiDemo(props) {
     return demoNode;
   }
   var isHashRoute = historyType === 'hash';
-  var routeQuery = demo.routeId ? "?routeId=".concat(encodeURIComponent(demo.routeId)) : '';
+  var routeParams = new URLSearchParams();
+  if (hmrModuleId) routeParams.set('dumi-hmr', hmrModuleId);
+  // Keep routeId last for compatibility with custom previewers that append
+  // their own query string to demoUrl instead of merging URLSearchParams.
+  if (demo.routeId) routeParams.set('routeId', demo.routeId);
+  var routeQueryString = routeParams.toString();
+  var routeQuery = routeQueryString ? "?".concat(routeQueryString) : '';
   return /*#__PURE__*/React.createElement(Previewer, _extends({
     asset: asset,
     demoUrl:
     // allow user override demoUrl by frontmatter
-    props.previewerProps.demoUrl || // when use hash route, browser can automatically handle relative paths starting with #
+    previewerProps.demoUrl || // when use hash route, browser can automatically handle relative paths starting with #
     "".concat(isHashRoute ? "#" : '').concat(basename).concat(SP_ROUTE_PREFIX, "demos/").concat(props.demo.id).concat(routeQuery)
-  }, props.previewerProps), props.previewerProps.iframe ? null : demoNode);
+  }, previewerProps), 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 function areDumiDemoPropsEqual(prev, next) {
+  return JSON.stringify(prev) === JSON.stringify(next);
+}
+export var DumiDemo = /*#__PURE__*/React.memo(InternalDumiDemo, areDumiDemoPropsEqual);
 if (process.env.NODE_ENV !== 'production') {
   InternalDumiDemo.displayName = 'DumiDemo';
 }

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

@@ -238,6 +238,7 @@ export type IDemoData = {
     component: ReactComponentType | AgnosticComponentType;
     asset: IPreviewerProps['asset'];
     routeId: string;
+    previewerProps?: Omit<IPreviewerProps, 'asset' | 'children'>;
     context?: Record<string, unknown>;
     renderOpts?: {
         /**

package/dist/features/compile/index.js

@@ -44,6 +44,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;
@@ -77,6 +80,24 @@ function normalizeMakoAliases(alias, cwd) {
 }
 var compile_default = (api) => {
   api.describe({ key: "dumi:compile" });
+  api.register({
+    key: "onExit",
+    stage: Infinity,
+    fn() {
+      const cacheDirectory = (0, import_utils.resolveDumiCacheDir)(
+        api.cwd,
+        api.userConfig.cacheDirectoryPath || api.config.cacheDirectoryPath
+      );
+      const sessionCache = (0, import_utils.getCache)(
+        (0, import_utoopackLoaders.getUtoopackMdCacheNamespace)(import_utoopackLoaders.MARKDOWN_LOADER_CACHE_EPOCH),
+        cacheDirectory
+      );
+      const sessionCachePath = sessionCache.basePath;
+      if (sessionCachePath) {
+        import_fs.default.rmSync(sessionCachePath, { force: true, recursive: true });
+      }
+    }
+  });
   api.register({
     key: "registerTechStack",
     stage: Infinity,
@@ -92,8 +113,7 @@ var compile_default = (api) => {
       }
       memo.babelLoaderCustomize = require.resolve("./babelLoaderCustomize");
       const cacheDirPath = api.userConfig.cacheDirectoryPath || memo.cacheDirectoryPath;
-      if (cacheDirPath)
-        (0, import_utils._setFSCacheDir)(import_path.default.join(cacheDirPath, "dumi"));
+      (0, import_utils._setFSCacheDir)((0, import_utils.resolveDumiCacheDir)(api.cwd, cacheDirPath));
       const SEARCH_WORKER_CODE = import_fs.default.readFileSync(
         import_path.default.resolve(
           __dirname,
@@ -113,8 +133,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
         })

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

@@ -2,6 +2,9 @@ import type { IApi, IDumiTechStack } from '../../types';
 export declare const UTOOPACK_LOADER_CTX_KEY = "__dumiLoaderContextPath";
 export declare const LOADER_CTX_FILENAME = "dumi-loader-ctx.cjs";
 export declare const UTOOPACK_DEMO_ASSETS_FILENAME = "dumi-utoopack-demo-assets.jsonl";
+export declare const MARKDOWN_LOADER_CACHE_EPOCH: string;
+export declare const UTOOPACK_MD_CACHE_NAMESPACE = "md-loader-sessions";
+export declare function getUtoopackMdCacheNamespace(epoch: string): string;
 export declare function buildLoaderContextContent(techStacks: IDumiTechStack[], builtins?: Record<string, {
     specifier: string;
     source: string;

package/dist/features/compile/utoopackLoaders.js

@@ -30,22 +30,31 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var utoopackLoaders_exports = {};
 __export(utoopackLoaders_exports, {
   LOADER_CTX_FILENAME: () => LOADER_CTX_FILENAME,
+  MARKDOWN_LOADER_CACHE_EPOCH: () => MARKDOWN_LOADER_CACHE_EPOCH,
   UTOOPACK_DEMO_ASSETS_FILENAME: () => UTOOPACK_DEMO_ASSETS_FILENAME,
   UTOOPACK_LOADER_CTX_KEY: () => UTOOPACK_LOADER_CTX_KEY,
+  UTOOPACK_MD_CACHE_NAMESPACE: () => UTOOPACK_MD_CACHE_NAMESPACE,
   buildLoaderContextContent: () => buildLoaderContextContent,
+  getUtoopackMdCacheNamespace: () => getUtoopackMdCacheNamespace,
   getUtoopackRules: () => getUtoopackRules
 });
 module.exports = __toCommonJS(utoopackLoaders_exports);
+var import_utils = require("../../utils");
 var import_esbuild = __toESM(require("@umijs/bundler-utils/compiled/esbuild"));
-var import_utils = require("@umijs/utils");
+var import_utils2 = require("@umijs/utils");
 var import_path = __toESM(require("path"));
-var import_utils2 = require("./utils");
+var import_utils3 = require("./utils");
 var mdLoaderPath = require.resolve("../../loaders/markdown");
 var utilsRegisterPath = require.resolve("@umijs/utils");
 var esbuildImplementorPath = require.resolve("@umijs/bundler-utils/compiled/esbuild");
 var UTOOPACK_LOADER_CTX_KEY = "__dumiLoaderContextPath";
 var LOADER_CTX_FILENAME = "dumi-loader-ctx.cjs";
 var UTOOPACK_DEMO_ASSETS_FILENAME = "dumi-utoopack-demo-assets.jsonl";
+var MARKDOWN_LOADER_CACHE_EPOCH = `${process.pid}-${Date.now()}`;
+var UTOOPACK_MD_CACHE_NAMESPACE = "md-loader-sessions";
+function getUtoopackMdCacheNamespace(epoch) {
+  return import_path.default.join(UTOOPACK_MD_CACHE_NAMESPACE, epoch);
+}
 function toSerializable(value) {
   return JSON.parse(JSON.stringify(value));
 }
@@ -89,8 +98,8 @@ function findInModuleExports(target, mod) {
   return null;
 }
 function findInSourceFiles(target, sourceFiles) {
-  import_utils.register.register({ implementor: import_esbuild.default });
-  import_utils.register.clearFiles();
+  import_utils2.register.register({ implementor: import_esbuild.default });
+  import_utils2.register.clearFiles();
   try {
     for (const file of sourceFiles) {
       try {
@@ -106,13 +115,13 @@ function findInSourceFiles(target, sourceFiles) {
     }
     return null;
   } finally {
-    for (const file of import_utils.register.getFiles()) {
+    for (const file of import_utils2.register.getFiles()) {
       delete require.cache[file];
     }
     for (const file of sourceFiles) {
       delete require.cache[file];
     }
-    import_utils.register.restore();
+    import_utils2.register.restore();
   }
 }
 function toRequireRef(found) {
@@ -198,13 +207,18 @@ exports.extraRehypePlugins = ${toPluginRefs(
 `;
 }
 var getUtoopackRules = (api, config = api.config) => {
-  const disableLiveDemo = (0, import_utils2.shouldDisabledLiveDemo)(api);
+  const disableLiveDemo = (0, import_utils3.shouldDisabledLiveDemo)(api);
   const loaderContextPath = import_path.default.join(
     api.paths.absTmpPath,
     LOADER_CTX_FILENAME
   );
   const cfgResolve = config.resolve ?? {};
   const serializableBaseOpts = toSerializable({
+    cacheDirectory: (0, import_utils.resolveDumiCacheDir)(
+      api.cwd,
+      api.userConfig.cacheDirectoryPath || config.cacheDirectoryPath
+    ),
+    cacheEpoch: MARKDOWN_LOADER_CACHE_EPOCH,
     cwd: api.cwd,
     alias: config.alias || {},
     resolve: {
@@ -219,6 +233,7 @@ var getUtoopackRules = (api, config = api.config) => {
     locales: config.locales || [],
     pkg: api.pkg,
     disableLiveDemo,
+    useUtoopackDemoHMR: api.env === "development",
     [UTOOPACK_LOADER_CTX_KEY]: loaderContextPath
   });
   const externalDemoLoader = {
@@ -366,8 +381,11 @@ var getUtoopackRules = (api, config = api.config) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   LOADER_CTX_FILENAME,
+  MARKDOWN_LOADER_CACHE_EPOCH,
   UTOOPACK_DEMO_ASSETS_FILENAME,
   UTOOPACK_LOADER_CTX_KEY,
+  UTOOPACK_MD_CACHE_NAMESPACE,
   buildLoaderContextContent,
+  getUtoopackMdCacheNamespace,
   getUtoopackRules
 });

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

@@ -2,6 +2,8 @@ import type { IThemeLoadResult } from '../../features/theme/loader';
 import { type IMdTransformerOptions, type IMdTransformerResult } from './transformer';
 interface IMdLoaderDefaultModeOptions extends Omit<IMdTransformerOptions, 'fileAbsPath'> {
     mode?: 'markdown';
+    cacheDirectory?: string;
+    cacheEpoch?: string;
     builtins: IThemeLoadResult['builtins'];
     onResolveDemos?: (demos: NonNullable<IMdTransformerResult['meta']['demos']>) => void;
     onResolveAtomMeta?: (atomId: string, meta: IMdTransformerResult['meta']['frontmatter']) => void;
@@ -27,7 +29,39 @@ export type IMdLoaderOptions = IMdLoaderDefaultModeOptions | IMdLoaderDemosModeO
 type MdLoaderCache = {
     getSync: (key: string, defaultValue: any) => any;
 };
+type MdTransformCacheRecord = {
+    version: 2;
+    deps: string[];
+    depsKey: string;
+    result: IMdTransformerResult;
+};
+type ReadDependency = (file: string) => Promise<string>;
+export declare function getMdTransformCacheKeys({ resourcePath, content, useUtoopackDemoHMR, opts, }: {
+    resourcePath: string;
+    content: string;
+    useUtoopackDemoHMR: boolean;
+    opts: IMdLoaderOptions;
+}): {
+    depsHintKey: string;
+    baseCacheKey: string;
+};
 export declare function getMdLoaderCacheSync<T>(cache: MdLoaderCache, key: string, defaultValue: T): T;
 export declare function getDemoSourceFiles(demos?: IMdTransformerResult['meta']['demos']): string[];
+export declare function addDemoFileDependency(loaderContext: {
+    addDependency: (file: string) => void;
+    addMissingDependency?: (file: string) => void;
+}, opts: IMdLoaderOptions, file: string): void;
+export declare function emitDemo(this: any, opts: IMdLoaderDemoModeOptions, ret: IMdTransformerResult): string;
+export declare function getDepsCacheKey(deps?: string[], readDependency?: ReadDependency): Promise<string>;
+export declare function getMdLoaderCacheResult(cache: MdLoaderCache, key: string, readDependency?: ReadDependency): Promise<IMdTransformerResult | undefined>;
+export declare function createStableTransform({ initialDeps, createValue, getDeps, readDependency, onDepsDiscovered, maxAttempts, }: {
+    initialDeps?: string[];
+    createValue: () => Promise<IMdTransformerResult>;
+    getDeps: (result: IMdTransformerResult) => string[];
+    readDependency?: ReadDependency;
+    onDepsDiscovered?: (deps: string[]) => void;
+    maxAttempts?: number;
+}): Promise<MdTransformCacheRecord>;
+export declare function createDependencyReader(loaderContext: any, useUtoopack: boolean, mode?: IMdLoaderOptions['mode']): ReadDependency;
 export default function mdLoader(this: any, content: string): void;
 export {};