dumi 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/assetParsers/atom.d.ts

@@ -1,25 +1,21 @@
-import { SchemaParser, SchemaResolver } from 'dumi-afx-deps/compiled/parser';
-import type { webpack } from 'umi';
-declare class AtomParserWatchWebpackPlugin {
-    resolveDir: string;
-    onWatchRun: (files: string[]) => void;
-    constructor(opts: {
-        resolveDir: string;
-        onWatchRun: typeof AtomParserWatchWebpackPlugin.prototype.onWatchRun;
-    });
-    apply(compiler: webpack.Compiler): void;
-}
+import { AtomComponentAsset, AtomFunctionAsset } from 'dumi-assets-types';
 declare class AtomAssetsParser {
-    parser: SchemaParser;
-    resolver: Promise<SchemaResolver> | undefined;
-    resolveDir: string;
-    unresolvedFiles: string[];
+    private entryDir;
+    private resolveDir;
+    private unresolvedFiles;
+    private parser;
+    private resolverDeferrer;
+    private watcher;
+    private cbs;
     constructor(opts: {
         entryFile: string;
         resolveDir: string;
+        watch?: boolean;
     });
-    parse(): Promise<SchemaResolver>;
-    patchUnresolvedFiles(files: string[]): void;
-    getWebpackWatchPlugin(): AtomParserWatchWebpackPlugin;
+    parse(): Promise<{
+        components: Record<string, AtomComponentAsset>;
+        functions: Record<string, AtomFunctionAsset>;
+    }>;
+    watch(cb: AtomAssetsParser['cbs'][number]): void;
 }
 export default AtomAssetsParser;

package/dist/assetParsers/atom.js

