Skip to content

Commit

Permalink
feat(codemod): Created a new @react-md/codemod package to help with n…
Browse files Browse the repository at this point in the history
…ew releases
  • Loading branch information
mlaursen committed Nov 24, 2021
1 parent 436fbff commit 41c1fa6
Show file tree
Hide file tree
Showing 32 changed files with 1,158 additions and 22 deletions.
2 changes: 2 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
packages/material-icons/src
packages/documentation/src/constants/sandboxes
packages/documentation/src/components/SassDocPage
packages/codemod/transforms/**/__tests__
packages/codemod/transforms/**/__testfixtures__

# this is needed to fix a config extension error for "@ljharb" in the qs library
packages/*/node_modules
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ packages/*/*.tsbuildinfo
/packages/*/lib
/packages/*/dist
/packages/*/types
/packages/codemod/bin
/packages/dev-utils/bin
/packages/material-icons/bin
/packages/material-icons/temp
Expand Down
4 changes: 4 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ packages/*/bin
packages/*/dist
packages/*/types
packages/*/.next
packages/codemod/transforms/**/__testfixtures__/**/*.output.ts
packages/codemod/transforms/**/__testfixtures__/**/*.output.tsx
packages/codemod/transforms/**/__testfixtures__/**/*.output.js
packages/codemod/transforms/**/__testfixtures__/**/*.output.jsx
packages/documentation/src/constants/sassdoc
packages/documentation/src/constants/sandboxes
packages/documentation/public/tsdocs
8 changes: 6 additions & 2 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@ const path = require('path');

const packages = fs
.readdirSync(path.join(process.cwd(), 'packages'))
.filter((name) => !['dev-utils'].includes(name));
.filter((name) => !['dev-utils', 'codemod'].includes(name));

const roots = packages.map((name) => `<rootDir>/packages/${name}/src`);
roots.push('<rootDir>/packages/codemod');

const docsSrc = '<rootDir>/packages/documentation/src';

