dumi 2.4.36 → 2.4.38-beta.0

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

@@ -1,11 +1,14 @@
-import { useDemo, useLiveDemo, useParams } from 'dumi';
+import { useDemo, useLiveDemo, useLocation, useParams } from 'dumi';
 import { createElement, useEffect } from 'react';
 import { useRenderer } from "../../theme-api/useRenderer";
 import "./index.less";
 var DemoRenderPage = function DemoRenderPage() {
   var params = useParams();
+  var _useLocation = useLocation(),
+    search = _useLocation.search;
   var id = params.id;
-  var demo = useDemo(id);
+  var routeId = new URLSearchParams(search).get('routeId') || undefined;
+  var demo = useDemo(id, undefined, undefined, routeId);
   var _useRenderer = useRenderer({
       id: id,
       component: demo.component,

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(),
@@ -34,17 +75,34 @@ var InternalDumiDemo = function InternalDumiDemo(props) {
     return demoNode;
   }
   var isHashRoute = historyType === 'hash';
+  var routeQuery = demo.routeId ? "?routeId=".concat(encodeURIComponent(demo.routeId)) : '';
   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 #
-    "".concat(isHashRoute ? "#" : '').concat(basename).concat(SP_ROUTE_PREFIX, "demos/").concat(props.demo.id)
+    "".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/features/meta.d.ts

@@ -1,5 +1,6 @@
 import type { IApi } from '../types';
 export declare const TABS_META_PATH = "dumi/meta/tabs.ts";
 export declare const ATOMS_META_PATH = "dumi/meta/atoms.ts";
+export declare const DEMO_INDEX_META_PATH = "dumi/meta/demoIndex.ts";
 export default _default;
 declare function _default(api: IApi): void;

package/dist/features/meta.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var meta_exports = {};
 __export(meta_exports, {
   ATOMS_META_PATH: () => ATOMS_META_PATH,
+  DEMO_INDEX_META_PATH: () => DEMO_INDEX_META_PATH,
   TABS_META_PATH: () => TABS_META_PATH,
   default: () => meta_default
 });
@@ -40,6 +41,7 @@ var import_plugin_utils = require("umi/plugin-utils");
 var import_tabs = require("./tabs");
 var TABS_META_PATH = "dumi/meta/tabs.ts";
 var ATOMS_META_PATH = "dumi/meta/atoms.ts";
+var DEMO_INDEX_META_PATH = "dumi/meta/demoIndex.ts";
 var meta_default = (api) => {
   const metaFiles = [];
   api.register({
@@ -71,9 +73,11 @@ var meta_default = (api) => {
       key: "dumi.modifyMetaFiles",
       initialValue: JSON.parse(JSON.stringify(metaFiles))
     });
+    const useUtoopackDemoHMR = api.env === "development" && Boolean(api.config.utoopack);
     parsedMetaFiles.forEach((metaFile) => {
       metaFile.isMarkdown = metaFile.file.endsWith(".md");
-      metaFile.loadDemoIndex = metaFile.isMarkdown && !(api.env === "development" && Boolean(api.config.utoopack));
+      metaFile.loadDemoIndex = metaFile.isMarkdown && !useUtoopackDemoHMR;
+      metaFile.loadDemoIndexMap = metaFile.isMarkdown && useUtoopackDemoHMR;
     });
     api.writeTmpFile({
       noPluginDir: true,
@@ -94,6 +98,14 @@ var meta_default = (api) => {
         }
       }
     });
+    api.writeTmpFile({
+      noPluginDir: true,
+      path: DEMO_INDEX_META_PATH,
+      tplPath: require.resolve("../templates/meta/demoIndex.ts.tpl"),
+      context: {
+        metaFiles: parsedMetaFiles
+      }
+    });
     api.writeTmpFile({
       noPluginDir: true,
       path: "dumi/meta/runtime.ts",
@@ -119,5 +131,6 @@ var meta_default = (api) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ATOMS_META_PATH,
+  DEMO_INDEX_META_PATH,
   TABS_META_PATH
 });

package/dist/loaders/markdown/index.js

@@ -50,9 +50,27 @@ 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);
 }
+function normalizeRouteFile(file) {
+  return (0, import_plugin_utils.winPath)(file).replace(/\.(mdx?)\.js$/, ".$1");
+}
+function getRouteId(opts, fileAbsPath) {
+  const normalizedFile = normalizeRouteFile(fileAbsPath);
+  const route = Object.values(opts.routes ?? {}).find((item) => {
+    const routeFile = item.file || item.__absFile;
+    return routeFile && normalizeRouteFile(routeFile) === normalizedFile;
+  });
+  return route == null ? void 0 : route.id;
+}
 function emitDefault(opts, ret) {
   const { frontmatter, demos } = ret.meta;
   const isTabContent = (0, import_tabs.isTabRouteFile)(this.resourcePath);
@@ -94,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 = {};
@@ -133,6 +151,7 @@ function emitDemo(opts, ret) {
       }).filter((item) => item !== void 0)
     );
   }, []);