@@ -28,22 +28,14 @@ module.exports = __toCommonJS(atom_exports);
 var import_parser = require("dumi-afx-deps/compiled/parser");
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
-var AtomParserWatchWebpackPlugin = class {
-  constructor(opts) {
-    this.resolveDir = opts.resolveDir;
-    this.onWatchRun = opts.onWatchRun;
-  }
-  apply(compiler) {
-    compiler.hooks.watchRun.tap(this.constructor.name, (compilation) => {
-      const files = Array.from(compilation.watchFileSystem.watcher.fileWatchers.keys());
-      this.onWatchRun(files.map((file) => (0, import_plugin_utils.winPath)(import_path.default.relative(this.resolveDir, file))).filter((file) => /\.(j|t)sx?$/.test(file) && !file.startsWith("../") && !file.includes(".umi")));
-    });
-  }
-};
+var MAX_PARSE_SIZE = 1024 * 512;
 var AtomAssetsParser = class {
   constructor(opts) {
     this.unresolvedFiles = [];
+    this.watcher = null;
+    this.cbs = [];
     this.resolveDir = opts.resolveDir;
+    this.entryDir = import_path.default.relative(opts.resolveDir, import_path.default.dirname(opts.entryFile));
     this.parser = new import_parser.SchemaParser({
       entryPath: opts.entryFile,
       basePath: opts.resolveDir,
@@ -51,23 +43,69 @@ var AtomAssetsParser = class {
     });
   }
   async parse() {
-    if (!this.resolver || this.unresolvedFiles.length) {
-      this.resolver = (async () => {
+    if (!this.resolverDeferrer || this.unresolvedFiles.length) {
+      this.resolverDeferrer = (async () => {
         await this.parser.patch(this.unresolvedFiles);
         return new import_parser.SchemaResolver(await this.parser.parse());
       })();
     }
-    return this.resolver;
-  }
-  patchUnresolvedFiles(files) {
-    this.unresolvedFiles.push(...files);
-  }
-  getWebpackWatchPlugin() {
-    return new AtomParserWatchWebpackPlugin({
-      resolveDir: this.resolveDir,
-      onWatchRun: (files) => this.parser.patch(files)
+    return this.resolverDeferrer.then((resolver) => {
+      const components = {};
+      const functions = {};
+      resolver.componentList.forEach((id) => {
+        let propsConfig = resolver.getComponent(id).props;
+        const size = Buffer.byteLength(JSON.stringify(propsConfig));
+        if (size > MAX_PARSE_SIZE) {
+          propsConfig = { type: "object", properties: {} };
+          import_plugin_utils.logger.warn(`Parsed component ${id} props size ${size} exceeds 512KB, skip it.`);
+        }
+        components[id] = {
+          type: "COMPONENT",
+          id,
+          title: id,
+          propsConfig
+        };
+      });
+      resolver.functionList.forEach((id) => {
+        let signature = resolver.getFunction(id).signature;
+        const size = Buffer.byteLength(JSON.stringify(signature));
+        if (size > MAX_PARSE_SIZE) {
+          signature = { arguments: [] };
+          import_plugin_utils.logger.warn(`Parsed function ${id} signature size ${size} exceeds 512KB, skip it.`);
+        }
+        functions[id] = {
+          type: "FUNCTION",
+          id,
+          title: id,
+          signature
+        };
+      });
+      return { components, functions };
     });
   }
+  watch(cb) {
+    this.cbs.push(cb);
+    if (!this.watcher) {
+      const lazyParse = import_plugin_utils.lodash.debounce(() => {
+        this.parse().then((data) => this.cbs.forEach((cb2) => cb2(data)));
+      }, 100);
+      this.watcher = import_plugin_utils.chokidar.watch(this.entryDir, {
+        cwd: this.resolveDir,
+        ignored: [
+          "**/.*",
+          "**/.*/**",
+          "**/_*",
+          "**/_*/**",
+          "**/*.{md,less,scss,sass,styl,css}"
+        ]
+      }).on("all", (ev, file) => {
+        if (["add", "change"].includes(ev) && /\.(j|t)sx?$/.test(file)) {
+          this.unresolvedFiles.push(file);
+          lazyParse();
+        }
+      });
+    }
+  }
 };
 var atom_default = AtomAssetsParser;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/assetParsers/block.d.ts

@@ -1,13 +1,10 @@
+import { parseCodeFrontmatter } from "../utils";
 import type { ExampleBlockAsset } from 'dumi-assets-types';
 export interface IParsedBlockAsset {
     asset: ExampleBlockAsset;
     sources: Record<string, string>;
     frontmatter: ReturnType<typeof parseCodeFrontmatter>['frontmatter'];
 }
-declare function parseCodeFrontmatter(raw: string): {
-    code: string;
-    frontmatter: Record<string, any> | null;
-};
 declare function parseBlockAsset(opts: {
     fileAbsPath: string;
     id: string;

package/dist/assetParsers/block.js

@@ -25,21 +25,11 @@ __export(block_exports, {
   default: () => block_default
 });
 module.exports = __toCommonJS(block_exports);
+var import_utils = require("../utils");
 var import_esbuild = require("@umijs/bundler-utils/compiled/esbuild");
 var import_fs = __toESM(require("fs"));
-var import_js_yaml = __toESM(require("js-yaml"));
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
-function parseCodeFrontmatter(raw) {
-  const [, comment = "", code = ""] = raw.replace(/^\n\s*/, "").match(/^(\/\*\*[^]*?\n\s*\*\/)?(?:\s|\n)*([^]+)?$/);
-  const yamlComment = comment.replace(/^\/|\/$/g, "").replace(/(^|\n)\s*\*+/g, "$1");
-  let frontmatter = null;
-  try {
-    frontmatter = import_js_yaml.default.load(yamlComment);
-  } catch {
-  }
-  return { code: frontmatter ? code : raw, frontmatter };
-}
 async function parseBlockAsset(opts) {
   const asset = {
     type: "BLOCK",
@@ -101,7 +91,7 @@ async function parseBlockAsset(opts) {
                 value: opts.entryPointCode ?? import_fs.default.readFileSync(args.path, "utf-8")
               };
               if (isEntryPoint) {
-                const { code, frontmatter } = parseCodeFrontmatter(asset.dependencies[filename].value);
+                const { code, frontmatter } = (0, import_utils.parseCodeFrontmatter)(asset.dependencies[filename].value);
                 if (frontmatter) {
                   asset.dependencies[filename].value = code;
                   result.frontmatter = frontmatter;

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

@@ -11,9 +11,10 @@ export var DumiDemo = function DumiDemo(props) {
   var _demos$props$demo$id = demos[props.demo.id],
       component = _demos$props$demo$id.component,
       asset = _demos$props$demo$id.asset;
+  if (props.demo.inline) return /*#__PURE__*/createElement(component);
   return /*#__PURE__*/React.createElement(Previewer, _extends({
     asset: asset,
     demoUrl: // allow user override demoUrl by frontmatter
-    props.previewerProps.demoUrl || "".concat(SP_ROUTE_PREFIX, "demos/").concat(props.demo.id)
+    props.previewerProps.demoUrl || "/".concat(SP_ROUTE_PREFIX, "demos/").concat(props.demo.id)
   }, props.previewerProps), /*#__PURE__*/createElement(component));
 };

package/dist/client/theme-api/DumiDemoGrid.js

@@ -53,7 +53,8 @@ export var DumiDemoGrid = function DumiDemoGrid(props) {
     return /*#__PURE__*/React.createElement("section", {
       style: {
         flex: 1,
-        padding: 8
+        padding: 8,
+        width: 0
       },
       key: String(i)
     }, col.map(function (item) {

package/dist/client/theme-api/DumiPage.d.ts

@@ -0,0 +1,4 @@
+import { type FC, type ReactNode } from 'react';
+export declare const DumiPage: FC<{
+    children: ReactNode;
+}>;

package/dist/client/theme-api/DumiPage.js

@@ -0,0 +1,60 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { useLocation, useRouteMeta, useSiteData } from 'dumi';
+import ContentTabs from 'dumi/theme/slots/ContentTabs';
+import React, { useEffect, useState } from 'react';
+import { useTabQueryState } from "./useTabMeta";
+export var DumiPage = function DumiPage(props) {
+  var _useLocation = useLocation(),
+      hash = _useLocation.hash;
+
+  var _useRouteMeta = useRouteMeta(),
+      tabs = _useRouteMeta.tabs;
+
+  var _useTabQueryState = useTabQueryState(),
+      _useTabQueryState2 = _slicedToArray(_useTabQueryState, 2),
+      tabKey = _useTabQueryState2[0],
+      setTabKey = _useTabQueryState2[1];
+
+  var _useState = useState(function () {
+    return tabs === null || tabs === void 0 ? void 0 : tabs.find(function (_ref) {
+      var key = _ref.key;
+      return key === tabKey;
+    });
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      tab = _useState2[0],
+      setTab = _useState2[1];
+
+  var _useSiteData = useSiteData(),
+      setLoading = _useSiteData.setLoading; // update loading status when page loaded
+
+
+  useEffect(function () {
+    setLoading(false);
+  }, []); // handle hash change
+
+  useEffect(function () {
+    var id = hash.replace('#', '');
+    var elm = id && document.getElementById(id);
+    if (elm) elm.scrollIntoView();
+  }, [hash]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContentTabs, {
+    tabs: tabs,
+    tabKey: tabKey,
+    onChange: function onChange(val) {
+      setTab(val);
+      setTabKey(val === null || val === void 0 ? void 0 : val.key);
+    }
+  }), tab ? /*#__PURE__*/React.createElement(tab.components.default) : props.children);
+};

package/dist/client/theme-api/context.d.ts

@@ -1,10 +1,15 @@
+import type { PICKED_PKG_FIELDS } from "../../constants";
+import type { AtomComponentAsset } from 'dumi-assets-types';
 import { type ComponentType } from 'react';
 import type { ILocalesConfig, IPreviewerProps, IThemeConfig } from './types';
 interface ISiteContext {
+    pkg: Partial<Record<keyof typeof PICKED_PKG_FIELDS, any>>;
     demos: Record<string, {
         component: ComponentType;
         asset: IPreviewerProps['asset'];
+        routeId: string;
     }>;
+    components: Record<string, AtomComponentAsset>;
     locales: NonNullable<ILocalesConfig>;
     themeConfig: IThemeConfig;
     loading: boolean;

package/dist/client/theme-api/context.js

@@ -1,6 +1,8 @@
 import { createContext, useContext } from 'react';
 export var SiteContext = /*#__PURE__*/createContext({
+  pkg: {},
   demos: {},
+  components: {},
   locales: [],
   themeConfig: {},
   loading: false,

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

@@ -1,9 +1,13 @@
-export { useIntl } from 'react-intl';
+export { createIntlCache, defineMessages, FormattedDate, FormattedDateParts, FormattedDisplayName, FormattedList, FormattedMessage, FormattedNumber, FormattedNumberParts, FormattedPlural, FormattedRelativeTime, FormattedTime, FormattedTimeParts, injectIntl, IntlContext, IntlProvider, RawIntlProvider, useIntl, } from 'react-intl';
 export { useSiteData } from './context';
 export { DumiDemo } from './DumiDemo';
 export { DumiDemoGrid } from './DumiDemoGrid';
+export { DumiPage } from './DumiPage';
 export type { IPreviewerProps } from './types';
+export { useAtomAssets } from './useAtomAssets';
 export { useLocale } from './useLocale';
 export { useNavData } from './useNavData';
 export { useRouteMeta } from './useRouteMeta';
 export { useFullSidebarData, useSidebarData } from './useSidebarData';
+export { useSiteSearch } from './useSiteSearch';
+export { useTabMeta } from './useTabMeta';

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

@@ -1,8 +1,12 @@
-export { useIntl } from 'react-intl';
+export { createIntlCache, defineMessages, FormattedDate, FormattedDateParts, FormattedDisplayName, FormattedList, FormattedMessage, FormattedNumber, FormattedNumberParts, FormattedPlural, FormattedRelativeTime, FormattedTime, FormattedTimeParts, injectIntl, IntlContext, IntlProvider, RawIntlProvider, useIntl } from 'react-intl';
 export { useSiteData } from "./context";
 export { DumiDemo } from "./DumiDemo";
 export { DumiDemoGrid } from "./DumiDemoGrid";
+export { DumiPage } from "./DumiPage";
+export { useAtomAssets } from "./useAtomAssets";
 export { useLocale } from "./useLocale";
 export { useNavData } from "./useNavData";
 export { useRouteMeta } from "./useRouteMeta";
-export { useFullSidebarData, useSidebarData } from "./useSidebarData";
+export { useFullSidebarData, useSidebarData } from "./useSidebarData";
+export { useSiteSearch } from "./useSiteSearch";
+export { useTabMeta } from "./useTabMeta";

package/dist/client/theme-api/types.d.ts

@@ -1,5 +1,5 @@
 import type { ExampleBlockAsset } from 'dumi-assets-types';
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 export interface IPreviewerProps {
     /**
      * title of current demo
@@ -57,6 +57,22 @@ export interface IRouteMeta {
             order?: number;
         };
         order?: number;
+        hero?: {
+            title?: string;
+            description?: string;
+            background?: string;
+            links?: {
+                title: string;
+                link: string;
+            }[];
+            [key: string]: any;
+        };
+        features?: {
+            emoji?: string;
+            title?: string;
+            description?: string;
+            [key: string]: any;
+        }[];
         toc?: boolean | 'content' | 'menu';
         demo?: {
             cols?: number;
@@ -68,17 +84,44 @@ export interface IRouteMeta {
         depth: number;
         title: string;
     }[];
+    texts: {
+        type?: 'content';
+        value: string;
+        /**
+         * paragraph index
+         */
+        paraId: number;
+        /**
+         * title index in toc
+         */
+        tocIndex?: number;
+    }[];
+    tabs?: {
+        key: string;
+        components: {
+            default: ComponentType;
+            Extra: ComponentType;
+            Action: ComponentType;
+        };
+        meta: {
+            frontmatter: Omit<IRouteMeta['frontmatter'], 'description' | 'keywords' | 'nav' | 'group' | 'hero' | 'features'>;
+            toc: IRouteMeta['toc'];
+            texts: IRouteMeta['texts'];
+            [key: string]: any;
+        };
+    }[];
     [key: string]: any;
 }
 declare type IBasicLocale = {
     id: string;
     name: string;
 };
-export declare type ILocalesConfig = ((IBasicLocale & {
+export declare type ILocale = ((IBasicLocale & {
     base: string;
 }) | (IBasicLocale & {
     suffix: string;
-}))[];
+}));
+export declare type ILocalesConfig = ILocale[];
 export interface INavItem {
     title: string;
     link: string;
@@ -88,6 +131,8 @@ export interface INavItem {
 interface ISidebarItem {
     title: string;
     link: string;
+    order: number;
+    frontmatter: IRouteMeta['frontmatter'];
     [key: string]: any;
 }
 export interface ISidebarGroup {

package/dist/client/theme-api/useAtomAssets.d.ts

@@ -0,0 +1,4 @@
+import { AtomComponentAsset } from 'dumi-assets-types';
+export declare const useAtomAssets: () => {
+    components: Record<string, AtomComponentAsset>;
+};

package/dist/client/theme-api/useAtomAssets.js

@@ -0,0 +1,9 @@
+import { useSiteData } from 'dumi';
+export var useAtomAssets = function useAtomAssets() {
+  var _useSiteData = useSiteData(),
+      components = _useSiteData.components;
+
+  return {
+    components: components
+  };
+};

package/dist/client/theme-api/useLocale.d.ts

@@ -1 +1,2 @@
-export declare const useLocale: () => any;
+import type { ILocale } from './types';
+export declare const useLocale: () => ILocale;

package/dist/client/theme-api/useNavData.js

@@ -37,11 +37,11 @@ export var useNavData = function useNavData() {
           groups = _ref2[1];
 
       var meta = Object.values(routes).reduce(function (ret, route) {
-        var _frontmatter$nav$orde;
+        var _route$meta, _frontmatter$nav$orde;
 
         // find routes which within the nav path
         if (route.path.startsWith(link.slice(1))) {
-          switch (_typeof(route.meta.frontmatter.nav)) {
+          switch (_typeof((_route$meta = route.meta) === null || _route$meta === void 0 ? void 0 : _route$meta.frontmatter.nav)) {
             case 'object':
               ret.title = route.meta.frontmatter.nav.title || ret.title;
               ret.order = (_frontmatter$nav$orde = route.meta.frontmatter.nav.order) !== null && _frontmatter$nav$orde !== void 0 ? _frontmatter$nav$orde : ret.order;

package/dist/client/theme-api/useRouteMeta.js

@@ -11,7 +11,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { matchRoutes, useAppData, useLocation, useRouteData } from 'dumi';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useLayoutEffect, useState } from 'react';
 
 /**
  * hook for get matched route meta
@@ -42,7 +42,8 @@ export var useRouteMeta = function useRouteMeta() {
 
     return ret || {
       frontmatter: {},
-      toc: []
+      toc: [],
+      texts: []
     };
   }, [clientRoutes.length, pathname]);
 
@@ -51,7 +52,7 @@ export var useRouteMeta = function useRouteMeta() {
       meta = _useState2[0],
       setMeta = _useState2[1];
 
-  useEffect(function () {
+  useLayoutEffect(function () {
     setMeta(getter);
   }, [clientRoutes.length, pathname]);
   return meta;

package/dist/client/theme-api/useSidebarData.d.ts

@@ -1,8 +1,9 @@
+import type { ISidebarGroup } from './types';
 /**
  * hook for get sidebar data for all nav
  */
-export declare const useFullSidebarData: () => any;
+export declare const useFullSidebarData: () => Record<string, ISidebarGroup[]>;
 /**
  * hook for get sidebar data for current nav
  */
-export declare const useSidebarData: () => any;
+export declare const useSidebarData: () => ISidebarGroup[];

package/dist/client/theme-api/useSidebarData.js

@@ -71,7 +71,8 @@ export var useFullSidebarData = function useFullSidebarData() {
           children: [].concat(_toConsumableArray(((_ret$parentPath$title2 = ret[parentPath][titleKey]) === null || _ret$parentPath$title2 === void 0 ? void 0 : _ret$parentPath$title2.children) || []), [{
             title: route.meta.frontmatter.title,
             link: "/".concat(route.path),
-            order: route.meta.frontmatter.order || 0
+            order: route.meta.frontmatter.order || 0,
+            frontmatter: route.meta.frontmatter
           }])
         };
       }
@@ -125,7 +126,8 @@ export var useSidebarData = function useSidebarData() {
   // /a/b => /a
   // /en-US/a => /en-US/a
   // /en-US/a/b => /en-US/a
+  // /en-US/a/b/ => /en-US/a (also strip trailing /)
 
-  var parentPath = clearPath ? pathname.replace(/(\/[^/]+)(\/[^/]+)$/, '$1') : pathname;
+  var parentPath = clearPath ? pathname.replace(/(\/[^/]+)(\/[^/]+\/?)$/, '$1') : pathname;
   return parentPath ? sidebar[parentPath] : [];
 };

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

@@ -0,0 +1,23 @@
+interface IHighlightText {
+    highlighted?: boolean;
+    text: string;
+}
+interface ISearchNavResult {
+    title?: string;
+    priority: number;
+    hints: {
+        type: 'page' | 'title' | 'demo' | 'content';
+        link: string;
+        priority: number;
+        highlightTitleTexts: IHighlightText[];
+        highlightTexts: IHighlightText[];
+    }[];
+}
+declare type ISearchResult = ISearchNavResult[];
+export declare const useSiteSearch: () => {
+    keywords: string;
+    setKeywords: (val: string) => void;
+    result: ISearchResult;
+    loading: boolean;
+};
+export {};