-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
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
[Joy] Add slots
/slotProps
props to the typing of all components and apply useSlot
to all components
#34997
Conversation
@mui/joy: parsed: +0.15% , gzip: +0.14% |
useSlot
to all components
useSlot
to all componentsslots
/slotProps
props to the typing of all components and apply useSlot
to all components
a75ca9f
to
25a8a11
Compare
slots
/slotProps
props to the typing of all components and apply useSlot
to all componentsslots
/slotProps
props to the typing of all components and apply useSlot
to all components
39cf599
to
cd70d9b
Compare
f15301f
to
d2e812a
Compare
A few tests still fail, but I think I spent enough time trying to figure out. Your help would be appreciated, Jun. @siriwatknp |
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.
👍 Great job @hbjORbj. Let's wait until the codemod PR is approved.
const root = j(file.source); | ||
const printOptions = options.printOptions; | ||
|
||
const transformed = root.findJSXElements().forEach((path) => { |
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.
@hbjORbj To make codemod specific to Joy UI. We should do this:
- list the component imports first
import { Alert as JoyAlert } from '@mui/joy';
import JoyAutocomplete from '@mui/joy/Autocomplete';
// the list should be ['JoyAlert', 'JoyAutocomplete']
- use
.findJSXElements($name)
and then do the transform as you already did.
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.
This is one example of how to list the imports https://github.com/siriwatknp/material-ui/blob/joy/variant-inversion/packages/mui-codemod/src/v5.0.0/theme-provider.js#L15
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.
Hey, Thanks, Jun.
I changed it to the following in this commit. Please let me know if I did it correctly.
root
.find(j.ImportDeclaration)
.filter(({ node }) => {
return node.source.value.startsWith('@mui/joy');
})
.forEach((path) => {
path.node.specifiers.forEach((node) => {
root.findJSXElements(node.local.name).forEach((elementPath) => {
if (elementPath.node.type !== 'JSXElement') {
return;
}
elementPath.node.openingElement.attributes.forEach((elementNode) => {
if (elementNode.type !== 'JSXAttribute') {
return;
}
switch (elementNode.name.name) {
case 'components':
transformComponentsProp(elementNode);
break;
case 'componentsProps':
transformComponentsPropsProp(elementNode);
break;
default:
}
});
});
});
});
const transformed = root.findJSXElements();
return transformed.toSource(printOptions);
@hbjORbj I suggest adding another test case for the codemod. // the codemod should transform only Joy UI components;
import { Alert as JoyAlert } from '@mui/joy';
import JoyAutocomplete from '@mui/joy/Autocomplete';
import CustomComponent from 'components/Custom';
function App() {
return (
<div>
<JoyAlert components={{ ... }} componentsProps={{ ... }} />
<JoyAutocomplete components={{ ... }} componentsProps={{ ... }} />
<CustomComponent components={{ ... }} componentsProps={{ ... }} />
</div>
)
} |
a3b40eb
to
c3b09f7
Compare
Ready for review again! @siriwatknp |
…nd apply `useSlot` to all components (mui#34997)
This PR includes:
components
toslots
andcomponentsProps
toslotProps
in all Joy UI components and inuseSlot()
.useSlot()
to all Joy UI componentscomponents
toslots
andcomponentsProps
toslotProps
in all Joy UI componentsChecklist