mui · siriwatknp · Apr 11, 2024 · Apr 3, 2024 · Apr 10, 2024 · Apr 11, 2024
diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json
@@ -33,15 +33,15 @@
     "@babel/core": "^7.24.4",
     "@babel/runtime": "^7.24.4",
     "@babel/traverse": "^7.24.1",
-    "jscodeshift": "^0.13.1",
+    "jscodeshift": "^0.15.2",
     "jscodeshift-add-imports": "^1.0.10",
     "postcss": "^8.4.38",
     "postcss-cli": "^8.3.1",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
     "@types/chai": "^4.3.14",
-    "@types/jscodeshift": "0.11.5",
+    "@types/jscodeshift": "0.11.11",
     "chai": "^4.4.1"
   },
   "sideEffects": false,

diff --git a/packages/mui-codemod/src/v5.0.0/base-remove-unstyled-suffix.js b/packages/mui-codemod/src/v5.0.0/base-remove-unstyled-suffix.js
@@ -10,14 +10,13 @@ export default function transformer(file, api) {
     .find(j.ImportDeclaration)
     .filter(({ node }) => {
       const sourceVal = node.source.value;
-      if (sourceVal.startsWith('@mui/base')) {
-        node.source.value = sourceVal.replace(/unstyled/im, '');
-        node.source.raw = sourceVal.replace(/unstyled/im, '');
-      }
-
       return sourceVal.startsWith('@mui/base');
     })
     .forEach((path) => {
+      const sourceVal = path.node.source.value;
+      if (sourceVal.startsWith('@mui/base')) {
+        path.node.source = j.stringLiteral(sourceVal.replace(/unstyled/im, ''));
+      }
       const specifiers = [];
       path.node.specifiers.forEach((elementNode) => {
         const importedName = elementNode.imported?.name || '';

diff --git a/packages/mui-codemod/src/v5.0.0/box-sx-prop.test/expected.js b/packages/mui-codemod/src/v5.0.0/box-sx-prop.test/expected.js
@@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button';
 
 export default function BoxComponent(props) {
   return (
-    <Box
+    (<Box
       sx={{
         m: 2,
         border: "1px dashed grey",
@@ -25,6 +25,6 @@ export default function BoxComponent(props) {
         sx={{
           p: [1, 2, 4]
         }} />
-    </Box>
+    </Box>)
   );
 }
diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/eighth.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/eighth.expected.js
@@ -115,7 +115,7 @@ export default function Cart() {
     });
   };
   return (
-    <Root>
+    (<Root>
       <Head title="View cart">
         <meta name="robots" content="noindex,nofollow" />
       </Head>
@@ -208,6 +208,6 @@ export default function Cart() {
         </OrderBody>
       </Container>
       <AppFooter />
-    </Root>
+    </Root>)
   );
 }
diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/eleventh.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/eleventh.expected.js
@@ -29,9 +29,9 @@ export default function Page() {
 
 
   return (
-    <StyledSomeNamespaceSomeComponent>
+    (<StyledSomeNamespaceSomeComponent>
       <h1 className={classes.header}></h1>
       <img className={classes.img}></img>
-    </StyledSomeNamespaceSomeComponent>
+    </StyledSomeNamespaceSomeComponent>)
   );
 }
diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/fifth.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/fifth.expected.js
@@ -62,7 +62,7 @@ function SellHero() {
 
 
   return (
-    <Root className={classes.root}>
+    (<Root className={classes.root}>
       <Container className={classes.container}>
         <Typography variant="h1" align="center" color="textPrimary" className={classes.title}>
           Sell themes
@@ -87,7 +87,7 @@ function SellHero() {
           </Button>
         </div>
       </Container>
-    </Root>
+    </Root>)
   );
 }
 

diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/first.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/first.expected.js
@@ -180,7 +180,7 @@ class AppAppBar extends React.Component {
     const { menuOpen } = this.state;
 
     return (
-      <StyledAppBar essential={essential} position={position}>
+      (<StyledAppBar essential={essential} position={position}>
         <div className={clsx(classes.wrap, { [classes.wrapOpened]: menuOpen })}>
           <Link to="/" aria-label="Back to homepage" color="inherit">
             <Logo color={menuOpen ? 'inherit' : 'textPrimary'} />
@@ -237,7 +237,7 @@ class AppAppBar extends React.Component {
             </div>
           )}
         </div>
-      </StyledAppBar>
+      </StyledAppBar>)
     );
   }
 }

diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/fourth.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/fourth.expected.js
@@ -31,10 +31,10 @@ const StyledCard = styled(Card)(function getStyles(
 export const MyCard = ((props) => {
   const { } = props;
   return (
-    <StyledCard className={classes.root}>
+    (<StyledCard className={classes.root}>
       <CardActions className={classes.actions}>
         <Button className={classes.button}>Submit</Button>
       </CardActions>
-    </StyledCard>
+    </StyledCard>)
   );
 });
diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/nineth.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/nineth.expected.js
@@ -29,9 +29,9 @@ export default function Page() {
 
 
   return (
-    <Root>
+    (<Root>
       <h1 className={classes.header}></h1>
       <img className={classes.img}></img>
-    </Root>
+    </Root>)
   );
 }
diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/second.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/second.expected.js
@@ -63,7 +63,7 @@ function AffiliatesHero() {
 
 
   return (
-    <Root className={classes.root}>
+    (<Root className={classes.root}>
       <Container className={classes.container}>
         <Typography variant="h1" align="center" color="textPrimary" className={classes.title}>
           Affiliate Program
@@ -85,7 +85,7 @@ function AffiliatesHero() {
           </Button>
         </div>
       </Container>
-    </Root>
+    </Root>)
   );
 }
 

diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/seventh.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/seventh.expected.js
@@ -86,7 +86,7 @@ function Iframe(props) {
   }, []);
 
   return (
-    <Root>
+    (<Root>
       {loaded === false ? (
         <div className={classes.loader}>
           <CircularProgress />
@@ -109,7 +109,7 @@ function Iframe(props) {
         frameBorder="0"
         {...props}
       />
-    </Root>
+    </Root>)
   );
 }
 

diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/third.expected.js b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/third.expected.js
@@ -27,10 +27,10 @@ const StyledCard = styled(Card)((
 export const MyCard = ((props) => {
   const { } = props;
   return (
-    <StyledCard className={classes.root}>
+    (<StyledCard className={classes.root}>
       <CardActions className={classes.actions}>
         <Button className={classes.button}>Submit</Button>
       </CardActions>
-    </StyledCard>
+    </StyledCard>)
   );
 });
diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles.expected.tsx b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles.expected.tsx
@@ -19,7 +19,7 @@ const Root = styled('div')((
 const MyComponent = (props) => {
 
 
-  return <Root {...props} className={classes.root} />;
+  return (<Root {...props} className={classes.root} />);
 };
 
 export default MyComponent;
diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles1.expected.tsx b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles1.expected.tsx
@@ -19,7 +19,7 @@ const Root = styled('div')((
 const MyComponent = (props) => {
   const { } = props;
 
-  return <Root {...props} className={classes.root} />;
+  return (<Root {...props} className={classes.root} />);
 };
 
 export default (MyComponent);
diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles2.expected.tsx b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles2.expected.tsx
@@ -15,7 +15,7 @@ const Root = styled('div')({
 const MyComponent = (props) => {
   const { } = props;
 
-  return <Root {...props} className={classes.root} />;
+  return (<Root {...props} className={classes.root} />);
 };
 
 export default (MyComponent);
diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles3.expected.tsx b/packages/mui-codemod/src/v5.0.0/jss-to-styled.test/withCreateStyles3.expected.tsx
@@ -15,7 +15,7 @@ const Root = styled('div')({
 const MyComponent = (props) => {
 
 
-  return <Root {...props} className={classes.root} />;
+  return (<Root {...props} className={classes.root} />);
 };
 
 export default MyComponent;
diff --git a/.../mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example-params.tsx b/.../mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example-params.tsx
@@ -1,12 +1,13 @@
 import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles<{color: 'primary' | 'secondary', padding: number}, 'child' | 'small'>({name: 'App'})((theme, { color, padding }, classes) => ({
-  root: {
+  root: ({
     padding: padding,
+
     [`&:hover .${classes.child}`]: {
       backgroundColor: theme.palette[color].main,
     }
-  },
+  }),
   small: {},
   child: {
     border: '1px solid black',
@@ -28,15 +29,15 @@ function App({classes: classesProp}: {classes?: any}) {
   });
 
   return (
-    <div className={classes.root}>
+    (<div className={classes.root}>
       <div className={classes.child}>
         The Background take the primary theme color when the mouse hovers the parent.
       </div>
       <div className={cx(classes.child, classes.small)}>
         The Background take the primary theme color when the mouse hovers the parent.
         I am smaller than the other child.
       </div>
-    </div>
+    </div>)
   );
 }
 

diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example.tsx b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-typescript-docs-example.tsx
@@ -22,15 +22,15 @@ const useStyles = makeStyles<void, 'child' | 'small'>()((theme, _params, classes
 function App() {
   const { classes, cx } = useStyles();
   return (
-    <div className={classes.parent}>
+    (<div className={classes.parent}>
       <div className={classes.child}>
         Background turns red when the mouse hovers over the parent.
       </div>
       <div className={cx(classes.child, classes.small)}>
         Background turns red when the mouse hovers over the parent.
         I am smaller than the other child.
       </div>
-    </div>
+    </div>)
   );
 }
 

diff --git a/packages/mui-codemod/src/v5.0.0/preset-safe.test/expected.js b/packages/mui-codemod/src/v5.0.0/preset-safe.test/expected.js
@@ -87,7 +87,7 @@ const Header = () => {
   const classes = useStyles();
   const { dark, setDark } = React.useContext(DarkContext);
   return (
-    <AppBar color="default" position="sticky">
+    (<AppBar color="default" position="sticky">
       <Toolbar>
         <Typography className={classes.head} variant="h6">
           👋 Hello
@@ -110,7 +110,7 @@ const Header = () => {
           onChange={(event, checked) => setDark(checked)}
         />
       </Toolbar>
-    </AppBar>
+    </AppBar>)
   );
 };
 
@@ -119,7 +119,7 @@ function App() {
   const handleClose = () => setOpen(false);
   const { setDark } = React.useContext(DarkContext);
   const classes = useStyles();
-  return <>
+  return (<>
     <CssBaseline />
     <Header />
     <Container>
@@ -173,7 +173,7 @@ function App() {
         </DialogActions>
       </Dialog>
     </Container>
-  </>;
+  </>);
 }
 
 const withThemeProvider = (Component) => (props) => {
@@ -188,15 +188,15 @@ const withThemeProvider = (Component) => (props) => {
     [dark],
   );
   return (
-    <DarkContext.Provider value={{ dark, setDark }}>
+    (<DarkContext.Provider value={{ dark, setDark }}>
       <StylesProvider injectFirst>
         <StyledEngineProvider injectFirst>
           <ThemeProvider theme={theme}>
             <Component {...props} />
           </ThemeProvider>
         </StyledEngineProvider>
       </StylesProvider>
-    </DarkContext.Provider>
+    </DarkContext.Provider>)
   );
 };
 

diff --git a/packages/mui-codemod/src/v5.0.0/styled-engine-provider.test/mui-theme-provider.expected.js b/packages/mui-codemod/src/v5.0.0/styled-engine-provider.test/mui-theme-provider.expected.js
@@ -5,15 +5,15 @@ import Page from './pages';
 
 const App = () => {
   return (
-    <Providers>
+    (<Providers>
       <StyledEngineProvider injectFirst>
         <MuiThemeProvider theme={createMuiTheme()}>
           <OtherProvider>
             <Page />
           </OtherProvider>
         </MuiThemeProvider>
       </StyledEngineProvider>
-    </Providers>
+    </Providers>)
   );
 };
 

diff --git a/packages/mui-codemod/src/v5.0.0/styled-engine-provider.test/theme-provider.expected.js b/packages/mui-codemod/src/v5.0.0/styled-engine-provider.test/theme-provider.expected.js
@@ -6,11 +6,11 @@ import Page from './pages';
 const App = () => {
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={createTheme()}>
+      (<ThemeProvider theme={createTheme()}>
         <OtherProvider>
           <Page />
         </OtherProvider>
-      </ThemeProvider>
+      </ThemeProvider>)
     </StyledEngineProvider>
   );
 };

diff --git a/packages/mui-codemod/src/v5.0.0/theme-provider.test/core-import.expected.js b/packages/mui-codemod/src/v5.0.0/theme-provider.test/core-import.expected.js
@@ -2,8 +2,8 @@ import { createTheme, ThemeProvider, Theme } from '@material-ui/core';
 
 function App() {
   return (
-    <ThemeProvider theme={createTheme()}>
+    (<ThemeProvider theme={createTheme()}>
       <div data-testid="foo" />
-    </ThemeProvider>
+    </ThemeProvider>)
   );
 }
diff --git a/packages/mui-codemod/src/v5.0.0/theme-provider.test/expected.js b/packages/mui-codemod/src/v5.0.0/theme-provider.test/expected.js
@@ -2,8 +2,8 @@ import { createTheme, ThemeProvider, Theme } from '@material-ui/core/styles';
 
 function App() {
   return (
-    <ThemeProvider theme={createTheme()}>
+    (<ThemeProvider theme={createTheme()}>
       <div data-testid="foo" />
-    </ThemeProvider>
+    </ThemeProvider>)
   );
 }