Implementing Static Hoisting in Vue Components

Static hoisting is a Vue optimization technique that identifies and extracts static (non-reactive) content from a component's template, moving it out of the reactive render function. This reduces the amount of work the virtual DOM needs to do during updates, leading to performance improvements, especially in components with large static sections. This challenge asks you to implement a simplified version of static hoisting for a Vue component.

Problem Description

You are tasked with creating a function that analyzes a Vue component's template string and identifies static content. This function should return a new template string where the static content is moved outside of the dynamic content, effectively simulating static hoisting. The dynamic content will be wrapped in a <div> element.

What needs to be achieved:

Analyze a Vue template string.
Identify static text nodes (text that doesn't contain any Vue directives or expressions).
Move the static text nodes to the beginning of the template string.
Wrap the remaining dynamic content (including directives, expressions, and any nested components) in a <div> element.
Return the modified template string.

Key Requirements:

The function must correctly identify and extract static text nodes.
The function must preserve the order of the dynamic content.
The function must handle nested elements correctly.
The function should be robust and handle various template structures.

Expected Behavior:

Given a template string with both static and dynamic content, the function should return a new template string where the static content is prepended and the dynamic content is wrapped in a <div>.

Edge Cases to Consider:

Templates with no static content.
Templates with only static content.
Templates with deeply nested elements.
Templates containing Vue directives (e.g., v-if, v-for, v-bind).
Templates containing expressions (e.g., {{ message }}).
Empty template strings.

Examples

Example 1:

Input: "<h1>Hello</h1><p>{{ message }}</p>"
Output: "<h1>Hello</h1><div><p>{{ message }}</p></div>"
Explanation: "Hello" is static. The rest, including the `{{ message }}` expression, is dynamic and wrapped in a `<div>`.

**Example 2:**

Input: "<p>Static text</p><p>Dynamic text: {{ data }}</p>" Output: "<p>Static text</p><div><p>Dynamic text: {{ data }}</p></div>" Explanation: "Static text" is static. The second paragraph with the expression is dynamic.

Example 3:

Input: "<div><p>Static</p>{{ dynamic }}</div>"
Output: "<div><p>Static</p></div><div>{{ dynamic }}</div>"
Explanation: "Static" is static. The rest is dynamic and wrapped in a `<div>`.

**Example 4:** (Edge Case - No Static Content)

Input: "{{ message }}" Output: "<div>{{ message }}</div>" Explanation: No static content exists, so the entire template is dynamic.

Example 5: (Edge Case - Only Static Content)

Input: "<h1>Static Heading</h1><p>Static Paragraph</p>"
Output: "<h1>Static Heading</h1><p>Static Paragraph</p>"
Explanation: All content is static, so no changes are made.

Constraints

The input template string will be a valid Vue template string (though not necessarily perfectly formatted).
The output template string must be a valid HTML string.
The function should be reasonably efficient; avoid excessive string concatenation. A single string build is preferred.
The function must be implemented in TypeScript.
The function signature should be: (template: string) => string

Notes

You can use regular expressions or string manipulation techniques to identify static content.
Consider using a simple parser to handle nested elements more effectively. A full-fledged Vue parser is not required, but a basic understanding of HTML structure will be helpful.
Focus on correctly identifying static text nodes and wrapping the dynamic content. Styling or complex template transformations are not required.
The goal is to simulate the effect of static hoisting, not to implement the full Vue static hoisting mechanism. This is a simplified exercise.
Remember to handle edge cases gracefully.