---
robots: noindex, nofollow
tags: pitch
---

# CodeMod Utility - replace props in JSX objects and primitives - July

### Problem
In their current state, the fluent-ui code mods do not have support for modifying props. Without such a utility, code mod writers will have to manually write prop-updating code in their mods, adding avoidable overhead and complexity that may prevent adoption.
### Appetite

1-2 weeks. This is primarily a proof-of-concept. Once the syntax and procedure of writing and testing utilities is established, the creation of the utility should be straightforward, and that will provide a solid base for iteration and improvement for a future project.

### Solution
Use the [ts-morph](https://ts-morph.com/) library to:
1. Facilitate the creation of a codemod utility that renames props within primitives and objects.
2. Handle an edge case of enums, like the deprecated SpinnerType in the Spinner compnent, where renaming the prop will not suffice, and an additional value conversion may need to happen.
3. Create a utility that is easily adopted into existing codemods
4. If time permits creating utilities that allow for a more complete developer experience: utilities that determine which files should be parsed and which JSX elements should be collected.

Example of a codemod using the prop-renaming utility:

    
import {
  SourceFile
} from "ts-morph";
import { utilities } from "../utilities/utilities";
import {ICodeMod} from '..'

const deprecatedPropName = "onRenderCoin";
const newPropName = "onRenderAvatarCoin";


export function renameRenderCoinProp(file: SourceFile) {
  // Hypothetical utility to return a collection of files
  // that use the prop we want to rename.
  let filesToChange = utilities.getFilesByPropName(file, deprecatedPropName);
  let jsxElems : (JsxOpeningElement | JsxSelfClosingElement)[] = [];
  filesToChange.forEach(file => {
   //findJsxTagInFile is a utility that Jon has a working version of!
   jsxElems.concat(utilities.findJsxTagInFile(file, deprecatedPropName));
  });
  jsxElems.forEach(elem => {
    // Proposed utility: Given the JSX elem, identify and rename the prop.
    utilities.renameProp(elem, deprecatedPropName, newPropName);
  })
}

### Risks (Rabbit holes)
Approaching too many problems at once: the codemod issue raises a number of interesting problems, but many of them are beyond the scope of this project. Examples are handling further utility cases like renaming when users aren't using tsx / jsx. Although attempting these would be great, it’s preferable to have working code on a smaller scope than questionable code that attempts to cast a wider net.

### Out of scope (No-gos)
For now, a finalized user interface is a project for the future. Although this project was meant to be more of a proof of concept, a larger problem to tackle will be creating a well-defined and strongly-guarded system for developers to use to implement their code mods. This is the kind of problem that deserves its own project to solve.