Vue Component Optimization Pass

Vue's reactivity system is powerful, but sometimes components can inadvertently re-render unnecessarily, leading to performance bottlenecks. This challenge asks you to create a simple optimization pass that analyzes a Vue component's template and identifies potential areas for optimization, specifically focusing on static content that can be hoisted (moved outside the reactive scope) to reduce rendering overhead. This is a simplified version of what Vue's compiler already does, but it's a great exercise in understanding Vue's internals and optimization techniques.

Problem Description

You need to implement a function optimizeComponent that takes a Vue component's template string as input and returns a modified template string where static content has been identified and marked for hoisting. The optimization pass should identify and wrap static text nodes within the template with a special comment tag: . This tag indicates that the content is not reactive and can be safely moved outside the reactive scope during rendering.

Key Requirements:

Static Content Identification: The pass should identify text nodes that do not contain any Vue directives (e.g., v-if, v-for, v-bind), expressions (e.g., {{ message }}, [prop]), or component tags. Simple text is considered static.
Comment Tag Wrapping: Identified static text nodes should be wrapped with the  comment tag.
Template Structure Preservation: The overall structure of the template (HTML tags, attributes, directives) should remain unchanged, except for the added comment tags.
No JavaScript Execution: The optimization pass should not execute any JavaScript code within the template. It should operate purely on the template string.

Expected Behavior:

The function should parse the template string, identify static text nodes, and return a new template string with the static content wrapped in the specified comment tags.

Edge Cases to Consider:

Empty Templates: Handle cases where the template string is empty.
Nested Elements: The pass should correctly identify static content within nested HTML elements.
Whitespace: Whitespace around static text nodes should be preserved.
HTML Entities: HTML entities (e.g., &, <) should be treated as part of the static content.
Comments: Existing HTML comments should be handled correctly and not interfere with the static content identification.

Examples

Example 1:

Input: "<div>Hello, world!</div>"
Output: "<div><!-- static-content -->Hello, world!<!-- static-content --></div>"
Explanation: The entire content "Hello, world!" is static and is wrapped in the comment tag.

Example 2:

Input: "<div>Hello, {{ message }}!</div>"
Output: "<div><!-- static-content -->Hello<!-- static-content -->, {{ message }}!-- static-content -->!<!-- static-content --></div>"
Explanation: "Hello" and "!" are static, while "{{ message }}" is a dynamic expression and remains untouched.

Example 3:

Input: "<div><h1><!-- static-content -->Title<!-- static-content --></h1><p>This is a paragraph.</p></div>"
Output: "<div><h1><!-- static-content -->Title<!-- static-content --></h1><p><!-- static-content -->This is a paragraph.<!-- static-content --></p></div>"
Explanation: Demonstrates static content within nested elements.

Example 4:

Input: "<div>&lt;p&gt;This is a paragraph with an HTML entity.&lt;/p&gt;</div>"
Output: "<div>&lt;p&gt;<!-- static-content -->This is a paragraph with an HTML entity.&lt;/p&gt;<!-- static-content --></div>"
Explanation: HTML entities are considered part of the static content.

Constraints

Template String Length: The input template string will be no longer than 10,000 characters.
Input Format: The input will be a valid HTML template string.
Performance: The optimization pass should complete within 100ms for typical templates. While a full-fledged parser is not required, avoid excessively inefficient string manipulation.
No External Libraries: You are not allowed to use external HTML parsing libraries. You must implement the logic using standard TypeScript string manipulation techniques.

Notes

Consider using regular expressions to identify static text nodes. However, be mindful of the potential for regular expression complexity and performance implications.
A simple approach might involve splitting the template string into an array of text nodes and elements, then iterating through the array to identify static content.
This is a simplified optimization pass. A real-world Vue compiler would use a more sophisticated approach, including abstract syntax trees (ASTs) and more complex analysis. Focus on the core concept of identifying static content.
The goal is to demonstrate an understanding of Vue's template structure and the concept of static content hoisting.