Angular Quick Fix Generator

Angular's quick fixes are invaluable for rapidly addressing common code issues and applying standard refactorings. This challenge asks you to build a simplified quick fix generator that can automatically apply a specific, predefined refactoring to a given Angular component's template. This is a core skill for Angular developers and understanding how quick fixes work is crucial for contributing to the Angular ecosystem.

Problem Description

You are tasked with creating a TypeScript function that acts as a simplified quick fix generator for Angular templates. The function will receive an Angular component's template string and a "fix type" string. Based on the "fix type," the function will apply a specific refactoring to the template and return the modified template string. For this challenge, we will focus on a single, specific refactoring: converting all instances of (click) event bindings to (onClick).

Key Requirements:

• The function must accept two arguments: templateString (string) and fixType (string).
• The fixType will always be "convertClickToOnClick".
• If fixType is "convertClickToOnClick", the function must replace all occurrences of (click) with (onClick) in the templateString.
• The function must return the modified templateString.
• The function should handle cases where (click) does not exist in the template.
• The function should be robust and not introduce unintended changes to the template.

Expected Behavior:

The function should accurately and consistently apply the specified refactoring. It should not modify the template in any way if the fixType is not "convertClickToOnClick".

Edge Cases to Consider:

• Empty template string.
• Template string with no (click) bindings.
• Template string with nested HTML elements containing (click) bindings.
• Template string with attributes that contain the word "click" but are not event bindings (e.g., class="click-me"). These should not be modified.
• Template string with multiple (click) bindings.

Examples

Example 1:

Input: templateString = "<div><button (click)='handleClick()'>Click Me</button></div>", fixType = "convertClickToOnClick"
Output: "<div><button (onClick)='handleClick()'>Click Me</button></div>"
Explanation: The function replaces the single instance of `(click)` with `(onClick)`.

Example 2:

Input: templateString = "<div><button (click)='handleClick()'><button (click)='handleClick2()'></button></div>", fixType = "convertClickToOnClick"
Output: "<div><button (onClick)='handleClick()'><button (onClick)='handleClick2()'></button></div>"
Explanation: The function replaces both instances of `(click)` with `(onClick)`.

Example 3:

Input: templateString = "<div><p class='click-me'>Some text</p></div>", fixType = "convertClickToOnClick"
Output: "<div><p class='click-me'>Some text</p></div>"
Explanation: The function does not modify the template because `(click)` is not an event binding.

Example 4:

Input: templateString = "<div></div>", fixType = "convertClickToOnClick"
Output: "<div></div>"
Explanation: The function does not modify the template because `(click)` is not present.

Constraints

• The templateString will be a valid HTML string representing an Angular component's template.
• The fixType will be a string, and will only ever be "convertClickToOnClick" for this challenge.
• The function must be performant enough to handle templates of reasonable size (up to 10,000 characters).
• The function must be written in TypeScript.

Notes

• Consider using regular expressions to efficiently find and replace the event bindings. Be careful to avoid unintended replacements.
• Focus on accuracy and robustness. The goal is to apply the refactoring correctly without introducing errors.
• Remember that this is a simplified quick fix generator. Real-world quick fixes are significantly more complex and involve parsing the Angular template's Abstract Syntax Tree (AST). This challenge focuses on the core string manipulation aspect.
• Test your solution thoroughly with various inputs, including edge cases.