[core] OOM issues during build (#3825)

mui · Jul 22, 2024 · 6322c92 · 6322c92
1 parent a195c6a
commit 6322c92
Show file tree

Hide file tree

Showing 21 changed files with 188 additions and 128 deletions.
diff --git a/package.json b/package.json
@@ -40,7 +40,8 @@
     "monorepo:update": "tsx ./scripts/updateMonorepo.ts",
     "monorepo:canary": "tsx ./scripts/canaryMonorepo.ts",
     "check-changes": "git add -A && git diff --exit-code --staged",
-    "test:rest:start": "tsx ./scripts/restTestServer.ts"
+    "test:rest:start": "tsx ./scripts/restTestServer.ts",
+    "clean": "pnpm -r exec rm -rf build dist"
   },
   "devDependencies": {
     "@argos-ci/core": "2.3.0",

diff --git a/packages/toolpad-studio-components/package.json b/packages/toolpad-studio-components/package.json
@@ -33,7 +33,8 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
-    "check-types": "tsup && tsc --noEmit"
+    "check-types": "tsup && tsc --noEmit",
+    "build:types": "tsc --declaration --emitDeclarationOnly"
   },
   "bugs": {
     "url": "https://github.com/mui/mui-toolpad/issues"

diff --git a/packages/toolpad-studio-components/src/Autocomplete.tsx b/packages/toolpad-studio-components/src/Autocomplete.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   Autocomplete as MuiAutocomplete,
   AutocompleteProps as MuiAutocompleteProps,
+  styled,
   TextField,
 } from '@mui/material';
 import createBuiltin from './createBuiltin';
@@ -13,6 +14,14 @@ import {
   withComponentForm,
 } from './Form';
 
+const ToolpadMuiAutocomplete = styled(MuiAutocomplete<AutocompleteOption, false>, {
+  shouldForwardProp: (prop) => prop !== 'hasWidth',
+})<{
+  hasWidth?: boolean;
+}>(({ hasWidth }) => ({
+  width: hasWidth ? 120 : '100%',
+}));
+
 type AutocompleteOption = string | { label?: string; value?: string };
 type AutocompleteValue = string | null;
 
@@ -85,8 +94,10 @@ function Autocomplete({
     [getValue, onFormInputChange],
   );
 
+  const hasWidth = !rest.fullWidth && !value;
+
   return renderFormInput(
-    <MuiAutocomplete
+    <ToolpadMuiAutocomplete
       onChange={handleChange}
       options={options ?? []}
       isOptionEqualToValue={(option, selectedValue) => getValue(option) === getValue(selectedValue)}
@@ -103,7 +114,8 @@ function Autocomplete({
           })}
         />
       )}
-      sx={{ ...(!rest.fullWidth && !value ? { width: 120 } : {}), ...sx }}
+      hasWidth={hasWidth}
+      sx={sx}
       {...rest}
     />,
   );

diff --git a/packages/toolpad-studio-components/src/Chart.tsx b/packages/toolpad-studio-components/src/Chart.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { CircularProgress, Box, BoxProps } from '@mui/material';
+import { CircularProgress, BoxProps, styled } from '@mui/material';
 
 import {
   BarPlot,
@@ -24,6 +24,12 @@ import createBuiltin from './createBuiltin';
 import ErrorOverlay from './components/ErrorOverlay';
 import { SX_PROP_HELPER_TEXT } from './constants';
 
+const ChartRoot = styled('div')({
+  position: 'relative',
+  height: '100%',
+  width: '100%',
+});
+
 type ChartDataSeriesKind = 'line' | 'bar' | 'area' | 'scatter';
 
 export const CHART_DATA_SERIES_KINDS: ChartDataSeriesKind[] = ['line', 'bar', 'area', 'scatter'];
@@ -170,7 +176,7 @@ function Chart({ data = [], loading, error, sx }: ChartProps) {
   const firstDataSeries = chartSeries[0];
 
   return (
-    <Box sx={{ ...sx, position: 'relative', height: '100%', width: '100%' }} aria-busy={loading}>
+    <ChartRoot sx={sx} aria-busy={loading}>
       {displayError ? <ErrorOverlay error={displayError} /> : null}
       {loading && !error ? (
         <div
@@ -241,7 +247,7 @@ function Chart({ data = [], loading, error, sx }: ChartProps) {
           ) : null}
         </ResponsiveChartContainer>
       ) : null}
-    </Box>
+    </ChartRoot>
   );
 }
 

diff --git a/packages/toolpad-studio-components/src/Form.tsx b/packages/toolpad-studio-components/src/Form.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, BoxProps, Stack } from '@mui/material';
+import { Box, BoxProps, Stack, styled } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 import { useNode } from '@toolpad/studio-runtime';
 import { equalProperties } from '@toolpad/utils/collections';
