dumi 2.4.37 → 2.4.38-beta.0

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

@@ -1,11 +1,52 @@
 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 _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, useRef, useState } from 'react';
 import Previewer from 'dumi/theme/builtins/Previewer';
 import { useRenderer } from "../useRenderer";
 import DemoErrorBoundary from "./DemoErrorBoundary";
-var InternalDumiDemo = function InternalDumiDemo(props) {
+var LazyDemoPlaceholder = function LazyDemoPlaceholder(_ref) {
+  var id = _ref.id,
+    onVisible = _ref.onVisible;
+  var ref = useRef(null);
+  useEffect(function () {
+    if (typeof IntersectionObserver === 'undefined') {
+      onVisible();
+      return;
+    }
+    var observer = new IntersectionObserver(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 1),
+        entry = _ref3[0];
+      if (entry.isIntersecting) {
+        observer.disconnect();
+        onVisible();
+      }
+    }, {
+      rootMargin: '1000px 0px'
+    });
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return function () {
+      return observer.disconnect();
+    };
+  }, [onVisible]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    ref: ref,
+    "data-dumi-demo-lazy": true,
+    style: {
+      minHeight: 160
+    }
+  });
+};
+var LoadedDumiDemo = function LoadedDumiDemo(props) {
   var _useSiteData = useSiteData(),
     historyType = _useSiteData.historyType;
   var _useAppData = useAppData(),
@@ -43,9 +84,25 @@ 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);
 };
