-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[core] Add createMuiStrictModeTheme #20523
Conversation
testing if unused imports are removed from the bundle
This reverts commit 0762f98.
@material-ui/core: parsed: +2.01% , gzip: +1.62% Details of bundle changes.Comparing: 29d9ace...f43ffe2 Details of page changes
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Smart, +1 for using unstable
until we shift work to v5.
...other | ||
} = props; | ||
|
||
return ( | ||
<Fade in={open} timeout={transitionDuration} {...other}> | ||
<TransitionComponent in={open} timeout={transitionDuration} {...other}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oops, I had forgotten about this one in #17047 (comment).
Bundle size looks good:
|
@@ -74,7 +76,7 @@ const Zoom = React.forwardRef(function Zoom(props, ref) { | |||
}; | |||
|
|||
return ( | |||
<Transition | |||
<TransitionComponent |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we call the root component prop Component
to match the other non transition component convention?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not a fan of the generic term if the component has a specific task.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder. It could feel surprising 🤔.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That the component responsible for Transition is named TransitionComponent over Component? Is this seriously a concern?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would it be like we change the convention for the style rule, naming the root class name .transition
over .root
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you think of the idea to introduce a Components?: { Root: React.ComponentType, … }
prop for v5 and empowering deep component customizations with styled component?
Similarly to what we do for the class names:
className
prop at the rootclasses.root
object at the rootclasses.xxx
object for the nested elements
we could have:
Component
prop at the rootComponents.Root
object at the rootComponents.xxx
object for the nested components
@oliviertassinari @eps1lon |
Generally these issues are indicative of a over-bundling. |
Anyway it forces bundler to process two versions of the same package. |
What is the issue with that? A bundler should be able to do that. We have SemVer for that. Seems like you don't care about versioning packages. Maybe some bundlers can be configured to deduplicate every package to the highest version. |
Nevermind. I missed you already published new version. |
Hey thank you all for this, much relief from my console warnings. May we get typescript types for this please? I noticed the Transitions all have types (ex. unstable_StrictModeTransition..) but not for createMuiStrictModeTheme. for now though will just be doing |
PRs welcome as usual. We're not really pursuing this right now since there are other issues that aren't fixable without a breaking change. |
Possible solution for #13394 (comment)
I realized that a gist would be too hard to integrate if you already have a custom theme. We want to remove as much friction as possible since testing Material-UI in StrictMode is very useful.
So we're going with a (hopefully) tree-shakeable solution that won't affect prod bundles:
docs bundle should not only show marginal size increases.
We use the
<Component ComponentImplementation={FancyImplementation} />
pattern for dependency injection. Bundle aliases would not be sufficient. All the added props are undocumented for the time being. Otherwise we would need to prefix them withunstable_
and I'm too lazy for that 😉 So they stay private for now. Only the added components are public (withunstable_
) since they are required if you build your own components on top of our transitions (like we do with e.g. the Notifications component).Related to #13394