[mui-codemod] Fix merging of slotProps and componentProps (#41323)

mui · Mar 7, 2024 · 727cc39 · 727cc39
1 parent 16e8ef7
commit 727cc39
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 23 deletions.
diff --git a/packages/mui-codemod/src/deprecations/alert-props/alert-props.test.js b/packages/mui-codemod/src/deprecations/alert-props/alert-props.test.js
@@ -31,7 +31,7 @@ describe('@mui/codemod', () => {
         const actual = transform(
           { source: read('./test-cases/theme.actual.js') },
           { jscodeshift },
-          { printOptions: { trailingComma: true } },
+          { printOptions: { trailingComma: false } },
         );
 
         const expected = read('./test-cases/theme.expected.js');

diff --git a/packages/mui-codemod/src/deprecations/alert-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/alert-props/test-cases/actual.js
@@ -16,3 +16,9 @@ import Alert from '@mui/material/Alert';
   slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }}
   componentsProps={{ closeButton: componentsButtonProps }}
 />;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  components={{ CloseButton: ComponentsButton }}
+  slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }}
+  componentsProps={{ closeButton: componentsButtonProps, closeIcon: componentsIconProps }}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/alert-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/alert-props/test-cases/expected.js
@@ -17,4 +17,16 @@ import Alert from '@mui/material/Alert';
   }} />;
 <Alert
   slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
-  slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }} />;
+  slotProps={{ closeIcon: slotsIconProps, closeButton: {
+    ...componentsButtonProps,
+    ...slotsButtonProps
+  } }} />;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  slotProps={{ closeButton: {
+    ...componentsButtonProps,
+    ...slotsButtonProps
+  }, closeIcon: {
+    ...componentsIconProps,
+    ...slotsIconProps
+  } }} />;
diff --git a/packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.actual.js
@@ -28,3 +28,14 @@ fn({
     },
   },
 });
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      components: { CloseButton: ComponentsButton },
+      slots: { closeIcon: SlotsIcon, closeButton: SlotsButton },
+      componentsProps: { closeButton: componentsButtonProps, closeIcon: componentsIconProps },
+      slotProps: { closeIcon: slotsIconProps, closeButton: slotsButtonProps },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.expected.js
@@ -2,12 +2,12 @@ fn({
   MuiAlert: {
     defaultProps: {
       slots: {
-        closeButton: ComponentsButton,
+        closeButton: ComponentsButton
       },
 
       slotProps: {
-        closeButton: componentsButtonProps,
-      },
+        closeButton: componentsButtonProps
+      }
     },
   },
 });
@@ -17,13 +17,13 @@ fn({
     defaultProps: {
       slots: {
         closeButton: ComponentsButton,
-        closeIcon: SlotsIcon,
+        closeIcon: SlotsIcon
       },
 
       slotProps: {
         closeButton: componentsButtonProps,
-        closeIcon: slotsIconProps,
-      },
+        closeIcon: slotsIconProps
+      }
     },
   },
 });
@@ -33,13 +33,40 @@ fn({
     defaultProps: {
       slots: {
         closeButton: SlotsButton,
-        closeIcon: SlotsIcon,
+        closeIcon: SlotsIcon
       },
 
       slotProps: {
-        closeButton: slotsButtonProps,
-        closeIcon: slotsIconProps,
+        closeButton: {
+          ...componentsButtonProps,
+          ...slotsButtonProps
+        },
+
+        closeIcon: slotsIconProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      slots: {
+        closeButton: SlotsButton,
+        closeIcon: SlotsIcon
       },
+
+      slotProps: {
+        closeButton: {
+          ...componentsButtonProps,
+          ...slotsButtonProps
+        },
+
+        closeIcon: {
+          ...componentsIconProps,
+          ...slotsIconProps
+        }
+      }
     },
   },
 });
diff --git a/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js b/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js
@@ -31,7 +31,7 @@ describe('@mui/codemod', () => {
         const actual = transform(
           { source: read('./test-cases/theme.actual.js') },
           { jscodeshift },
-          { printOptions: { trailingComma: true } },
+          { printOptions: { trailingComma: false } },
         );
 
         const expected = read('./test-cases/theme.expected.js');

diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js
@@ -16,3 +16,9 @@ import Slider from '@mui/material/Slider';
   slotProps={{ rail: slotsRailProps, track: slotsTrackProps }}
   componentsProps={{ track: componentsTrackProps }}
 />;
+<Slider
+  slots={{ rail: SlotsRail, track: SlotsTrack }}
+  components={{ Track: ComponentsTrack }}
+  slotProps={{ rail: slotsRailProps, track: slotsTrackProps }}
+  componentsProps={{ track: componentsTrackProps, rail: componentsRailProps}}
+/>;
diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js
@@ -17,4 +17,16 @@ import Slider from '@mui/material/Slider';
   }} />;
 <Slider
   slots={{ rail: SlotsRail, track: SlotsTrack }}
