[core-infra] Remove useless fragments (#44516)

mui · Nov 28, 2024 · 28ac35c · 28ac35c
1 parent e1479de
commit 28ac35c
Show file tree

Hide file tree

Showing 19 changed files with 83 additions and 71 deletions.
diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.js b/docs/data/material/getting-started/templates/shared-theme/AppTheme.js
@@ -9,7 +9,8 @@ import { navigationCustomizations } from './customizations/navigation';
 import { surfacesCustomizations } from './customizations/surfaces';
 import { colorSchemes, typography, shadows, shape } from './themePrimitives';
 
-function AppTheme({ children, disableCustomTheme, themeComponents }) {
+function AppTheme(props) {
+  const { children, disableCustomTheme, themeComponents } = props;
   const theme = React.useMemo(() => {
     return disableCustomTheme
       ? {}

diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx b/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx
@@ -17,11 +17,8 @@ interface AppThemeProps {
   themeComponents?: ThemeOptions['components'];
 }
 
-export default function AppTheme({
-  children,
-  disableCustomTheme,
-  themeComponents,
-}: AppThemeProps) {
+export default function AppTheme(props: AppThemeProps) {
+  const { children, disableCustomTheme, themeComponents } = props;
   const theme = React.useMemo(() => {
     return disableCustomTheme
       ? {}

diff --git a/docs/pages/joy-ui/api/stack.json b/docs/pages/joy-ui/api/stack.json
@@ -6,14 +6,16 @@
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'column'"
     },
     "divider": { "type": { "name": "node" } },
     "spacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "sx": {
       "type": {
@@ -22,7 +24,7 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "useFlexGap": { "type": { "name": "bool" } }
+    "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Stack",
   "imports": ["import Stack from '@mui/joy/Stack';", "import { Stack } from '@mui/joy';"],

diff --git a/docs/pages/material-ui/api/container.json b/docs/pages/material-ui/api/container.json
@@ -2,13 +2,14 @@
   "props": {
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
-    "disableGutters": { "type": { "name": "bool" } },
-    "fixed": { "type": { "name": "bool" } },
+    "disableGutters": { "type": { "name": "bool" }, "default": "false" },
+    "fixed": { "type": { "name": "bool" }, "default": "false" },
     "maxWidth": {
       "type": {
         "name": "union",
         "description": "'xs'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;false<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "'lg'"
     },
     "sx": {
       "type": {

diff --git a/docs/pages/material-ui/api/grid-2.json b/docs/pages/material-ui/api/grid-2.json
@@ -5,20 +5,22 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "12"
     },
     "columnSpacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
       }
     },
-    "container": { "type": { "name": "bool" } },
+    "container": { "type": { "name": "bool" }, "default": "false" },
     "direction": {
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'row'"
     },
     "offset": {
       "type": {
@@ -42,13 +44,15 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "wrap": {
       "type": {
         "name": "enum",
         "description": "'nowrap'<br>&#124;&nbsp;'wrap-reverse'<br>&#124;&nbsp;'wrap'"
-      }
+      },
+      "default": "'wrap'"
     }
   },
   "name": "Grid2",

diff --git a/docs/pages/material-ui/api/stack.json b/docs/pages/material-ui/api/stack.json
@@ -6,14 +6,16 @@
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'column'"
     },
     "divider": { "type": { "name": "node" } },
     "spacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "sx": {
       "type": {
@@ -22,7 +24,7 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "useFlexGap": { "type": { "name": "bool" } }
+    "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Stack",
   "imports": ["import Stack from '@mui/material/Stack';", "import { Stack } from '@mui/material';"],

diff --git a/docs/pages/system/api/container.json b/docs/pages/system/api/container.json
@@ -2,13 +2,14 @@
   "props": {
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
-    "disableGutters": { "type": { "name": "bool" } },
-    "fixed": { "type": { "name": "bool" } },
+    "disableGutters": { "type": { "name": "bool" }, "default": "false" },
+    "fixed": { "type": { "name": "bool" }, "default": "false" },
     "maxWidth": {
       "type": {
         "name": "union",
         "description": "'xs'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;false<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "'lg'"
     },
     "sx": {
       "type": {

diff --git a/docs/pages/system/api/grid.json b/docs/pages/system/api/grid.json
@@ -5,20 +5,22 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "12"
     },
     "columnSpacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
       }
     },
-    "container": { "type": { "name": "bool" } },
+    "container": { "type": { "name": "bool" }, "default": "false" },
     "direction": {
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'row'"
     },
     "offset": {
       "type": {
@@ -42,13 +44,15 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "wrap": {
       "type": {
         "name": "enum",
         "description": "'nowrap'<br>&#124;&nbsp;'wrap-reverse'<br>&#124;&nbsp;'wrap'"
-      }
+      },
+      "default": "'wrap'"
     }
   },
   "name": "Grid",

diff --git a/docs/pages/system/api/stack.json b/docs/pages/system/api/stack.json
@@ -6,14 +6,16 @@
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'column'"
     },
     "divider": { "type": { "name": "node" } },
     "spacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "sx": {
       "type": {
@@ -22,7 +24,7 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "useFlexGap": { "type": { "name": "bool" } }
+    "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Stack",
   "imports": ["import Stack from '@mui/system/Stack';", "import { Stack } from '@mui/system';"],

diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -697,58 +697,59 @@ export default async function generateComponentApi(
   const filename = componentInfo.filename;
   let reactApi: ComponentReactApi;
 
-  if (componentInfo.isSystemComponent || componentInfo.name === 'Grid2') {
-    try {
+  try {
+    reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {
+      filename,
+    });
+  } catch (error) {
+    // fallback to default logic if there is no `create*` definition.
+    if ((error as Error).message === 'No suitable component definition found.') {
       reactApi = docgenParse(
         src,
         (ast) => {
           let node;
+          // TODO migrate to react-docgen v6, using Babel AST now
           astTypes.visit(ast, {
+            visitFunctionDeclaration: (functionPath) => {
+              // @ts-ignore
+              if (functionPath.node.params[0].name === 'props') {
+                node = functionPath;
+              }
+              return false;
+            },
             visitVariableDeclaration: (variablePath) => {
               const definitions: any[] = [];
               if (variablePath.node.declarations) {
                 variablePath
                   .get('declarations')
                   .each((declarator: any) => definitions.push(declarator.get('init')));
               }
-
               definitions.forEach((definition) => {
                 // definition.value.expression is defined when the source is in TypeScript.
                 const expression = definition.value?.expression
                   ? definition.get('expression')
                   : definition;
                 if (expression.value?.callee) {
                   const definitionName = expression.value.callee.name;
-
                   if (definitionName === `create${componentInfo.name}`) {
                     node = expression;
                   }
                 }
               });
-
               return false;
             },
           });
 
           return node;
         },
-        defaultHandlers,
-        { filename },
-      );
-    } catch (error) {
-      // fallback to default logic if there is no `create*` definition.
-      if ((error as Error).message === 'No suitable component definition found.') {
-        reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {
+        defaultHandlers.concat(muiDefaultPropsHandler),
+        {
           filename,
-        });
-      } else {
-        throw error;
-      }
+        },
+      );
+    } else {
+      throw error;
     }
-  } else {
-    reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {
-      filename,
-    });
   }
 
   if (!reactApi.props) {

diff --git a/packages/api-docs-builder/utils/defaultPropsHandler.ts b/packages/api-docs-builder/utils/defaultPropsHandler.ts
@@ -131,6 +131,11 @@ function getExplicitPropsDeclaration(
 ): NodePath | undefined {
   const functionNode = getRenderBody(componentDefinition, importer);
 
+  // No function body available to inspect.
+  if (!functionNode.value) {
+    return undefined;
+  }
+
   let propsPath: NodePath | undefined;
   // visitVariableDeclarator, can't use visit body.node since it looses scope information
   functionNode

diff --git a/packages/api-docs-builder/utils/getPropsFromComponentNode.ts b/packages/api-docs-builder/utils/getPropsFromComponentNode.ts
@@ -51,6 +51,7 @@ function isStyledFunction(node: ts.VariableDeclaration): boolean {
   );
 }
 
+// TODO update to reflect https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
 function getJSXLikeReturnValueFromFunction(type: ts.Type, project: TypeScriptProject) {
   return type
     .getCallSignatures()

diff --git a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
@@ -209,7 +209,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element {
     return undefined;
   }, [handleClickAway, mouseEvent]);
 
-  return <React.Fragment>{React.cloneElement(children, childrenProps)}</React.Fragment>;
+  return React.cloneElement(children, childrenProps);
 }
 
 ClickAwayListener.propTypes /* remove-proptypes */ = {

diff --git a/packages/mui-base/src/NoSsr/NoSsr.tsx b/packages/mui-base/src/NoSsr/NoSsr.tsx
@@ -38,8 +38,8 @@ function NoSsr(props: NoSsrProps): React.JSX.Element {
     }
   }, [defer]);
 
-  // We need the Fragment here to force react-docgen to recognise NoSsr as a component.
-  return <React.Fragment>{mountedState ? children : fallback}</React.Fragment>;
+  // TODO casting won't be needed at one point https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
+  return (mountedState ? children : fallback) as React.JSX.Element;
 }
 
 NoSsr.propTypes /* remove-proptypes */ = {

diff --git a/packages/mui-base/src/Portal/Portal.tsx b/packages/mui-base/src/Portal/Portal.tsx
@@ -64,14 +64,10 @@ const Portal = React.forwardRef(function Portal(
       };
       return React.cloneElement(children, newProps);
     }
-    return <React.Fragment>{children}</React.Fragment>;
+    return children;
   }
 
-  return (
-    <React.Fragment>
-      {mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode}
-    </React.Fragment>
-  );
+  return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode;
 }) as React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<Element>>;
 
 Portal.propTypes /* remove-proptypes */ = {

diff --git a/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx
@@ -210,7 +210,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element {
     return undefined;
   }, [handleClickAway, mouseEvent]);
 
-  return <React.Fragment>{React.cloneElement(children, childrenProps)}</React.Fragment>;
+  return React.cloneElement(children, childrenProps);
 }
 
 ClickAwayListener.propTypes /* remove-proptypes */ = {

diff --git a/packages/mui-material/src/Hidden/HiddenJs.js b/packages/mui-material/src/Hidden/HiddenJs.js
@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import PropTypes from 'prop-types';
 import exactProp from '@mui/utils/exactProp';
 import withWidth, { isWidthDown, isWidthUp } from './withWidth';
@@ -50,7 +49,7 @@ function HiddenJs(props) {
     return null;
   }
 
-  return <React.Fragment>{children}</React.Fragment>;
+  return children;
 }
 
 HiddenJs.propTypes = {