dumi 2.3.0-beta.8 → 2.3.0

package/dist/techStacks/utils.d.ts

@@ -1,4 +1,5 @@
 import type { ParserConfig } from '@swc/core';
+import { IDumiTechStack } from '../types';
 export { IDumiTechStack, IDumiTechStackOnBlockLoadArgs, IDumiTechStackOnBlockLoadResult, IDumiTechStackRuntimeOpts, } from '../types';
 /**
  * for frameworks like vue , we need to extract the JS fragments in their scripts
@@ -16,3 +17,24 @@ export interface IWrapDemoWithFnOptions {
  * https://github.com/umijs/dumi/blob/master/crates/swc_plugin_react_demo/src/lib.rs#L126
  */
 export declare function wrapDemoWithFn(code: string, opts: IWrapDemoWithFnOptions): string;
+export type IDefineTechStackOptions = IDumiTechStack;
+/**
+ * Define a tech stack
+ * @param options techstack options
+ * @returns function that returns {@link IDumiTechStack}, can be used to register a techstack
+ *
+ * @example
+ * const ReactTechStack = defineTechStack({
+ *   name: 'jsx',
+ *   isSupported(_, lang) {
+ *     return ['jsx', 'tsx'].includes(lang);
+ *   },
+ *   transformCode() {
+ *     // ...
+ *     return '';
+ *   },
+ * });
+ *
+ * api.registerTechStack(() => ReactTechStack);
+ */
+export declare function defineTechStack(options: IDefineTechStackOptions): IDumiTechStack;

package/dist/techStacks/utils.js

@@ -33,6 +33,7 @@ __export(utils_exports, {
   IDumiTechStackOnBlockLoadArgs: () => import_types.IDumiTechStackOnBlockLoadArgs,
   IDumiTechStackOnBlockLoadResult: () => import_types.IDumiTechStackOnBlockLoadResult,
   IDumiTechStackRuntimeOpts: () => import_types.IDumiTechStackRuntimeOpts,
+  defineTechStack: () => defineTechStack,
   extractScript: () => extractScript,
   wrapDemoWithFn: () => wrapDemoWithFn
 });