+var InternalDumiDemo = function InternalDumiDemo(props) {
+  var shouldLazyLoad = process.env.NODE_ENV !== 'production' && Boolean(props.demo.loader) && !props.demo.inline;
+  var _useState = useState(!shouldLazyLoad),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  if (!visible) {
+    return /*#__PURE__*/React.createElement(LazyDemoPlaceholder, {
+      id: props.demo.id,
+      onVisible: function onVisible() {
+        return setVisible(true);
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement(LoadedDumiDemo, props);
+};
 export var DumiDemo = /*#__PURE__*/React.memo(InternalDumiDemo, function (prev, next) {
   // compare length for performance
-  return JSON.stringify(prev).length === JSON.stringify(next).length;
+  return prev.demo.id === next.demo.id && prev.demo.inline === next.demo.inline && prev.demo.version === next.demo.version && JSON.stringify(prev.previewerProps).length === JSON.stringify(next.previewerProps).length;
 });
 if (process.env.NODE_ENV !== 'production') {
   InternalDumiDemo.displayName = 'DumiDemo';

package/dist/features/compile/utoopackLoaders.js

@@ -40,6 +40,8 @@ var import_utils = require("@umijs/utils");
 var import_path = __toESM(require("path"));
 var import_utils2 = 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";
 function toSerializable(value) {
@@ -115,6 +117,129 @@ function toRequireRef(found) {
   const modRef = `require(${JSON.stringify(found.modulePath)})`;
   return found.exportName === "module.exports" ? modRef : `(${modRef})[${JSON.stringify(found.exportName)}]`;
 }
+function createTechStackMockApi(onRegister) {
+  const api = {
+    cwd: process.cwd(),
+    config: {},
+    userConfig: {},
+    pkg: {},
+    paths: {},
+    service: {},
+    registerTechStack: onRegister,
+    register(opts) {
+      if ((opts == null ? void 0 : opts.key) === "registerTechStack" && typeof opts.fn === "function") {
+        onRegister(opts.fn);
+      }
+    }
+  };
+  return new Proxy(api, {
+    get(target, key) {
+      if (key in target) {
+        return target[key];
+      }
+      return () => {
+      };
+    }
+  });
+}
+function isSameTechStack(a, b) {
+  return a === b || a.name === b.name && a.constructor.name === b.constructor.name;
+}
+function collectTechStacksFromPlugin(plugin) {
+  if (typeof plugin !== "function")
+    return [];
+  const ret = [];
+  const api = createTechStackMockApi((fn) => {
+    try {
+      const techStack = fn();
+      if (techStack)
+        ret.push(techStack);
+    } catch {
+    }
+  });
+  try {
+    plugin(api);
+  } catch {
+  }
+  return ret;
+}
+function findTechStackPluginInModule(target, mod) {
+  const exp = mod.exports;
+  if (!exp)
+    return null;
+  const candidates = [
+    ["module.exports", exp],
+    ["default", exp == null ? void 0 : exp.default],
+    ...Object.entries(exp)
+  ];
+  for (const [exportName, plugin] of candidates) {
+    const techStacks = collectTechStacksFromPlugin(plugin);
+    if (techStacks.some((techStack) => isSameTechStack(techStack, target))) {
+      return { modulePath: mod.filename, exportName };
+    }
+  }
+  return null;
+}
+function findTechStackPluginInSourceFiles(target, sourceFiles) {
+  import_utils.register.register({ implementor: import_esbuild.default });
+  import_utils.register.clearFiles();
+  try {
+    for (const file of sourceFiles) {
+      try {
+        require(file);
+        const mod = require.cache[file];
+        if (!(mod == null ? void 0 : mod.exports))
+          continue;
+        const found = findTechStackPluginInModule(target, mod);
+        if (found)
+          return found;
+      } catch {
+      }
+    }
+    return null;
+  } finally {
+    for (const file of import_utils.register.getFiles()) {
+      delete require.cache[file];
+    }
+    for (const file of sourceFiles) {
+      delete require.cache[file];
+    }
+    import_utils.register.restore();
+  }
+}
+function toTechStackRefs(techStacks, sourceFiles = []) {
+  const refs = [];
+  for (const ts of techStacks) {
+    const ctor = ts.constructor;
+    let ref;
+    if (ctor !== Object) {
+      const found = findInRequireCache(ctor);
+      if (found) {
+        ref = `new (${toRequireRef(found)})()`;
+      }
+    } else {
+      const found = findInRequireCache(ts);
+      if (found) {
+        ref = toRequireRef(found);
+      }
+    }
+    if (!ref) {
+      const found = findTechStackPluginInSourceFiles(ts, sourceFiles);
+      if (found) {
+        ref = `...loadTechStacksFromPlugin(${toRequireRef(found)})`;
+      }
+    }
+    if (ref) {
+      refs.push(ref);
+    } else {
+      const name = ts.constructor.name ? ` (${ts.constructor.name})` : "";
+      console.warn(
+        `[dumi] Utoopack markdown loader cannot serialize tech stack "${ts.name}"${name}. Please export the tech stack class or register it from an exported dumi plugin.`
+      );
+    }
+  }
+  return refs;
+}
 function toPluginTargetRef(target, sourceFiles) {
   if (typeof target === "string")
     return JSON.stringify(target);
@@ -141,25 +266,53 @@ function toPluginRefs(plugins = [], sourceFiles = []) {
   }).join(", ")}]`;
 }
 function buildLoaderContextContent(techStacks, builtins = {}, routes = {}, extraRemarkPlugins = [], extraRehypePlugins = [], sourceFiles = []) {
-  const refs = [];
-  for (const ts of techStacks) {
-    const ctor = ts.constructor;
-    if (ctor !== Object) {
-      const found = findInRequireCache(ctor);
-      if (found) {
-        refs.push(`new (${toRequireRef(found)})()`);
-      }
-    } else {
-      const found = findInRequireCache(ts);
-      if (found) {
-        refs.push(toRequireRef(found));
-      }
-    }
-  }
+  const refs = toTechStackRefs(techStacks, sourceFiles);
   return `'use strict';
 try {
-  require('@umijs/utils').register.register({ implementor: require('@umijs/bundler-utils/compiled/esbuild') });
-} catch (_) {}
+  require(${JSON.stringify(
+    utilsRegisterPath
+  )}).register.register({ implementor: require(${JSON.stringify(
+    esbuildImplementorPath
+  )}) });
+} catch (e) {
+  console.warn('[dumi] failed to register TS require hook for utoopack loader context:', e);
+}
+function loadTechStacksFromPlugin(plugin) {
+  if (typeof plugin !== 'function') return [];
+  const techStacks = [];
+  const registerTechStack = (fn) => {
+    try {
+      const techStack = fn();
+      if (techStack) techStacks.push(techStack);
+    } catch (e) {
+      console.warn('[dumi] failed to register tech stack from utoopack loader context:', e);
+    }
+  };
+  const api = new Proxy({
+    cwd: process.cwd(),
+    config: {},
+    userConfig: {},
+    pkg: {},
+    paths: {},
+    service: {},
+    registerTechStack,
+    register(opts) {
+      if (opts && opts.key === 'registerTechStack' && typeof opts.fn === 'function') {
+        registerTechStack(opts.fn);
+      }
+    },
+  }, {
+    get(target, key) {
+      return key in target ? target[key] : () => {};
+    },
+  });
+  try {
+    plugin(api);
+  } catch (e) {
+    console.warn('[dumi] failed to load tech stack plugin in utoopack loader context:', e);
+  }
+  return techStacks;
+}
 exports.techStacks = [${refs.join(", ")}];
 exports.builtins = ${JSON.stringify(builtins)};
 exports.routes = ${JSON.stringify(routes)};
@@ -311,7 +464,7 @@ var getUtoopackRules = (api, config = api.config) => {
       },
       // compile inline demo code blocks
       {
-        condition: { query: /^\?type=demo$/ },
+        condition: { query: /^\?type=demo(?:&.*)?$/ },
         loaders: [
           {
             loader: mdLoaderPath,

package/dist/loaders/markdown/index.js

@@ -50,6 +50,13 @@ function getDemoSourceFiles(demos = []) {
     return ret;
   }, []);
 }
+function getDemoIdFromQuery(resourceQuery = "") {
+  return new URLSearchParams(resourceQuery.replace(/^\?/, "")).get("demoId");
+}
+function filterDemosByQuery(demos, resourceQuery) {
+  const demoId = getDemoIdFromQuery(resourceQuery);
+  return demoId ? demos == null ? void 0 : demos.filter((demo) => demo.id === demoId) : demos;
+}
 function isRelativePath(path2) {
   return /^\.{1,2}(?!\w)/.test(path2);
 }
@@ -105,7 +112,7 @@ function DumiMarkdownContent() {
 export default DumiMarkdownContent;`;
 }
 function emitDemo(opts, ret) {
-  const { demos } = ret.meta;
+  const demos = filterDemosByQuery(ret.meta.demos, this.resourceQuery);
   const shareDepsMap = {};
   const demoDepsMap = {};
   const relativeDepsMap = {};
@@ -306,9 +313,12 @@ function emitText(opts, ret) {
 }
 function emit(opts, ret) {
   const { demos, embeds } = ret.meta;
+  const dependencyDemos = opts.mode === "demo" ? filterDemosByQuery(demos, this.resourceQuery) : demos;
   embeds.forEach((file) => this.addDependency(file));
   if (opts.mode !== "demo-index") {
-    getDemoSourceFiles(demos).forEach((file) => this.addDependency(file));
+    getDemoSourceFiles(dependencyDemos).forEach(
+      (file) => this.addDependency(file)
+    );
   }
   if (this.resourceQuery.includes("watch=parent"))
     return null;

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

@@ -48,7 +48,13 @@ var isElement;
 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_LOADER_PLACEHOLDER_RE = new RegExp(
+  `"${DEMO_LOADER_PLACEHOLDER}:([^"]+)"`,
+  "g"
+);
+var getDemoLoaderPlaceholder = (id) => `${DEMO_LOADER_PLACEHOLDER}:${encodeURIComponent(
+  id
+)}`;
 var DUMI_DEMO_TAG = "DumiDemo";
 var DUMI_DEMO_GRID_TAG = "DumiDemoGrid";
 var SKIP_DEMO_PARSE = "pure";
@@ -252,106 +258,97 @@ function rehypeDemo(opts) {
             }
             const propDemo = { id: parseOpts.id };
             if (opts.useUtoopackDemoHMR) {
-              propDemo.loader = DEMO_LOADER_PLACEHOLDER_VALUE;
+              propDemo.loader = getDemoLoaderPlaceholder(parseOpts.id);
             }
             demoIds.push(parseOpts.id);
             deferrers.push(
               (0, import_block.default)({
                 ...parseOpts,
                 cacheable: opts.useUtoopackDemoHMR
-              }).then(
-                async ({ asset, resolveMap, frontmatter }) => {
-                  var _a2, _b2, _c2;
-                  if (demoIds.indexOf(parseOpts.id) !== demoIds.lastIndexOf(parseOpts.id)) {
-                    const startLine = (_a2 = node.position) == null ? void 0 : _a2.start.line;
-                    const suffix = startLine ? `:${startLine}` : "";
-                    import_plugin_utils.logger.warn(
-                      `Duplicate demo id found due to filename conflicts, please consider adding a unique id to code tag to resolve this.
+              }).then(async ({ asset, resolveMap, frontmatter }) => {
+                var _a2, _b2, _c2;
+                if (demoIds.indexOf(parseOpts.id) !== demoIds.lastIndexOf(parseOpts.id)) {
+                  const startLine = (_a2 = node.position) == null ? void 0 : _a2.start.line;
+                  const suffix = startLine ? `:${startLine}` : "";
+                  import_plugin_utils.logger.warn(
+                    `Duplicate demo id found due to filename conflicts, please consider adding a unique id to code tag to resolve this.
         at ${opts.fileAbsPath}${suffix}`
-                    );
-                  }
-                  const { src, className, ...restAttrs } = codeNode.properties || {};
-                  const validAssetAttrs = [
-                    "title",
-                    "snapshot",
-                    "keywords"
-                  ];
-                  const techStackOpts = {
-                    type: codeType,
-                    mdAbsPath: opts.fileAbsPath,
-                    fileAbsPath: codeType === "external" ? parseOpts.fileAbsPath : void 0,
-                    entryPointCode: parseOpts.entryPointCode
-                  };
-                  Object.keys(restAttrs).forEach((key) => {
-                    if (restAttrs[key] === "")
-                      restAttrs[key] = true;
-                  });
-                  const originalProps = Object.assign(
-                    {},
-                    frontmatter,
-                    restAttrs
                   );
-                  validAssetAttrs.forEach((key) => {
-                    if (originalProps[key])
-                      asset[key] = originalProps[key];
-                  });
-                  if (opts.useUtoopackDemoHMR) {
-                    propDemo.version = (0, import_utils.getContentHash)(
-                      JSON.stringify(asset.dependencies)
-                    );
-                  }
-                  if (/ inline/.test(String((_b2 = codeNode.data) == null ? void 0 : _b2.meta)) || originalProps.inline) {
-                    propDemo.inline = true;
-                    return {
-                      // TODO: special id for inline demo
-                      id: asset.id,
-                      component,
-                      renderOpts: {
-                        rendererPath: runtimeOpts == null ? void 0 : runtimeOpts.rendererPath,
-                        preflightPath: runtimeOpts == null ? void 0 : runtimeOpts.preflightPath
-                      }
-                    };
-                  }
-                  Object.assign(
-                    previewerProps,
-                    await ((_c2 = techStack.generatePreviewerProps) == null ? void 0 : _c2.call(
-                      techStack,
-                      originalProps,
-                      techStackOpts
-                    )) || originalProps
+                }
+                const { src, className, ...restAttrs } = codeNode.properties || {};
+                const validAssetAttrs = [
+                  "title",
+                  "snapshot",
+                  "keywords"
+                ];
+                const techStackOpts = {
+                  type: codeType,
+                  mdAbsPath: opts.fileAbsPath,
+                  fileAbsPath: codeType === "external" ? parseOpts.fileAbsPath : void 0,
+                  entryPointCode: parseOpts.entryPointCode
+                };
+                Object.keys(restAttrs).forEach((key) => {
+                  if (restAttrs[key] === "")
+                    restAttrs[key] = true;
+                });
+                const originalProps = Object.assign({}, frontmatter, restAttrs);
+                validAssetAttrs.forEach((key) => {
+                  if (originalProps[key])
+                    asset[key] = originalProps[key];
+                });
+                if (opts.useUtoopackDemoHMR) {
+                  propDemo.version = (0, import_utils.getContentHash)(
+                    JSON.stringify(asset.dependencies)
                   );
-                  if (previewerProps.description) {
-                    const { unified } = await import("unified");
-                    const { default: remarkParse } = await import("remark-parse");
-                    const { default: remarkGfm } = await import("remark-gfm");
-                    const { default: remarkRehype } = await import("remark-rehype");
-                    const { default: rehypeStringify } = await import("rehype-stringify");
-                    const { convert } = require("html-to-text");
-                    const result = await unified().use(remarkParse).use(remarkGfm).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeStringify, { allowDangerousHtml: true }).process(previewerProps.description);
-                    previewerProps.description = String(result.value);
-                    asset.description = convert(result.value, {
-                      wordwrap: false
-                    });
-                  }
+                }
+                if (/ inline/.test(String((_b2 = codeNode.data) == null ? void 0 : _b2.meta)) || originalProps.inline) {
+                  propDemo.inline = true;
                   return {
+                    // TODO: special id for inline demo
                     id: asset.id,
                     component,
-                    asset: techStack.generateMetadata ? await techStack.generateMetadata(asset, techStackOpts) : asset,
-                    /**
-                     * keep `generateSources` rather than `generateResolveMap` for compatibility
-                     */
-                    resolveMap: techStack.generateSources ? await techStack.generateSources(
-                      resolveMap,
-                      techStackOpts
-                    ) : resolveMap,
                     renderOpts: {
                       rendererPath: runtimeOpts == null ? void 0 : runtimeOpts.rendererPath,
-                      compilePath: runtimeOpts == null ? void 0 : runtimeOpts.compilePath,
                       preflightPath: runtimeOpts == null ? void 0 : runtimeOpts.preflightPath
                     }
                   };
                 }
-              )
+                Object.assign(
+                  previewerProps,
+                  await ((_c2 = techStack.generatePreviewerProps) == null ? void 0 : _c2.call(
+                    techStack,
+                    originalProps,
+                    techStackOpts
+                  )) || originalProps
+                );
+                if (previewerProps.description) {
+                  const { unified } = await import("unified");
+                  const { default: remarkParse } = await import("remark-parse");
+                  const { default: remarkGfm } = await import("remark-gfm");
+                  const { default: remarkRehype } = await import("remark-rehype");
+                  const { default: rehypeStringify } = await import("rehype-stringify");
+                  const { convert } = require("html-to-text");
+                  const result = await unified().use(remarkParse).use(remarkGfm).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeStringify, { allowDangerousHtml: true }).process(previewerProps.description);
+                  previewerProps.description = String(result.value);
+                  asset.description = convert(result.value, {
+                    wordwrap: false
+                  });
+                }
+                return {
+                  id: asset.id,
+                  component,
+                  asset: techStack.generateMetadata ? await techStack.generateMetadata(asset, techStackOpts) : asset,
+                  /**
+                   * keep `generateSources` rather than `generateResolveMap` for compatibility
+                   */
+                  resolveMap: techStack.generateSources ? await techStack.generateSources(resolveMap, techStackOpts) : resolveMap,
+                  renderOpts: {
+                    rendererPath: runtimeOpts == null ? void 0 : runtimeOpts.rendererPath,
+                    compilePath: runtimeOpts == null ? void 0 : runtimeOpts.compilePath,
+                    preflightPath: runtimeOpts == null ? void 0 : runtimeOpts.preflightPath
+                  }
+                };
+              })
             );
             demosPropData.push({
               demo: propDemo,
@@ -381,15 +378,13 @@ function rehypeDemo(opts) {
     await Promise.all(deferrers).then((demos) => {
       vFile.data.demos = demos;
       replaceNodes.forEach((node) => {
-        const demoLoader = `() => import('${(0, import_plugin_utils.winPath)(
-          opts.fileAbsPath
-        )}?type=demo')`;
         let value = JSON.stringify(node.data[DEMO_PROP_VALUE_KEY]);
         if (opts.useUtoopackDemoHMR) {
-          value = value.replace(
-            new RegExp(`"${DEMO_LOADER_PLACEHOLDER}"`, "g"),
-            demoLoader
-          );
+          value = value.replace(DEMO_LOADER_PLACEHOLDER_RE, (_, demoId) => {
+            return `() => import('${(0, import_plugin_utils.winPath)(
+              opts.fileAbsPath
+            )}?type=demo&demoId=${demoId}')`;
+          });
         }
         if (node.JSXAttributes[0].type === "JSXAttribute") {
           node.JSXAttributes[0].value = value;

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

@@ -201,14 +201,18 @@ export function useDemo(
 /**
  * get all demos
  */
-export async function getFullDemos() {
-  const demoIndexMap = await loadDemoIndexMap();
-  const lazyDemoIndexes = await Promise.all(
-    Object.entries(demoIndexMap).map(async ([id, demoIndexGetter]) => ({
-      id,
-      demoIndex: await demoIndexGetter?.().catch(() => undefined),
-    })),
-  );
+export async function getFullDemos(opts: { loadLazy?: boolean } = {}) {
+  const loadLazy = opts.loadLazy ?? process.env.NODE_ENV === 'production';
+  const lazyDemoIndexes = loadLazy
+    ? await loadDemoIndexMap().then((demoIndexMap) =>
+        Promise.all(
+          Object.entries(demoIndexMap).map(async ([id, demoIndexGetter]) => ({
+            id,
+            demoIndex: await demoIndexGetter?.().catch(() => undefined),
+          })),
+        ),
+      )
+    : [];
   const allDemoIndexes = [
     ...demoIndexes,
     ...lazyDemoIndexes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.4.37",
+  "version": "2.4.38-beta.0",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",

package/theme-api.d.ts

@@ -309,7 +309,9 @@ export declare const useTabMeta: () =>
 export declare const openCodeSandbox: (data: IPreviewerProps) => void;
 export declare const openStackBlitz: (data: IPreviewerProps) => void;
 export declare function useDemo(id: string): IDemoData | undefined;
-export declare function getFullDemos(): Promise<Record<string, IDemoData>>;
+export declare function getFullDemos(opts?: {
+  loadLazy?: boolean;
+}): Promise<Record<string, IDemoData>>;
 export declare function getRouteMetaById<T extends { syncOnly?: boolean }>(
   id: string,
   opts?: T,