https://github.com/zardoy/codemod-scripts
Trying to create codemod scripts for every possible case
https://github.com/zardoy/codemod-scripts
Last synced: 5 months ago
JSON representation
Trying to create codemod scripts for every possible case
- Host: GitHub
- URL: https://github.com/zardoy/codemod-scripts
- Owner: zardoy
- License: mit
- Created: 2021-06-06T11:12:40.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-06T13:22:27.000Z (about 5 years ago)
- Last Synced: 2025-04-06T21:41:49.185Z (about 1 year ago)
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# Codemod Scripts
Refactor scripts for the web.
The most probably this repo will move to something like https://codeshiftcommunity.com/
## Scripts (planned)
#### `process.env` → `import.meta.env`
Modes: `snowpack`, `vite`, `raw`
If neither snowpack nor vite config file is present and `--mode` option isn't specified - it throws.
`raw` mode just replaces
- Mode: `snowpack` or `vite`
```diff
- process.env.NODE_ENV
+ process.env.MODE
// Vite
- process.env.REACT_APP_NAME
+ process.env.VITE_NAME
// Snowpack
- process.env.REACT_APP_NAME
+ process.env.SNOWPACK_PUBLIC_NAME
```
### React
#### [fix] useState setter name
```diff
- const [name, setNewName] = useState("Alex");
+ const [name, setName] = useState("Alex");
```
### React Styles
#### Material-UI createStyle → emotion className css
Old code:
```tsx
import { useStyles, Theme } from "@material-ui/core"
type Props = {
size: number
};
const useStyles = makeStyles(theme => ({
content: {
paddingBottom: ({ size }) => theme.spacing(4) + size
}
}));
const Component: React.FC = () => {
const [size, setSize] = useState(5);
const classes = useStyles({ size });
return
;
};
```
New code:
> Note 1: [vscode-styled-components extension](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components) must be installed to get intellisense support.
> Note 2: That's not ideal solution because you need to handle `px` yourself (see code below)
```tsx
import { useTheme } from "@material-ui/core"
import { css } from "@emotion/css"
const Component: React.FC = () => {
const theme = useTheme();
const [size, setSize] = useState(5);
return
;
};
```
The ideal solution is `css` prop (or css injection at compilation-time).
But at least with the approach above you'll get better performance (because its actually native VSCode's *css* language provider, not TypeScript)