---
# System prepended metadata

title: Codemods V1 Requirements

---

# Codemods V1 Requirements

- [x] Run via npx @fluentui/codemods
- [x] Automatically detect the correct files to run on.
- [x] Automatically get and run all the codemods
- [ ] Improved logging
- [ ] Examples
- [ ] Utility for renaming a prop
- [ ] Utility for repathing an import
- [ ] Utility for renaming a component
- [ ] Codemod for renaming all the deprecated props in office-ui-fabric-react
- [ ] Filter codemods to run based on some criteria

## VNext/Nice to haves

- [ ] Write codemods in the package that they should run against
- [ ] Filter files to run against
- [ ] Run against a JS project
- [ ] Add comments to cases that cannot be fixed.

## Asks (please determine what can fit and when)

### Easy for a customer to know how to apply updates for any npm package

If they yarn update `foo` package, because it is using codemods support, there are console.log messages instructing them what to do to update:

```
> yarn upgrade

8 Fluent UI code updates available for your app!
  * @fluentui/react (5 updates)
  * @fluentui/utilities (3 updates)
  
To apply code updates to your app source code, run `npx @fluentui/updates apply`. 

See aka.ms/fluentupgrade for details.

Note: We recommend you apply changes in a clean git branch so that
you can review and approve or modify the changes applied.
```

This could be accomplished with a `postinstall` script which runs and can detect that the version got updated and console logs an upgrade instruction to run upgrades.)

*Problem: but how would the code detect if they can upgrade?*

Answer: You would need to track the last updated version to compare it with the current installed version. For example, the postinstall script could detect if `package.json` contains a `lastUpgrades` section which lists packages and the last time an upgrade was executed. If none exists, it instructs the user what to do:

```
> yarn install @fluentui/react
> 1 package(s) added.
>
> Note: Fluent UI packages can provide updates to your source code
> to keep it updated. However this requires tracking which updates were applied.
> To initialize this metadata in your `package.json`, run the
> following command:
>
> `npx @fluentui/updates init`
```

This would populate the package.json:

```json
{
  "name": "MyApp",
  "updates": {
    "@fluentui/react": "7.143.2"
  }
}
```

From that point on, `postInstall` would:

1. Enumerate all update-able packages. For each dependency, detect if they are updatable (maybe check for an `updates.config.js` or a `package.json` entry.)

2. For each updatable package, compare last update to current installed version. If its behind it is a candidate for updates.

3. For each candidate, load the config and identify if codemods are available for versions past lastUpdated version.
 
4. Then for each updatablecompare current version to last update version to know if any packages need updates.

5. If updates are pending, console.log what to do. `npx @fluentui/updates apply`.

*Problem: what happens when applying updates?*

Answer:

1. For each updatable package, apply all codemods available pass the last update version.
2. If all are applied successfully, update `package.json` `updates` section with the latest version.

Now when developers update the release, we will no longer see console logs until more codemods are available.

*Problem: what happens when more update-able packages are added? How do we start tracking those?*

Answer:
We might need another console.log.

*Problem: How do we not spam console logs too frequently if they don't call `init`?*

Answer: I don't know

### Be able to configure more specific codemod action
Scenario:
User can pick to update Checkbox to compat/Checkbox only and leave others such as DefaultButton as is