Modifiers System
AST-Based File Manipulation
Modifiers are specialized tools that perform complex file modifications using Abstract Syntax Tree (AST) manipulation.
Why Modifiers?
The Challenge
Modifying existing code reliably:
// Existing file
export default function RootLayout(\{ children \}) {
return <body>\{children\}</body>
}Need to wrap children with QueryProvider How to do this reliably?
Wrong Approach: Regex
// FRAGILE - Uses regex (don't do this!)
content = content.replace(
/\{children\}/,
'<QueryProvider>\{children\}</QueryProvider>'
);Problems:
- Breaks on variations (
{ children },{children }) - Can't handle nested JSX
- Doesn't add imports
- Fragile and unreliable
Right Approach: AST via Modifiers
{
type: 'ENHANCE_FILE',
modifier: 'jsx-children-wrapper',
params: {
wrapperComponent: 'QueryProvider',
importFrom: '@/lib/query-client'
}
}Modifier:
- Parses file into AST (ts-morph)
- Finds children in JSX tree
- Wraps with component
- Adds import
- Serializes back to code
Result: 100% reliable, handles all edge cases.