@instructure/ui-codemods

---

category: packages

ui-codemods

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

Installation

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

Updating Deprecated Props

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

Updating Package Imports

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

Updating more complex props to the InstUI v8 syntax

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

Codemod for breaking changes after updating the dependencies to V8

---
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.

Codemod for breaking changes after updating the dependencies to V9

---
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.

Codemod for changing the color palette to the v10 color palette

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

This codemod updates the canvas and canvas-high-contrast color palettes. Execute this in your project post-upgrade to InstUI v10. 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.

Codemod for adding a wrapper to ReactDOM.render()

---
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(

) -> ReactDOM.render(

). Parameters (all optional):

• 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.