Merge remote-tracking branch 'upstream/master'

.dumi/theme/slots/HeaderExtra/index.tsx

@@ -12,6 +12,9 @@ const HeaderExtra: FC = () => {
             window.open('https://v1.d.umijs.org/', '_blank');
           }
         }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
       >
         <option value={process.env.DUMI_VERSION}>
           {process.env.DUMI_VERSION}

docs/config/runtime.md

@@ -9,12 +9,12 @@ group: 框架配置
 
 ## 配置项
 
-### modifyCodeSandBoxData
+### modifyCodeSandboxData
 
 修改在 CodeSandbox 中打开 demo 的数据，比如修改依赖、增加文件等。
 
 ```js
-export function modifyCodeSandBoxData(memo, props) {
+export function modifyCodeSandboxData(memo, props) {
   // 根据需要修改 memo 并返回新值
   return memo;
 }

package.json

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

src/client/theme-api/usePrefersColor.ts

@@ -86,15 +86,15 @@ class ColorChanger {
    * listen color change
    * @param cb  callback
    */
-  listen(cb: typeof this.callbacks[number]) {
+  listen(cb: (typeof this.callbacks)[number]) {
     this.callbacks.push(cb);
   }
 
   /**
    * unlisten color change
    * @param cb  callback
    */
-  unlisten(cb: typeof this.callbacks[number]) {
+  unlisten(cb: (typeof this.callbacks)[number]) {
     this.callbacks.splice(this.callbacks.indexOf(cb), 1);
   }
 
@@ -108,7 +108,7 @@ class ColorChanger {
     this.prefersColor = color;
     this.color =
       color === 'auto' ? (this.isColorMode('dark') ? 'dark' : 'light') : color;
-    document.documentElement.setAttribute(PREFERS_COLOR_ATTR, color);
+    document.documentElement.setAttribute(PREFERS_COLOR_ATTR, this.color);
     this.applyCallbacks();
 
     return color;

src/client/theme-default/slots/ColorSwitch/index.tsx

@@ -48,6 +48,7 @@ const ColorSwitch: FC = () => {
       <select
         onChange={(ev) => setPrefersColor(ev.target.value as any)}
         value={prefersColor}
+        onClick={(e) => e.stopPropagation()}
       >
         {['light', 'dark', 'auto'].map((c) => (
           <option value={c} key={c}>

src/client/theme-default/slots/SearchBar/index.less

@@ -56,7 +56,10 @@
         background-color: @c-site-bg-dark;
         box-shadow: 0 0 0 3px fade(@c-primary-dark, 10%);
       }
+    }
 
+    &:focus,
+    &:not(:placeholder-shown) {
       ~ .@{prefix}-search-shortcut {
         opacity: 0;
       }

src/client/theme-default/slots/SearchResult/index.tsx

@@ -1,5 +1,12 @@
 import { ReactComponent as IconInbox } from '@ant-design/icons-svg/inline-svg/outlined/inbox.svg';
-import { FormattedMessage, history, Link, type useSiteSearch } from 'dumi';
+import animateScrollTo from 'animated-scroll-to';
+import {
+  FormattedMessage,
+  history,
+  Link,
+  useLocation,
+  type useSiteSearch,
+} from 'dumi';
 import React, {
   Fragment,
   useCallback,
@@ -119,6 +126,20 @@ const SearchResult: FC<{
 }> = (props) => {
   const [data, histsCount] = useFlatSearchData(props.data);
   const [activeIndex, setActiveIndex] = useState(-1);
+  const { pathname } = useLocation();
+
+  const onItemSelect = (item: ISearchResult[0]['hints'][0]) => {
+    props.onItemSelect?.(item);
+
+    const url = new URL(item?.link, location.origin);
+    if (url?.pathname === pathname && !url.hash) {
+      setTimeout(() => {
+        animateScrollTo(0, {
+          maxDuration: 300,
+        });
+      }, 1);
+    }
+  };
 
   useEffect(() => {
     const handler = (ev: KeyboardEvent) => {
@@ -133,7 +154,7 @@ const SearchResult: FC<{
         )!.value as ISearchResult[0]['hints'][0];
 
         history.push(item.link);
-        props.onItemSelect?.(item);
+        onItemSelect?.(item);
         (document.activeElement as HTMLInputElement).blur();
       }
 
@@ -167,7 +188,7 @@ const SearchResult: FC<{
                 <Link
                   to={item.value.link}
                   data-active={activeIndex === item.activeIndex || undefined}
-                  onClick={() => props.onItemSelect?.(item.value)}
+                  onClick={() => onItemSelect?.(item.value)}
                 >
                   {React.createElement(ICONS_MAPPING[item.value.type])}
                   <h4>

src/constants.ts

@@ -29,3 +29,4 @@ export const VERSION_2_LEVEL_NAV = '^2.2.0';
 export const VERSION_2_DEPRECATE_SOFT_BREAKS = '^2.2.0';
 
 export const DEFAULT_DEMO_EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx'];
+export const FS_CACHE_DIR = 'node_modules/.cache/dumi';

src/features/compile/index.ts

@@ -2,6 +2,8 @@ import type { IDemoLoaderOptions } from '@/loaders/demo';
 import type { IMdLoaderOptions } from '@/loaders/markdown';
 import ReactTechStack from '@/techStacks/react';
 import type { IApi, IDumiTechStack } from '@/types';
+import { _setFSCacheDir } from '@/utils';
+import path from 'path';
 import { addAtomMeta, addExampleAssets } from '../assets';
 
 export default (api: IApi) => {
@@ -14,17 +16,26 @@ export default (api: IApi) => {
     fn: () => new ReactTechStack(),
   });
 
-  // add customize option for babel-loader, to avoid collect wrong deps result in MFSU
-  api.modifyConfig((memo) => {
-    if (memo.babelLoaderCustomize) {
-      api.logger.warn(
-        'Config `babelLoaderCustomize` will be override by dumi, please report issue if you need it.',
-      );
-    }
+  api.modifyConfig({
+    stage: Infinity,
+    fn: (memo) => {
+      // add customize option for babel-loader, to avoid collect wrong deps result in MFSU
+      if (memo.babelLoaderCustomize) {
+        api.logger.warn(
+          'Config `babelLoaderCustomize` will be override by dumi, please report issue if you need it.',
+        );
+      }
 
-    memo.babelLoaderCustomize = require.resolve('./babelLoaderCustomize');
+      memo.babelLoaderCustomize = require.resolve('./babelLoaderCustomize');
 
-    return memo;
+      // configure dumi fs cache dir
+      const cacheDirPath =
+        api.userConfig.cacheDirectoryPath || memo.cacheDirectoryPath;
+
+      if (cacheDirPath) _setFSCacheDir(path.join(cacheDirPath, 'dumi'));
+
+      return memo;
+    },
   });
 
   // configure loader to compile markdown

src/features/parser.ts

@@ -1,16 +1,53 @@
 import type { AtomAssetsParser, IApi } from '@/types';
+import { lodash } from '@umijs/utils';
 import assert from 'assert';
 import { BaseAtomAssetsParser } from '../assetParsers/BaseParser';
 import { ATOMS_META_PATH } from './meta';
 
+type IParsedAtomAssets = Awaited<ReturnType<AtomAssetsParser['parse']>>;
+
+function filterIgnoredProps(
+  props: IParsedAtomAssets['components'][string]['propsConfig']['properties'],
+) {
+  return lodash.pickBy(props, (prop) => {
+    let isHidden = false;
+
+    if (prop.type === 'array' && 'items' in prop) {
+      prop.items = filterIgnoredProps({ _: prop.items! })._;
+    } else if (prop.type === 'object' && 'properties' in prop) {
+      prop.properties = filterIgnoredProps(prop.properties!);
+    } else if (prop.oneOf) {
+      // oneOf may be [null] with unknown reason
+      prop.oneOf = prop.oneOf
+        .filter(Boolean)
+        .map((item) => filterIgnoredProps({ _: item })._);
+    } else if (prop.allOf) {
+      // allOf may be [null] with unknown reason
+      prop.allOf = prop.allOf
+        .filter(Boolean)
+        .map((item) => filterIgnoredProps({ _: item })._);
+    } else if ('hidden' in prop) {
+      isHidden = true;
+    }
+
+    return !isHidden;
+  });
+}
+
 export default (api: IApi) => {
-  let prevData: Awaited<ReturnType<AtomAssetsParser['parse']>>;
+  let prevData: IParsedAtomAssets;
   const writeAtomsMetaFile = (data: typeof prevData) => {
+    // filter ignored properties
+    const components = lodash.mapValues(data.components, (component) => ({
+      ...component,
+      propsConfig: filterIgnoredProps({ _: component.propsConfig })._,
+    }));
+
     api.writeTmpFile({
       noPluginDir: true,
       path: ATOMS_META_PATH,
       content: `export const components = ${JSON.stringify(
-        data.components,
+        components,
         null,
         2,
       )};`,

src/features/theme/index.ts

@@ -6,7 +6,7 @@ import {
   VERSION_2_LEVEL_NAV,
 } from '@/constants';
 import type { IApi } from '@/types';
-import { parseModuleSync } from '@umijs/bundler-utils';
+import { parseModule } from '@umijs/bundler-utils';
 import { execSync } from 'child_process';
 import fs from 'fs';
 import hostedGit from 'hosted-git-info';
@@ -67,11 +67,13 @@ function getPkgThemePath(api: IApi) {
 /**
  * get exports for module
  */
-function getModuleExports(modulePath: string) {
-  return parseModuleSync({
+async function getModuleExports(modulePath: string) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, exports] = await parseModule({
     path: modulePath,
     content: fs.readFileSync(modulePath, 'utf-8'),
-  })[1];
+  });
+  return exports || [];
 }
 
 /**
@@ -329,16 +331,17 @@ export default DumiLoading;
     },
   });
 
-  api.onGenerateFiles(() => {
+  api.onGenerateFiles(async () => {
     // write shadow theme files to tmp dir
-    themeMapKeys.forEach((key) => {
-      Object.values(originalThemeData[key] || {}).forEach((item) => {
+    const pAll = themeMapKeys.flatMap((key) =>
+      Object.values(originalThemeData[key] || {}).map(async (item) => {
         // skip write internal components
         if (item.source === 'dumi') return;
 
-        let contents = [];
         // parse exports for theme module
-        const exports = getModuleExports(item.source);
+        const exports = await getModuleExports(item.source);
+
+        const contents = [];
 
         // export default
         if (exports.includes('default')) {
@@ -355,13 +358,15 @@ export default DumiLoading;
           path: `dumi/theme/${key}/${item.specifier}.ts`,
           content: contents.join('\n'),
         });
-      });
-    });
+      }),
+    );
+
+    await Promise.all(pAll);
 
     const entryFile =
       api.config.resolve.entryFile &&
       [path.resolve(api.cwd, api.config.resolve.entryFile)].find(fs.existsSync);
-    const entryExports = entryFile ? getModuleExports(entryFile) : [];
+    const entryExports = entryFile ? await getModuleExports(entryFile) : [];
     const hasDefaultExport = entryExports.includes('default');
     const hasNamedExport = entryExports.some((exp) => exp !== 'default');
 

src/loaders/markdown/transformer/fixtures/embed/embed.md

@@ -3,3 +3,9 @@
 second line
 
 third line
+
+type:null
+
+:::success
+这是一条成功信息
+:::

src/loaders/markdown/transformer/fixtures/embed/expect.ts

@@ -2,6 +2,8 @@ import { IMdTransformerResult } from '../..';
 
 export default (ret: IMdTransformerResult) => {
   expect(ret.content).toEqual(
-    '<><div className="markdown"><h3 id="this-is-indexmd"><a aria-hidden="true" tabIndex="-1" href="#this-is-indexmd"><span className="icon icon-link" /></a>{"This is index.md"}</h3><h3 id="this-is-embedmd"><a aria-hidden="true" tabIndex="-1" href="#this-is-embedmd"><span className="icon icon-link" /></a>{"This is embed.md"}</h3><p>{$$contentTexts[0].value}</p><p>{$$contentTexts[1].value}</p><h3 id="this-is-embedmd-1"><a aria-hidden="true" tabIndex="-1" href="#this-is-embedmd-1"><span className="icon icon-link" /></a>{"This is embed.md"}</h3><h3 id="this-is-embedmd-2"><a aria-hidden="true" tabIndex="-1" href="#this-is-embedmd-2"><span className="icon icon-link" /></a>{"This is embed.md"}</h3><p>{$$contentTexts[2].value}</p><h3 id="this-is-embedmd-3"><a aria-hidden="true" tabIndex="-1" href="#this-is-embedmd-3"><span className="icon icon-link" /></a>{"This is embed.md"}</h3><p>{$$contentTexts[3].value}</p><p>{$$contentTexts[4].value}</p><h3 id="this-is-embedmd-4"><a aria-hidden="true" tabIndex="-1" href="#this-is-embedmd-4"><span className="icon icon-link" /></a>{"This is embed.md"}</h3><p>{$$contentTexts[5].value}</p><p>{$$contentTexts[6].value}</p></div></>',
+    '<><div className="markdown"><h3 id="this-is-indexmd"><a aria-hidden="true" tabIndex="-1" href="#this-is-indexmd"><span className="icon icon-link" /></a>{"This is index.md"}</h3><h3 id="this-is-embedmd"><a aria-hidden="true" tabIndex="-1" href="#this-is-embedmd"><span className="icon icon-link" /></a>{"This is embed.md"}</h3><p>{$$contentTexts[0].value}</p><p>{$$contentTexts[1].value}</p><p>{$$contentTexts[2].value}</p></div><Container type="success"><p>{$$contentTexts[3].value}</p></Container><div className="markdown"><h3 id="this-is-embedmd-1"><a aria-hidden="true" tabIndex="-1" href="#this-is-embedmd-1"><span className="icon icon-link" /></a>{"This is embed.md"}</h3><h3 id="this-is-embedmd-2"><a aria-hidden="true" tabIndex="-1" href="#this-is-embedmd-2"><span className="icon icon-link" /></a>{"This is embed.md"}</h3><p>{$$contentTexts[4].value}</p><h3 id="this-is-embedmd-3"><a aria-hidden="true" tabIndex="-1" href="#this-is-embedmd-3"><span className="icon icon-link" /></a>{"This is embed.md"}</h3><p>{$$contentTexts[5].value}</p><p>{$$contentTexts[6].value}</p><p>{$$contentTexts[7].value}</p></div><Container type="success"><p>{$$contentTexts[8].value}</p></Container><div className="markdown"><h3 id="this-is-embedmd-4"><a aria-hidden="true" tabIndex="-1" href="#this-is-embedmd-4"><span className="icon icon-link" /></a>{"This is embed.md"}</h3><p>{$$contentTexts[9].value}</p><p>{$$contentTexts[10].value}</p><p>{$$contentTexts[11].value}</p></div><Container type="success"><p>{$$contentTexts[12].value}</p></Container></>',
   );
+
+  expect(ret.meta.texts?.[2].value).toEqual('type:null');
 };

src/loaders/markdown/transformer/remarkEmbed.ts

@@ -8,6 +8,7 @@ import { winPath } from 'umi/plugin-utils';
 import type { FrozenProcessor, Transformer } from 'unified';
 import url from 'url';
 import type { IMdTransformerOptions } from '.';
+import remarkContainer from './remarkContainer';
 
 const EMBED_OPEN_TAG = '<embed ';
 const EMBED_CLOSE_TAG = '</embed>';
@@ -150,6 +151,7 @@ export default function remarkEmbed(
             // because directive & gfm is affect on micromark core parser rather than ast
             // and if they are not applied, the embed ast will be wrong
             .use(remarkDirective)
+            .use(remarkContainer)
             .use(remarkGfm)
             // for update relative src path
             .use(remarkReplaceSrc, {

src/utils.ts

@@ -4,6 +4,7 @@ import fs from 'fs';
 import yaml from 'js-yaml';
 import path from 'path';
 import { lodash, logger, winPath } from 'umi/plugin-utils';
+import { FS_CACHE_DIR } from './constants';
 
 /**
  * get route path from file-system path
@@ -81,14 +82,17 @@ export function parseCodeFrontmatter(raw: string) {
 /**
  * get file-system cache for specific namespace
  */
+let cacheDir = FS_CACHE_DIR;
 const caches: Record<string, ReturnType<typeof Cache>> = {};
-const CACHE_PATH = 'node_modules/.cache/dumi';
+export function _setFSCacheDir(dir: string) {
+  cacheDir = dir;
+}
 export function getCache(ns: string): (typeof caches)['0'] {
   // return fake cache if cache disabled
   if (process.env.DUMI_CACHE === 'none') {
     return { set() {}, get() {}, setSync() {}, getSync() {} } as any;
   }
-  return (caches[ns] ??= Cache({ basePath: path.join(CACHE_PATH, ns) }));
+  return (caches[ns] ??= Cache({ basePath: path.resolve(cacheDir, ns) }));
 }
 
 /**