Details of bundle changes

@material-ui/core: parsed: +19.61% , gzip: +11.07%
@mui/material-next: parsed: +136.40% , gzip: +121.20%

Generated by 🚫 dangerJS against 97b0ed9

@mnajdova is this new OverridableComponent a POC version or do you aim to release it as well?

@mnajdova is this new OverridableComponent a POC version or do you aim to release it as well?

@siriwatknp in order to avoid shipping breaking changes, I am offering this as part of file that can be used as a module augmentation. This way, people that are complaining that the types are slow, can try out to use the new version (that potentially would have a breaking change related to the refs), but it won't be required for everyone to upgrade at the same time. If things go well, we can replace the existing one in v6.

@mnajdova Great!

Note that I have tried to reproduce the issue raised in #19113, without any success. For example, I took microsoft/TypeScript#34801 without luck. It always takes 2s to show the error, I assume because of microsoft/TypeScript#34801 (comment). So, I used my old Macbook Air 2015, for which it takes longer from restarting the TypeScript server:

to see an error shown

But I saw no measurable differences:

• 5s34

import { Button } from "@mantine/core";

function Demo() {
  return (
    <div>
      <Button component="a" colorr="grayu">Next link button</Button>
    </div>
  );
}

• 6s35

import type {} from "@mui/material/OverridableComponentAugmentation";
import { Button } from "@mui/material";

function Demo() {
  return (
    <div>
      <Button component="a" color="grayu">
        Next link button
      </Button>
    </div>
  );
}

• 6s28

import { Button } from "@mui/material";

function Demo() {
  return (
    <div>
      <Button component="a" color="grayu">
        Next link button
      </Button>
    </div>
  );
}

• 5s13

import Link from "next/link";

function Demo() {
  return (
    <Link href="/hello" passHreff>
      <a>Next link button</a>
    </Link>
  );
}

• 6s03

import React from "react";
import { styled } from "@stitches/react";
import { violet, blackA, red, mauve } from "@radix-ui/colors";

const Button = styled("button", {
  all: "unset",
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  borderRadius: 4,
  padding: "0 15px",
  fontSize: 15,
  lineHeight: 1,
  fontWeight: 500,
  height: 35,
  variants: {
    variant: {
      violet: {
        backgroundColor: "white",
        color: violet.violet11,
        boxShadow: `0 2px 10px ${blackA.blackA7}`,
        "&:hover": { backgroundColor: mauve.mauve3 },
        "&:focus": { boxShadow: `0 0 0 2px black` },
      },
      red: {
        backgroundColor: red.red4,
        color: red.red11,
        "&:hover": { backgroundColor: red.red5 },
        "&:focus": { boxShadow: `0 0 0 2px ${red.red7}` },
      },
      mauve: {
        backgroundColor: mauve.mauve4,
        color: mauve.mauve11,
        "&:hover": { backgroundColor: mauve.mauve5 },
        "&:focus": { boxShadow: `0 0 0 2px ${mauve.mauve7}` },
      },
    },
  },
  defaultVariants: {
    variant: "violet",
  },
});

const AlertDialogDemo = () => (
  <Button variant="mauvee">
    Cancel
  </Button>
);

export default AlertDialogDemo;

• 7s41

import { Button } from "antd";

export default function Demo() {
  return (
    <Button type="dashed" size="smalls">
      Next link button
    </Button>
  );
}

Maybe we should call it a day, close the issue for lack of clear reproduction.

Thanks for taking a look @oliviertassinari. I agree, testing TypeScript perf problems is not an easy thing to do. I also suspect that relaying on VS code's TypeScript server to show the error can have lots of variables.

I will leave a comment on the issue opened, with the instruction for people to try the import to the module augmentation from this PR and will close the issue and ask people if they see problem in the future to create an issue with a repository with reproduction and an output of tsc -generateTrace trace compared with at least default React.

@eps1lon I thought it was worth mentioning you here. The improvements that you can see in the PR description are marely because of this change:

 export type OverrideProps<
   M extends OverridableTypeMap,
   C extends React.ElementType
 > = (
   & BaseProps<M>
-  & DistributiveOmit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>
+  & DistributiveOmit<React.ComponentPropsWithoutRef<C>, keyof BaseProps<M>>
+  & { ref?: React.Ref<Element> }
);

Based on this, looks like ComponentPropsWithRef is somewhat of a bottleneck. I understand that we are using looser types now, but maybe it's worth reporting this on the TypeScript repository and wait to see if they have some suggestion on how to improve the type. I am curious to hear your opinion.