Compile Templates

Implements the TemplateCompiler class and compileTemplate() function used to compile HTML templates into render functions.

Context

Users prefer to describe the UI using HTML instead of building virtual node trees in code.
The compiler transforms those HTML templates into the render() function that creates the virtual DOM that the framework requires to build the user interfaces.

Syntax

The HTML templates can use variable interpolation, event handling, and two special directives: @for and @show.

Variable Interpolation

Variables in the component's state or props can be interpolated in the HTML as follows:

<p>Hello, {{ state.name }}!</p>
<p>You are based in {{ props.city }}</p>

Other variables defined globally inside the component's file can be interpolated as well.
For example, if the component.js file imports a constant daysInAYear, the template can use it like so:

<p>A year has {{ daysInAYear }} days</p>

A function call inside an interpolation expression will always be understood as a call to a method defined inside the component.
So, if a method named getNames() exists in a component:

const Comp = defineComponent({
  getNames() {
    return [ 'Jen', 'Anne', 'Emma' ] 
  }
})

It can be used in the template as follows:

<p>The first name is: {{ getNames()[0] }}</p>

Attributes

Event Handling

For Directive

Show Directive