@@ -74,12 +75,16 @@ function wrapDemoWithFn(code, opts) {
   ${result.code}
 }`;
 }
+function defineTechStack(options) {
+  return options;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   IDumiTechStack,
   IDumiTechStackOnBlockLoadArgs,
   IDumiTechStackOnBlockLoadResult,
   IDumiTechStackRuntimeOpts,
+  defineTechStack,
   extractScript,
   wrapDemoWithFn
 });

package/dist/types.d.ts

@@ -58,6 +58,11 @@ export type IDumiTechStackOnBlockLoadArgs = OnLoadArgs & {
     filename: string;
 };
 export interface IDumiTechStackRuntimeOpts {
+    /**
+     * Component detection function path,
+     * used to detect errors that occur from application creation to component mounting.
+     */
+    preflightPath?: string;
     /**
      * path of the cancelable{@link IDemoCancelableFn} function
      * that manipulate(mount/unmount) third-party framework component
@@ -82,7 +87,9 @@ export declare abstract class IDumiTechStack {
      */
     abstract runtimeOpts?: IDumiTechStackRuntimeOpts;
     /**
-     * transform code
+     * Is the lang supported by the current tech stack?
+     * @param lang
+     * @param node hast Element https://github.com/syntax-tree/hast?tab=readme-ov-file#element
      */
     abstract isSupported(node: Element, lang: string): boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.3.0-beta.8",
+  "version": "2.3.0",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",
@@ -36,25 +36,6 @@
     "tech-stack-utils.js",
     "tech-stack-utils.d.ts"
   ],
-  "scripts": {
-    "build": "father build && npm run build:crates",
-    "build:crates": "cargo build --target wasm32-wasi -r --out-dir compiled/crates -Z unstable-options",
-    "build:deps": "node scripts/pre-bundle-worker.js && father prebundle",
-    "build:suites": "pnpm run --filter=\"./suites/**\" build",
-    "dev": "father dev",
-    "docs:build": "node ./bin/dumi.js build",
-    "docs:dev": "node ./bin/dumi.js dev",
-    "docs:sync": "node ./scripts/sync-from-umi.js",
-    "format": "prettier --cache --write .",
-    "lint": "npm run lint:es && npm run lint:css",
-    "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
-    "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
-    "prepare": "husky install && npm run build && npm run build:suites && node ./bin/dumi.js setup && npm run docs:sync",
-    "prepublishOnly": "npm run build",
-    "test": "vitest",
-    "vercel:build": "npm run docs:build",
-    "vercel:install": "./scripts/vercel-install.sh"
-  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -120,8 +101,9 @@
     "raw-loader": "^4.0.2",
     "rc-motion": "^2.7.3",
     "rc-tabs": "^12.10.0",
+    "rc-tooltip": "^6.1.3",
     "rc-tree": "^5.7.9",
-    "rc-util": "^5.37.0",
+    "rc-util": "^5.38.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-error-boundary": "^4.0.10",
     "react-intl": "^6.4.4",
@@ -163,10 +145,11 @@
     "@umijs/lint": "^4.0.84",
     "@umijs/plugins": "4.0.32",
     "codesandbox-import-utils": "^2.2.3",
-    "dumi-theme-mobile": "workspace:*",
     "eslint": "^8.46.0",
+    "esno": "^4.7.0",
     "fast-glob": "^3.3.1",
     "father": "^4.3.0",
+    "git-repo-info": "^2.1.1",
     "highlight-words-core": "^1.2.2",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
@@ -178,7 +161,9 @@
     "stylelint": "^15.10.2",
     "ts-node": "^10.9.1",
     "typescript": "~5.0.4",
-    "vitest": "^0.33.0"
+    "vitest": "^0.33.0",
+    "zx": "^7.2.3",
+    "dumi-theme-mobile": "2.3.0"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -190,5 +175,23 @@
   },
   "authors": [
     "Peach <scdzwyxst@gmail.com>"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "father build && npm run build:crates",
+    "build:crates": "cargo build --target wasm32-wasi -r --out-dir compiled/crates -Z unstable-options",
+    "build:deps": "node scripts/pre-bundle-worker.js && father prebundle",
+    "build:suites": "pnpm run --filter=\"./suites/**\" build",
+    "dev": "father dev",
+    "docs:build": "node ./bin/dumi.js build",
+    "docs:dev": "node ./bin/dumi.js dev",
+    "docs:sync": "node ./scripts/sync-from-umi.js",
+    "format": "prettier --cache --write .",
+    "lint": "npm run lint:es && npm run lint:css",
+    "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
+    "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
+    "release": "esno scripts/release.ts",
+    "test": "vitest",
+    "vercel:build": "npm run docs:build",
+    "vercel:install": "./scripts/vercel-install.sh"
+  }
+}

package/tech-stack-utils.d.ts

@@ -1,10 +1,12 @@
 import type * as BabelCore from '@umijs/bundler-utils/compiled/@babel/core';
 export {
-  IBaseApiParserOptions,
   ILanguageMetaParser,
   IPatchFile,
 } from './dist/assetParsers/BaseParser';
-export { createApiParser } from './dist/assetParsers/utils';
+export {
+  IBaseApiParserOptions,
+  createApiParser,
+} from './dist/assetParsers/utils';
 export * from './dist/techStacks/utils';
 export { BabelCore };
 export const babelCore: () => typeof import('@umijs/bundler-utils/compiled/@babel/core');

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

@@ -1,6 +1,7 @@
 import { type FC } from 'react';
+import './index.less';
 declare const API: FC<{
     id?: string;
-    type?: 'props' | 'events' | 'slots' | 'methods';
+    type?: 'props' | 'events' | 'slots' | 'imperative';
 }>;
 export default API;

package/theme-default/builtins/API/index.js

@@ -1,115 +1,239 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useAtomAssets, useIntl, useRouteMeta } from 'dumi';
-import React, { useEffect, useState } from 'react';
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { useAtomAssets, useIntl, useRouteMeta, useSiteData } from 'dumi';
+import React, { useEffect, useMemo, useState } from 'react';
+import Badge from "../Badge";
 import Table from "../Table";
+import "./index.less";
+function Token(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("span", {
+    "data-token": children
+  }, children);
+}
+
+// https://github.com/umijs/dumi/issues/1957
+function fixArg(arg) {
+  if (arg.hasQuestionToken && typeof arg.type === 'string') {
+    arg.type = arg.type.replace(/\s+\|\s+undefined\s*$/i, '');
+  }
+  return arg;
+}
+
+// Usually handles types other than basic types, either interfaces or type aliases
+var CompositeType = function CompositeType(prop) {
+  var _prop$source;
+  var intl = useIntl();
+  var _useSiteData = useSiteData(),
+    themeConfig = _useSiteData.themeConfig;
+  return (_prop$source = prop.source) !== null && _prop$source !== void 0 && _prop$source[0] && themeConfig.sourceLink ? /*#__PURE__*/React.createElement("a", {
+    className: "dumi-default-api-link",
+    href: intl.formatMessage({
+      id: '$internal.api.sourceLink'
+    }, _objectSpread({}, prop.source[0])),
+    target: "_blank",
+    rel: "noreferrer"
+  }, prop.className) : prop.className;
+};
 var HANDLERS = {
   // entry method
-  toString: function toString(prop) {
+  toNode: function toNode(prop) {
     if (typeof prop.type === 'string' && prop.type in this) {
       // value from TypeMap
       if ('enum' in prop) return this.enum(prop);
       return this[prop.type](prop);
     } else if (prop.type) {
       // non-parsed type, such as ReactNode
-      return this.getValidClassName(prop) || prop.type;
+      return this.getValidClassName(prop) || /*#__PURE__*/React.createElement("span", null, prop.type);
     } else if ('const' in prop) {
       // const value
-      return "".concat(prop.const);
+      return /*#__PURE__*/React.createElement("span", null, prop.const);
     } else if ('oneOf' in prop) {
       // oneOf value
       return this.oneOf(prop);
     }
 
     // unknown type
-    return "unknown";
+    return /*#__PURE__*/React.createElement("span", null, "unknown");
   },
   // type handlers
   string: function string(prop) {
-    return prop.type;
+    return /*#__PURE__*/React.createElement("span", null, prop.type);
   },
   number: function number(prop) {
-    return prop.type;
+    return /*#__PURE__*/React.createElement("span", null, prop.type);
   },
   boolean: function boolean(prop) {
-    return prop.type;
+    return /*#__PURE__*/React.createElement("span", null, prop.type);
   },
   any: function any(prop) {
-    return prop.type;
+    return /*#__PURE__*/React.createElement("span", null, prop.type);
   },
   object: function object(prop) {
     var _this = this;
-    var props = [];
-    Object.entries(prop.properties || {}).forEach(function (_ref) {
+    var entries = Object.entries(prop.properties || {});
+    var props = entries.map(function (_ref2, index) {
       var _prop$required;
-      var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        value = _ref2[1];
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
       // skip nested object type
-      props.push("".concat(key).concat((_prop$required = prop.required) !== null && _prop$required !== void 0 && _prop$required.includes(key) ? '' : '?', ": ").concat(value.type === 'object' ? 'object' : _this.toString(value)));
+      return /*#__PURE__*/React.createElement("span", {
+        key: key
+      }, /*#__PURE__*/React.createElement("span", null, key), !((_prop$required = prop.required) !== null && _prop$required !== void 0 && _prop$required.includes(key)) && /*#__PURE__*/React.createElement(Token, null, "?"), /*#__PURE__*/React.createElement(Token, null, ":"), value.type === 'object' ? /*#__PURE__*/React.createElement("span", null, "object") : _this.toNode(value), index < entries.length - 1 && /*#__PURE__*/React.createElement(Token, null, ";"));
     });
-    return props.length ? "{ ".concat(props.join('; '), " }") : '{}';
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Token, null, '{'), props, /*#__PURE__*/React.createElement(Token, null, '}'));
   },
   array: function array(prop) {
+    var arrayType = /*#__PURE__*/React.createElement("span", null, "any");
     if (prop.items) {
       var className = this.getValidClassName(prop.items);
-      return className ? "".concat(className, "[]") : "".concat(this.toString(prop.items), "[]");
+      arrayType = className !== null && className !== void 0 ? className : this.toNode(prop.items);
     }
-    return 'any[]';
+    return /*#__PURE__*/React.createElement("span", null, arrayType, /*#__PURE__*/React.createElement(Token, null, '['), /*#__PURE__*/React.createElement(Token, null, ']'));
   },
   // FIXME: extract real type
   element: function element(prop) {
-    return "<".concat(prop.componentName, " />");
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Token, null, "<"), /*#__PURE__*/React.createElement("span", null, prop.componentName), /*#__PURE__*/React.createElement(Token, null, ">"));
   },
   // FIXME: extract real type
-  function: function _function(_ref3) {
+  function: function _function(_ref4) {
     var _this2 = this;
-    var signature = _ref3.signature;
+    var signature = _ref4.signature;
     // handle Function type without signature
-    if (!signature) return 'Function';
+    if (!signature) return /*#__PURE__*/React.createElement("span", null, "Function");
     var signatures = 'oneOf' in signature ? signature.oneOf : [signature];
-    return signatures.map(function (signature) {
-      return "".concat(signature.isAsync ? 'async ' : '', "(").concat(signature.arguments.map(function (arg) {
-        return "".concat(arg.key).concat(arg.hasQuestionToken ? '?' : '', ": ").concat(_this2.toString(arg));
-      }).join(', '), ") => ").concat(_this2.toString(signature.returnType));
-    }).join(' | ');
+    return signatures.map(function (signature, si) {
+      return /*#__PURE__*/React.createElement("span", {
+        key: "".concat(si)
+      }, signature.isAsync ? /*#__PURE__*/React.createElement(Token, null, "async") : '', /*#__PURE__*/React.createElement(Token, null, '('), signature.arguments.map(function (arg, ai) {
+        return /*#__PURE__*/React.createElement("span", {
+          key: "".concat(si).concat(ai)
+        }, /*#__PURE__*/React.createElement("span", null, arg.key), arg.hasQuestionToken && /*#__PURE__*/React.createElement(Token, null, "?"), /*#__PURE__*/React.createElement(Token, null, ":"), _this2.toNode(!!arg.schema ? arg.schema : fixArg(arg)), ai < signature.arguments.length - 1 && /*#__PURE__*/React.createElement(Token, null, ","));
+      }), /*#__PURE__*/React.createElement(Token, null, ')'), /*#__PURE__*/React.createElement(Token, null, "=>"), _this2.toNode(signature.returnType), si < signatures.length - 1 && /*#__PURE__*/React.createElement(Token, null, "|"));
+    });
   },
   // FIXME: extract real type
   dom: function dom(prop) {
-    return prop.className || 'DOM';
+    return /*#__PURE__*/React.createElement("span", null, prop.className || 'DOM');
   },
   // special handlers
   enum: function _enum(prop) {
-    return prop.enum.map(function (v) {
+    var enumStringArray = prop.enum.map(function (v) {
       return JSON.stringify(v);
-    }).join(' | ');
+    });
+    return /*#__PURE__*/React.createElement("span", null, enumStringArray.map(function (e, i) {
+      return /*#__PURE__*/React.createElement("span", {
+        key: i
+      }, /*#__PURE__*/React.createElement("span", null, e), i < enumStringArray.length - 1 && /*#__PURE__*/React.createElement(Token, null, "|"));
+    }));
   },
   oneOf: function oneOf(prop) {
     var _this3 = this;
-    return prop.oneOf.map(function (v) {
-      return _this3.getValidClassName(v) || _this3.toString(v);
-    }).join(' | ');
+    return prop.oneOf.map(function (v, i) {
+      return /*#__PURE__*/React.createElement("span", {
+        key: i
+      }, _this3.getValidClassName(v) || _this3.toNode(v), i < prop.oneOf.length - 1 && /*#__PURE__*/React.createElement(Token, null, "|"));
+    });
+  },
+  reference: function reference(prop) {
+    var _this4 = this;
+    var typeParameters = prop.typeParameters || [];
+    var params = typeParameters.map(function (param, i) {
+      return /*#__PURE__*/React.createElement("span", {
+        key: i
+      }, _this4.toNode(param), i < typeParameters.length - 1 && /*#__PURE__*/React.createElement(Token, null, ","));
+    });
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", {
+      className: "dumi-default-api-link",
+      href: prop.externalUrl,
+      target: "_blank",
+      rel: "noreferrer"
+    }, prop.name), params.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Token, null, "<"), params, /*#__PURE__*/React.createElement(Token, null, ">")) : '');
   },
   // utils
   getValidClassName: function getValidClassName(prop) {
-    return 'className' in prop && typeof prop.className === 'string' && prop.className !== '__type' ? prop.className : null;
+    if ('className' in prop && typeof prop.className === 'string' && prop.className !== '__type') {
+      return /*#__PURE__*/React.createElement(CompositeType, prop);
+    }
+    return null;
   }
 };
 var APIType = function APIType(prop) {
   var _useState = useState(function () {
-      return HANDLERS.toString(prop);
+      return HANDLERS.toNode(prop);
     }),
     _useState2 = _slicedToArray(_useState, 2),
     type = _useState2[0],
     setType = _useState2[1];
   useEffect(function () {
-    setType(HANDLERS.toString(prop));
+    setType(HANDLERS.toNode(prop));
   }, [prop]);
-  return /*#__PURE__*/React.createElement("code", null, type);
+  return /*#__PURE__*/React.createElement("code", {
+    className: "dumi-default-api-type"
+  }, type);
+};
+function getReleaseAndVersionInfo(props) {
+  var releaseInfo = {};
+  Object.entries(props).forEach(function (_ref5) {
+    var _schema$tags, _schema$tags2;
+    var _ref6 = _slicedToArray(_ref5, 2),
+      prop = _ref6[0],
+      schema = _ref6[1];
+    var modiferTags = (_schema$tags = schema.tags) === null || _schema$tags === void 0 ? void 0 : _schema$tags.modifierTags;
+    var blockTags = (_schema$tags2 = schema.tags) === null || _schema$tags2 === void 0 ? void 0 : _schema$tags2.blockTags;
+    modiferTags === null || modiferTags === void 0 ? void 0 : modiferTags.forEach(function (tag) {
+      if (tag === 'alpha' || tag === 'beta' || tag === 'experimental') {
+        releaseInfo[prop] = [tag];
+      }
+    });
+    blockTags === null || blockTags === void 0 ? void 0 : blockTags.forEach(function (_ref7) {
+      var tag = _ref7.tag,
+        content = _ref7.content;
+      if (tag === 'deprecated' || tag === 'since') {
+        var textContent = content.map(function (item) {
+          return item.text;
+        }).join('');
+        releaseInfo[prop] = [tag, textContent];
+      }
+    });
+  });
+  return releaseInfo;
+}
+var APIRelease = function APIRelease(_ref8) {
+  var name = _ref8.name,
+    info = _ref8.info;
+  var intl = useIntl();
+  var _info = _slicedToArray(info, 2),
+    modifer = _info[0],
+    text = _info[1];
+  var modiferProps = _defineProperty({
+    className: 'dumi-default-api-release-modifer'
+  }, 'data-release', modifer);
+  if (text && modifer === 'deprecated') {
+    modiferProps['data-dumi-tooltip'] = text;
+  }
+  var modiferText = modifer === 'since' ? "".concat(text, "+") : intl.formatMessage({
+    id: "api.component.release.".concat(modifer)
+  });
+  return /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-api-release"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-api-release-name",
+    "data-release": modifer
+  }, name), /*#__PURE__*/React.createElement("span", modiferProps, modifer === 'deprecated' ? modiferText : /*#__PURE__*/React.createElement(Badge, {
+    type: "info"
+  }, modiferText)));
 };
 var API = function API(props) {
   var _useRouteMeta = useRouteMeta(),
@@ -127,6 +251,9 @@ var API = function API(props) {
     var key = "".concat(type, "Config");
     properties = ((_definition$key = definition[key]) === null || _definition$key === void 0 ? void 0 : _definition$key.properties) || {};
   }
+  var releaseInfo = useMemo(function () {
+    return getReleaseAndVersionInfo(properties);
+  }, [properties]);
   return /*#__PURE__*/React.createElement("div", {
     className: "markdown"
   }, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, intl.formatMessage({
@@ -137,14 +264,17 @@ var API = function API(props) {
     id: 'api.component.type'
   })), props.type === 'props' && /*#__PURE__*/React.createElement("th", null, intl.formatMessage({
     id: 'api.component.default'
-  })))), /*#__PURE__*/React.createElement("tbody", null, Object.keys(properties).length ? Object.entries(properties).map(function (_ref4) {
+  })))), /*#__PURE__*/React.createElement("tbody", null, Object.keys(properties).length ? Object.entries(properties).map(function (_ref9) {
     var _definition$propsConf;
-    var _ref5 = _slicedToArray(_ref4, 2),
-      name = _ref5[0],
-      prop = _ref5[1];
+    var _ref10 = _slicedToArray(_ref9, 2),
+      name = _ref10[0],
+      prop = _ref10[1];
     return /*#__PURE__*/React.createElement("tr", {
       key: name
-    }, /*#__PURE__*/React.createElement("td", null, name), /*#__PURE__*/React.createElement("td", null, prop.description || '--'), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(APIType, prop)), props.type === 'props' && /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("code", null, (_definition$propsConf = definition.propsConfig.required) !== null && _definition$propsConf !== void 0 && _definition$propsConf.includes(name) ? intl.formatMessage({
+    }, /*#__PURE__*/React.createElement("td", null, releaseInfo[name] ? /*#__PURE__*/React.createElement(APIRelease, {
+      name: name,
+      info: releaseInfo[name]
+    }) : name), /*#__PURE__*/React.createElement("td", null, prop.description || '--'), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(APIType, prop)), props.type === 'props' && /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("code", null, (_definition$propsConf = definition.propsConfig.required) !== null && _definition$propsConf !== void 0 && _definition$propsConf.includes(name) ? intl.formatMessage({
       id: 'api.component.required'
     }) : JSON.stringify(prop.default) || '--')));
   }) : /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {

package/theme-default/builtins/API/index.less

@@ -0,0 +1,47 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-api {
+  &-type {
+    [data-token='|'],
+    [data-token='=>'] {
+      padding: 0 0.5em;
+    }
+
+    [data-token=';'],
+    [data-token=':'],
+    [data-token=','],
+    [data-token='async'] {
+      padding-right: 0.5em;
+    }
+
+    [data-token='{'] {
+      padding-right: 0.5em;
+    }
+
+    [data-token='}'] {
+      padding-left: 0.5em;
+    }
+  }
+
+  &-release {
+    [data-release] + [data-release] {
+      margin-left: 0.5em;
+    }
+    .@{prefix}-badge {
+      transform: scale(0.9);
+    }
+  }
+
+  &-release-name {
+    &[data-release='deprecated'] {
+      text-decoration: line-through;
+    }
+  }
+
+  &-release-modifer {
+    &[data-release='deprecated'] {
+      cursor: help;
+      border-bottom: 1px dotted @c-text-secondary;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function CodeGroup(props: React.PropsWithChildren): React.JSX.Element;
+export default CodeGroup;

package/theme-default/builtins/CodeGroup/index.js

@@ -0,0 +1,29 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+import Tabs from "../../slots/Tabs";
+import SourceCode from 'dumi/theme/builtins/SourceCode';
+import toArray from 'rc-util/lib/Children/toArray';
+import React from 'react';
+function CodeGroup(props) {
+  var children = props.children;
+  var usefulChildren = toArray(children).filter(function (child) {
+    var _child$type;
+    return _typeof(child) === 'object' && typeof child.type === 'function' && ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === SourceCode.name;
+  });
+  var items = usefulChildren.map(function (child, idx) {
+    var _child$props, _child$key;
+    var _ref = (_child$props = child.props) !== null && _child$props !== void 0 ? _child$props : {},
+      lang = _ref.lang,
+      title = _ref.title;
+    return {
+      key: String((_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : idx),
+      label: title || lang || 'txt',
+      // fallback to txt if no lang and title
+      children: child
+    };
+  });
+  return /*#__PURE__*/React.createElement(Tabs, {
+    className: "dumi-default-code-group",
+    items: items
+  });
+}
+export default CodeGroup;

package/theme-default/builtins/Previewer/index.js

@@ -13,7 +13,7 @@ var Previewer = function Previewer(props) {
     hash = _useLocation.hash;
   var link = "#".concat(props.asset.id);
   var _useLiveDemo = useLiveDemo(props.asset.id, {
-      iframe: Boolean(props.iframe),
+      iframe: Boolean(props.iframe || props._live_in_iframe),
       containerRef: demoContainer
     }),
     liveDemoNode = _useLiveDemo.node,

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

@@ -2,12 +2,13 @@ import { type Language } from 'prism-react-renderer';
 import 'prism-themes/themes/prism-one-light.css';
 import { type FC, type ReactNode } from 'react';
 import './index.less';
-interface SourceCodeProps {
+export interface ISourceCodeProps {
     children: string;
     lang: Language;
     highlightLines?: number[];
     extra?: ReactNode;
     textarea?: ReactNode;
+    title?: string;
 }
-declare const SourceCode: FC<SourceCodeProps>;
+declare const SourceCode: FC<ISourceCodeProps>;
 export default SourceCode;

package/theme-default/locales/en-US.json

@@ -31,6 +31,10 @@
   "api.component.type": "Type",
   "api.component.default": "Default",
   "api.component.required": "(required)",
+  "api.component.release.alpha": "Alpha",
+  "api.component.release.beta": "Beta",
+  "api.component.release.experimental": "Experimental",
+  "api.component.release.deprecated": "Deprecated",
   "api.component.unavailable": "apiParser must be enabled to use auto-generated API",
   "api.component.loading": "Properties definition is resolving, wait a moment...",
   "api.component.not.found": "Properties definition not found for {id} component",

package/theme-default/locales/zh-CN.json

@@ -30,6 +30,10 @@
   "api.component.type": "类型",
   "api.component.default": "默认值",
   "api.component.required": "(必选)",
+  "api.component.release.alpha": "Alpha",
+  "api.component.release.beta": "Beta",
+  "api.component.release.experimental": "实验性",
+  "api.component.release.deprecated": "废弃",
   "api.component.unavailable": "必须启用 apiParser 才能使用自动 API 特性",
   "api.component.loading": "属性定义正在解析中，稍等片刻...",
   "api.component.not.found": "未找到 {id} 组件的属性定义",