@instructure/ui-codemods

The ui-codemods package should make it easier to deal with API changes when upgrading Instructure UI libraries.

The codemod scripts can be installed via the following command:

---
type: code
---
npm install @instructure/ui-codemods

The configuration files are located in the instui-config package. This can be installed via the following command:

---
type: code
---
npm install @instructure/instui-config

This codemod helps you update your project by renaming props that have had names changed (e.g., onReady => onOpen).

---
type: code
---
jscodeshift -t node_modules/@instructure/ui-codemods/lib/updatePropNames.ts <path> --config=node_modules/@instructure/instui-config/codemod-configs/v<version number ex. 5 or 6>/propNames.config.json

This codemod helps you update your project by renaming imports that have changed (e.g., instructure-ui => @instructure/<package name>).

---
type: code
---
jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateImports.ts <path> --config=node_modules/@instructure/instui-config/codemod-configs/v<version number ex. 5 or 6>/imports.config.js

This codemod upgrades more complex changes like Button, also outputs any manual changes needed to the console. Run this in a InstUI v7 codebase only. This command has an optional fileName parameter, supplying this will append to the given file the warnings.

---
type: code
---
jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateV7Props.ts <path> -fileName updateV7PropsWarnings.txt

---
type: code
---
jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateV8Breaking.ts <path>

This codemod updates breaking changes after a v8 upgrade. Run this in a project after you have upgraded your dependencies to InstUI v8.

---
type: code
---
jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateV9Breaking.ts <path> --parser=tsx --usePrettier=false

This codemod addresses breaking changes following a v9 upgrade. Notably, it updates EmotionThemeProvider to InstUISettingsProvider. Execute this in your project post-upgrade to InstUI v9. Prettier is turned on by default for output formatting, and you can also use the usePrettier flag. Additionally, the parser flag can specify the parser for jsx and tsx files.

---
type: code
---
jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateV8ReactDOM.ts <path> -fileName updateV8ReactDOM.txt

This codemod updates ReactDOM.render calls with a given wrapper, for example: ReactDOM.render(

• fileName: supplying this will append to the given file the warnings.
• wrapperPath: The import path for the wrapper, default value is '@canvas/react-root'.
• wrapperTag: The tag to wrap render calls in, default is 'Root'.
• isDefaultImport: Is the given tag a default import? Default value is true.