Vue Template to JavaScript Compiler

This challenge asks you to build a simplified compiler that transforms Vue.js template syntax into equivalent JavaScript code that can be rendered by the Vue runtime. Understanding this process is crucial for comprehending how Vue works under the hood and for advanced Vue development.

Problem Description

Your task is to create a function, compileVueTemplate, that takes a Vue.js template string as input and outputs a JavaScript string that represents the rendering function. This rendering function, when executed within a Vue context, should produce the same DOM structure as the original template.

Key Requirements:

1. Element Parsing: Recognize and parse HTML-like elements (e.g., <div>, <span>, <MyComponent>).
2. Attribute Handling: Parse and store attributes for elements (e.g., id, class, v-bind:data).
3. Text Content: Handle plain text content within elements.
4. Interpolation: Process text content containing Vue's double-curly brace interpolation (e.g., {{ message }}).
5. Directives: Implement basic support for the v-if and v-for directives.
6. Output Format: Generate a JavaScript string that, when evaluated, returns a Vue VNode (Virtual Node) representation of the template. For simplicity, assume a pre-defined h function (like Vue's createElement) is available in the global scope.

Expected Behavior:

The generated JavaScript string should be a function that takes no arguments and returns a VNode. This VNode should accurately reflect the structure, attributes, and content of the input template.

Edge Cases to Consider:

• Empty templates.
• Templates with only text.
• Nested elements.
• Attributes with special characters.
• v-if conditions that are simple strings.
• v-for loops with simple array iteration (e.g., item in items).

Examples

Example 1:

Input: `<div>Hello, {{ name }}!</div>`

// Expected Output (simplified representation of the JS string)
(function() {
  const h = window.h; // Assume h is globally available
  return h('div', { id: 'root' }, [
    'Hello, ',
    h('span', null, this.name), // Assuming 'this.name' is accessible in the context
    '!'
  ]);
})();

Explanation: The template is converted into a call to h (createElement). The div element has a child node which is a concatenation of plain text and an interpolated value. The this.name assumes the context where the rendering function is executed has a property named name.

Example 2:

Input: `<ul v-if="showList"><li v-for="item in items">{{ item.text }}</li></ul>`

// Expected Output (simplified representation of the JS string)
(function() {
  const h = window.h;
  return this.showList ? h('ul', null, [
    this.items.map(item => h('li', null, item.text))
  ]) : h('!', null, null); // Representing an empty fragment for v-if false
})();

Explanation: The v-if directive generates a conditional expression. The v-for directive on the li element is transformed into an array map operation, iterating over this.items and creating an li VNode for each item.

Example 3:

Input: `<p>Just text.</p>`

// Expected Output (simplified representation of the JS string)
(function() {
  const h = window.h;
  return h('p', null, ['Just text.']);
})();

Explanation: A simple paragraph with plain text content.

Constraints

• The input template string will be valid HTML with Vue-specific syntax.
• Attribute values will be strings or simple JavaScript expressions that can be directly embedded (e.g., "my-id", data-value, {{ dynamicValue }}).
• v-if conditions will be simple JavaScript expressions (e.g., isActive, count > 0).
• v-for will only support the item in items syntax.
• You do not need to handle Vue components (e.g., <MyComponent>). Assume all tags are standard HTML elements.
• Focus on the core parsing and transformation logic. Error handling for malformed templates is not required.
• The generated JavaScript should be executable in a browser environment where window.h is defined.

Notes

• This is a simplified compiler. Real-world Vue compilers handle many more directives, component syntax, events, slots, and optimizations.
• You'll likely need to use regular expressions or a dedicated HTML parsing library (though for this challenge, manual parsing with regex might be sufficient and instructive).
• Consider how you will represent the AST (Abstract Syntax Tree) internally before generating the JavaScript.
• The goal is to produce a string that looks like a Vue rendering function, not to actually execute it within a Vue instance.
• Think about how to handle the context (this) for interpolated values and directives. For this exercise, assume all data binding ({{...}} or directive expressions) refers to properties of this.