-  slotProps={{ rail: slotsRailProps, track: slotsTrackProps }} />;
+  slotProps={{ rail: slotsRailProps, track: {
+    ...componentsTrackProps,
+    ...slotsTrackProps
+  } }} />;
+<Slider
+  slots={{ rail: SlotsRail, track: SlotsTrack }}
+  slotProps={{ track: {
+    ...componentsTrackProps,
+    ...slotsTrackProps
+  }, rail: {
+    ...componentsRailProps,
+    ...slotsRailProps
+  } }} />;
diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.actual.js
@@ -28,3 +28,14 @@ fn({
     },
   },
 });
+
+fn({
+  MuiSlider: {
+    defaultProps: {
+      components: { Track: ComponentsTrack },
+      slots: { rail: SlotsRail, track: SlotsTrack },
+      componentsProps: { track: componentsTrackProps, rail: componentsRailProps },
+      slotProps: { rail: slotsRailProps, track: slotsTrackProps },
+    },
+  },
+});
diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js
@@ -2,12 +2,12 @@ fn({
   MuiSlider: {
     defaultProps: {
       slots: {
-        track: ComponentsTrack,
+        track: ComponentsTrack
       },
 
       slotProps: {
-        track: componentsTrackProps,
-      },
+        track: componentsTrackProps
+      }
     },
   },
 });
@@ -17,13 +17,13 @@ fn({
     defaultProps: {
       slots: {
         track: ComponentsTrack,
-        rail: SlotsRail,
+        rail: SlotsRail
       },
 
       slotProps: {
         track: componentsTrackProps,
-        rail: slotsRailProps,
-      },
+        rail: slotsRailProps
+      }
     },
   },
 });
@@ -33,13 +33,40 @@ fn({
     defaultProps: {
       slots: {
         track: SlotsTrack,
-        rail: SlotsRail,
+        rail: SlotsRail
       },
 
       slotProps: {
-        track: slotsTrackProps,
-        rail: slotsRailProps,
+        track: {
+          ...componentsTrackProps,
+          ...slotsTrackProps
+        },
+
+        rail: slotsRailProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiSlider: {
+    defaultProps: {
+      slots: {
+        track: SlotsTrack,
+        rail: SlotsRail
       },
+
+      slotProps: {
+        track: {
+          ...componentsTrackProps,
+          ...slotsTrackProps
+        },
+
+        rail: {
+          ...componentsRailProps,
+          ...slotsRailProps
+        }
+      }
     },
   },
 });
diff --git a/packages/mui-codemod/src/deprecations/utils/replaceComponentsWithSlots.js b/packages/mui-codemod/src/deprecations/utils/replaceComponentsWithSlots.js
@@ -69,6 +69,19 @@ function replaceJsxComponentsPropsProp(j, element) {
               key: prop.key.name,
               expression: prop.value,
             });
+          } else {
+            attr.value.expression.properties = attr.value.expression.properties.filter(
+              (p) => p?.key?.name !== prop.key.name,
+            );
+
+            assignObject(j, {
+              target: attr,
+              key: prop.key.name,
+              expression: j.objectExpression([
+                j.spreadElement(prop.value),
+                j.spreadElement(slotProps[prop.key.name]),
+              ]),
+            });
           }
         });
       }
@@ -131,7 +144,15 @@ function replaceDefaultPropsComponentsPropsProp(j, defaultPropsPathCollection) {
 
       const slots = existingSlots
         ? existingSlots.value.properties.reduce((acc, prop) => {
-            return { ...acc, [prop.key.name]: prop.value };
+            return {
+              ...acc,
+              [prop.key.name]: components[prop.key.name]
+                ? j.objectExpression([
+                    j.spreadElement(components[prop.key.name]),
+                    j.spreadElement(prop.value),
+                  ])
+                : prop.value,
+            };
           }, {})
         : {};