dumi 2.4.47 → 2.4.48-alpha.0

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

@@ -53,6 +53,17 @@ var DUMI_DEMO_TAG = "DumiDemo";
 var DUMI_DEMO_GRID_TAG = "DumiDemoGrid";
 var SKIP_DEMO_PARSE = "pure";
 var ALWAYS_DEMO_PARSE = "demo";
+function getStableContentHash(value) {
+  const serialized = JSON.stringify(value, (_key, nestedValue) => {
+    if (nestedValue && typeof nestedValue === "object" && !Array.isArray(nestedValue)) {
+      return Object.fromEntries(
+        Object.keys(nestedValue).sort().map((key) => [key, nestedValue[key]])
+      );
+    }
+    return nestedValue;
+  });
+  return (0, import_utils.getContentHash)(serialized);
+}
 var skipDemoRE = new RegExp(
   /** 注意前面有空格 ==> */
   ` ${SKIP_DEMO_PARSE}`
@@ -259,99 +270,135 @@ function rehypeDemo(opts) {
               (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, _d;
+                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
-                  );
-                  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
-                    });
-                  }
+                }
+                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];
+                });
+                const isInlineDemo = Boolean(
+                  / inline/.test(String((_b2 = codeNode.data) == null ? void 0 : _b2.meta)) || originalProps.inline
+                );
+                const shouldDeferPreviewerProps = Boolean(
+                  opts.useUtoopackDemoHMR && codeType === "external" && !isInlineDemo && !(runtimeOpts == null ? void 0 : runtimeOpts.rendererPath) && ((_c2 = runtimeOpts == null ? void 0 : runtimeOpts.deferPreviewerProps) == null ? void 0 : _c2.length)
+                );
+                if (opts.useUtoopackDemoHMR && !shouldDeferPreviewerProps) {
+                  propDemo.version = getStableContentHash(asset.dependencies);
+                }
+                if (isInlineDemo) {
+                  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 ((_d = techStack.generatePreviewerProps) == null ? void 0 : _d.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
+                  });
+                }
+                const finalAsset = techStack.generateMetadata ? await techStack.generateMetadata(asset, techStackOpts) : asset;
+                const finalResolveMap = techStack.generateSources ? await techStack.generateSources(resolveMap, techStackOpts) : resolveMap;
+                const deferredPreviewerProps = {};
+                const renderOpts = {
+                  rendererPath: runtimeOpts == null ? void 0 : runtimeOpts.rendererPath,
+                  compilePath: runtimeOpts == null ? void 0 : runtimeOpts.compilePath,
+                  preflightPath: runtimeOpts == null ? void 0 : runtimeOpts.preflightPath
+                };
+                if (shouldDeferPreviewerProps) {
+                  runtimeOpts.deferPreviewerProps.forEach((key) => {
+                    if (key in previewerProps) {
+                      deferredPreviewerProps[key] = previewerProps[key];
+                      delete previewerProps[key];
+                    }
+                  });
+                  const versionDependencies = Object.fromEntries(
+                    Object.entries(finalAsset.dependencies).map(
+                      ([key, dependency]) => {
+                        const resolved = finalResolveMap[key];
+                        return [
+                          key,
+                          dependency.type === "FILE" && typeof resolved === "string" && import_path.default.isAbsolute(resolved) ? { ...dependency, value: "<dumi-raw>" } : dependency
+                        ];
+                      }
+                    )
+                  );
+                  propDemo.version = getStableContentHash({
+                    component,
+                    asset: {
+                      ...finalAsset,
+                      dependencies: versionDependencies
+                    },
+                    resolveMap: finalResolveMap,
+                    renderOpts
+                  });
+                  propDemo.__dumiUtoopackHMR = (0, import_plugin_utils.winPath)(
+                    `${opts.fileAbsPath}?type=demo`
+                  );
+                }
+                const dumiUtoopackHMRVersion = shouldDeferPreviewerProps ? getStableContentHash({
+                  component,
+                  asset: finalAsset,
+                  resolveMap: finalResolveMap,
+                  previewerProps: deferredPreviewerProps,
+                  renderOpts
+                }) : void 0;
+                return {
+                  id: asset.id,
+                  component,
+                  asset: finalAsset,
+                  resolveMap: finalResolveMap,
+                  ...Object.keys(deferredPreviewerProps).length ? { previewerProps: deferredPreviewerProps } : {},
+                  ...dumiUtoopackHMRVersion ? { __dumiUtoopackHMRVersion: dumiUtoopackHMRVersion } : {},
+                  renderOpts
+                };
+              })
             );
             demosPropData.push({
               demo: propDemo,

package/dist/techStacks/react.js

@@ -37,7 +37,8 @@ var ReactTechStack = class {
   constructor() {
     this.name = "react";
     this.runtimeOpts = {
-      compilePath: require.resolve("../client/misc/reactDemoCompiler")
+      compilePath: require.resolve("../client/misc/reactDemoCompiler"),
+      deferPreviewerProps: ["jsx"]
     };
   }
   isSupported(...[, lang]) {

package/dist/types.d.ts

@@ -76,6 +76,12 @@ export interface IDumiTechStackRuntimeOpts {
      * path to runtime plugin for this tech stack
      */
     pluginPath?: string;
+    /**
+     * Previewer props that are derived from demo source code and may be loaded
+     * with the demo runtime instead of being embedded in the Markdown page.
+     * This is only used by the utoopack development HMR fast path.
+     */
+    deferPreviewerProps?: string[];
 }
 export declare abstract class IDumiTechStack {
     /**

package/dist/utils.d.ts

@@ -28,7 +28,8 @@ export declare function parseCodeFrontmatter(raw: string): {
 };
 declare const caches: Record<string, ReturnType<typeof Cache>>;
 export declare function _setFSCacheDir(dir: string): void;
-export declare function getCache(ns: string): (typeof caches)['0'];
+export declare function resolveDumiCacheDir(cwd: string, cacheDirectoryPath?: string | false): string;
+export declare function getCache(ns: string, baseDir?: string): (typeof caches)['0'];
 /**
  * try to get father config
  */

package/dist/utils.js

@@ -41,6 +41,7 @@ __export(utils_exports, {
   getProjectRoot: () => getProjectRoot,
   isVersionInRange: () => isVersionInRange,
   parseCodeFrontmatter: () => parseCodeFrontmatter,
+  resolveDumiCacheDir: () => resolveDumiCacheDir,
   runLoaders: () => runLoaders,
   toImportSpecifier: () => toImportSpecifier,
   tryFatherBuildConfigs: () => tryFatherBuildConfigs
@@ -94,7 +95,10 @@ var caches = {};
 function _setFSCacheDir(dir) {
   cacheDir = dir;
 }
-function getCache(ns) {
+function resolveDumiCacheDir(cwd, cacheDirectoryPath) {
+  return cacheDirectoryPath ? import_path.default.resolve(cwd, cacheDirectoryPath, "dumi") : import_path.default.resolve(cwd, import_constants.FS_CACHE_DIR);
+}
+function getCache(ns, baseDir = cacheDir) {
   if (process.env.DUMI_CACHE === "none") {
     return { set() {
     }, get() {
@@ -102,7 +106,8 @@ function getCache(ns) {
     }, getSync() {
     } };
   }
-  return caches[ns] ?? (caches[ns] = (0, import_file_system_cache.default)({ basePath: import_path.default.resolve(cacheDir, ns) }));
+  const basePath = import_path.default.resolve(baseDir, ns);
+  return caches[basePath] ?? (caches[basePath] = (0, import_file_system_cache.default)({ basePath }));
 }
 async function tryFatherBuildConfigs(cwd) {
   let configs = [];
@@ -203,6 +208,7 @@ function toImportSpecifier(source) {
   getProjectRoot,
   isVersionInRange,
   parseCodeFrontmatter,
+  resolveDumiCacheDir,
   runLoaders,
   toImportSpecifier,
   tryFatherBuildConfigs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.4.47",
+  "version": "2.4.48-alpha.0",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",
@@ -101,6 +101,7 @@
     "prism-react-renderer": "^1.3.5",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
+    "proper-lockfile": "^4.1.2",
     "raw-loader": "^4.0.2",
     "rc-motion": "^2.7.3",
     "rc-tabs": "^12.10.0",
@@ -143,6 +144,7 @@
     "@types/node": "^18.17.1",
     "@types/pluralize": "^0.0.30",
     "@types/prismjs": "^1.26.0",
+    "@types/proper-lockfile": "^4.1.4",
     "@types/react": "^18.2.17",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.2.7",

package/theme-default/slots/SourceCodeEditor/index.js

@@ -21,6 +21,9 @@ var SourceCodeEditor = function SourceCodeEditor(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     code = _useState4[0],
     setCode = _useState4[1];
+  useEffect(function () {
+    setCode(props.initialValue);
+  }, [props.initialValue]);
 
   // generate style from pre element, for adapting to the custom theme
   useEffect(function () {