Expand All @@ -15,6 +18,7 @@ if (!isWatchMode) {
'<rootDir>/packages/*/src/**/*.{ts,tsx}',
// internal usage and don't matter for the library coverage reports
'!<rootDir>/packages/{dev-utils,documentation,material-icons,react-md}/src/**/*',
'!<rootDir>/packages/codemod/**/*',
// these are generated files
'!<rootDir>/packages/*/src/scssVariables.ts',
// index.ts files are always `export * from "./fileOrFolder"`
Expand All @@ -25,7 +29,7 @@ if (!isWatchMode) {
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
roots: packages.map((name) => `<rootDir>/packages/${name}/src`),
roots,
globals: {
'ts-jest': {
tsconfig: './tsconfig.test.json',
Expand Down
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"scripts": {
"prepare": "husky install",
"cz": "cz",
"rmd-codemod": "node packages/codemod/bin/rmd-codemod.js",
"release": "dev-utils release",
"sandbox": "dev-utils sandbox",
"sassdoc": "dev-utils sassdoc",
Expand All @@ -27,7 +28,8 @@
"build-cjs": "tsc -b tsconfig.cjs.json",
"build-var": "tsc -b tsconfig.var.json",
"build-umd": "yarn workspace react-md umd --silent",
"build": "npm-run-all styles combine-styles build-ejs build-cjs build-var",
"build-codemod": "yarn workspace @react-md/codemod build",
"build": "npm-run-all styles combine-styles build-ejs build-cjs build-var build-codemod",
"typecheck": "tsc -p tsconfig.check.json",
"lint-scripts": "eslint \"packages/*/src/**/*.{ts,tsx,js,jsx}\"",
"lint-styles": "stylelint \"packages/*/src/**/*.scss\"",
Expand Down
22 changes: 22 additions & 0 deletions packages/codemod/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
The MIT License (MIT)

Copyright (c) 2021 Mikkel Laursen

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

172 changes: 172 additions & 0 deletions packages/codemod/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
# @react-md/codemod

This repository contains a collection of codemod scripts for use with
[JSCodeshift](https://github.com/facebook/jscodeshift) that help update ReactMD
APIs.

> Note: If you use [prettier](https://prettier.io/), you will most likely need
> to re-format your files after running a codemod.
<!-- docs -->

## Usage

```sh
Usage: npx @react-md/codemod [options] [command]

Run a codemod script to update to the latest version of ReactMD.

Running this script without any options or commands will start an interactive wizard.


Options:
-h, --help display help for command

Commands:
v3-to-v4/preset [options] [files...]
v3-to-v4/rename-text-to-typography [options] [files...]
v3-to-v4/scale-transition-props [options] [files...]
```

### Transformations

### `v3-to-v4/preset`

```sh
Usage: npx @react-md/codemod v3-to-v4/preset [options] [files...]

Arguments:
files An optional glob or folder path to transform
(default: ".")

Options:
-d, --dry Dry run (no changes are made to files) (default:
false)
-p, --print Print transformed files to your terminal
(default: false)
--parser <parser> The file parser to use. (choices: "babel",
"tsx", "", default: "")
--jscodeshift <jscodeshift> (Advanced) Pass options directly to jscodeshift
(default: "")
-h, --help display help for command
```

### `v3-to-v4/rename-text-to-typography`

#### Changes

```diff
import {
- Text,
- TextProps,
- TextTypes,
- TextRenderFunction,
- TextElement,
+ Typography,
+ TypographyProps,
+ TypographyType,
+ TypographyRenderFunction,
+ TypographyHTMLElement,
TextContainer,
} from "@react-md/typography";

-const renderer: TextRenderFunction = ({ className }) => (
+const renderer: TypographyRenderFunction = ({ className }) => (
<div className={className} />
);

-const types: TextTypes[] = [
+const types: TypographyType[] = [
"headline-1",
"headline-2",
"headline-3",
@@ -27,17 +27,15 @@ const types: TextTypes[] = [
"button",
];

-const props: TextProps = {};
-let element: TextElement;
+const props: TypographyProps = {};
+let element: TypographyHTMLElement;

export default function Example() {
- return (
- <>
- <Text>Hello</Text>
+ return <>
+ <Typography>Hello</Typography>
<TextContainer>
- <Text>World!</Text>
- <Text type="headline-1">Headline</Text>
+ <Typography>World!</Typography>
+ <Typography type="headline-1">Headline</Typography>
</TextContainer>
- </>
- );
+ </>;
}
,
```

```sh
Usage: npx @react-md/codemod v3-to-v4/rename-text-to-typography [options] [files...]

Arguments:
files An optional glob or folder path to transform
(default: ".")

Options:
-d, --dry Dry run (no changes are made to files) (default:
false)
-p, --print Print transformed files to your terminal
(default: false)
--parser <parser> The file parser to use. (choices: "babel",
"tsx", "", default: "")
--jscodeshift <jscodeshift> (Advanced) Pass options directly to jscodeshift
(default: "")
-h, --help display help for command
```

### `v3-to-v4/scale-transition-props`

#### Changes

```diff

export default function Example() {
const [visible, setVisible] = useState(false);
- return (
- <>
+ return <>
<button type="button" onClick={() => setVisible((p) => !p)}>
Toggle
</button>
- <ScaleTransition visible={visible}>
+ <ScaleTransition transitionIn={visible}>
<div>Something</div>
</ScaleTransition>
- </>
- );
+ </>;
}
,
```

```sh
Usage: npx @react-md/codemod v3-to-v4/scale-transition-props [options] [files...]

Arguments:
files An optional glob or folder path to transform
(default: ".")

Options:
-d, --dry Dry run (no changes are made to files) (default:
false)
-p, --print Print transformed files to your terminal
(default: false)
--parser <parser> The file parser to use. (choices: "babel",
"tsx", "", default: "")
--jscodeshift <jscodeshift> (Advanced) Pass options directly to jscodeshift
(default: "")
-h, --help display help for command
```
49 changes: 49 additions & 0 deletions packages/codemod/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
{
"name": "@react-md/codemod",
"version": "3.1.1",
"description": "ReactMD codemod scripts",
"author": "Mikkel Laursen <mlaursen03@gmail.com>",
"bin": {
"rmd-codemod": "./bin/rmd-codemod.js"
},
"files": [
"bin"
],
"scripts": {
"update-docs": "node updateDocs.js",
"build": "tsc --project tsconfig.build.json"
},
"repository": {
"type": "git",
"url": "https://github.com/mlaursen/react-md.git",
"directory": "packages/codemod"
},
"bugs": {
"url": "https://github.com/mlaursen/react-md/issues"
},
"homepage": "https://react-md.dev",
"keywords": [
"react-md",
"material design",
"react",
"codemod",
"jscodeshift",
"transforms"
],
"license": "MIT",
"dependencies": {
"commander": "^8.3.0",
"glob": "^7.2.0",
"inquirer": "^8.2.0",
"jscodeshift": "^0.13.0"
},
"devDependencies": {
"@types/glob": "^7.2.0",
"@types/inquirer": "^8.1.3",
"@types/jscodeshift": "^0.11.3",
"typescript": "^4.5.2"
},
"publishConfig": {
"access": "public"
}
}
Loading

0 comments on commit 41c1fa6

Please sign in to comment.