@@ -14,6 +14,10 @@ import {
 import { SX_PROP_HELPER_TEXT } from './constants';
 import createBuiltin, { BuiltinArgTypeDefinitions } from './createBuiltin';
 
+const FormRoot = styled('div')({
+  width: '100%',
+});
+
 export const FormContext = React.createContext<{
   form: ReturnType<typeof useForm> | null;
   fieldValues: FieldValues;
@@ -80,7 +84,7 @@ function Form({
   return (
     <FormContext.Provider value={formContextValue}>
       {hasChrome ? (
-        <Box sx={{ ...sx, width: '100%' }}>
+        <FormRoot sx={sx}>
           <form onSubmit={form.handleSubmit(handleSubmit)} onReset={handleReset}>
             {children}
 
@@ -119,7 +123,7 @@ function Form({
               </Stack>
             </Box>
           </form>
-        </Box>
+        </FormRoot>
       ) : (
         children
       )}

diff --git a/packages/toolpad-studio-components/src/Image.tsx b/packages/toolpad-studio-components/src/Image.tsx
@@ -1,9 +1,17 @@
-import { Box, Skeleton, SxProps, styled } from '@mui/material';
+import { Skeleton, SxProps, styled } from '@mui/material';
 import * as React from 'react';
 import createBuiltin from './createBuiltin';
 import { SX_PROP_HELPER_TEXT } from './constants';
 import ErrorOverlay from './components/ErrorOverlay';
 
+const ImageRoot = styled('div')({
+  maxWidth: '100%',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
 export interface ImageProps {
   src: string;
   alt?: string;
@@ -31,18 +39,7 @@ function Image({
   error: errorProp,
   fit,
 }: ImageProps) {
-  const sx: SxProps = React.useMemo(
-    () => ({
-      ...sxProp,
-      width,
-      height,
-      position: 'relative',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }),
-    [sxProp, width, height],
-  );
+  const sx: SxProps = React.useMemo(() => ({ ...sxProp, width, height }), [sxProp, width, height]);
 
   const [imgError, setImgError] = React.useState<Error | null>(null);
   const [imgLoading, setImgLoading] = React.useState(false);
@@ -64,7 +61,7 @@ function Image({
   const loading = loadingProp || imgLoading;
   const error = errorProp || imgError;
   return (
-    <Box sx={{ maxWidth: '100%', position: 'relative', ...sx }}>
+    <ImageRoot sx={sx}>
       {error ? <ErrorOverlay error={error} /> : null}
       {loading && !error ? <Skeleton variant="rectangular" width={width} height={height} /> : null}
       <Img
@@ -77,7 +74,7 @@ function Image({
         onLoad={handleLoad}
         onError={handleError}
       />
-    </Box>
+    </ImageRoot>
   );
 }
 

diff --git a/packages/toolpad-studio-components/src/List.tsx b/packages/toolpad-studio-components/src/List.tsx
@@ -1,9 +1,13 @@
 import * as React from 'react';
 import { TemplateRenderer } from '@toolpad/studio-runtime';
-import { Box, List as MuiList, ListItem, SxProps, Skeleton, Stack } from '@mui/material';
+import { Box, List as MuiList, ListItem, SxProps, Skeleton, Stack, styled } from '@mui/material';
 import { SX_PROP_HELPER_TEXT } from './constants';
 import createBuiltin from './createBuiltin';
 
+const ToolpadList = styled(MuiList)({
+  width: '100%',
+});
+
 export type ListProps = {
   itemCount: number;
   disablePadding?: boolean;
@@ -14,7 +18,7 @@ export type ListProps = {
 
 function List({ itemCount, renderItem, disablePadding = false, sx, loading }: ListProps) {
   return (
-    <MuiList disablePadding={disablePadding} sx={{ width: '100%', ...sx }}>
+    <ToolpadList disablePadding={disablePadding} sx={sx}>
       {loading ? (
         <Stack spacing={2}>
           <Skeleton variant="rounded" />
@@ -30,7 +34,7 @@ function List({ itemCount, renderItem, disablePadding = false, sx, loading }: Li
           </ListItem>
         ))
       )}
-    </MuiList>
+    </ToolpadList>
   );
 }
 

diff --git a/packages/toolpad-studio-components/src/Paper.tsx b/packages/toolpad-studio-components/src/Paper.tsx
@@ -1,13 +1,18 @@
 import * as React from 'react';
-import { Paper as MuiPaper, PaperProps as MuiPaperProps } from '@mui/material';
+import { Paper as MuiPaper, PaperProps as MuiPaperProps, styled } from '@mui/material';
 import createBuiltin from './createBuiltin';
 import { SX_PROP_HELPER_TEXT } from './constants';
 
+const PaperRoot = styled(MuiPaper)(({ theme }) => ({
+  padding: theme.spacing(1),
+  width: '100%',
+}));
+
 function Paper({ children, sx, ...rest }: MuiPaperProps) {
   return (
-    <MuiPaper sx={{ padding: 1, width: '100%', ...sx }} {...rest}>
+    <PaperRoot sx={sx} {...rest}>
       {children}
-    </MuiPaper>
+    </PaperRoot>
   );
 }
 

diff --git a/packages/toolpad-studio-components/src/Select.tsx b/packages/toolpad-studio-components/src/Select.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextFieldProps, MenuItem, TextField } from '@mui/material';
+import { TextFieldProps, MenuItem, TextField, styled } from '@mui/material';
 import createBuiltin from './createBuiltin';
 import {
   FORM_INPUT_ARG_TYPES,
@@ -9,6 +9,10 @@ import {
 } from './Form';
 import { SX_PROP_HELPER_TEXT } from './constants';
 
+const ToolpadTextField = styled(TextField)({
+  minWidth: 120,
+});
+
 export interface SelectOption {
   value: string;
   label?: string;
@@ -66,20 +70,20 @@ function Select({
   );
 
   return renderFormInput(
-    <TextField
+    <ToolpadTextField
       {...rest}
       value={value}
       onChange={handleChange}
       select
       fullWidth={fullWidth}
-      sx={{ minWidth: 120, ...sx }}
+      sx={sx}
       {...(formInputError && {
         error: Boolean(formInputError),
         helperText: formInputError.message || '',
       })}
     >
       {renderedOptions}
-    </TextField>,
+    </ToolpadTextField>,
   );
 }
 

diff --git a/packages/toolpad-studio-components/src/Text.tsx b/packages/toolpad-studio-components/src/Text.tsx
@@ -7,13 +7,34 @@ import {
   styled,
   TextareaAutosize,
   SxProps,
+  Typography,
 } from '@mui/material';
 import { useNode } from '@toolpad/studio-runtime';
 import ErrorIcon from '@mui/icons-material/Error';
 import { errorFrom } from '@toolpad/utils/errors';
 import createBuiltin from './createBuiltin';
 import { SX_PROP_HELPER_TEXT } from './constants';
 
+const StaticTextRoot = styled(Typography)({
+  // This will give it height, even when empty.
+  // REMARK: Does it make sense to put it in MUI core?
+  [`&:empty::before`]: { content: '""', display: 'inline-block' },
+  outline: 'none',
+  whiteSpace: 'pre-wrap',
+  overflowWrap: 'anywhere',
+});
+
+const ToolpadLink = styled(MuiLink, {
+  shouldForwardProp: (prop) => prop !== 'hasMinWidth',
+})<{
+  hasMinWidth?: boolean;
+}>(({ hasMinWidth }) => ({
+  minWidth: hasMinWidth ? 150 : undefined,
+  // Same as Typography
+  [`&:empty::before`]: { content: '""', display: 'inline-block' },
+  overflowWrap: 'anywhere',
+}));
+
 const Markdown = React.lazy(async () => import('markdown-to-jsx'));
 
 const StyledTextareaAutosize = styled(TextareaAutosize)(({ theme }) => ({
@@ -135,21 +156,18 @@ function LinkContent({ value, href, loading, sx, openInNewTab }: LinkContentProp
     return value;
   }, [value, loading]);
 
+  const hasMinWidth = loading || !value;
+
   return (
-    <MuiLink
+    <ToolpadLink
       href={href}
       target={openInNewTab ? '_blank' : undefined}
       rel="noopener"
-      sx={{
-        minWidth: loading || !value ? 150 : undefined,
-        // Same as Typography
-        [`&:empty::before`]: { content: '""', display: 'inline-block' },
-        overflowWrap: 'anywhere',
-        ...sx,
-      }}
+      hasMinWidth={hasMinWidth}
+      sx={sx}
     >
       {content}
-    </MuiLink>
+    </ToolpadLink>
   );
 }
 
@@ -240,16 +258,8 @@ function TextContent({ value, loading, sx, variant }: TextContentProps) {
       className={`variant-${variant}`}
     />
   ) : (
-    <MuiTypography
-      sx={{
-        ...sx,
-        // This will give it height, even when empty.
-        // REMARK: Does it make sense to put it in MUI core?
-        [`&:empty::before`]: { content: '""', display: 'inline-block' },
-        outline: 'none',
-        whiteSpace: 'pre-wrap',
-        overflowWrap: 'anywhere',
-      }}
+    <StaticTextRoot
+      sx={sx}
       variant={variant}
       onDoubleClick={() => {
         if (nodeRuntime) {
@@ -262,7 +272,7 @@ function TextContent({ value, loading, sx, variant }: TextContentProps) {
       }}
     >
       {loading ? <Skeleton variant="text" /> : input}
-    </MuiTypography>
+    </StaticTextRoot>
   );
 }