@instructure/ui-codemods

---

category: packages

ui-codemods

The ui-codemods 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:

npm install @instructure/ui-codemods

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

npm install @instructure/instui-config

Executing Codemods Using instui-cli

All available codemods can also be executed using the instui-cli instui codemod command. See instui-cli for more detailed documentation.

Updating Deprecated Props

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

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

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.

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

Codemod for breaking changes after updating the dependencies to V8

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 adding a wrapper to ReactDOM.render()

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.