dumi 2.3.0-alpha.2 → 2.3.0-alpha.3

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

@@ -20,4 +20,5 @@ export declare const useSiteSearch: () => {
     setKeywords: (val: string) => void;
     result: ISearchResult;
     loading: boolean;
+    loadSearchData: () => void;
 };

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

@@ -48,10 +48,10 @@ export var useSiteSearch = function useSiteSearch() {
   var setter = useCallback(function (val) {
     setLoading(true);
     setKeywords(val);
-    if (val) {
-      setEnabled(true);
-    }
   }, []);
+  var loadSearchData = function loadSearchData() {
+    return setEnabled(true);
+  };
   var _useSearchData = useSearchData(enabled),
     _useSearchData2 = _slicedToArray(_useSearchData, 2),
     filledRoutes = _useSearchData2[0],
@@ -112,6 +112,7 @@ export var useSiteSearch = function useSiteSearch() {
     keywords: keywords,
     setKeywords: setter,
     result: result,
-    loading: mergedLoading
+    loading: mergedLoading,
+    loadSearchData: loadSearchData
   };
 };

package/dist/client/theme-api/useSiteSearch/useSearchData.js

@@ -23,11 +23,11 @@ export default function useSearchData(enabled) {
     tabs = _useSiteData.tabs;
   React.useEffect(function () {
     if (enabled) {
-      loadFilesMeta().then(function (data) {
+      loadFilesMeta(Object.keys(routes)).then(function (data) {
         setFilesMeta(data);
       });
     }
-  }, [enabled]);
+  }, [enabled, routes]);
   return React.useMemo(function () {
     if (!filesMeta) {
       return [null, null];
@@ -67,6 +67,7 @@ export default function useSearchData(enabled) {
       Object.values(meta.demos).forEach(function (demo) {
         demo.routeId = id;
       });
+
       // merge demos
       Object.assign(acc, meta.demos);
       return acc;

package/dist/features/compile/index.js

@@ -33,7 +33,6 @@ __export(compile_exports, {
 });
 module.exports = __toCommonJS(compile_exports);
 var import_react = __toESM(require("../../techStacks/react"));
-var import_assets = require("../assets");
 var compile_default = (api) => {
   api.describe({ key: "dumi:compile" });
   api.register({
@@ -68,22 +67,7 @@ var compile_default = (api) => {
       locales: api.config.locales,
       pkg: api.pkg
     };
-    memo.module.rule("dumi-md").type("javascript/auto").test(/\.md$/).oneOf("md-meta").resourceQuery(/meta$/).use("babel-loader").loader(babelInUmi.loader).options(babelInUmi.options).end().use("md-meta-loader").loader(loaderPath).options({
-      ...loaderBaseOpts,
-      mode: "meta",
-      onResolveDemos(demos) {
-        const assets = demos.reduce(
-          (ret, demo) => {
-            if ("asset" in demo)
-              ret.push(demo.asset);
-            return ret;
-          },
-          []
-        );
-        (0, import_assets.addExampleAssets)(assets);
-      },
-      onResolveAtomMeta: import_assets.addAtomMeta
-    }).end().end().oneOf("md-demo").resourceQuery(/demo$/).use("babel-loader").loader(babelInUmi.loader).options(babelInUmi.options).end().use("md-demo-loader").loader(loaderPath).options({
+    memo.module.rule("dumi-md").type("javascript/auto").test(/\.md$/).oneOf("md-demo").resourceQuery(/demo$/).use("babel-loader").loader(babelInUmi.loader).options(babelInUmi.options).end().use("md-demo-loader").loader(loaderPath).options({
       ...loaderBaseOpts,
       mode: "demo"
     }).end().end().oneOf("md-demo-index").resourceQuery(/demo-index$/).use("md-demo-index-loader").loader(loaderPath).options({

package/dist/features/meta.js

@@ -35,6 +35,7 @@ __export(meta_exports, {
 });
 module.exports = __toCommonJS(meta_exports);
 var import_constants = require("../constants");
+var import_utils = require("../utils");
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
 var import_tabs = require("./tabs");
@@ -103,7 +104,18 @@ var meta_default = (api) => {
       path: "dumi/meta/route-meta.ts",
       tplPath: (0, import_plugin_utils.winPath)((0, import_path.join)(import_constants.TEMPLATES_DIR, "meta-route.ts.tpl")),
       context: {
-        metaFiles: mdFiles
+        metaFiles: mdFiles,
+        chunkName: function chunkName() {
+          var _a;
+          if (!("file" in this)) {
+            return "";
+          }
+          return `/* webpackChunkName: "${(0, import_utils.generateMetaChunkName)(
+            this.file,
+            api.cwd,
+            (_a = api.config.locales) == null ? void 0 : _a.map(({ id }) => id)
+          )}" */`;
+        }
       }
     });
     api.writeTmpFile({

package/dist/loaders/markdown/index.js

@@ -46,44 +46,6 @@ function getDemoSourceFiles(demos = []) {
     return ret;
   }, []);
 }
-function emitMeta(opts, ret) {
-  const { frontmatter, toc, texts, demos } = ret.meta;
-  return import_plugin_utils.Mustache.render(
-    `import React from 'react';
-
-export const demos = {
-  {{#demos}}
-  '{{{id}}}': {
-    component: {{{component}}},
-    asset: {{{renderAsset}}}
-  },
-  {{/demos}}
-};
-export const frontmatter = {{{frontmatter}}};
-export const toc = {{{toc}}};
-export const texts = {{{texts}}};
-`,
-    {
-      demos,
-      frontmatter: JSON.stringify(frontmatter),
-      toc: JSON.stringify(toc),
-      texts: JSON.stringify(texts),
-      renderAsset: function renderAsset() {
-        if (!("asset" in this))
-          return "null";
-        let { asset } = this;
-        const { sources } = this;
-        Object.keys(this.sources).forEach((file) => {
-          if (!asset.dependencies[file])
-            return;
-          asset = import_plugin_utils.lodash.cloneDeep(asset);
-          asset.dependencies[file].value = `{{{require('-!${sources[file]}?dumi-raw').default}}}`;
-        });
-        return JSON.stringify(asset, null, 2).replace(/"{{{|}}}"/g, "");
-      }
-    }
-  );
-}
 function emitDefault(opts, ret) {
   const { frontmatter, demos } = ret.meta;
   const isTabContent = (0, import_tabs.isTabRouteFile)(this.resourcePath);
@@ -95,14 +57,12 @@ function emitDefault(opts, ret) {
   }
   return `${Object.values(opts.builtins).map((item) => `import ${item.specifier} from '${item.source}';`).join("\n")}
 import React from 'react';
-${isTabContent ? `` : `import { DumiPage } from 'dumi';`}
-import { texts as ${import_rehypeText.CONTENT_TEXTS_OBJ_NAME} } from '${(0, import_plugin_utils.winPath)(
-    this.resourcePath
-  )}?type=text';
+${isTabContent ? `import { useTabMeta } from 'dumi';` : `import { DumiPage, useRouteMeta } from 'dumi';`}
 
 // export named function for fastRefresh
 // ref: https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#edits-always-lead-to-full-reload
 function DumiMarkdownContent() {
+  const { texts: ${import_rehypeText.CONTENT_TEXTS_OBJ_NAME} } = use${isTabContent ? "TabMeta" : "RouteMeta"}();
   return ${isTabContent ? ret.content : `<DumiPage>${ret.content}</DumiPage>`};
 }
 
@@ -148,7 +108,11 @@ function emitDemoIndex(opts, ret) {
 };`,
     {
       ids: JSON.stringify(demos == null ? void 0 : demos.map((demo) => demo.id)),
-      getter: `() => import('${(0, import_plugin_utils.winPath)(this.resourcePath)}?type=demo')`
+      getter: `() => import(/* webpackChunkName: "${(0, import_utils.generateMetaChunkName)(
+        this.resourcePath,
+        opts.cwd,
+        opts.locales.map(({ id }) => id)
+      )}" */'${(0, import_plugin_utils.winPath)(this.resourcePath)}?type=demo')`
     }
   );
 }
@@ -174,8 +138,6 @@ function emit(opts, ret) {
   embeds.forEach((file) => this.addDependency(file));
   getDemoSourceFiles(demos).forEach((file) => this.addDependency(file));
   switch (opts.mode) {
-    case "meta":
-      return emitMeta.call(this, opts, ret);
     case "demo":
       return emitDemo.call(this, opts, ret);
     case "demo-index":

package/dist/templates/meta-demos.ts.tpl

@@ -2,7 +2,7 @@
 import { demoIndex as dmi{{{index}}} } from '{{{file}}}?type=demo-index';
 {{/metaFiles}}
 
-const demoIndexes: Record<string, { ids: string[], getter: () => Promise<any> }> = {
+export const demoIndexes: Record<string, { ids: string[], getter: () => Promise<any> }> = {
   {{#metaFiles}}
   '{{{id}}}': dmi{{{index}}},
   {{/metaFiles}}
@@ -31,4 +31,4 @@ export const getDemoById = async (id: string) => {
   const { demos }: any = await getter() || {};
 
   return demos?.[id];
-};
+};

package/dist/templates/meta-route.ts.tpl

@@ -4,7 +4,7 @@ import { filesFrontmatter } from './frontmatter';
 const files = {
 {{#metaFiles}}
   '{{{id}}}': {
-    textGetter: () => import('{{{file}}}?type=text'),
+    textGetter: () => import({{{chunkName}}}'{{{file}}}?type=text'),
     {{#tabs}}
     tabs: {{{tabs}}},
     {{/tabs}}

package/dist/templates/meta-search.ts.tpl

@@ -1,43 +1,41 @@
 // This will bundle all the site demos and meta data into one file
 // which should only async load on search
-const filesMetaTabs = {
-  {{#metaFiles}}
-  {{#tabs}}
-  '{{{id}}}': {{{tabs}}},
-  {{/tabs}}
-  {{/metaFiles}}
-}
+import { getRouteMetaById } from './route-meta';
+import { demoIndexes } from './demos';
+import { filesFrontmatter } from './frontmatter';
 
 // generate demos data in runtime, for reuse route.id to reduce bundle size
 export const demos = {};
 
 /** @private Internal usage. Safe to refactor. */
-export async function loadFilesMeta() {
+export async function loadFilesMeta(idList: string[]) {
   const metaMap: Record<string, any> = {};
-  const idList = [
-    {{#metaFiles}}
-    '{{{id}}}',
-    {{/metaFiles}}
-  ];
 
   {{#metaFiles}}
-  metaMap['{{{id}}}'] = import('{{{file}}}?type=meta');
+  if (idList.includes('{{{id}}}')) {
+    metaMap['{{{id}}}'] = async () => {
+      const routeMeta = await getRouteMetaById('{{{id}}}');
+      const demo = await demoIndexes['{{{id}}}']?.getter() || {};
+      return {
+        frontmatter: filesFrontmatter['{{{id}}}'] ?? {},
+        toc: routeMeta?.toc ?? [],
+        texts: routeMeta?.texts ?? [],
+        tabs: routeMeta?.tabs ?? [],
+        demos: demo?.demos ?? {},
+      };
+    };
+  }
   {{/metaFiles}}
 
   // Wait for all meta data to be loaded
-  const metaList = await Promise.all(idList.map(id => metaMap[id]));
+  const metaList = await Promise.all(Object.entries(metaMap).map(([id, getter]) => getter()));
 
   // Merge into filesMeta
   const filesMeta = {};
 
-  idList.forEach((id, index) => {
-    const meta = metaList[index];
-
-    filesMeta[id] = {
-      ...meta,
-      tabs: filesMetaTabs[id],
-    };
+  Object.entries(metaMap).forEach(([id], index) => {
+    filesMeta[id] = metaList[index];
   });
 
   return filesMeta;
-}
+}

package/dist/utils.d.ts

@@ -25,7 +25,7 @@ export declare function parseCodeFrontmatter(raw: string): {
  * get file-system cache for specific namespace
  */
 declare const caches: Record<string, ReturnType<typeof Cache>>;
-export declare function getCache(ns: string): typeof caches['0'];
+export declare function getCache(ns: string): (typeof caches)['0'];
 /**
  * try to get father config
  */
@@ -34,4 +34,14 @@ export declare function tryFatherBuildConfigs(cwd: string): Promise<any[]>;
  * get root dir for monorepo project
  */
 export declare function getProjectRoot(cwd: string): string;
+/**
+ *
+ * transform component into webpack chunkName
+ * @export
+ * @param {string} component component path
+ * @param {string} [cwdPath] current root path
+ * @return {*}  {string}
+ */
+export declare function componentToChunkName(component: string, cwdPath?: string): string;
+export declare function generateMetaChunkName(path: string, cwd: string, locales?: string[]): string;
 export {};

package/dist/utils.js

@@ -29,6 +29,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/utils.ts
 var utils_exports = {};
 __export(utils_exports, {
+  componentToChunkName: () => componentToChunkName,
+  generateMetaChunkName: () => generateMetaChunkName,
   getCache: () => getCache,
   getFileContentByRegExp: () => getFileContentByRegExp,
   getFileIdFromFsPath: () => getFileIdFromFsPath,
@@ -126,8 +128,31 @@ function getProjectRoot(cwd) {
   }
   return (0, import_plugin_utils.winPath)(cwd);
 }
+function lastSlash(str) {
+  return str[str.length - 1] === "/" ? str : `${str}/`;
+}
+function componentToChunkName(component, cwdPath = "/") {
+  const cwd = (0, import_plugin_utils.winPath)(cwdPath);
+  return typeof component === "string" ? component.replace(
+    new RegExp(
+      `^(${// match app cwd first
+      import_plugin_utils.lodash.escapeRegExp(lastSlash(cwd))})`
+    ),
+    ""
+  ).replace(/^.(\/|\\)/, "").replace(/(\/|\\)/g, "__").replace(/^src__/, "").replace(/\.\.__/g, "").replace(/^pages__/, "p__") : "";
+}
+function generateMetaChunkName(path2, cwd, locales = []) {
+  const chunkName = componentToChunkName(path2, cwd);
+  const dir = chunkName.replace(/^(.*?)_.*/, "$1");
+  const localeRegExp = new RegExp(`.*(${locales.join("|")}).*`);
+  const ifLocale = locales.length && localeRegExp.test(chunkName);
+  const locale = ifLocale ? `__${chunkName.replace(localeRegExp, "$1")}` : "";
+  return `meta__${dir}${locale}`;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  componentToChunkName,
+  generateMetaChunkName,
   getCache,
   getFileContentByRegExp,
   getFileIdFromFsPath,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.3.0-alpha.2",
+  "version": "2.3.0-alpha.3",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",

package/theme-default/slots/SearchBar/Input.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 export declare const Input: React.ForwardRefExoticComponent<{
     onChange: (keywords: string) => void;
-} & Pick<NativeInputProps, "onFocus" | "onBlur"> & React.RefAttributes<HTMLInputElement>>;
+} & Pick<NativeInputProps, "onFocus" | "onBlur" | "onMouseEnter"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/theme-default/slots/SearchBar/Input.js

@@ -19,6 +19,7 @@ export var Input = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     onFocus: props.onFocus,
     onBlur: props.onBlur,
+    onMouseEnter: props.onMouseEnter,
     onKeyDown: function onKeyDown(ev) {
       if (['ArrowDown', 'ArrowUp'].includes(ev.key)) ev.preventDefault();
       // esc to blur input

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

@@ -37,7 +37,8 @@ var SearchBar = function SearchBar() {
     keywords = _useSiteSearch.keywords,
     setKeywords = _useSiteSearch.setKeywords,
     result = _useSiteSearch.result,
-    loading = _useSiteSearch.loading;
+    loading = _useSiteSearch.loading,
+    loadSearchData = _useSiteSearch.loadSearchData;
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     modalVisible = _useState6[0],
@@ -86,7 +87,10 @@ var SearchBar = function SearchBar() {
     className: "dumi-default-search-bar-svg"
   }), /*#__PURE__*/React.createElement(Input, {
     onFocus: function onFocus() {
-      return setFocusing(true);
+      setFocusing(true);
+    },
+    onMouseEnter: function onMouseEnter() {
+      loadSearchData();
     },
     onBlur: function onBlur() {
       // wait for item click