dumi 2.4.35 → 2.4.36

package/dist/assetParsers/block.d.ts

@@ -13,7 +13,7 @@ export interface IParsedBlockAsset {
     resolveMap: Record<string, string>;
     frontmatter: ReturnType<typeof parseCodeFrontmatter>['frontmatter'];
 }
-declare function parseBlockAsset(opts: {
+interface IParseBlockAssetOptions {
     fileAbsPath: string;
     fileLocale?: string;
     id: string;
@@ -21,5 +21,7 @@ declare function parseBlockAsset(opts: {
     entryPointCode?: string;
     resolver: typeof sync;
     techStack: IDumiTechStack;
-}): Promise<IParsedBlockAsset>;
+    cacheable?: boolean;
+}
+declare function parseBlockAsset(opts: IParseBlockAssetOptions): Promise<IParsedBlockAsset>;
 export default parseBlockAsset;

package/dist/assetParsers/block.js

@@ -39,7 +39,71 @@ var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
 var import_constants = require("../constants");
+var MAX_BLOCK_ASSET_CACHE_SIZE = 512;
+var blockAssetCache = /* @__PURE__ */ new Map();
+function cloneParsedBlockAsset(ret) {
+  return {
+    asset: JSON.parse(JSON.stringify(ret.asset)),
+    resolveMap: { ...ret.resolveMap },
+    frontmatter: ret.frontmatter ? JSON.parse(JSON.stringify(ret.frontmatter)) : ret.frontmatter
+  };
+}
+function getContentHashFromFile(file) {
+  try {
+    return (0, import_utils.getContentHash)(import_fs.default.readFileSync(file, "utf-8"));
+  } catch {
+    return "missing";
+  }
+}
+function getDepsKey(deps) {
+  return JSON.stringify(
+    Array.from(new Set(deps)).sort().map((file) => `${(0, import_plugin_utils.winPath)(file)}:${getContentHashFromFile(file)}`)
+  );
+}
+function getParseCacheKey(opts) {
+  const entryContent = opts.entryPointCode ?? import_fs.default.readFileSync(opts.fileAbsPath, "utf-8");
+  return JSON.stringify({
+    file: (0, import_plugin_utils.winPath)(opts.fileAbsPath),
+    fileLocale: opts.fileLocale,
+    id: opts.id,
+    refAtomIds: opts.refAtomIds,
+    entryHash: (0, import_utils.getContentHash)(entryContent),
+    techStack: opts.techStack.name,
+    runtimeOpts: opts.techStack.runtimeOpts,
+    hasOnBlockLoad: Boolean(opts.techStack.onBlockLoad),
+    hasGenerateMetadata: Boolean(opts.techStack.generateMetadata),
+    hasGenerateSources: Boolean(opts.techStack.generateSources)
+  });
+}
+function getParseDeps(ret, entryFile) {
+  return Object.values(ret.resolveMap).filter(
+    (file) => import_path.default.isAbsolute(file) && file !== entryFile
+  );
+}
+function getCachedBlockAsset(cacheKey) {
+  const cached = blockAssetCache.get(cacheKey);
+  if (cached && cached.depsKey === getDepsKey(cached.deps)) {
+    return cloneParsedBlockAsset(cached.result);
+  }
+}
+function setCachedBlockAsset(cacheKey, ret, deps) {
+  if (blockAssetCache.size >= MAX_BLOCK_ASSET_CACHE_SIZE) {
+    const firstKey = blockAssetCache.keys().next().value;
+    if (firstKey)
+      blockAssetCache.delete(firstKey);
+  }
+  blockAssetCache.set(cacheKey, {
+    deps,
+    depsKey: getDepsKey(deps),
+    result: cloneParsedBlockAsset(ret)
+  });
+}
 async function parseBlockAsset(opts) {
+  const cacheKey = opts.cacheable ? getParseCacheKey(opts) : "";
+  const cached = cacheKey ? getCachedBlockAsset(cacheKey) : void 0;
+  if (cached) {
+    return cached;
+  }
   const asset = {
     type: "BLOCK",
     id: opts.id,
@@ -163,9 +227,18 @@ async function parseBlockAsset(opts) {
       }
     ]
   });
+  let hasError = false;
   try {
     await deferrer;
   } catch {
+    hasError = true;
+  }
+  if (!hasError && cacheKey) {
+    setCachedBlockAsset(
+      cacheKey,
+      result,
+      getParseDeps(result, opts.fileAbsPath)
+    );
   }
   return result;
 }

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

