dumi 2.4.36 → 2.4.37

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

@@ -34,12 +34,13 @@ 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);
 };
 export var DumiDemo = /*#__PURE__*/React.memo(InternalDumiDemo, function (prev, next) {

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

@@ -53,6 +53,17 @@ function getDemoSourceFiles(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);
@@ -133,6 +144,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 +158,9 @@ export const demos = {
     component: {{{component}}},
     {{/component}}
     asset: {{{renderAsset}}},
+    {{#routeId}}
+    routeId: '{{{routeId}}}',
+    {{/routeId}}
     context: {{{renderContext}}},
     renderOpts: {{{renderRenderOpts}}},
   },
@@ -154,6 +169,7 @@ export const demos = {
     {
       demos,
       dedupedDemosDeps,
+      routeId,
       renderAsset: function renderAsset() {
         if (!("asset" in this))
           return "null";
@@ -291,7 +307,9 @@ function emitText(opts, ret) {
 function emit(opts, ret) {
   const { demos, embeds } = ret.meta;
   embeds.forEach((file) => this.addDependency(file));
-  getDemoSourceFiles(demos).forEach((file) => this.addDependency(file));
+  if (opts.mode !== "demo-index") {
+    getDemoSourceFiles(demos).forEach((file) => this.addDependency(file));
+  }
   if (this.resourceQuery.includes("watch=parent"))
     return null;
   switch (opts.mode) {
@@ -320,7 +338,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/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.
@@ -101,14 +202,25 @@ export function useDemo(
  * get all demos
  */
 export async function getFullDemos() {
-  const demoFilesMeta = Object.entries(filesMeta).filter(
-    ([_id, meta]) => meta.demoIndex,
+  const demoIndexMap = await loadDemoIndexMap();
+  const lazyDemoIndexes = await 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.37",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",