Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(codemod): Created a new @react-md/codemod package to help with n…
…ew releases
- Loading branch information
Showing
32 changed files
with
1,158 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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" | ||
| } | ||
| } |
Oops, something went wrong.