@@ -1,10 +1,16 @@
 import { type FC } from 'react';
-import type { IPreviewerProps } from '../types';
+import type { IDemoData, IPreviewerProps } from '../types';
+type DemoGetter = () => Promise<{
+    demos: Record<string, IDemoData>;
+}>;
 export interface IDumiDemoProps {
     demo: {
         id: string;
         inline?: boolean;
+        loader?: DemoGetter;
+        version?: string;
     };
     previewerProps: Omit<IPreviewerProps, 'asset' | 'children'>;
 }
 export declare const DumiDemo: FC<IDumiDemoProps>;
+export {};

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

@@ -10,8 +10,11 @@ var InternalDumiDemo = function InternalDumiDemo(props) {
     historyType = _useSiteData.historyType;
   var _useAppData = useAppData(),
     basename = _useAppData.basename;
-  var id = props.demo.id;
-  var demo = useDemo(id);
+  var _props$demo = props.demo,
+    id = _props$demo.id,
+    loader = _props$demo.loader,
+    version = _props$demo.version;
+  var demo = useDemo(id, loader, version);
   var component = demo.component,
     asset = demo.asset,
     renderOpts = demo.renderOpts;

package/dist/features/meta.js

@@ -73,6 +73,7 @@ var meta_default = (api) => {
     });
     parsedMetaFiles.forEach((metaFile) => {
       metaFile.isMarkdown = metaFile.file.endsWith(".md");
+      metaFile.loadDemoIndex = metaFile.isMarkdown && !(api.env === "development" && Boolean(api.config.utoopack));
     });
     api.writeTmpFile({
       noPluginDir: true,

package/dist/loaders/markdown/index.js

@@ -320,6 +320,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);
   if (loaderContextPath) {
     const ctx = require(loaderContextPath);
     if (!((_a = opts.techStacks) == null ? void 0 : _a.length)) {
@@ -346,6 +347,7 @@ function mdLoader(content) {
   const baseCacheKey = [
     this.resourcePath,
     (0, import_utils.getContentHash)(content),
+    useUtoopackDemoHMR,
     JSON.stringify(import_plugin_utils.lodash.omit(opts, ["mode", "builtins", "onResolveDemos"]))
   ].join(":");
   const cacheKey = [
@@ -364,7 +366,8 @@ function mdLoader(content) {
   }
   deferrer[cacheKey] = (0, import_transformer.default)(content, {
     ...import_plugin_utils.lodash.omit(opts, ["mode", "builtins", "onResolveDemos"]),
-    fileAbsPath: (0, import_plugin_utils.winPath)(this.resourcePath)
+    fileAbsPath: (0, import_plugin_utils.winPath)(this.resourcePath),
+    useUtoopackDemoHMR
   });
   deferrer[cacheKey].then((ret) => {
     depsMapping[this.resourcePath] = ret.meta.embeds.concat(

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

@@ -48,6 +48,7 @@ declare module 'vfile' {
 export interface IMdTransformerOptions {
     cwd: string;
     fileAbsPath: string;
+    useUtoopackDemoHMR?: boolean;
     alias: ResolveOptions['alias'];
     parentAbsPath?: string;
     techStacks: IDumiTechStack[];

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

@@ -113,6 +113,7 @@ var transformer_default = async (raw, opts) => {
     fileAbsPath: opts.fileAbsPath,
     fileLocaleLessPath,
     fileLocale,
+    useUtoopackDemoHMR: opts.useUtoopackDemoHMR,
     resolve: opts.resolve,
     resolver
   }).use(import_rehypeSlug.default).use(import_rehypeLink.default, {

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

@@ -10,6 +10,7 @@ type IRehypeDemoOptions = Pick<IMdTransformerOptions, 'techStacks' | 'cwd' | 'fi
     resolver: typeof sync;
     fileLocaleLessPath: string;
     fileLocale?: string;
+    useUtoopackDemoHMR?: boolean;
 };
 export default function rehypeDemo(opts: IRehypeDemoOptions): Transformer<Root>;
 export {};

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

@@ -47,6 +47,8 @@ var toString;
 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 DUMI_DEMO_TAG = "DumiDemo";
 var DUMI_DEMO_GRID_TAG = "DumiDemoGrid";
 var SKIP_DEMO_PARSE = "pure";
@@ -249,9 +251,15 @@ function rehypeDemo(opts) {
               });
             }
             const propDemo = { id: parseOpts.id };
+            if (opts.useUtoopackDemoHMR) {
+              propDemo.loader = DEMO_LOADER_PLACEHOLDER_VALUE;
+            }
             demoIds.push(parseOpts.id);
             deferrers.push(
-              (0, import_block.default)(parseOpts).then(
+              (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)) {
@@ -287,6 +295,11 @@ function rehypeDemo(opts) {
                     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 {
@@ -368,7 +381,16 @@ function rehypeDemo(opts) {
     await Promise.all(deferrers).then((demos) => {
       vFile.data.demos = demos;
       replaceNodes.forEach((node) => {
-        const value = JSON.stringify(node.data[DEMO_PROP_VALUE_KEY]);
+        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
+          );
+        }
         if (node.JSXAttributes[0].type === "JSXAttribute") {
           node.JSXAttributes[0].value = value;
         } else {

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

@@ -46,6 +46,8 @@ const demoIdMap = Object.keys(filesMeta).reduce((total, current) => {
   return total;
 }, {});
 
+type DemoGetter = () => Promise<{ demos: Record<string, IDemoData> }>;
+
 const demosCache = new Map<string, Promise<IDemoData | undefined>>();
 
 /**
@@ -68,19 +70,31 @@ function expandDemoContext(context?: IDemoData['context']) {
 /**
  * use demo data by id
  */
-export function useDemo(id: string): IDemoData | undefined {
-  if (!demosCache.get(id)) {
+export function useDemo(
+  id: string,
+  loader?: DemoGetter,
+  version?: string,
+): IDemoData | undefined {
+  const cacheKey = version ? `${id}:${version}` : id;
+  const getter = loader ?? demoIdMap[id];
+
+  if (!demosCache.get(cacheKey)) {
+    if (!getter) return undefined;
+
     demosCache.set(
-      id,
-      demoIdMap[id]?.().then(({ demos }) => {
+      cacheKey,
+      getter().then(({ demos }) => {
         // expand context for omit ext
         expandDemoContext(demos[id].context);
         return demos[id];
       }),
     );
+
+    // Reuse local demo data for consumers that still call useDemo(id), such as useLiveDemo.
+    demosCache.set(id, demosCache.get(cacheKey)!);
   }
 
-  return use(demosCache.get(id)!);
+  return use(demosCache.get(cacheKey)!);
 }
 
 /**

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

@@ -1,10 +1,10 @@
 {{#metaFiles}}
-{{#isMarkdown}}
+{{#loadDemoIndex}}
 import { frontmatter as fm{{{index}}}, toc as t{{{index}}}, demoIndex as dmi{{{index}}} } from '{{{file}}}?type=frontmatter';
-{{/isMarkdown}}
-{{^isMarkdown}}
+{{/loadDemoIndex}}
+{{^loadDemoIndex}}
 import { frontmatter as fm{{{index}}}, toc as t{{{index}}} } from '{{{file}}}?type=frontmatter';
-{{/isMarkdown}}
+{{/loadDemoIndex}}
 {{/metaFiles}}
 
 export const filesMeta = {
@@ -12,9 +12,9 @@ export const filesMeta = {
   '{{{id}}}': {
     frontmatter: fm{{{index}}},
     toc: t{{{index}}},
-    {{#isMarkdown}}
+    {{#loadDemoIndex}}
     demoIndex: dmi{{{index}}},
-    {{/isMarkdown}}
+    {{/loadDemoIndex}}
     {{#tabs}}
     tabs: {{{tabs}}},
     {{/tabs}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.4.35",
+  "version": "2.4.36",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",