dumi 2.3.0-alpha.8 → 2.3.0-beta.0

package/dist/loaders/markdown/index.js

@@ -40,8 +40,8 @@ var import_transformer = __toESM(require("./transformer"));
 var import_rehypeText = require("./transformer/rehypeText");
 function getDemoSourceFiles(demos = []) {
   return demos.reduce((ret, demo) => {
-    if ("sources" in demo) {
-      ret.push(...Object.values(demo.sources));
+    if ("resolveMap" in demo) {
+      ret.push(...Object.values(demo.resolveMap));
     }
     return ret;
   }, []);
@@ -49,6 +49,7 @@ function getDemoSourceFiles(demos = []) {
 function emitDefault(opts, ret) {
   const { frontmatter, demos } = ret.meta;
   const isTabContent = (0, import_tabs.isTabRouteFile)(this.resourcePath);
+  const wrapper = isTabContent ? "" : "DumiPage";
   if (demos && opts.onResolveDemos) {
     opts.onResolveDemos(demos);
   }
@@ -56,14 +57,21 @@ function emitDefault(opts, ret) {
     opts.onResolveAtomMeta(frontmatter.atomId, frontmatter);
   }
   return `${Object.values(opts.builtins).map((item) => `import ${item.specifier} from '${item.source}';`).join("\n")}
-import React from 'react';
-${isTabContent ? `import { useTabMeta } from 'dumi';` : `import { DumiPage, useRouteMeta } from 'dumi';`}
+import LoadingComponent from '@@/dumi/theme/loading';
+import React, { Suspense } from 'react';
+import { DumiPage, useTabMeta, useRouteMeta } from 'dumi';
+
+function DumiMarkdownInner() {
+  const { texts: ${import_rehypeText.CONTENT_TEXTS_OBJ_NAME} } = use${isTabContent ? "TabMeta" : "RouteMeta"}();
+
+  return ${ret.content};
+}
 
 // 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>`};
+  // wrap suspense for catch async meta data
+  return <${wrapper}><Suspense fallback={<LoadingComponent />}><DumiMarkdownInner /></Suspense></${wrapper}>;
 }
 
 export default DumiMarkdownContent;`;
@@ -77,7 +85,8 @@ export const demos = {
   {{#demos}}
   '{{{id}}}': {
     component: {{{component}}},
-    asset: {{{renderAsset}}}
+    asset: {{{renderAsset}}},
+    context: {{{renderContext}}}
   },
   {{/demos}}
 };`,
@@ -87,14 +96,26 @@ export const demos = {
         if (!("asset" in this))
           return "null";
         let { asset } = this;
-        const { sources } = this;
-        Object.keys(this.sources).forEach((file) => {
+        const { resolveMap } = this;
+        Object.keys(this.resolveMap).forEach((file) => {
           if (!asset.dependencies[file])
             return;
           asset = import_plugin_utils.lodash.cloneDeep(asset);
-          asset.dependencies[file].value = `{{{require('-!${sources[file]}?dumi-raw').default}}}`;
+          asset.dependencies[file].value = `{{{require('-!${resolveMap[file]}?dumi-raw').default}}}`;
         });
         return JSON.stringify(asset, null, 2).replace(/"{{{|}}}"/g, "");
+      },
+      renderContext: function renderContext() {
+        if (!("resolveMap" in this))
+          return "undefined";
+        const context = Object.entries(this.resolveMap).reduce(
+          (acc, [key, path]) => ({
+            ...acc,
+            [key]: `{{{require('${path}')}}}`
+          }),
+          {}
+        );
+        return JSON.stringify(context, null, 2).replace(/"{{{|}}}"/g, "");
       }
     }
   );
@@ -117,112 +138,21 @@ function emitDemoIndex(opts, ret) {
   );
 }
 function emitFrontmatter(opts, ret) {
-  const { frontmatter } = ret.meta;
-  return import_plugin_utils.Mustache.render(`export const frontmatter = {{{frontmatter}}};`, {
-    frontmatter: JSON.stringify(frontmatter)
-  });
-}
-function emitText(opts, ret) {
-  const { texts, toc } = ret.meta;
+  const { frontmatter, toc } = ret.meta;
   return import_plugin_utils.Mustache.render(
     `export const toc = {{{toc}}};
-export const texts = {{{texts}}};`,
+export const frontmatter = {{{frontmatter}}};`,
     {
       toc: JSON.stringify(toc),
-      texts: JSON.stringify(texts)
-    }
-  );
-}
-function emitScope(opts, ret) {
-  const { demos } = ret.meta;
-  const importReg = /import(?!(\stype)).*from.*;/g;
-  return import_plugin_utils.Mustache.render(
-    `{{#renderImport}}
-{{{.}}}
-{{/renderImport}}
-
-export const scopes = {
-{{#demos}}
-  '{{{id}}}': { {{{renderScope}}} },
-{{/demos}}
-}`,
-    {
-      demos,
-      renderImport: function renderImport() {
-        if (!demos)
-          return [];
-        const imports = {};
-        for (const demo of demos) {
-          if ("asset" in demo) {
-            const { asset } = demo;
-            Object.entries(asset.dependencies).forEach(([filename, file]) => {
-              if (filename.endsWith(".tsx")) {
-                const fileImports = file.value.match(importReg) || [];
-                fileImports.forEach((item) => {
-                  var _a;
-                  const scope = item.replace(/import(.*)from.*;/, "$1").trim();
-                  const dep = item.replace(/import.*from(.*);/, "$1").trim();
-                  const namedReg = /.*\{(.*)}/g;
-                  const namedScope = namedReg.test(scope) ? scope.replace(namedReg, "$1").split(",").map((item2) => item2.trim()).filter(Boolean) : [];
-                  const defaultReg = /(?:(?![,{]).)*/;
-                  const defaultScope = (_a = scope.match(defaultReg)) == null ? void 0 : _a[0].trim();
-                  imports[dep] ?? (imports[dep] = []);
-                  if (defaultScope) {
-                    const defaultImport = `default as ${defaultScope}`;
-                    if (!imports[dep].includes(defaultImport)) {
-                      imports[dep].push(defaultImport);
-                    }
-                  }
-                  if (namedScope.length) {
-                    for (const item2 of namedScope) {
-                      if (!imports[dep].includes(item2)) {
-                        imports[dep].push(item2);
-                      }
-                    }
-                  }
-                });
-              }
-            });
-          }
-        }
-        return Object.entries(imports).map(([key, value]) => {
-          return value.length ? `import { ${value.join(", ")} } from ${key};` : "";
-        }).filter(Boolean);
-      },
-      renderScope: function renderScope() {
-        if (!("asset" in this))
-          return "";
-        const { asset } = this;
-        const demoScopes = [];
-        Object.entries(asset.dependencies).forEach(([filename, file]) => {
-          if (filename.endsWith(".tsx")) {
-            const imports = file.value.match(importReg) || [];
-            const scopes = imports.reduce((acc, item) => {
-              const scope = item.replace(/import(.*)from.*;/, "$1").trim();
-              const scopeList = scope.replace(/[{}]/g, "").trim();
-              return [...acc, scopeList];
-            }, []);
-            demoScopes.push(...scopes);
-          }
-        });
-        return demoScopes.join(", ");
-      }
+      frontmatter: JSON.stringify(frontmatter)
     }
   );
 }
-function emitScopeIndex(opts, ret) {
-  const { demos } = ret.meta;
-  return import_plugin_utils.Mustache.render(
-    `export const scopeIndex = {
-{{#demos}}
-  '{{{id}}}': {{{getter}}},
-{{/demos}}
-};`,
-    {
-      demos,
-      getter: `() => import('${(0, import_plugin_utils.winPath)(this.resourcePath)}?type=scope')`
-    }
-  );
+function emitText(opts, ret) {
+  const { texts } = ret.meta;
+  return import_plugin_utils.Mustache.render(`export const texts = {{{texts}}};`, {
+    texts: JSON.stringify(texts)
+  });
 }
 function emit(opts, ret) {
   const { demos, embeds } = ret.meta;
@@ -237,10 +167,6 @@ function emit(opts, ret) {
       return emitFrontmatter.call(this, opts, ret);
     case "text":
       return emitText.call(this, opts, ret);
-    case "scope":
-      return emitScope.call(this, opts, ret);
-    case "scope-index":
-      return emitScopeIndex.call(this, opts, ret);
     default:
       return emitDefault.call(this, opts, ret);
   }

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

@@ -21,7 +21,7 @@ declare module 'vfile' {
             id: string;
             component: string;
             asset: IParsedBlockAsset['asset'];
-            sources: IParsedBlockAsset['sources'];
+            resolveMap: IParsedBlockAsset['resolveMap'];
         } | {
             id: string;
             component: string;

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

@@ -225,7 +225,7 @@ function rehypeDemo(opts) {
             demoIds.push(parseOpts.id);
             deferrers.push(
               (0, import_block.default)(parseOpts).then(
-                async ({ asset, sources, frontmatter }) => {
+                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;
@@ -293,7 +293,13 @@ function rehypeDemo(opts) {
                     id: asset.id,
                     component,
                     asset: techStack.generateMetadata ? await techStack.generateMetadata(asset, techStackOpts) : asset,
-                    sources: techStack.generateSources ? await techStack.generateSources(sources, techStackOpts) : sources
+                    /**
+                     * keep `generateSources` rather than `generateResolveMap` for compatibility
+                     */
+                    resolveMap: techStack.generateSources ? await techStack.generateSources(
+                      resolveMap,
+                      techStackOpts
+                    ) : resolveMap
                   };
                 }
               )

package/dist/loaders/page/index.js

@@ -44,7 +44,5 @@ function pageMetaLoader(raw) {
   frontmatter || (frontmatter = {});
   frontmatter.title ?? (frontmatter.title = import_plugin_utils.lodash.startCase(import_path.default.basename(pathWithoutIndex)));
   return `export const frontmatter = ${JSON.stringify(frontmatter)};
-export const toc = [];
-export const texts = [];
-export const demos = {};`;
+export const toc = [];`;
 }

package/dist/preset.js

@@ -52,8 +52,7 @@ var preset_default = (api) => {
       require.resolve("./features/assets"),
       require.resolve("./features/exportStatic"),
       require.resolve("./features/sitemap"),
-      require.resolve("./features/html2sketch"),
-      require.resolve("./features/live")
+      require.resolve("./features/html2sketch")
     ]
   };
 };

package/dist/templates/ContextWrapper.ts.tpl

@@ -3,8 +3,6 @@ import { useOutlet, history } from 'dumi';
 import { warning } from 'rc-util';
 import { SiteContext, type ISiteContext } from '{{{contextPath}}}';
 import { components } from '../meta/atoms';
-import { tabs } from '../meta/tabs';
-import { getDemoById } from '../meta/demos';
 import { locales } from '../locales/config';
 {{{defaultExport}}}
 {{{namedExport}}}
@@ -48,20 +46,18 @@ export default function DumiContextWrapper() {
       entryExports,
       demos: null,
       components,
-      tabs,
       locales,
       loading,
       setLoading,
       hostname,
       themeConfig,
       _2_level_nav_available,
-      getDemoById,
     };
 
     // Proxy do not warning since `Object.keys` will get nothing to loop
     Object.defineProperty(ctx, 'demos', {
       get: () => {
-        warning(false, '`demos` return empty in latest version.');
+        warning(false, '`demos` return empty in latest version, please use `useDemo` instead.');
         return {};
       },
     });
@@ -72,21 +68,17 @@ export default function DumiContextWrapper() {
     historyType,
     entryExports,
     components,
-    tabs,
     locales,
     loading,
     setLoading,
     hostname,
     themeConfig,
     _2_level_nav_available,
-    getDemoById,
   ]);
 
-
-
   return (
     <SiteContext.Provider value={context}>
       {outlet}
     </SiteContext.Provider>
   );
-}
+}

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

@@ -0,0 +1,160 @@
+import { filesMeta, tabsMeta } from '.';
+import type { IDemoData, IRouteMeta } from 'dumi/dist/client/theme-api/types';
+import { use } from 'dumi/dist/client/theme-api/utils';
+
+const demoIdMap = Object.keys(filesMeta).reduce((total, current) => {
+  if (filesMeta[current].demoIndex) {
+    const { ids, getter } = filesMeta[current].demoIndex;
+
+    ids.forEach((id) => {
+      total[id] = getter;
+    });
+  }
+
+  return total;
+}, {});
+
+const demosCache = new Map<string, Promise<IDemoData | undefined>>();
+
+/**
+ * expand context for source omit extension
+ * why not do this in compile-time?
+ * asset metadata also has extension and for reduce bundle size
+ */
+function expandDemoContext(context?: IDemoData['context']) {
+  if (context) {
+    Object.keys(context).forEach((src) => {
+      const withoutExt = src.match(/^(.+)\.(js|jsx|ts|tsx|json)$/)?.[1];
+
+      if (withoutExt && !context[withoutExt]) {
+        context[withoutExt] = context[src];
+      }
+    });
+  }
+}
+
+/**
+ * use demo data by id
+ */
+export function useDemo(id: string): IDemoData | undefined {
+  if (!demosCache.get(id)) {
+    demosCache.set(
+      id,
+      demoIdMap[id]?.().then(({ demos }) => {
+        // expand context for omit ext
+        expandDemoContext(demos[id].context);
+
+        return demos[id];
+      }),
+    );
+  }
+
+  return use(demosCache.get(id)!);
+}
+
+/**
+ * get all demos
+ */
+export async function getFullDemos() {
+  const demoFilesMeta = Object.entries(filesMeta).filter(
+    ([_id, meta]) => meta.demoIndex,
+  );
+
+  return Promise.all(
+    demoFilesMeta.map(async ([id, meta]) => ({
+      id,
+      demos: (await meta.demoIndex.getter()).demos as Record<string, IDemoData>,
+    })),
+  ).then((ret) =>
+    ret.reduce<Record<string, IDemoData>>((total, { id, demos }) => {
+      Object.values(demos).forEach((demo) => {
+        // set route id in runtime for reduce bundle size
+        demo.routeId = id;
+
+        // expand context for omit ext
+        expandDemoContext(demo.context);
+      });
+
+      return {
+        ...total,
+        ...demos,
+      };
+    }, {}),
+  );
+}
+
+type ITab = NonNullable<IRouteMeta['tabs']>[0];
+
+/**
+ * generate final data for tab
+ */
+function genTab(id: string, meta?: ITab['meta']): ITab {
+  return {
+    ...tabsMeta[id],
+    meta: meta ?? {
+      frontmatter: { title: tabsMeta[id].title },
+      toc: [],
+      texts: [],
+    },
+  };
+}
+
+/**
+ * get route meta by id
+ */
+export function getRouteMetaById<T extends { syncOnly?: boolean }>(
+  id: string,
+  opts?: T,
+): T extends { syncOnly: true }
+  ? undefined | IRouteMeta
+  : Promise<undefined | IRouteMeta> | undefined {
+  if (filesMeta[id]) {
+    const { frontmatter, toc, textGetter, tabs = [] } = filesMeta[id];
+    const routeMeta: IRouteMeta = {
+      frontmatter,
+      toc: toc,
+      texts: [],
+    };
+
+    if (opts?.syncOnly) {
+      routeMeta.tabs = tabs.map((tabId) =>
+        genTab(tabId, getRouteMetaById(tabId, opts)),
+      );
+    } else {
+      return new Promise(async (resolve) => {
+        if (textGetter) {
+          ({ texts: routeMeta.texts } = await textGetter());
+        }
+
+        routeMeta.tabs = await Promise.all(
+          tabs.map(async (tabId) =>
+            genTab(tabId, await getRouteMetaById(tabId, opts)),
+          ),
+        );
+        resolve(routeMeta);
+      });
+    }
+
+    return routeMeta;
+  }
+}
+
+/**
+ * get all routes meta
+ */
+export async function getFullRoutesMeta(): Promise<Record<string, IRouteMeta>> {
+  return await Promise.all(
+    Object.keys(filesMeta).map(async (id) => ({
+      id,
+      meta: await getRouteMetaById(id),
+    })),
+  ).then((ret) =>
+    ret.reduce(
+      (total, { id, meta }) => ({
+        ...total,
+        [id]: meta,
+      }),
+      {},
+    ),
+  );
+}

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

@@ -0,0 +1,26 @@
+{{#metaFiles}}
+import { frontmatter as fm{{{index}}}, toc as t{{{index}}} } from '{{{file}}}?type=frontmatter';
+{{#isMarkdown}}
+import { demoIndex as dmi{{{index}}} } from '{{{file}}}?type=demo-index';
+{{/isMarkdown}}
+{{/metaFiles}}
+
+export const filesMeta = {
+  {{#metaFiles}}
+  '{{{id}}}': {
+    frontmatter: fm{{{index}}},
+    toc: t{{{index}}},
+    {{#isMarkdown}}
+    demoIndex: dmi{{{index}}},
+    {{/isMarkdown}}
+    {{#tabs}}
+    tabs: {{{tabs}}},
+    {{/tabs}}
+    {{#isMarkdown}}
+    textGetter: () => import({{{chunkName}}}'{{{file}}}?type=text'),
+    {{/isMarkdown}}
+  },
+  {{/metaFiles}}
+}
+
+export { tabs as tabsMeta } from './tabs';

package/dist/templates/{meta-runtime.ts.tpl → meta/runtime.ts.tpl}

@@ -1,13 +1,12 @@
 import { warning } from 'rc-util';
-import { tabs } from './tabs';
-import { filesFrontmatter } from './frontmatter';
 import deepmerge from '{{{deepmerge}}}';
+import { getRouteMetaById } from './exports';
 
 // Proxy do not warning since `Object.keys` will get nothing to loop
 function wrapEmpty(meta, fieldName, defaultValue) {
   Object.defineProperty(meta, fieldName, {
     get: () => {
-      warning(false, `'${fieldName}' return empty in latest version.`);
+      warning(false, `'${fieldName}' return empty in latest version, please use \`useRouteMeta\` instead.`);
       return defaultValue;
     },
   });
@@ -15,32 +14,22 @@ function wrapEmpty(meta, fieldName, defaultValue) {
 
 export const patchRoutes = ({ routes }) => {
   Object.values(routes).forEach((route) => {
-    if (filesFrontmatter[route.id]) {
-      if (process.env.NODE_ENV === 'production' && (route.meta?.frontmatter?.debug || filesFrontmatter[route.id].debug)) {
+    const routeMeta = getRouteMetaById(route.id, { syncOnly: true });
+
+    if (routeMeta) {
+      if (process.env.NODE_ENV === 'production' && (route.meta?.frontmatter?.debug || routeMeta.debug)) {
         // hide route in production which set hide frontmatter
         delete routes[route.id];
       } else {
         // merge meta to route object
-        route.meta = deepmerge(route.meta, { frontmatter: filesFrontmatter[route.id] });
+        route.meta = deepmerge(route.meta, routeMeta);
 
-        wrapEmpty(route.meta, 'demos', {});
+        wrapEmpty(route.meta, 'toc', []);
         wrapEmpty(route.meta, 'texts', []);
 
-        // apply real tab data from id
-        route.meta.tabs = route.meta.tabs?.map((id) => {
-          const meta = {
-            frontmatter: filesFrontmatter[id] || { title: tabs[id].title },
-            toc: [],
-            texts: [],
-          }
-
-          wrapEmpty(meta, 'demos', {});
-          wrapEmpty(meta, 'texts', []);
-
-          return {
-            ...tabs[id],
-            meta,
-          }
+        route.meta.tabs?.forEach((tab) => {
+          wrapEmpty(tab, 'toc', []);
+          wrapEmpty(tab, 'texts', []);
         });
       }
     }

package/dist/types.d.ts

@@ -7,7 +7,7 @@ import type { IThemeLoadResult } from "./features/theme/loader";
 import type { IModify } from '@umijs/core';
 import type { AssetsPackage, ExampleBlockAsset } from 'dumi-assets-types';
 import type { Element } from 'hast';
-import type { defineConfig as defineUmiConfig, IApi as IUmiApi } from 'umi';
+import type { IApi as IUmiApi, defineConfig as defineUmiConfig } from 'umi';
 type Subset<K> = {
     [attr in keyof K]?: K[attr] extends Array<any> ? K[attr] : K[attr] extends Function | undefined ? K[attr] : K[attr] extends object ? Subset<K[attr]> : K[attr] extends object | null ? Subset<K[attr]> | null : K[attr] extends object | null | undefined ? Subset<K[attr]> | null | undefined : K[attr];
 };
@@ -80,7 +80,7 @@ export declare abstract class IDumiTechStack {
     /**
      * generator for return file path of demo sources
      */
-    abstract generateSources?(sources: IParsedBlockAsset['sources'], opts: Parameters<NonNullable<IDumiTechStack['generateMetadata']>>[1]): Promise<IParsedBlockAsset['sources']> | IParsedBlockAsset['sources'];
+    abstract generateSources?(sources: IParsedBlockAsset['resolveMap'], opts: Parameters<NonNullable<IDumiTechStack['generateMetadata']>>[1]): Promise<IParsedBlockAsset['resolveMap']> | IParsedBlockAsset['resolveMap'];
 }
 export type IApi = IUmiApi & {
     config: IDumiConfig & {

package/index.d.ts

@@ -1,3 +1,4 @@
+export * from '@@/dumi/exports';
 export { Root as HastRoot } from 'hast';
 export * from 'umi';
 export {
@@ -7,8 +8,4 @@ export {
 export * from './dist';
 // override umi exported defineConfig
 export { defineConfig } from './dist';
-export * from './dist/client/theme-api';
 export { IApi } from './dist/types';
-export function getRouteMetaById(id: string): Promise<any>;
-/** @private Internal usage. Safe to remove */
-export function loadFilesMeta(): Promise<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.3.0-alpha.8",
+  "version": "2.3.0-beta.0",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",
@@ -122,6 +122,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-error-boundary": "^4.0.10",
     "react-intl": "^6.4.4",
+    "react-loading-skeleton": "^3.1.1",
     "react-simple-code-editor": "^0.13.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-remove-comments": "^5.0.0",

package/theme-default/builtins/Previewer/index.d.ts

@@ -1,4 +1,4 @@
-import { IPreviewerProps } from 'dumi';
+import { type IPreviewerProps } from 'dumi';
 import { type FC } from 'react';
 import './index.less';
 declare const Previewer: FC<IPreviewerProps>;