material-ui [文档基础设施] Joy UI和MUI系统中的默认值没有文档记录,

mzsu5hc0  于 10个月前  发布在  其他
关注(0)|答案(3)|浏览(103)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

重现步骤 🕹

  • joy Stack方向没有默认值:https://mui.com/joy-ui/api/stack/#Stack-prop-direction
  • system Stack方向没有默认值:https://mui.com/system/api/stack/#Stack-prop-direction

问题来自 docs:api 脚本,因为 @default 已经定义,但JSON文件中没有可见的默认值。对于system来说,muiDefaultPropsHandler似乎没有应用,添加到处理程序中会使脚本崩溃:需要进一步调查

当前行为 😯

  • 无响应*

预期行为 🤔

  • 无响应*

上下文 🔦

  • 无响应*

你的环境 🌎

npx @mui/envinfo

  1. Don't forget to mention which browser you used.
  2. Output from `npx @mui/envinfo` goes here.
xn1cxnb4

xn1cxnb41#

Material UI也存在相同的问题 - https://mui.com/material-ui/api/stack/#Stack-prop-direction。

hmtdttj4

hmtdttj42#

我们可以执行以下操作:

  1. --- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
  2. +++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
  3. @@ -9,11 +9,12 @@ import remark from 'remark';
  4. import remarkVisit from 'unist-util-visit';
  5. import { Link } from 'mdast';
  6. import { defaultHandlers, parse as docgenParse, ReactDocgenApi } from 'react-docgen';
  7. +import { parse as parseDoctrine } from 'doctrine';
  8. import { unstable_generateUtilityClass as generateUtilityClass } from '@mui/utils';
  9. import { renderMarkdown } from '@mui/markdown';
  10. import { LANGUAGES } from 'docs/config';
  11. import { ComponentInfo, writePrettifiedFile } from '../buildApiUtils';
  12. -import muiDefaultPropsHandler from '../utils/defaultPropsHandler';
  13. +import muiDefaultPropsHandler, { getJsdocDefaultValue } from '../utils/defaultPropsHandler';
  14. import parseTest from '../utils/parseTest';
  15. import generatePropTypeDescription, { getChained } from '../utils/generatePropTypeDescription';
  16. import createDescribeableProp, {
  17. @@ -552,7 +553,7 @@ const attachTranslations = (reactApi: ReactApi) => {
  18. reactApi.translations = translations;
  19. };
  20. -const attachPropsTable = (reactApi: ReactApi) => {
  21. +const attachPropsTable = (reactApi: ReactApi, isSystemComponent?: boolean) => {
  22. const propErrors: Array<[propName: string, error: Error]> = [];
  23. type Pair = [string, ReactApi['propsTable'][string]];
  24. const componentProps: ReactApi['propsTable'] = _.fromPairs(
  25. @@ -569,7 +570,15 @@ const attachPropsTable = (reactApi: ReactApi) => {
  26. return [] as any;
  27. }
  28. - const defaultValue = propDescriptor.jsdocDefaultValue?.value;
  29. + let defaultValue = propDescriptor.jsdocDefaultValue?.value;
  30. +
  31. + if (isSystemComponent && !defaultValue && propDescriptor.description) {
  32. + defaultValue = getJsdocDefaultValue(
  33. + parseDoctrine(propDescriptor.description, {
  34. + sloppy: true,
  35. + }),
  36. + )?.value;
  37. + }
  38. const {
  39. signature: signatureType,
  40. @@ -834,7 +843,7 @@ export default async function generateComponentApi(
  41. reactApi.styles.globalClasses = {};
  42. }
  43. - attachPropsTable(reactApi);
  44. + attachPropsTable(reactApi, isSystemComponent);
  45. attachTranslations(reactApi);
  46. // eslint-disable-next-line no-console
  47. diff --git a/packages/api-docs-builder/utils/defaultPropsHandler.ts b/packages/api-docs-builder/utils/defaultPropsHandler
  48. .ts
  49. index 77b8942afa..f7dd3bf9eb 100644
  50. --- a/packages/api-docs-builder/utils/defaultPropsHandler.ts
  51. +++ b/packages/api-docs-builder/utils/defaultPropsHandler.ts
  52. @@ -55,7 +55,7 @@ function getDefaultValue(propertyPath: NodePath, importer: Importer) {
  53. return null;
  54. }
  55. -function getJsdocDefaultValue(jsdoc: Annotation): { value: string } | undefined {
  56. +export function getJsdocDefaultValue(jsdoc: Annotation): { value: string } | undefined {
  57. const defaultTag = jsdoc.tags.find((tag) => tag.title === 'default');
  58. if (defaultTag === undefined) {
  59. return undefined;

但是,上述逻辑不会将实现的默认值与JSDoc的默认值标签进行比较,就像对其他组件一样(这就是muiDefaultPropsHandler所做的)。我认为我们无法将muiDefaultPropsHandler应用于系统组件,因为组件的定义方式。我们在AST解析器中检查createStackcreateGrid,它在其定义中没有默认属性值。

展开查看全部
3duebb1j

3duebb1j3#

我原以为这只是在@default中添加proptypes,但我现在理解正确了,它只在props以以下形状在代码中定义时添加默认值:

  1. const {
  2. 'aria-label': ariaLabel,
  3. 'aria-valuetext': ariaValuetext,
  4. /* ..., */
  5. ...other
  6. } = props;

但是,上述逻辑不会将实现的默认值与JSDoc的默认值标签进行比较,就像对其他组件一样。从我的理解来看,当一些属性只是从一个组件传播到另一个组件时,这已经是一个情况了:
https://github.com/mui/material-ui/blob/master/packages/api-docs-builder/utils/defaultPropsHandler.ts/#L81-L93

相关问题