+  const routeId = getRouteId(opts, this.resourcePath);
   return import_plugin_utils.Mustache.render(
     `import React from 'react';
 import '${(0, import_plugin_utils.winPath)(this.resourcePath)}?watch=parent';
@@ -146,6 +165,9 @@ export const demos = {
     component: {{{component}}},
     {{/component}}
     asset: {{{renderAsset}}},
+    {{#routeId}}
+    routeId: '{{{routeId}}}',
+    {{/routeId}}
     context: {{{renderContext}}},
     renderOpts: {{{renderRenderOpts}}},
   },
@@ -154,6 +176,7 @@ export const demos = {
     {
       demos,
       dedupedDemosDeps,
+      routeId,
       renderAsset: function renderAsset() {
         if (!("asset" in this))
           return "null";
@@ -290,8 +313,13 @@ 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));
-  getDemoSourceFiles(demos).forEach((file) => this.addDependency(file));
+  if (opts.mode !== "demo-index") {
+    getDemoSourceFiles(dependencyDemos).forEach(
+      (file) => this.addDependency(file)
+    );
+  }
   if (this.resourceQuery.includes("watch=parent"))
     return null;
   switch (opts.mode) {
@@ -320,7 +348,7 @@ function mdLoader(content) {
   var _a, _b, _c;
   let opts = this.getOptions();
   const loaderContextPath = opts[import_utoopackLoaders.UTOOPACK_LOADER_CTX_KEY];
-  const useUtoopackDemoHMR = process.env.NODE_ENV === "development" && Boolean(loaderContextPath);
+  const useUtoopackDemoHMR = process.env.NODE_ENV !== "production" && Boolean(loaderContextPath);
   if (loaderContextPath) {
     const ctx = require(loaderContextPath);
     if (!((_a = opts.techStacks) == null ? void 0 : _a.length)) {

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/demoIndex.ts.tpl

@@ -0,0 +1,10 @@
+export const demoIndexMap = {
+  {{#metaFiles}}
+  {{#loadDemoIndexMap}}
+  '{{{id}}}': () =>
+    import('{{{file}}}?type=demo-index').then(
+      ({ demoIndex }) => demoIndex,
+    ),
+  {{/loadDemoIndexMap}}
+  {{/metaFiles}}
+};

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

@@ -34,21 +34,53 @@ export function use<T>(promise: ReactPromise<T>): T {
   }
 }
 
-const demoIdMap = Object.keys(filesMeta).reduce((total, current) => {
-  if (filesMeta[current].demoIndex) {
-    const { ids, getter } = filesMeta[current].demoIndex;
+type DemoGetter = () => Promise<{ demos: Record<string, IDemoData> }>;
+type DemoIndex = {
+  ids: string[];
+  getter: DemoGetter;
+};
+type DemoIndexGetter = () => Promise<DemoIndex>;
 
-    ids.forEach((id) => {
-      total[id] = getter;
-    });
-  }
+const demoIndexes = Object.entries(filesMeta)
+  .map(([id, meta]) => ({
+    id,
+    demoIndex: meta.demoIndex,
+  }))
+  .filter(
+    (item): item is { id: string; demoIndex: DemoIndex } =>
+      Boolean(item.demoIndex),
+  );
 
-  return total;
-}, {});
+const demoIdMap = demoIndexes.reduce<Record<string, DemoGetter>>(
+  (total, { demoIndex }) => {
+    if (demoIndex) {
+      const { ids, getter } = demoIndex;
 
-type DemoGetter = () => Promise<{ demos: Record<string, IDemoData> }>;
+      ids.forEach((id) => {
+        total[id] = getter;
+      });
+    }
+
+    return total;
+  },
+  {},
+);
 
 const demosCache = new Map<string, Promise<IDemoData | undefined>>();
+let demoIndexMapPromise:
+  | Promise<Record<string, DemoIndexGetter | undefined>>
+  | undefined;
+
+function loadDemoIndexMap() {
+  if (!demoIndexMapPromise) {
+    demoIndexMapPromise = import('./demoIndex').then(
+      ({ demoIndexMap }) =>
+        demoIndexMap as Record<string, DemoIndexGetter | undefined>,
+    );
+  }
+
+  return demoIndexMapPromise;
+}
 
 /**
  * expand context for source omit extension
@@ -67,6 +99,65 @@ function expandDemoContext(context?: IDemoData['context']) {
   }
 }
 
+function getDemoIdCandidates(id: string) {
+  const ids = [id];
+  const localeLessId = id.replace(/-[a-z]{2}(?:-[A-Z]{2})?$/, '');
+
+  if (localeLessId !== id) {
+    ids.push(localeLessId);
+  }
+
+  return ids;
+}
+
+async function getDemoFromDemoIndex(
+  id: string,
+  demoIndexGetter: DemoIndexGetter,
+) {
+  const demoIndex = await demoIndexGetter();
+  const demoId = getDemoIdCandidates(id).find((candidate) =>
+    demoIndex.ids.includes(candidate),
+  );
+  const getter = demoId ? demoIndex.getter : undefined;
+
+  if (!getter) return undefined;
+
+  demoIdMap[id] = getter;
+  const { demos } = await getter();
+  const demo = demos[id] ?? demos[demoId!];
+
+  if (!demo) return undefined;
+
+  expandDemoContext(demo.context);
+  return demo;
+}
+
+async function getDemoFromRouteIndex(id: string, routeId: string) {
+  const demoIndexMap = await loadDemoIndexMap();
+  const demoIndexGetter = demoIndexMap[routeId];
+
+  if (!demoIndexGetter) return getDemoFromIndexMap(id);
+
+  return (
+    (await getDemoFromDemoIndex(id, demoIndexGetter)) ??
+    getDemoFromIndexMap(id)
+  );
+}
+
+async function getDemoFromIndexMap(id: string) {
+  const demoIndexMap = await loadDemoIndexMap();
+  const demoIndexGetters = Object.values(demoIndexMap).filter(
+    (item): item is DemoIndexGetter => Boolean(item),
+  );
+
+  for (const demoIndexGetter of demoIndexGetters) {
+    const demo = await getDemoFromDemoIndex(id, demoIndexGetter).catch(
+      () => undefined,
+    );
+    if (demo) return demo;
+  }
+}
+
 /**
  * use demo data by id
  */
@@ -74,20 +165,30 @@ export function useDemo(
   id: string,
   loader?: DemoGetter,
   version?: string,
+  routeId?: string,
 ): IDemoData | undefined {
-  const cacheKey = version ? `${id}:${version}` : id;
+  const cacheKey = version
+    ? `${id}:${version}`
+    : routeId
+      ? `${id}:route=${routeId}`
+      : id;
   const getter = loader ?? demoIdMap[id];
 
   if (!demosCache.get(cacheKey)) {
-    if (!getter) return undefined;
-
     demosCache.set(
       cacheKey,
-      getter().then(({ demos }) => {
-        // expand context for omit ext
-        expandDemoContext(demos[id].context);
-        return demos[id];
-      }),
+      getter
+        ? getter().then(({ demos }) => {
+            const demo = demos[id];
+            if (!demo) return undefined;
+
+            // expand context for omit ext
+            expandDemoContext(demo.context);
+            return demo;
+          })
+        : routeId
+          ? getDemoFromRouteIndex(id, routeId)
+          : getDemoFromIndexMap(id),
     );
 
     // Reuse local demo data for consumers that still call useDemo(id), such as useLiveDemo.
@@ -100,15 +201,30 @@ export function useDemo(
 /**
  * get all demos
  */
-export async function getFullDemos() {
-  const demoFilesMeta = Object.entries(filesMeta).filter(
-    ([_id, meta]) => meta.demoIndex,
+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,
+  ].filter(
+    (item): item is { id: string; demoIndex: DemoIndex } =>
+      Boolean(item.demoIndex),
   );
 
   return Promise.all(
-    demoFilesMeta.map(async ([id, meta]) => ({
+    allDemoIndexes.map(async ({ id, demoIndex }) => ({
       id,
-      demos: (await meta.demoIndex.getter()).demos as Record<string, IDemoData>,
+      demos: (await demoIndex.getter()).demos as Record<string, IDemoData>,
     })),
   ).then((ret) =>
     ret.reduce<Record<string, IDemoData>>((total, { id, demos }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.4.36",
+  "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,