The ui-codemods should make it easier to deal with API changes when upgrading Instructure UI libraries.
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
All available codemods can also be executed using the instui-cli instui codemod
command. See instui-cli for more detailed documentation.
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
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
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
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.
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 istrue
.