[material-ui][styles] Convert createPalette code to typescript

[sai6855]

Was going through this PR comments and this comment was the motivation to open the PR

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-44173--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 916e703

[aarongarciah]

Does this have a purpose?

[sai6855]

Not really sure, i just copy pasted entire code from createPalette.d.ts to this file.

[ZeeshanTamboli]

I think we can remove this. Don't see the point of having it.

[sai6855]

removed here 5819055

[sai6855]

On second thoughts, many files does have export {} in their ts files. it looks like this is used to disabled automatic export. i'm reverting it back. reverted here 858a0e6

material-ui/packages/mui-types/index.d.ts

Lines 3 to 4 in 452d971

	// disable automatic export
	export {};

[ZeeshanTamboli]

What do you mean by disabling automatic export?

[aarongarciah]

There are 4 or 5 places with type casting, especially this one and the createPalette return type. Can we try avoiding type casting without breaking public types?

[sai6855]

Yeah i agree, there are lot of type castings, initially i tried to avoid castings but it seemed impossible without breaking public api's.

For example: let's take this type here. I applied casting to shade type here to make sure type of shade is one of keys in intent. So to remove this casting, we need to change type of shade to number | keyof PaletteColor from number | string.

So if we change shade type, we need to change type of lightShade and darkShade from number | string to number | keyof PaletteColor as both are passed as shade here and this results in changing PaletteAugmentColorOptions type which is a public api.

Let me know, if you need explainations for other type castings

[ZeeshanTamboli]

Not sure why TypeScript throws an error in CI here after removing string casting, but not locally.

[sai6855]

Not sure why TypeScript throws an error in CI here after removing string casting, but not locally.

Yes even in TypeScript playground I'm not seeing error , check here

added as string back here

[ZeeshanTamboli]

To maintain performance (#44075), avoid unnecessary casting here, and address this: #44059 (comment), we can make the following changes:

--- a/packages/mui-material/src/styles/createPalette.ts
+++ b/packages/mui-material/src/styles/createPalette.ts
@@ -419,17 +419,17 @@ export default function createPalette(palette: PaletteOptions): Palette {
     return colorInput;
   };

-  let modeHydrated;
+  let modeHydrated: ReturnType<typeof getLight> | ReturnType<typeof getDark>;
   if (mode === 'light') {
     modeHydrated = getLight();
   } else if (mode === 'dark') {
     modeHydrated = getDark();
-  }
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (!modeHydrated) {
+  } else {
+    if (process.env.NODE_ENV !== 'production') {
       console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
     }
+    // Should never reach here due to the default value, but safeguard
+    modeHydrated = getLight();
   }

   const paletteOutput = deepmerge(
@@ -473,7 +473,7 @@ export default function createPalette(palette: PaletteOptions): Palette {
       ...modeHydrated,
     },
     other,
-  ) as Palette;
+  );

   return paletteOutput;
 }

[sai6855]

I got confused by this diff, but I’ve removed the casting with slightly different approach here: 1812c9f. I mostly followed your approach.

changes in this commit are making CI to fail but working fine locally.

check: https://circleci.com/gh/mui/material-ui/775454

I'm suspecting Module augmentation in these files are making CI to fail due to above commit. shall i revert the commit?

material-ui/packages/mui-docs/src/branding/brandingTheme.ts

Line 16 in 1f3d69a

declare module '@mui/material/styles/createPalette' {

material-ui/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts

Line 8 in 1f3d69a

declare module '@mui/material/styles/createPalette' {

[ZeeshanTamboli]

I applied the diff I mentioned earlier in commit 260488a. However, TypeScript compilation still fails in CI (but not locally). As you noted, this is likely due to TypeScript module augmentation modifying the types. I suspect the issue might be related to CI running TypeScript tasks in parallel, where the augmented types from docs get compiled first and affect the mui-material package, though I'm not entirely sure.

That said, casting to the Palette type doesn’t seem like an ideal solution, and having to cast types in multiple places makes me question if this PR is worth the effort. What’s your take?

[sai6855]

I agree, adding multiple assertions doesn't seem like an ideal solution. We can revisit this in future