Reactify TSX

Reactify TSX is a VS Code extension that streamlines common React and TypeScript refactors. It automates event handler extraction and lets you convert functions between declarations, expressions, and arrows while preserving bodies, modifiers, and type information as much as possible.

Feature Index

• Extract Arrow Function to Handler - Lift inline JSX arrow functions into named handlers and keep wiring intact.
• Function Transformation - Convert between arrow functions, function expressions, and declarations with guardrails.
• Flip If/Else Branches - Negate the condition and swap if/else bodies while keeping control-flow intact.
• Simplify If/Else - Collapse boolean return/assignment branches into a direct boolean expression.
• Merge Nested If - Merge if nested directly inside another if (no else) into a single guard with &&.
• Replace If/Else with Ternary - Convert simple return/assignment branches to a conditional ?:.
• Simplify Ternary - Collapse cond ? true : false, cond ? false : true, or identical branches.
• Remove Redundant Else - Drop else branches when the guarded path already exits.
• Parallelize Await Selection - Combine sequential await declarations into a single Promise.all for parallel execution.
• Enum To Const - Convert enums into immutable const objects plus union types for safer tree-shaken builds.
• Variable Kind Conversion - Convert var/const to let or var/let to const when safe.
• Scoped Block Movement - Move compound statements within their parent scope without crossing boundaries.
• Toggle JSX Attribute Braces - Toggle string literal attribute values between bare literals and brace expressions.
• Toggle String ⇄ Template Literal - Switch between plain strings and backtick template literals when no expressions are present.
• Split Into Multiple Declarations - Expand multi-declarator statements into one declaration per line.
• Split Declaration and Initialization - Separate a declaration with initializer into a declaration and a following assignment.
• Merge Declaration and Initialization - Combine a standalone declaration and the immediately following assignment into a single initialized declaration.
• Split or Merge String - Split a quoted string at the caret or merge a + chain of adjacent string literals.
• Toggle Arrow Body - Convert between shorthand expression and block bodies for arrow functions.
• Add Parens to Single Arrow Parameter - Wrap single arrow parameter identifiers with parentheses.
• Wrap Function with useCallback - Memoise function initializers by wrapping them in React's useCallback hook.

Commands & Keybindings

All commands are available from the editor context menu, the Quick Fix (Ctrl+.) panel, and the refactor sub-menu when editing JavaScript or TypeScript (including React variants). Commands that operate on selections still require you to highlight the target code before invoking Quick Fix.

Function Transformation Options

When you invoke Transform Function the extension analyses the selection and offers only the transformations that are valid in that context. Depending on the conversion it may ask for an explicit function name and will suggest a placeholder if one cannot be inferred. If you accept the placeholder, the generated code is annotated with // FIXME: rename so you can revisit it quickly.

Warnings & Annotations

• Binding changes - Converting between function and arrow syntax can change how this, arguments, or super behave. The extension displays a confirmation dialog whenever the target function references any of those.
• Type review - If a variable declaration loses an explicit function type during conversion, the generated declaration receives // FIXME: review types and the command surfaces a follow-up warning.

Development

Install dependencies and build artifacts:

npm install
npm run compile

Testing

Compile the tests, run the automated suite, and lint the sources:

npm run compile-tests
npm test
npm run lint

The automated tests cover the transformation planner and verify that extension commands are registered.

Release Notes

• Initial release: arrow-function extraction command and function transformation tooling with safety checks and automated annotations.

Enjoy using Reactify TSX! Feel free to file issues or feature requests to help shape future iterations.